http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/5ed4d983/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 index d8d788e..1d45439 100644 --- 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 @@ -23,70 +23,70 @@ <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> - +<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/5ed4d983/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 index 9462285..7645cf2 100644 --- a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/FlowLayout1.as +++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/FlowLayout1.as @@ -16,180 +16,180 @@ // 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); - } -} +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/5ed4d983/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 index bccfc0b..959f06c 100644 --- a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/sample.mxml +++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-FlowLayout/srcview/src/sample.mxml @@ -1,4 +1,4 @@ -<?xml version="1.0" encoding="utf-8"?> +<?xml version="1.0" encoding="utf-8"?> <!-- Licensed to the Apache Software Foundation (ASF) under one or more @@ -17,69 +17,69 @@ 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> - +<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> + http://git-wip-us.apache.org/repos/asf/flex-utilities/blob/5ed4d983/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/sample.html ---------------------------------------------------------------------- diff --git a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/sample.html b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/sample.html index 37d9446..8d05dc2 100644 --- a/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/sample.html +++ b/TourDeFlex/TourDeFlex_content/flex4.0/CustomLayout-HLayoutBaseline/sample.html @@ -14,108 +14,108 @@ See the License for the specific language governing permissions and limitations under the License. --> -<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> -<!-- saved from url=(0014)about:internet --> -<html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en"> - <!-- - Smart developers always View Source. - - This application was built using Adobe Flex, an open source framework - for building rich Internet applications that get delivered via the - Flash Player or to desktops via Adobe AIR. - - Learn more about Flex at http://flex.org - // --> - <head> - <title></title> - <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> - <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and - the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as - the percentage of the height of its parent container, which has to be set explicitly. Initially, - don't display flashContent div so it won't show if JavaScript disabled. - --> - <style type="text/css" media="screen"> - html, body { height:100%; } - body { margin:0; padding:0; overflow:auto; text-align:center; - background-color: #ffffff; } - #flashContent { display:none; } - </style> - - <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens --> - <!-- BEGIN Browser History required section --> - <link rel="stylesheet" type="text/css" href="history/history.css" /> - <script type="text/javascript" src="history/history.js"></script> - <!-- END Browser History required section --> - - <script type="text/javascript" src="swfobject.js"></script> - <script type="text/javascript"> - <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> - var swfVersionStr = "10.0.0"; - <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. --> - var xiSwfUrlStr = "playerProductInstall.swf"; - var flashvars = {}; - var params = {}; - params.quality = "high"; - params.bgcolor = "#ffffff"; - params.allowscriptaccess = "sameDomain"; - params.allowfullscreen = "true"; - var attributes = {}; - attributes.id = "sample"; - attributes.name = "sample"; - attributes.align = "middle"; - swfobject.embedSWF( - "sample.swf", "flashContent", - "100%", "100%", - swfVersionStr, xiSwfUrlStr, - flashvars, params, attributes); - <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. --> - swfobject.createCSS("#flashContent", "display:block;text-align:left;"); - </script> - </head> - <body> - <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough - JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show - when JavaScript is disabled. - --> - <div id="flashContent"> - <p> - To view this page ensure that Adobe Flash Player version - 10.0.0 or greater is installed. - </p> - <script type="text/javascript"> - var pageHost = ((document.location.protocol == "https:") ? "https://"; : "http://";); - document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" - + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); - </script> - </div> - - <noscript> - <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="sample"> - <param name="movie" value="sample.swf" /> - <param name="quality" value="high" /> - <param name="bgcolor" value="#ffffff" /> - <param name="allowScriptAccess" value="sameDomain" /> - <param name="allowFullScreen" value="true" /> - <!--[if !IE]>--> - <object type="application/x-shockwave-flash" data="sample.swf" width="100%" height="100%"> - <param name="quality" value="high" /> - <param name="bgcolor" value="#ffffff" /> - <param name="allowScriptAccess" value="sameDomain" /> - <param name="allowFullScreen" value="true" /> - <!--<![endif]--> - <!--[if gte IE 6]>--> - <p> - Either scripts and active content are not permitted to run or Adobe Flash Player version - 10.0.0 or greater is not installed. - </p> - <!--<![endif]--> - <a href="http://www.adobe.com/go/getflashplayer";> - <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"; alt="Get Adobe Flash Player" /> - </a> - <!--[if !IE]>--> - </object> - <!--<![endif]--> - </object> - </noscript> - </body> -</html> +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> +<!-- saved from url=(0014)about:internet --> +<html xmlns="http://www.w3.org/1999/xhtml"; lang="en" xml:lang="en"> + <!-- + Smart developers always View Source. + + This application was built using Adobe Flex, an open source framework + for building rich Internet applications that get delivered via the + Flash Player or to desktops via Adobe AIR. + + Learn more about Flex at http://flex.org + // --> + <head> + <title></title> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <!-- Include CSS to eliminate any default margins/padding and set the height of the html element and + the body element to 100%, because Firefox, or any Gecko based browser, interprets percentage as + the percentage of the height of its parent container, which has to be set explicitly. Initially, + don't display flashContent div so it won't show if JavaScript disabled. + --> + <style type="text/css" media="screen"> + html, body { height:100%; } + body { margin:0; padding:0; overflow:auto; text-align:center; + background-color: #ffffff; } + #flashContent { display:none; } + </style> + + <!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens --> + <!-- BEGIN Browser History required section --> + <link rel="stylesheet" type="text/css" href="history/history.css" /> + <script type="text/javascript" src="history/history.js"></script> + <!-- END Browser History required section --> + + <script type="text/javascript" src="swfobject.js"></script> + <script type="text/javascript"> + <!-- For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection. --> + var swfVersionStr = "10.0.0"; + <!-- To use express install, set to playerProductInstall.swf, otherwise the empty string. --> + var xiSwfUrlStr = "playerProductInstall.swf"; + var flashvars = {}; + var params = {}; + params.quality = "high"; + params.bgcolor = "#ffffff"; + params.allowscriptaccess = "sameDomain"; + params.allowfullscreen = "true"; + var attributes = {}; + attributes.id = "sample"; + attributes.name = "sample"; + attributes.align = "middle"; + swfobject.embedSWF( + "sample.swf", "flashContent", + "100%", "100%", + swfVersionStr, xiSwfUrlStr, + flashvars, params, attributes); + <!-- JavaScript enabled so display the flashContent div in case it is not replaced with a swf object. --> + swfobject.createCSS("#flashContent", "display:block;text-align:left;"); + </script> + </head> + <body> + <!-- SWFObject's dynamic embed method replaces this alternative HTML content with Flash content when enough + JavaScript and Flash plug-in support is available. The div is initially hidden so that it doesn't show + when JavaScript is disabled. + --> + <div id="flashContent"> + <p> + To view this page ensure that Adobe Flash Player version + 10.0.0 or greater is installed. + </p> + <script type="text/javascript"> + var pageHost = ((document.location.protocol == "https:") ? "https://"; : "http://";); + document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='" + + pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" ); + </script> + </div> + + <noscript> + <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="sample"> + <param name="movie" value="sample.swf" /> + <param name="quality" value="high" /> + <param name="bgcolor" value="#ffffff" /> + <param name="allowScriptAccess" value="sameDomain" /> + <param name="allowFullScreen" value="true" /> + <!--[if !IE]>--> + <object type="application/x-shockwave-flash" data="sample.swf" width="100%" height="100%"> + <param name="quality" value="high" /> + <param name="bgcolor" value="#ffffff" /> + <param name="allowScriptAccess" value="sameDomain" /> + <param name="allowFullScreen" value="true" /> + <!--<![endif]--> + <!--[if gte IE 6]>--> + <p> + Either scripts and active content are not permitted to run or Adobe Flash Player version + 10.0.0 or greater is not installed. + </p> + <!--<![endif]--> + <a href="http://www.adobe.com/go/getflashplayer";> + <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"; alt="Get Adobe Flash Player" /> + </a> + <!--[if !IE]>--> + </object> + <!--<![endif]--> + </object> + </noscript> + </body> +</html>
![http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"](http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"){kind=link}