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> +