You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flex.apache.org by ah...@apache.org on 2014/08/01 07:43:56 UTC
[35/51] [partial] this folder was called TourDeFlex_content.com and
was hidden by .gitignore
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"><</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"><</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">></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"><=</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"><?xml version="1.0" encoding="utf-8"?></span>
+<span class="MXMLComponent_Tag"><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">></span>
+
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:layout></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+ <span class="MXMLComponent_Tag"></s:layout></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> The drop-down to select vertical alignment </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">></span>
+ <span class="MXMLComponent_Tag"><s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Vertical align</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:ArrayCollection></span>
+ <span class="MXMLComponent_Tag"><fx:String></span><span class="MXMLDefault_Text">bottom</span><span class="MXMLComponent_Tag"></fx:String></span>
+ <span class="MXMLComponent_Tag"><fx:String></span><span class="MXMLDefault_Text">middle</span><span class="MXMLComponent_Tag"></fx:String></span>
+ <span class="MXMLComponent_Tag"><fx:String></span><span class="MXMLDefault_Text">top</span><span class="MXMLComponent_Tag"></fx:String></span>
+ <span class="MXMLComponent_Tag"></s:ArrayCollection></span>
+ <span class="MXMLComponent_Tag"></s:DropDownList></span>
+ <span class="MXMLComponent_Tag"></s:HGroup></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> The drop-down to select vertical alignment </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">middle</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">></span>
+ <span class="MXMLComponent_Tag"><s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Horizontal align</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:ArrayCollection></span>
+ <span class="MXMLComponent_Tag"><fx:String></span><span class="MXMLDefault_Text">left</span><span class="MXMLComponent_Tag"></fx:String></span>
+ <span class="MXMLComponent_Tag"><fx:String></span><span class="MXMLDefault_Text">center</span><span class="MXMLComponent_Tag"></fx:String></span>
+ <span class="MXMLComponent_Tag"><fx:String></span><span class="MXMLDefault_Text">right</span><span class="MXMLComponent_Tag"></fx:String></span>
+ <span class="MXMLComponent_Tag"></s:ArrayCollection></span>
+ <span class="MXMLComponent_Tag"></s:DropDownList></span>
+ <span class="MXMLComponent_Tag"></s:HGroup></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> The slider to control the list width </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">bottom</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">></span>
+ <span class="MXMLComponent_Tag"><s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Container width</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+ <span class="MXMLComponent_Tag"></s:HGroup></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> The slider to control the horizontal gap </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><s:HGroup</span><span class="MXMLDefault_Text"> verticalAlign="</span><span class="MXMLString">bottom</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">></span>
+ <span class="MXMLComponent_Tag"><s:Label</span><span class="MXMLDefault_Text"> text="</span><span class="MXMLString">Horizontal gap</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+ <span class="MXMLComponent_Tag"></s:HGroup></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> A Spark List </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> Configure the layout to be the FlowLayout </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><s:layout></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+ <span class="MXMLComponent_Tag"></s:layout></span>
+ <span class="MXMLComponent_Tag"></s:List></span>
+ <span class="MXMLComponent_Tag"></s:Panel></span>
+
+<span class="MXMLComponent_Tag"></s:Application></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"><?xml version="1.0" encoding="utf-8"?></span>
+
+<span class="MXMLASDoc"><!---</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">--></span>
+<span class="MXMLComponent_Tag"><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">></span>
+
+ <span class="MXMLSpecial_Tag"><fx:Metadata></span>
+ <![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">></span>
+ <span class="MXMLSpecial_Tag"></fx:Metadata></span>
+
+ <span class="MXMLSpecial_Tag"><fx:Script></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"></fx:Script></span>
+
+ <span class="MXMLComponent_Tag"><s:states></span>
+ <span class="MXMLComponent_Tag"><s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">normal</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">disabled</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">normalWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><s:State</span><span class="MXMLDefault_Text"> name="</span><span class="MXMLString">disabledWithControlBar</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"></s:states></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> drop shadow </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 1: border </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:stroke></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+ <span class="MXMLComponent_Tag"></s:stroke></span>
+ <span class="MXMLComponent_Tag"></s:Rect></span>
+
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 2: background fill </span><span class="MXMLComment">--></span>
+ <span class="MXMLComment"><!--</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">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:fill></span>
+ <span class="MXMLComponent_Tag"><s:LinearGradient</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">></span>
+ <span class="MXMLComponent_Tag"><s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xE2E2E2</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"></s:LinearGradient></span>
+ <span class="MXMLComponent_Tag"></s:fill></span>
+ <span class="MXMLComponent_Tag"></s:Rect></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 3: contents </span><span class="MXMLComment">--></span>
+ <span class="MXMLASDoc"><!---</span><span class="MXMLASDoc"> contains the vertical stack of titlebar content and controlbar </span><span class="MXMLASDoc">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:layout></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+ <span class="MXMLComponent_Tag"></s:layout></span>
+
+ <span class="MXMLComponent_Tag"><s:Group</span><span class="MXMLDefault_Text"> id="</span><span class="MXMLString">topGroup</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">></span>
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 0: title bar fill </span><span class="MXMLComment">--></span>
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> Note: We have custom skinned the title bar to be solid black for Tour de Flex </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:fill></span>
+ <span class="MXMLComponent_Tag"><s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"></s:fill></span>
+ <span class="MXMLComponent_Tag"></s:Rect></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 1: title bar highlight </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:stroke></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xEAEAEA</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xD9D9D9</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"></s:LinearGradientStroke></span>
+ <span class="MXMLComponent_Tag"></s:stroke></span>
+ <span class="MXMLComponent_Tag"></s:Rect></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 2: title bar divider </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:fill></span>
+ <span class="MXMLComponent_Tag"><s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xC0C0C0</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"></s:fill></span>
+ <span class="MXMLComponent_Tag"></s:Rect></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 3: text </span><span class="MXMLComment">--></span>
+ <span class="MXMLASDoc"><!---</span><span class="MXMLASDoc"> Defines the appearance of the PanelSkin class's title bar. </span><span class="MXMLASDoc">--></span>
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> Note: The title text display has been slightly modified for Tour de Flex. </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"></s:Label></span>
+ <span class="MXMLComponent_Tag"></s:Group></span>
+
+ <span class="MXMLComment"><!--</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">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"></s:Group></span>
+
+ <span class="MXMLComponent_Tag"><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">></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 0: control bar background </span><span class="MXMLComment">--></span>
+ <span class="MXMLComment"><!--</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">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:fill></span>
+ <span class="MXMLComponent_Tag"><s:LinearGradient</span><span class="MXMLDefault_Text"> rotation="</span><span class="MXMLString">90</span><span class="MXMLDefault_Text">"</span><span class="MXMLComponent_Tag">></span>
+ <span class="MXMLComponent_Tag"><s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xE2E2E2</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"><s:GradientEntry</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0x000000</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"></s:LinearGradient></span>
+ <span class="MXMLComponent_Tag"></s:fill></span>
+ <span class="MXMLComponent_Tag"></s:Rect></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 1: control bar divider line </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:fill></span>
+ <span class="MXMLComponent_Tag"><s:SolidColor</span><span class="MXMLDefault_Text"> color="</span><span class="MXMLString">0xCDCDCD</span><span class="MXMLDefault_Text">" </span><span class="MXMLComponent_Tag">/></span>
+ <span class="MXMLComponent_Tag"></s:fill></span>
+ <span class="MXMLComponent_Tag"></s:Rect></span>
+
+ <span class="MXMLComment"><!--</span><span class="MXMLComment"> layer 2: control bar </span><span class="MXMLComment">--></span>
+ <span class="MXMLComponent_Tag"><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">></span>
+ <span class="MXMLComponent_Tag"><s:layout></span>
+ <span class="MXMLComponent_Tag"><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">/></span>
+ <span class="MXMLComponent_Tag"></s:layout></span>
+ <span class="MXMLComponent_Tag"></s:Group></span>
+ <span class="MXMLComponent_Tag"></s:Group></span>
+ <span class="MXMLComponent_Tag"></s:Group></span>
+<span class="MXMLComponent_Tag"></s:SparkSkin></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>
+