flex-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From aha...@apache.org
Subject [35/51] [partial] this folder was called TourDeFlex_content.com and was hidden by .gitignore
Date Fri, 01 Aug 2014 05:43:56 GMT
http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/FlowLayout1.as.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/FlowLayout1.as.html b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/FlowLayout1.as.html
new file mode 100644
index 0000000..98c2880
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/FlowLayout1.as.html
@@ -0,0 +1,203 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<!-- saved from url=(0014)about:internet -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>FlowLayout1.as</title>
+<link rel="stylesheet" type="text/css" href="../SourceStyles.css"/>
+</head>
+
+<body><pre><span class="ActionScriptpackage">package</span>
+<span class="ActionScriptBracket/Brace">{</span>
+<span class="ActionScriptReserved">import</span> <span class="ActionScriptDefault_Text">mx</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">core</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">ILayoutElement</span>;
+
+<span class="ActionScriptReserved">import</span> <span class="ActionScriptDefault_Text">spark</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">components</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">supportClasses</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">GroupBase</span>;
+<span class="ActionScriptReserved">import</span> <span class="ActionScriptDefault_Text">spark</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">layouts</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">supportClasses</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">LayoutBase</span>;
+
+<span class="ActionScriptReserved">public</span> <span class="ActionScriptclass">class</span> <span class="ActionScriptDefault_Text">FlowLayout1</span> <span class="ActionScriptReserved">extends</span> <span class="ActionScriptDefault_Text">LayoutBase</span>
+<span class="ActionScriptBracket/Brace">{</span>
+    
+    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    <span class="ActionScriptComment">//
+</span>    <span class="ActionScriptComment">//  Class properties
+</span>    <span class="ActionScriptComment">//
+</span>    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    
+    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    <span class="ActionScriptComment">//  horizontalGap
+</span>    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>
+    <span class="ActionScriptReserved">private</span> <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">_horizontalGap</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> 10;
+
+    <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptReserved">set</span> <span class="ActionScriptDefault_Text">horizontalGap</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">value</span>:<span class="ActionScriptDefault_Text">Number</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptReserved">void</span>
+    <span class="ActionScriptBracket/Brace">{</span>
+        <span class="ActionScriptDefault_Text">_horizontalGap</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">value</span>;
+        
+        <span class="ActionScriptComment">// We must invalidate the layout
+</span>        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">layoutTarget</span>:<span class="ActionScriptDefault_Text">GroupBase</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">target</span>;
+        <span class="ActionScriptReserved">if</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptBracket/Brace">)</span>
+            <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">invalidateDisplayList</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+    <span class="ActionScriptBracket/Brace">}</span>
+    
+    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    <span class="ActionScriptComment">//  verticalAlign
+</span>    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>
+    <span class="ActionScriptReserved">private</span> <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">_verticalAlign</span>:<span class="ActionScriptDefault_Text">String</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptString">"bottom"</span>;
+    
+    <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptReserved">set</span> <span class="ActionScriptDefault_Text">verticalAlign</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">value</span>:<span class="ActionScriptDefault_Text">String</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptReserved">void</span>
+    <span class="ActionScriptBracket/Brace">{</span>
+        <span class="ActionScriptDefault_Text">_verticalAlign</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">value</span>;
+        
+        <span class="ActionScriptComment">// We must invalidate the layout
+</span>        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">layoutTarget</span>:<span class="ActionScriptDefault_Text">GroupBase</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">target</span>;
+        <span class="ActionScriptReserved">if</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptBracket/Brace">)</span>
+            <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">invalidateDisplayList</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+    <span class="ActionScriptBracket/Brace">}</span>
+    
+    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    <span class="ActionScriptComment">//  horizontalAlign
+</span>    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    
+    <span class="ActionScriptReserved">private</span> <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">_horizontalAlign</span>:<span class="ActionScriptDefault_Text">String</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptString">"left"</span>; <span class="ActionScriptComment">// center, right
+</span>    
+    <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptReserved">set</span> <span class="ActionScriptDefault_Text">horizontalAlign</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">value</span>:<span class="ActionScriptDefault_Text">String</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptReserved">void</span>
+    <span class="ActionScriptBracket/Brace">{</span>
+        <span class="ActionScriptDefault_Text">_horizontalAlign</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">value</span>;
+        
+        <span class="ActionScriptComment">// We must invalidate the layout
+</span>        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">layoutTarget</span>:<span class="ActionScriptDefault_Text">GroupBase</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">target</span>;
+        <span class="ActionScriptReserved">if</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptBracket/Brace">)</span>
+            <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">invalidateDisplayList</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+    <span class="ActionScriptBracket/Brace">}</span>
+    
+    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    <span class="ActionScriptComment">//
+</span>    <span class="ActionScriptComment">//  Class methods
+</span>    <span class="ActionScriptComment">//
+</span>    <span class="ActionScriptComment">//---------------------------------------------------------------
+</span>    
+    <span class="ActionScriptReserved">override</span> <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptDefault_Text">updateDisplayList</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">containerWidth</span>:<span class="ActionScriptDefault_Text">Number</span><span class="ActionScriptOperator">,</span>
+                                               <span class="ActionScriptDefault_Text">containerHeight</span>:<span class="ActionScriptDefault_Text">Number</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptReserved">void</span>
+    <span class="ActionScriptBracket/Brace">{</span>
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">element</span>:<span class="ActionScriptDefault_Text">ILayoutElement</span>;
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">layoutTarget</span>:<span class="ActionScriptDefault_Text">GroupBase</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">target</span>;
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">count</span>:<span class="ActionScriptDefault_Text">int</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">numElements</span>;
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">hGap</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">_horizontalGap</span>;
+
+        <span class="ActionScriptComment">// The position for the current element
+</span>        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">x</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> 0;
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">y</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> 0;
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">elementWidth</span>:<span class="ActionScriptDefault_Text">Number</span>;
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">elementHeight</span>:<span class="ActionScriptDefault_Text">Number</span>;
+
+        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">vAlign</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> 0;
+        <span class="ActionScriptReserved">switch</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">_verticalAlign</span><span class="ActionScriptBracket/Brace">)</span>
+        <span class="ActionScriptBracket/Brace">{</span>
+            <span class="ActionScriptReserved">case</span> <span class="ActionScriptString">"middle"</span> : <span class="ActionScriptDefault_Text">vAlign</span> <span class="ActionScriptOperator">=</span> 0.5; <span class="ActionScriptReserved">break</span>;
+            <span class="ActionScriptReserved">case</span> <span class="ActionScriptString">"bottom"</span> : <span class="ActionScriptDefault_Text">vAlign</span> <span class="ActionScriptOperator">=</span> 1; <span class="ActionScriptReserved">break</span>;
+        <span class="ActionScriptBracket/Brace">}</span>
+
+        <span class="ActionScriptComment">// Keep track of per-row height, maximum row width
+</span>        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">maxRowWidth</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> 0;
+
+        <span class="ActionScriptComment">// loop through the elements
+</span>        <span class="ActionScriptComment">// while we can start a new row
+</span>        <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">rowStart</span>:<span class="ActionScriptDefault_Text">int</span> <span class="ActionScriptOperator">=</span> 0;
+        <span class="ActionScriptReserved">while</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowStart</span> <span class="ActionScriptOperator">&lt;</span> <span class="ActionScriptDefault_Text">count</span><span class="ActionScriptBracket/Brace">)</span>
+        <span class="ActionScriptBracket/Brace">{</span>
+            <span class="ActionScriptComment">// The row always contains the start element
+</span>            <span class="ActionScriptDefault_Text">element</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">useVirtualLayout</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getVirtualElementAt</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowStart</span><span class="ActionScriptBracket/Brace">)</span> :
+                                         <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getElementAt</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowStart</span><span class="ActionScriptBracket/Brace">)</span>;
+                                         
+            <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">rowWidth</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getPreferredBoundsWidth</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+            <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">rowHeight</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span>  <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getPreferredBoundsHeight</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+            
+            <span class="ActionScriptComment">// Find the end of the current row
+</span>            <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">rowEnd</span>:<span class="ActionScriptDefault_Text">int</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">rowStart</span>;
+            <span class="ActionScriptReserved">while</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowEnd</span> <span class="ActionScriptOperator">+</span> 1 <span class="ActionScriptOperator">&lt;</span> <span class="ActionScriptDefault_Text">count</span><span class="ActionScriptBracket/Brace">)</span>
+            <span class="ActionScriptBracket/Brace">{</span>
+                <span class="ActionScriptDefault_Text">element</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">useVirtualLayout</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getVirtualElementAt</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowEnd</span> <span class="ActionScriptOperator">+</span> 1<span class="ActionScriptBracket/Brace">)</span> :
+                                             <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getElementAt</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowEnd</span> <span class="ActionScriptOperator">+</span> 1<span class="ActionScriptBracket/Brace">)</span>;
+                
+                <span class="ActionScriptComment">// Since we haven't resized the element just yet, get its preferred size
+</span>                <span class="ActionScriptDefault_Text">elementWidth</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getPreferredBoundsWidth</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+                <span class="ActionScriptDefault_Text">elementHeight</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getPreferredBoundsHeight</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+
+                <span class="ActionScriptComment">// Can we add one more element to this row?
+</span>                <span class="ActionScriptReserved">if</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowWidth</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">hGap</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">elementWidth</span> <span class="ActionScriptOperator">&gt;</span> <span class="ActionScriptDefault_Text">containerWidth</span><span class="ActionScriptBracket/Brace">)</span>
+                    <span class="ActionScriptReserved">break</span>;
+
+                <span class="ActionScriptDefault_Text">rowWidth</span> <span class="ActionScriptOperator">+=</span> <span class="ActionScriptDefault_Text">hGap</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">elementWidth</span>;
+                <span class="ActionScriptDefault_Text">rowHeight</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">Math</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">max</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowHeight</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptDefault_Text">elementHeight</span><span class="ActionScriptBracket/Brace">)</span>;
+                <span class="ActionScriptDefault_Text">rowEnd</span><span class="ActionScriptOperator">++</span>;
+            <span class="ActionScriptBracket/Brace">}</span>
+            
+            <span class="ActionScriptDefault_Text">x</span> <span class="ActionScriptOperator">=</span> 0;
+            <span class="ActionScriptReserved">switch</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">_horizontalAlign</span><span class="ActionScriptBracket/Brace">)</span>
+            <span class="ActionScriptBracket/Brace">{</span>
+                <span class="ActionScriptReserved">case</span> <span class="ActionScriptString">"center"</span> : <span class="ActionScriptDefault_Text">x</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">Math</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">round</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">containerWidth</span> <span class="ActionScriptOperator">-</span> <span class="ActionScriptDefault_Text">rowWidth</span><span class="ActionScriptBracket/Brace">)</span> <span class="ActionScriptOperator">/</span> 2; <span class="ActionScriptReserved">break</span>;
+                <span class="ActionScriptReserved">case</span> <span class="ActionScriptString">"right"</span> : <span class="ActionScriptDefault_Text">x</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">containerWidth</span> <span class="ActionScriptOperator">-</span> <span class="ActionScriptDefault_Text">rowWidth</span>;
+            <span class="ActionScriptBracket/Brace">}</span>
+            
+            <span class="ActionScriptComment">// Keep track of the maximum row width so that we can
+</span>            <span class="ActionScriptComment">// set the correct contentSize
+</span>            <span class="ActionScriptDefault_Text">maxRowWidth</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">Math</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">max</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">maxRowWidth</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptDefault_Text">x</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">rowWidth</span><span class="ActionScriptBracket/Brace">)</span>;
+
+            <span class="ActionScriptComment">// Layout all the elements within the row
+</span>            <span class="ActionScriptReserved">for</span> <span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">i</span>:<span class="ActionScriptDefault_Text">int</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">rowStart</span>; <span class="ActionScriptDefault_Text">i</span> <span class="ActionScriptOperator">&lt;=</span> <span class="ActionScriptDefault_Text">rowEnd</span>; <span class="ActionScriptDefault_Text">i</span><span class="ActionScriptOperator">++</span><span class="ActionScriptBracket/Brace">)</span> 
+            <span class="ActionScriptBracket/Brace">{</span>
+                <span class="ActionScriptDefault_Text">element</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">useVirtualLayout</span> <span class="ActionScriptOperator">?</span> <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getVirtualElementAt</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">i</span><span class="ActionScriptBracket/Brace">)</span> : 
+                                             <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getElementAt</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">i</span><span class="ActionScriptBracket/Brace">)</span>;
+
+                <span class="ActionScriptComment">// Resize the element to its preferred size by passing
+</span>                <span class="ActionScriptComment">// NaN for the width and height constraints
+</span>                <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">setLayoutBoundsSize</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">NaN</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptDefault_Text">NaN</span><span class="ActionScriptBracket/Brace">)</span>;
+
+                <span class="ActionScriptComment">// Find out the element's dimensions sizes.
+</span>                <span class="ActionScriptComment">// We do this after the element has been already resized
+</span>                <span class="ActionScriptComment">// to its preferred size.
+</span>                <span class="ActionScriptDefault_Text">elementWidth</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getLayoutBoundsWidth</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+                <span class="ActionScriptDefault_Text">elementHeight</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">getLayoutBoundsHeight</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>;
+
+                <span class="ActionScriptComment">// Calculate the position within the row
+</span>                <span class="ActionScriptvar">var</span> <span class="ActionScriptDefault_Text">elementY</span>:<span class="ActionScriptDefault_Text">Number</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">Math</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">round</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">rowHeight</span> <span class="ActionScriptOperator">-</span> <span class="ActionScriptDefault_Text">elementHeight</span><span class="ActionScriptBracket/Brace">)</span> <span class="ActionScriptOperator">*</span> <span class="ActionScriptDefault_Text">vAlign</span><span class="ActionScriptBracket/Brace">)</span>;
+
+                <span class="ActionScriptComment">// Position the element
+</span>                <span class="ActionScriptDefault_Text">element</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">setLayoutBoundsPosition</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">x</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptDefault_Text">y</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">elementY</span><span class="ActionScriptBracket/Brace">)</span>;
+
+                <span class="ActionScriptDefault_Text">x</span> <span class="ActionScriptOperator">+=</span> <span class="ActionScriptDefault_Text">hGap</span> <span class="ActionScriptOperator">+</span> <span class="ActionScriptDefault_Text">elementWidth</span>;
+            <span class="ActionScriptBracket/Brace">}</span>
+
+            <span class="ActionScriptComment">// Next row will start with the first element after the current row's end
+</span>            <span class="ActionScriptDefault_Text">rowStart</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptDefault_Text">rowEnd</span> <span class="ActionScriptOperator">+</span> 1;
+
+            <span class="ActionScriptComment">// Update the position to the beginning of the row
+</span>            <span class="ActionScriptDefault_Text">x</span> <span class="ActionScriptOperator">=</span> 0;
+            <span class="ActionScriptDefault_Text">y</span> <span class="ActionScriptOperator">+=</span> <span class="ActionScriptDefault_Text">rowHeight</span>;
+        <span class="ActionScriptBracket/Brace">}</span>
+
+        <span class="ActionScriptComment">// Set the content size which determines the scrolling limits
+</span>        <span class="ActionScriptComment">// and is used by the Scroller to calculate whether to show up
+</span>        <span class="ActionScriptComment">// the scrollbars when the the scroll policy is set to "auto"
+</span>        <span class="ActionScriptDefault_Text">layoutTarget</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">setContentSize</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptDefault_Text">maxRowWidth</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptDefault_Text">y</span><span class="ActionScriptBracket/Brace">)</span>;
+    <span class="ActionScriptBracket/Brace">}</span>
+<span class="ActionScriptBracket/Brace">}</span>
+<span class="ActionScriptBracket/Brace">}</span></pre></body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/readme.txt
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/readme.txt b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/readme.txt
new file mode 100644
index 0000000..d4c9f08
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/readme.txt
@@ -0,0 +1,4 @@
+This layout sample was written by Evtim Georgiev. More information regarding the layout can be found at these URLs:
+
+http://evtimmy.com/2009/06/flowlayout-part-2-gap-verticalalign-and-scrolling/
+http://www.adobe.com/devnet/flex/articles/spark_layouts.html
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/sample.mxml.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/sample.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/sample.mxml.html
new file mode 100644
index 0000000..1d45439
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/sample.mxml.html
@@ -0,0 +1,92 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<!-- saved from url=(0014)about:internet -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>sample.mxml</title>
+<link rel="stylesheet" type="text/css" href="../SourceStyles.css"/>
+</head>
+
+<body><pre><span class="MXMLProcessing_Instruction">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
+<span class="MXMLComponent_Tag">&lt;s:Application</span><span class="MXMLDefault_Text">  xmlns:fx="</span><span class="MXMLString">http://ns.adobe.com/mxml/2009</span><span class="MXMLDefault_Text">"
+                xmlns:s="</span><span class="MXMLString">library://ns.adobe.com/flex/spark</span><span class="MXMLDefault_Text">"
+                xmlns:mx="</span><span class="MXMLString">library://ns.adobe.com/flex/halo</span><span class="MXMLDefault_Text">"
+                xmlns:my="</span><span class="MXMLString">*</span><span class="MXMLDefault_Text">" viewSourceURL="</span><span class="MXMLString">srcview/index.html</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+    
+    <span class="MXMLComponent_Tag">&lt;s:Panel</span><span class="MXMLDefault_Text"> width="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" title="</span><span class="MXMLString">Custom Layout - Flow Layout</span><span class="MXMLDefault_Text">" skinClass="</span><span class="MXMLString">skins.TDFPanelSkin</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:layout&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:VerticalLayout</span><span class="MXMLDefault_Text"> horizontalAlign="</span><span class="MXMLString">center</span><span class="MXMLDefault_Text">"
+                              paddingTop="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" gap="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:layout&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> The drop-down to select vertical alignment </span><span class="MXMLComment">--&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Vertical align</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:DropDownList</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">vAlign</span><span class="MXMLDefault_Text">" requireSelection="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">" color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:ArrayCollection&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;fx:String&gt;</span><span class="MXMLDefault_Text">bottom</span><span class="MXMLComponent_Tag">&lt;/fx:String&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;fx:String&gt;</span><span class="MXMLDefault_Text">middle</span><span class="MXMLComponent_Tag">&lt;/fx:String&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;fx:String&gt;</span><span class="MXMLDefault_Text">top</span><span class="MXMLComponent_Tag">&lt;/fx:String&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:ArrayCollection&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:DropDownList&gt;</span>                         
+        <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> The drop-down to select vertical alignment </span><span class="MXMLComment">--&gt;</span>                         
+        <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Horizontal align</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:DropDownList</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">hAlign</span><span class="MXMLDefault_Text">" requireSelection="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:ArrayCollection&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;fx:String&gt;</span><span class="MXMLDefault_Text">left</span><span class="MXMLComponent_Tag">&lt;/fx:String&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;fx:String&gt;</span><span class="MXMLDefault_Text">center</span><span class="MXMLComponent_Tag">&lt;/fx:String&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;fx:String&gt;</span><span class="MXMLDefault_Text">right</span><span class="MXMLComponent_Tag">&lt;/fx:String&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:ArrayCollection&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:DropDownList&gt;</span>                         
+        <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> The slider to control the list width </span><span class="MXMLComment">--&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">bottom</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Container width</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:HSlider</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">widthSlider</span><span class="MXMLDefault_Text">" minimum="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">400</span><span class="MXMLDefault_Text">"
+                       value="</span><span class="MXMLString">200</span><span class="MXMLDefault_Text">" liveDragging="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> The slider to control the horizontal gap </span><span class="MXMLComment">--&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">bottom</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Horizontal gap</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:HSlider</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">hGapSlider</span><span class="MXMLDefault_Text">" minimum="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" maximum="</span><span class="MXMLString">50</span><span class="MXMLDefault_Text">"
+                       value="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" liveDragging="</span><span class="MXMLString">true</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:HGroup&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> A Spark List </span><span class="MXMLComment">--&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:List</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">list1</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">widthSlider</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">112</span><span class="MXMLDefault_Text">"
+                selectedIndex="</span><span class="MXMLString">7</span><span class="MXMLDefault_Text">"
+                dataProvider="</span><span class="MXMLString">{</span><span class="ActionScriptReserved">new</span> <span class="ActionScriptDefault_Text">ArrayCollection</span><span class="ActionScriptBracket/Brace">(</span>
+                <span class="ActionScriptString">'The quick fox jumped over the lazy sleepy\n\dog'</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">split</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptString">' '</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptBracket/Brace">)</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Configure the layout to be the FlowLayout </span><span class="MXMLComment">--&gt;</span>    
+            <span class="MXMLComponent_Tag">&lt;s:layout&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;my:FlowLayout1</span><span class="MXMLDefault_Text"> horizontalAlign="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">hAlign</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selectedItem</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">"
+                                verticalAlign="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">vAlign</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">selectedItem</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">"
+                                horizontalGap="</span><span class="MXMLString">{</span><span class="ActionScriptDefault_Text">hGapSlider</span><span class="ActionScriptOperator">.</span><span class="ActionScriptDefault_Text">value</span><span class="MXMLString">}</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:layout&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:List&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Panel&gt;</span>
+
+<span class="MXMLComponent_Tag">&lt;/s:Application&gt;</span></pre></body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/skins/TDFPanelSkin.mxml.html
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/skins/TDFPanelSkin.mxml.html b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/skins/TDFPanelSkin.mxml.html
new file mode 100644
index 0000000..3c4d872
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/source/skins/TDFPanelSkin.mxml.html
@@ -0,0 +1,178 @@
+<!--
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+-->
+<!-- saved from url=(0014)about:internet -->
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
+<title>TDFPanelSkin.mxml</title>
+<link rel="stylesheet" type="text/css" href="../../SourceStyles.css"/>
+</head>
+
+<body><pre><span class="MXMLProcessing_Instruction">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span>
+
+<span class="MXMLASDoc">&lt;!---</span><span class="MXMLASDoc"> Custom Spark Panel Skin created for Tour de Flex.  
+
+@langversion 3.0
+@playerversion Flash 10
+@playerversion AIR 1.5
+@productversion Flex 4
+</span><span class="MXMLASDoc">--&gt;</span>
+<span class="MXMLComponent_Tag">&lt;s:SparkSkin</span><span class="MXMLDefault_Text"> xmlns:fx="</span><span class="MXMLString">http://ns.adobe.com/mxml/2009</span><span class="MXMLDefault_Text">" xmlns:s="</span><span class="MXMLString">library://ns.adobe.com/flex/spark</span><span class="MXMLDefault_Text">" alpha.disabled="</span><span class="MXMLString">0.5</span><span class="MXMLDefault_Text">"
+             blendMode.disabled="</span><span class="MXMLString">layer</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+    
+    <span class="MXMLSpecial_Tag">&lt;fx:Metadata&gt;</span>
+        &lt;![CDATA[ 
+        <span class="ActionScriptASDoc">/** 
+        * @copy spark.skins.spark.ApplicationSkin#hostComponent
+        */</span>
+        <span class="ActionScriptBracket/Brace">[</span><span class="ActionScriptMetadata">HostComponent</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptString">"spark.components.Panel"</span><span class="ActionScriptBracket/Brace">)</span><span class="ActionScriptBracket/Brace">]</span>
+        <span class="ActionScriptBracket/Brace">]</span><span class="ActionScriptBracket/Brace">]</span><span class="ActionScriptOperator">&gt;</span>
+    <span class="MXMLSpecial_Tag">&lt;/fx:Metadata&gt;</span> 
+    
+    <span class="MXMLSpecial_Tag">&lt;fx:Script&gt;</span>
+        <span class="ActionScriptComment">/* Define the skin elements that should not be colorized. 
+        For panel, border and title backround are skinned, but the content area and title text are not. */</span>
+        <span class="ActionScriptReserved">static</span> <span class="ActionScriptReserved">private</span> <span class="ActionScriptReserved">const</span> <span class="ActionScriptDefault_Text">exclusions</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptOperator">=</span> <span class="ActionScriptBracket/Brace">[</span><span class="ActionScriptString">"background"</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptString">"titleDisplay"</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptString">"contentGroup"</span><span class="ActionScriptOperator">,</span> <span class="ActionScriptString">"bgFill"</span><span class="ActionScriptBracket/Brace">]</span>;
+        
+        <span class="ActionScriptASDoc">/** 
+         * @copy spark.skins.SparkSkin#colorizeExclusions
+         */</span>     
+        <span class="ActionScriptReserved">override</span> <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptReserved">get</span> <span class="ActionScriptDefault_Text">colorizeExclusions</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptBracket/Brace">{</span><span class="ActionScriptReserved">return</span> <span class="ActionScriptDefault_Text">exclusions</span>;<span class="ActionScriptBracket/Brace">}</span>
+        
+        <span class="ActionScriptComment">/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */</span>
+        <span class="ActionScriptReserved">static</span> <span class="ActionScriptReserved">private</span> <span class="ActionScriptReserved">const</span> <span class="ActionScriptDefault_Text">contentFill</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptOperator">=</span> [];
+        
+        <span class="ActionScriptASDoc">/**
+         * @inheritDoc
+         */</span>
+        <span class="ActionScriptReserved">override</span> <span class="ActionScriptReserved">public</span> <span class="ActionScriptfunction">function</span> <span class="ActionScriptReserved">get</span> <span class="ActionScriptDefault_Text">contentItems</span><span class="ActionScriptBracket/Brace">(</span><span class="ActionScriptBracket/Brace">)</span>:<span class="ActionScriptDefault_Text">Array</span> <span class="ActionScriptBracket/Brace">{</span><span class="ActionScriptReserved">return</span> <span class="ActionScriptDefault_Text">contentFill</span><span class="ActionScriptBracket/Brace">}</span>;
+    <span class="MXMLSpecial_Tag">&lt;/fx:Script&gt;</span>
+    
+    <span class="MXMLComponent_Tag">&lt;s:states&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">normal</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">disabled</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">normalWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">disabledWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:states&gt;</span>
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> drop shadow </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:RectangularDropShadow</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">shadow</span><span class="MXMLDefault_Text">" blurX="</span><span class="MXMLString">20</span><span class="MXMLDefault_Text">" blurY="</span><span class="MXMLString">20</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.32</span><span class="MXMLDefault_Text">" distance="</span><span class="MXMLString">11</span><span class="MXMLDefault_Text">" 
+                             angle="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">" color="</span><span class="MXMLString">#000000</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/&gt;</span>
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 1: border </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:stroke&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:SolidColorStroke</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" alpha="</span><span class="MXMLString">0.50</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:stroke&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+    
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 2: background fill </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> This layer was modified for Tour de Flex samples to have a gradient border at the bottom. </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">15</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:LinearGradient</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xE2E2E2</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:LinearGradient&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+    
+    <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 3: contents </span><span class="MXMLComment">--&gt;</span>
+    <span class="MXMLASDoc">&lt;!---</span><span class="MXMLASDoc"> contains the vertical stack of titlebar content and controlbar </span><span class="MXMLASDoc">--&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:layout&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:VerticalLayout</span><span class="MXMLDefault_Text"> gap="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" horizontalAlign="</span><span class="MXMLString">justify</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:layout&gt;</span>
+        
+        <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">topGroup</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 0: title bar fill </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Note: We have custom skinned the title bar to be solid black for Tour de Flex </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">tbFill</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 1: title bar highlight </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">tbHilite</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:stroke&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:LinearGradientStroke</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">" weight="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xEAEAEA</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xD9D9D9</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;/s:LinearGradientStroke&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:stroke&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 2: title bar divider </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">tbDiv</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xC0C0C0</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 3: text </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLASDoc">&lt;!---</span><span class="MXMLASDoc"> Defines the appearance of the PanelSkin class's title bar. </span><span class="MXMLASDoc">--&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Note: The title text display has been slightly modified for Tour de Flex. </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Label</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">titleDisplay</span><span class="MXMLDefault_Text">" lineBreak="</span><span class="MXMLString">explicit</span><span class="MXMLDefault_Text">"
+                          left="</span><span class="MXMLString">9</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">30</span><span class="MXMLDefault_Text">"
+                          verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">" fontWeight="</span><span class="MXMLString">bold</span><span class="MXMLDefault_Text">" color="</span><span class="MXMLString">#E2E2E2</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Label&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+        
+        <span class="MXMLComment">&lt;!--</span><span class="MXMLComment">
+        Note: setting the minimum size to 0 here so that changes to the host component's
+        size will not be thwarted by this skin part's minimum size.   This is a compromise,
+        more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
+        </span><span class="MXMLComment">--&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">contentGroup</span><span class="MXMLDefault_Text">" width="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">100%</span><span class="MXMLDefault_Text">" minWidth="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+        
+        <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">bottomGroup</span><span class="MXMLDefault_Text">" minWidth="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"
+                 includeIn="</span><span class="MXMLString">normalWithControlBar, disabledWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 0: control bar background </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> Note: We are skinning this to be the gradient in case we do specify control
+            bar content, but it will only display if there's a controlBarContent
+            property specified.</span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">15</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:LinearGradient</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xE2E2E2</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                        <span class="MXMLComponent_Tag">&lt;s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;/s:LinearGradient&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 1: control bar divider line </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Rect</span><span class="MXMLDefault_Text"> left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" height="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:fill&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xCDCDCD</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:fill&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Rect&gt;</span>
+            
+            <span class="MXMLComment">&lt;!--</span><span class="MXMLComment"> layer 2: control bar </span><span class="MXMLComment">--&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">controlBarGroup</span><span class="MXMLDefault_Text">" left="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" right="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" top="</span><span class="MXMLString">1</span><span class="MXMLDefault_Text">" bottom="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minWidth="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">" minHeight="</span><span class="MXMLString">0</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;s:layout&gt;</span>
+                    <span class="MXMLComponent_Tag">&lt;s:HorizontalLayout</span><span class="MXMLDefault_Text"> paddingLeft="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" paddingRight="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" paddingTop="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" paddingBottom="</span><span class="MXMLString">10</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/&gt;</span>
+                <span class="MXMLComponent_Tag">&lt;/s:layout&gt;</span>
+            <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+        <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+    <span class="MXMLComponent_Tag">&lt;/s:Group&gt;</span>
+<span class="MXMLComponent_Tag">&lt;/s:SparkSkin&gt;</span></pre></body>
+</html>

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/FlowLayout1.as
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/FlowLayout1.as b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/FlowLayout1.as
new file mode 100644
index 0000000..7645cf2
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/FlowLayout1.as
@@ -0,0 +1,195 @@
+////////////////////////////////////////////////////////////////////////////////
+//
+//  Licensed to the Apache Software Foundation (ASF) under one or more
+//  contributor license agreements.  See the NOTICE file distributed with
+//  this work for additional information regarding copyright ownership.
+//  The ASF licenses this file to You under the Apache License, Version 2.0
+//  (the "License"); you may not use this file except in compliance with
+//  the License.  You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+//  Unless required by applicable law or agreed to in writing, software
+//  distributed under the License is distributed on an "AS IS" BASIS,
+//  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//  See the License for the specific language governing permissions and
+//  limitations under the License.
+//
+////////////////////////////////////////////////////////////////////////////////
+package
+{
+import mx.core.ILayoutElement;
+
+import spark.components.supportClasses.GroupBase;
+import spark.layouts.supportClasses.LayoutBase;
+
+public class FlowLayout1 extends LayoutBase
+{
+    
+    //---------------------------------------------------------------
+    //
+    //  Class properties
+    //
+    //---------------------------------------------------------------
+    
+    //---------------------------------------------------------------
+    //  horizontalGap
+    //---------------------------------------------------------------
+
+    private var _horizontalGap:Number = 10;
+
+    public function set horizontalGap(value:Number):void
+    {
+        _horizontalGap = value;
+        
+        // We must invalidate the layout
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+            layoutTarget.invalidateDisplayList();
+    }
+    
+    //---------------------------------------------------------------
+    //  verticalAlign
+    //---------------------------------------------------------------
+
+    private var _verticalAlign:String = "bottom";
+    
+    public function set verticalAlign(value:String):void
+    {
+        _verticalAlign = value;
+        
+        // We must invalidate the layout
+        var layoutTarget:GroupBase = target;
+        if (layoutTarget)
+            layoutTarget.invalidateDisplayList();
+    }
+    
+	//---------------------------------------------------------------
+	//  horizontalAlign
+	//---------------------------------------------------------------
+	
+	private var _horizontalAlign:String = "left"; // center, right
+	
+	public function set horizontalAlign(value:String):void
+	{
+		_horizontalAlign = value;
+		
+		// We must invalidate the layout
+		var layoutTarget:GroupBase = target;
+		if (layoutTarget)
+			layoutTarget.invalidateDisplayList();
+	}
+	
+    //---------------------------------------------------------------
+    //
+    //  Class methods
+    //
+    //---------------------------------------------------------------
+    
+    override public function updateDisplayList(containerWidth:Number,
+                                               containerHeight:Number):void
+    {
+        var element:ILayoutElement;
+        var layoutTarget:GroupBase = target;
+        var count:int = layoutTarget.numElements;
+        var hGap:Number = _horizontalGap;
+
+        // The position for the current element
+        var x:Number = 0;
+        var y:Number = 0;
+        var elementWidth:Number;
+        var elementHeight:Number;
+
+        var vAlign:Number = 0;
+        switch (_verticalAlign)
+        {
+            case "middle" : vAlign = 0.5; break;
+            case "bottom" : vAlign = 1; break;
+        }
+
+        // Keep track of per-row height, maximum row width
+        var maxRowWidth:Number = 0;
+
+        // loop through the elements
+        // while we can start a new row
+        var rowStart:int = 0;
+        while (rowStart < count)
+        {
+            // The row always contains the start element
+            element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowStart) :
+										 layoutTarget.getElementAt(rowStart);
+									     
+            var rowWidth:Number = element.getPreferredBoundsWidth();
+            var rowHeight:Number =  element.getPreferredBoundsHeight();
+            
+            // Find the end of the current row
+            var rowEnd:int = rowStart;
+            while (rowEnd + 1 < count)
+            {
+                element = useVirtualLayout ? layoutTarget.getVirtualElementAt(rowEnd + 1) :
+										     layoutTarget.getElementAt(rowEnd + 1);
+                
+                // Since we haven't resized the element just yet, get its preferred size
+                elementWidth = element.getPreferredBoundsWidth();
+                elementHeight = element.getPreferredBoundsHeight();
+
+                // Can we add one more element to this row?
+                if (rowWidth + hGap + elementWidth > containerWidth)
+                    break;
+
+                rowWidth += hGap + elementWidth;
+                rowHeight = Math.max(rowHeight, elementHeight);
+                rowEnd++;
+            }
+            
+			x = 0;
+			switch (_horizontalAlign)
+			{
+				case "center" : x = Math.round(containerWidth - rowWidth) / 2; break;
+				case "right" : x = containerWidth - rowWidth;
+			}
+			
+            // Keep track of the maximum row width so that we can
+            // set the correct contentSize
+            maxRowWidth = Math.max(maxRowWidth, x + rowWidth);
+
+            // Layout all the elements within the row
+            for (var i:int = rowStart; i <= rowEnd; i++) 
+            {
+                element = useVirtualLayout ? layoutTarget.getVirtualElementAt(i) : 
+											 layoutTarget.getElementAt(i);
+
+                // Resize the element to its preferred size by passing
+                // NaN for the width and height constraints
+                element.setLayoutBoundsSize(NaN, NaN);
+
+                // Find out the element's dimensions sizes.
+                // We do this after the element has been already resized
+                // to its preferred size.
+                elementWidth = element.getLayoutBoundsWidth();
+                elementHeight = element.getLayoutBoundsHeight();
+
+                // Calculate the position within the row
+                var elementY:Number = Math.round((rowHeight - elementHeight) * vAlign);
+
+                // Position the element
+                element.setLayoutBoundsPosition(x, y + elementY);
+
+                x += hGap + elementWidth;
+            }
+
+            // Next row will start with the first element after the current row's end
+            rowStart = rowEnd + 1;
+
+            // Update the position to the beginning of the row
+            x = 0;
+            y += rowHeight;
+        }
+
+        // Set the content size which determines the scrolling limits
+        // and is used by the Scroller to calculate whether to show up
+        // the scrollbars when the the scroll policy is set to "auto"
+        layoutTarget.setContentSize(maxRowWidth, y);
+    }
+}
+}
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/readme.txt
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/readme.txt b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/readme.txt
new file mode 100644
index 0000000..d4c9f08
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/readme.txt
@@ -0,0 +1,4 @@
+This layout sample was written by Evtim Georgiev. More information regarding the layout can be found at these URLs:
+
+http://evtimmy.com/2009/06/flowlayout-part-2-gap-verticalalign-and-scrolling/
+http://www.adobe.com/devnet/flex/articles/spark_layouts.html
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/d43c133c/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/sample.mxml
----------------------------------------------------------------------
diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/sample.mxml b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/sample.mxml
new file mode 100644
index 0000000..959f06c
--- /dev/null
+++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/sample.mxml
@@ -0,0 +1,85 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+  Licensed to the Apache Software Foundation (ASF) under one or more
+  contributor license agreements.  See the NOTICE file distributed with
+  this work for additional information regarding copyright ownership.
+  The ASF licenses this file to You under the Apache License, Version 2.0
+  (the "License"); you may not use this file except in compliance with
+  the License.  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+
+-->
+<s:Application  xmlns:fx="http://ns.adobe.com/mxml/2009"
+				xmlns:s="library://ns.adobe.com/flex/spark"
+				xmlns:mx="library://ns.adobe.com/flex/halo"
+				xmlns:my="*" viewSourceURL="srcview/index.html">
+	
+	<s:Panel width="100%" height="100%" title="Custom Layout - Flow Layout" skinClass="skins.TDFPanelSkin">
+		<s:layout>
+			<s:VerticalLayout horizontalAlign="center"
+							  paddingTop="10" gap="10"/>
+		</s:layout>
+		
+		<!-- The drop-down to select vertical alignment -->
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Vertical align"/>
+			<s:DropDownList id="vAlign" requireSelection="true" color="0x000000">
+				<s:ArrayCollection>
+					<fx:String>bottom</fx:String>
+					<fx:String>middle</fx:String>
+					<fx:String>top</fx:String>
+				</s:ArrayCollection>
+			</s:DropDownList>                         
+		</s:HGroup>
+		
+		<!-- The drop-down to select vertical alignment -->                         
+		<s:HGroup verticalAlign="middle">
+			<s:Label text="Horizontal align"/>
+			<s:DropDownList id="hAlign" requireSelection="true">
+				<s:ArrayCollection>
+					<fx:String>left</fx:String>
+					<fx:String>center</fx:String>
+					<fx:String>right</fx:String>
+				</s:ArrayCollection>
+			</s:DropDownList>                         
+		</s:HGroup>
+		
+		<!-- The slider to control the list width -->
+		<s:HGroup verticalAlign="bottom">
+			<s:Label text="Container width"/>
+			<s:HSlider id="widthSlider" minimum="10" maximum="400"
+					   value="200" liveDragging="true"/>
+		</s:HGroup>
+		
+		<!-- The slider to control the horizontal gap -->
+		<s:HGroup verticalAlign="bottom">
+			<s:Label text="Horizontal gap"/>
+			<s:HSlider id="hGapSlider" minimum="0" maximum="50"
+					   value="10" liveDragging="true"/>
+		</s:HGroup>
+		
+		<!-- A Spark List -->
+		<s:List id="list1" width="{widthSlider.value}" height="112"
+				selectedIndex="7"
+				dataProvider="{new ArrayCollection(
+				'The quick fox jumped over the lazy sleepy\n\dog'.split(' '))}">
+			
+			<!-- Configure the layout to be the FlowLayout -->    
+			<s:layout>
+				<my:FlowLayout1 horizontalAlign="{hAlign.selectedItem}"
+								verticalAlign="{vAlign.selectedItem}"
+								horizontalGap="{hGapSlider.value}"/>
+			</s:layout>
+		</s:List>
+	</s:Panel>
+
+</s:Application>
+


Mime
View raw message