| <?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. |
| --> |
| <!DOCTYPE html |
| PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html lang="en-us" xml:lang="en-us"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> |
| <meta name="DC.Type" content="topic"/> |
| <meta name="DC.Title" content="Spark containers"/> |
| <meta name="DC.Format" content="XHTML"/> |
| <meta name="DC.Identifier" content="WSD42D542D-CEFF-47e2-AFD5-C11F3E9B5AE2_verapache"/> |
| <link rel="stylesheet" type="text/css" href="commonltr.css"/> |
| <title>Spark containers</title> |
| </head> |
| <body id="WSD42D542D-CEFF-47e2-AFD5-C11F3E9B5AE2_verapache"><a name="WSD42D542D-CEFF-47e2-AFD5-C11F3E9B5AE2_verapache"><!-- --></a> |
| |
| |
| <h1 class="topictitle1">Spark containers </h1> |
| |
| |
| <div> |
| <p>Spark containers provide a hierarchical structure to arrange |
| and configure their children. </p> |
| |
| <p>Flex also provides a set of MX layout and MX navigator containers, |
| although it’s best to use the Spark containers when possible. For |
| more information on the MX layout and MX navigator containers, see <a href="flx_layouts_lo.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e4b_verapache">MX |
| layout containers</a> and <a href="flx_navigators_na.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb9_verapache">MX |
| navigator containers</a>.</p> |
| |
| <p>For an introduction to containers, including Spark containers, |
| see <a href="flx_containers_intro_cn.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ffa_verapache">Introduction |
| to containers</a>. </p> |
| |
| </div> |
| |
| <div class="nested1" id="WSDBFD90D1-A0A5-40e2-BEEE-14ECBE82F83B_verapache"><a name="WSDBFD90D1-A0A5-40e2-BEEE-14ECBE82F83B_verapache"><!-- --></a> |
| <h2 class="topictitle2">About Spark containers</h2> |
| |
| |
| <div> |
| <div class="p">Spark includes the following containers:<ul> |
| <li> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Group.html" target="_blank">Group</a> (including <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/HGroup.html" target="_blank">HGroup</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/VGroup.html" target="_blank">VGroup</a>, |
| and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TileGroup.html" target="_blank">TileGroup</a>) |
| and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/DataGroup.html" target="_blank">DataGroup</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnableContainer.html" target="_blank">SkinnableContainer</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnableDataContainer.html" target="_blank">SkinnableDataContainer</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Panel.html" target="_blank">Panel</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TitleWindow.html" target="_blank">TitleWindow</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/NavigatorContent.html" target="_blank">NavigatorContent</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/BorderContainer.html" target="_blank">BorderContainer</a>, |
| and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html" target="_blank">Application</a> |
| </p> |
| |
| <div class="note"><span class="notetitle">Note:</span> The |
| Panel and NavigatorContent classes are subclasses of the SkinnableContainer |
| class. The information below for SkinnableContainer applies also |
| to the Panel and NavigatorContent classes.</div> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>For more information on the Application container, see <a href="flx_app_container_apc.html#WS2db454920e96a9e51e63e3d11c0bf69084-7ee7_verapache">Application |
| containers </a>.</p> |
| |
| <p> |
| <strong>Interchangeable layouts</strong> |
| </p> |
| |
| <p>Most Spark containers support interchangeable layouts. That means |
| you can set the layout of a container to any of the supported layout |
| types, such as basic, horizontal, vertical, or tiled layout. You |
| can also define a custom layout. </p> |
| |
| <div class="p"> |
| <div class="note"><span class="notetitle">Note:</span> Some Spark containers, such as HGroup, VGroup, and TileGroup, |
| have a predefined layout that you cannot change. </div> |
| |
| </div> |
| |
| <p> |
| <strong>Skinning</strong> |
| </p> |
| |
| <p>To improve performance and minimize application size, some Spark |
| containers do not support skinning. Use the Group and DataGroup |
| containers to manage child layout. Use SkinnableContainer and SkinnableDataContainer |
| to manage child layout and to support custom skins. </p> |
| |
| <p> |
| <strong>Visual child components</strong> |
| </p> |
| |
| <p>The Group and SkinnableContainer classes can take any visual |
| components as children. Visual components implement the IVisualElement |
| interface, and include subclasses of the UIComponent class and the |
| GraphicElement class. </p> |
| |
| <p>The <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/UIComponent.html" target="_blank">UIComponent</a> class |
| is the base class of all Flex components. Therefore, you can use |
| any Flex component as a child of the Group and SkinnableContainer class.</p> |
| |
| <p>The <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/supportClasses/GraphicElement.html" target="_blank">GraphicElement</a> class |
| is the base class for the Flex drawing classes, such as the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/Ellipse.html" target="_blank">Ellipse</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/Line.html" target="_blank">Line</a>, and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/primitives/Rect.html" target="_blank">Rect</a> classes. |
| Therefore, you can use subclass of the GraphicElement class as a |
| child of the Group and SkinnableContainer class.</p> |
| |
| <p>The DataGroup and SkinnableDataContainer classes take as children |
| visual components that implement the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/core/IVisualElement.html" target="_blank">IVisualElement</a> interface |
| and are subclasses of <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html" target="_blank">DisplayObject</a>. |
| This includes subclasses of the UIComponent class.</p> |
| |
| <p> |
| <strong>Data items</strong> |
| </p> |
| |
| <p>However, the DataGroup and SkinnableDataContainer containers |
| are optimized to hold data items. Data items can be simple data |
| items such as String and Number objects, and more complicated data |
| items such as Object and XMLNode objects. Therefore, while these |
| containers can hold visual children, use Group and SkinnableContainer |
| for children that are visual components. </p> |
| |
| <p> |
| <strong>Main characteristics of Spark containers</strong> |
| </p> |
| |
| <p>The following table lists the main characteristics of the Spark |
| containers: </p> |
| |
| <div class="p"> |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="rows"> |
| |
| |
| |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e239"> |
| <p>Container</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e245"> |
| <p>Children</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e251"> |
| <p>Skinnable</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e257"> |
| <p>Scrollable</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e263"> |
| <p>Creation policy</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e270"> |
| <p>Primary use</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>Group</strong> (including HGroup, VGroup, |
| and TileGroup)</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>No</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>As a child of Scroller</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>All</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Lay out visual children.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>DataGroup</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>Data Item IVisualElement and |
| DisplayObject</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>No</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>As a child of Scroller</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>All</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Render and lay out data items.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>SkinnableContainer</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>By skinning</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Selectable</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Lay out visual children in a skinnable container.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>SkinnablePopUpContainer</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>By skinning</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Selectable</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Lay out visual children in a skinnable container |
| opened as a pop up window.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>SkinnableDataContainer</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>Data item IVisualElement and |
| DisplayObject</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>By skinning</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Selectable</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Render and lay out data items in a skinnable |
| container.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>BorderContainer</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>No</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Selectable</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Lay out visual children in a basic container |
| that includes a border.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>Form</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Selectable</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Lay out FormItem and FormHeading children |
| similar to an HTML form.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>NavigatorContent</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>By skinning</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Inherited from parent container</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Subclass of SkinnableContainer that can |
| be used as the child of an MX navigator container.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>Panel</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>By skinning</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Selectable</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Subclass of SkinnableContainer that adds |
| a title bar and other visual elements to the container.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e239 "> |
| <p> |
| <strong>TitleWindow</strong> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e245 "> |
| <p>IVisualElement</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e251 "> |
| <p>Yes</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e257 "> |
| <p>By skinning</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e263 "> |
| <p>Selectable</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e270 "> |
| <p>Subclass of Panel that is optimized for |
| use as a pop-up window.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>For information on skinning, see <a href="flx_gumboskinning_gs.html#WS53116913-F952-4b21-831F-9DE85B647C8A_verapache">Spark |
| Skinning</a>. </p> |
| |
| <p> |
| <strong>Creation policy</strong> |
| </p> |
| |
| <p>Container creation policy determines how and when children of |
| containers are created. For information on creation policy, see <a href="flx_containers_intro_cn.html#WS2FCF2174-EFDB-4d01-8D29-5A964D794ADA_verapache">About |
| the creation policy</a>. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS3F5D7DEF-D637-485c-AF39-23EDAD899D0D_verapache"><a name="WS3F5D7DEF-D637-485c-AF39-23EDAD899D0D_verapache"><!-- --></a> |
| <h2 class="topictitle2">About container children</h2> |
| |
| |
| <div> |
| <p>All Spark containers can take as children visual components |
| that implement the IVisualElement interface. All Spark and MX components |
| implement the IVisualElement interface and can therefore be used |
| as container children. </p> |
| |
| <p>The following example uses the Spark SkinnableContainer to hold |
| Spark Button components:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkContainerSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:SkinnableContainer> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:SkinnableContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The Spark Group, SkinnableContainer, and subclasses can take |
| as children any subclass of the GraphicElement class. This lets |
| you add graphical elements as children of the container. The following |
| example shows a SkinnableContainer with a Line component between |
| two Button components:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkContainerGraphic.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:SkinnableContainer> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Line |
| xFrom="0" xTo="100"> |
| <s:stroke> |
| <s:LinearGradientStroke weight="2"/> |
| </s:stroke> |
| </s:Line> |
| <s:Button label="Button 2"/> |
| </s:SkinnableContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The DataGroup and SkinnableDataContainer classes are designed |
| primarily to display data items as children. The following example |
| shows a SkinnableDataContainer displaying an Array of Strings as |
| children:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkDataContainerSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:SkinnableDataContainer itemRenderer="spark.skins.spark.DefaultItemRenderer"> |
| <mx:ArrayList> |
| <fx:String>Dave Jones</fx:String> |
| <fx:String>Mary Davis</fx:String> |
| <fx:String>Debbie Cooper</fx:String> |
| </mx:ArrayList> |
| </s:SkinnableDataContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS0141D24B-6AEB-4721-BA04-9BF15F86350F_verapache"><a name="WS0141D24B-6AEB-4721-BA04-9BF15F86350F_verapache"><!-- --></a> |
| <h2 class="topictitle2">About Spark layouts</h2> |
| |
| |
| <div> |
| <p>All Spark containers define a default layout, but let you |
| switch the layout to suit your application requirements. To switch |
| layout, assign a layout class to the <samp class="codeph">layout</samp> property |
| of the container. </p> |
| |
| <div class="p">Flex ships with several layout classes that you can use with |
| the Spark containers. Additionally, you can define custom layout |
| classes. The layout classes are defined in the spark.layouts package, |
| and include the following classes: <ul> |
| <li> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/BasicLayout.html" target="_blank">BasicLayout</a> Uses |
| absolute positioning. You explicitly position all container children, |
| or use constraints to position them.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/HorizontalLayout.html" target="_blank">HorizontalLayout</a> Lays |
| out children in a single horizontal row. The height of the row is |
| fixed to the same height for all children and is typically the height |
| of the tallest child. The width of each child is either fixed to |
| the same value for all children, or each child can calculate its |
| own width. By default, each child calculates its own width.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/TileLayout.html" target="_blank">TileLayout</a> Lays |
| out children in one or more vertical columns or horizontal rows, |
| starting new rows or columns as necessary. The <samp class="codeph">orientation</samp> property |
| determines the layout direction. The valid values for the orientation property |
| are <samp class="codeph">columns</samp> for a column layout and <samp class="codeph">rows</samp> (default) |
| for a row layout. </p> |
| |
| <p>All cells of the tile layout have the same |
| size, which is the height of the tallest child and the width of |
| the widest child. </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/VerticalLayout.html" target="_blank">VerticalLayout</a> Lays |
| out children in a single vertical column. The width of the column |
| is fixed to the same width for all children and is typically the |
| width of the widest child. The height of each child is either fixed |
| to the same value for all children, or each child can calculate |
| its own height. By default, each child calculates its own height.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2E766701-05C7-44de-9621-75722301B94E_verapache"><a name="WS2E766701-05C7-44de-9621-75722301B94E_verapache"><!-- --></a> |
| <h3 class="topictitle3">Set the layout of a Spark container</h3> |
| |
| |
| <div> |
| <p>By default, the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Group.html" target="_blank">Group</a> container |
| uses the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/BasicLayout.html" target="_blank">BasicLayout</a> class. |
| The following example uses the <samp class="codeph">layout</samp> property |
| of the container to set its layout to the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/HorizontalLayout.html" target="_blank">HorizontalLayout</a> class: </p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkGroupContainerHorizontal.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Group> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:Group> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>To simplify the use of layouts with the Group container, Flex |
| defines subclasses of Group: <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/HGroup.html" target="_blank">HGroup</a> with |
| a horizontal layout, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/VGroup.html" target="_blank">VGroup</a> with |
| a vertical layout, and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TileGroup.html" target="_blank">TileGroup</a> with |
| a tile layout. Therefore, you can rewrite the previous example as shown |
| below, replacing the HorizontalLayout definition inside Group with |
| an HGroup container:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkHGroupContainer.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:HGroup> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:HGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS817a894fd7827b2a-209375481211babd9df-8000_verapache"><a name="WS817a894fd7827b2a-209375481211babd9df-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Set the padding and gap of a layout</h3> |
| |
| |
| <div> |
| <p>Most Spark layout classes support padding and gap properties. |
| The padding properties define the space between the container boundaries |
| and the children. The gap properties define the space between the |
| children, either horizontally or vertically. The <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/BasicLayout.html" target="_blank">BasicLayout</a> class |
| does not support padding properties because this layout requires |
| that you explicitly position each child.</p> |
| |
| <div class="p">The following example sets the padding to 10 pixels, and the |
| gap to 5 pixels, for the children of a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Panel.html" target="_blank">Panel</a> container |
| that uses the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/HorizontalLayout.html" target="_blank">HorizontalLayout</a> class: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkPanelPadding.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Panel> |
| <s:layout> |
| <s:HorizontalLayout |
| paddingLeft="10" paddingRight="10" |
| paddingTop="10" paddingBottom="10" |
| gap="5"/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For all Group containers, you set the padding with the <samp class="codeph">paddingLeft</samp>, <samp class="codeph">paddingTop</samp>, <samp class="codeph">paddingRight</samp>, |
| and <samp class="codeph">paddingBottom</samp> properties. For <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/VGroup.html" target="_blank">VGroup</a> and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/HGroup.html" target="_blank">HGroup</a> containers, |
| you set the <samp class="codeph">gap</samp> property. For the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TileGroup.html" target="_blank">TileGroup</a> container, you |
| set the gap with the <samp class="codeph">horizontalGap</samp> and <samp class="codeph">verticalGap</samp> properties. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSefe892102f30ec48-478c4fbc121211d5cf5-8000_verapache"><a name="WSefe892102f30ec48-478c4fbc121211d5cf5-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Set the alignment of a layout</h3> |
| |
| |
| <div> |
| <p>The layout classes provide the <samp class="codeph">horizontalAlign</samp> and <samp class="codeph">verticalAlign</samp> properties |
| for aligning the children of a container. For example, you can use |
| these properties to align children to the top of a container using <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/HorizontalLayout.html" target="_blank">HorizontalLayout</a>, |
| or to the left side of a container using <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/VerticalLayout.html" target="_blank">VerticalLayout</a>.</p> |
| |
| <p> |
| <strong>horizontalAlign values</strong> |
| </p> |
| |
| <p>The <samp class="codeph">horizontalAlign</samp> property takes the following |
| values:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">left</samp> Align children to the left side |
| of the container. This is the default value for HorizontalLayout.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">right</samp> Align children to the right side of |
| the container.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">center</samp> Align the children to the horizontal |
| center of the container.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">justify</samp> Set the width of all children to |
| be the same width as the container. </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">contentJustify</samp> Set the width of all children |
| to be the <em>content width</em> of the container. The content width |
| of the container is the width of the largest child. If all children |
| are smaller than the width of the container, then set the width |
| of all the children to the width of the container. </p> |
| |
| <p>Not supported |
| by TileLayout. Use <samp class="codeph">columnAlign</samp> and <samp class="codeph">rowAlign</samp> instead.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p> |
| <strong>verticalAlign values</strong> |
| </p> |
| |
| <p>The <samp class="codeph">verticalAlign</samp> property takes the following |
| values:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">top</samp> Align children to the top of |
| the container. This is the default value for VerticalLayout.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">bottom</samp> Align children to the bottom of the |
| container.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">middle</samp> Align children to the vertical middle |
| of the container.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">baseline</samp> Align the elements such that their |
| text is aligned to the maximum of the elements' text ascent.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">justify</samp> Set the height of all children to |
| be the same height as the container. </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">contentJustify</samp> Set the height of all children |
| to be the <em>content height</em> of the container. The content height |
| of the container is the height of the largest child. If all children |
| are smaller than the height of the container, then set the height |
| of all the children to the height of the container.</p> |
| |
| <p>Not supported |
| by TileLayout. Use <samp class="codeph">columnAlign</samp> and <samp class="codeph">rowAlign</samp> instead.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="p">The following example overrides the default vertical alignment |
| of top for the HorizontalLayout to align the children of a Group |
| container to the bottom of the container:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkContainerSimpleAlignment.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:SkinnableContainer> |
| <s:layout> |
| <s:HorizontalLayout verticalAlign="bottom"/> |
| </s:layout> |
| <s:Button label="Button 1" fontSize="24"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3" fontSize="36"/> |
| <s:Button label="Button 4"/> |
| </s:SkinnableContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The following example overrides the default vertical alignment |
| of top for the HorizontalLayout to use justify. Notice that all |
| buttons have the same height: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkContainerSimpleAlignment.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:SkinnableContainer> |
| <s:layout> |
| <s:HorizontalLayout verticalAlign="justify"/> |
| </s:layout> |
| <s:Button label="Button 1" fontSize="24"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3" fontSize="36"/> |
| <s:Button label="Button 4"/> |
| </s:SkinnableContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS514ED026-76E0-46a6-A7DB-8824E6EDF846_verapache"><a name="WS514ED026-76E0-46a6-A7DB-8824E6EDF846_verapache"><!-- --></a> |
| <h3 class="topictitle3">Set the row height or column width |
| of a layout</h3> |
| |
| |
| <div> |
| <p>You control the way the container lays out children with |
| different sizes by using the <samp class="codeph">VerticalLayout.variableRowHeight</samp> and <samp class="codeph">HorizontalLayout.variableColumnWidth</samp> properties. |
| By default, these properties are set to <samp class="codeph">true</samp> which |
| lets each child determine its height (<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/VerticalLayout.html" target="_blank">VerticalLayout</a>) |
| or width (<a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/HorizontalLayout.html" target="_blank">HorizontalLayout</a>). </p> |
| |
| <p>In the following example, the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Group.html" target="_blank">Group</a> container |
| holds four buttons. By default, buttons use a 12 point font size. |
| However, two of the buttons in this example define a larger font |
| size. Because the <samp class="codeph">variableRowHeight</samp> property is |
| set to <samp class="codeph">true</samp> by default, the container sets the |
| height of each button appropriately for its font size:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkGroupContainerVarRowHeightTrue.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Group> |
| <s:layout> |
| <s:VerticalLayout /> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3" fontSize="36"/> |
| <s:Button label="Button 4" fontSize="24"/> |
| </s:Group> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p> |
| <strong>Variable row and column sizes</strong> |
| </p> |
| |
| <p>If your container has many children, setting the <samp class="codeph">variableRowHeight</samp> or <samp class="codeph">variableColumnWidth</samp> properties |
| to <samp class="codeph">true</samp> can affect application performance. The |
| reason is because the container calculates the size of every child |
| as it appears on the screen. </p> |
| |
| <p>Rather than having each child calculate its size, you can set |
| the <samp class="codeph">variableRowHeight</samp> or <samp class="codeph">variableColumnWidth</samp> property |
| to <samp class="codeph">false</samp> so that each child has the same size. </p> |
| |
| <div class="p"> |
| <div class="note"><span class="notetitle">Note:</span> The following paragraphs describe setting the <samp class="codeph">variableRowHeight</samp> property |
| for the VerticalLayout class. This discussion is the same as setting |
| the <samp class="codeph">variableColumnWidth</samp> property for the HorizontalLayout |
| class.</div> |
| |
| </div> |
| |
| <div class="p">If you set the <samp class="codeph">variableRowHeight</samp> property to <samp class="codeph">false</samp>, |
| the VerticalLayout class uses the following procedure to determine |
| the height of each child:<ol> |
| <li> |
| <p>If specified, use the <samp class="codeph">VerticalLayout.rowHeight</samp> property |
| to specify an explicit height of all children. Make sure that the |
| specified height is suitable for all children.</p> |
| |
| </li> |
| |
| <li> |
| <p>If specified, use the <samp class="codeph">VerticalLayout.typicalLayoutElement</samp> property |
| to define the height of all children. This property references a component |
| that Flex uses to define the height of all container children. </p> |
| |
| </li> |
| |
| <li> |
| <p>Use the preferred height of the first container child as |
| the height of all container children. This technique is useful if |
| the children of the container are all similar. </p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| <p>In the following example, a group container uses the VerticalLayout |
| class to lay out four Button controls. The <samp class="codeph">variableRowHeight</samp> property |
| is <samp class="codeph">false</samp> so that every button has the same height:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkGroupContainerVarRowHeightFalse.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Group> |
| <s:layout> |
| <s:VerticalLayout variableRowHeight="false"/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3" fontSize="36"/> |
| <s:Button label="Button 4" fontSize="24"/> |
| </s:Group> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>Because you did not specify an explicit value for the <samp class="codeph">VerticalLayout.rowHeight</samp> property |
| or the <samp class="codeph">VerticalLayout.typicalLayoutElement</samp> property, |
| the VerticalLayout class uses the preferred height of the first |
| button control as the height for all container children. However, |
| because the third button and fourth button controls define a large |
| font size, the text is truncated to the size of the button.</p> |
| |
| <p>Alternatively, you can set the <samp class="codeph">rowHeight</samp> property |
| to a pixel value large enough for all the children, as the following |
| example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkGroupContainerVarRowHeightFalseRowHeight.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Group> |
| <s:layout> |
| <s:VerticalLayout variableRowHeight="false" |
| rowHeight="40"/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3" fontSize="36"/> |
| <s:Button label="Button 4" fontSize="24"/> |
| </s:Group> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>In this example, all buttons are 40 pixels tall. </p> |
| |
| <p>The following example uses the <samp class="codeph">typicalLayoutElement</samp> property |
| to specify to use the third button to determine the height of all |
| container children:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkGroupContainerVarRowHeightFalseTypicalLE.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Group> |
| <s:layout> |
| <s:VerticalLayout variableRowHeight="false" |
| typicalLayoutElement="{b3}"/> |
| </s:layout> |
| <s:Button id="b1" label="Button 1"/> |
| <s:Button id="b2" label="Button 2"/> |
| <s:Button id="b3" label="Button 3" fontSize="36"/> |
| <s:Button id="b4" label="Button 4" fontSize="24"/> |
| </s:Group> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>You can use two common strategies for determining the typical |
| item. One option is to use the largest item as the typical item. |
| Another option is to calculate the average size of all items, and |
| use the data item closest to that average size. </p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSF1E2E7DD-8FA6-408d-9652-4B5E57A85A5A_verapache"><a name="WSF1E2E7DD-8FA6-408d-9652-4B5E57A85A5A_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark Group and Spark SkinnableContainer |
| containers</h2> |
| |
| |
| <div> |
| <p>The Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Group.html" target="_blank">Group</a> and |
| Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnableContainer.html" target="_blank">SkinnableContainer</a> containers |
| take as children any components that implement the IVisualElement |
| interface. Use these containers when you want to manage visual children, |
| both visual components and graphical components. </p> |
| |
| <div class="p">The main differences between the Group and SkinnableContainer |
| containers are: <ul> |
| <li> |
| <p>SkinnableContainer can be skinned. The |
| Group container is designed for simplicity and minimal overhead, |
| and cannot be skinned.</p> |
| |
| </li> |
| |
| <li> |
| <p>Group can be a child of the Scroller control to support scroll |
| bars. Create a skin for the SkinnableContainer to add scroll bars.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>One of the uses of the Group container is to import graphic elements |
| from Adobe<sup>®</sup> design tools. For example, if you use a design tool to |
| create graphics imported into Flex, the graphics are often represented |
| using FXG statements in a Group container. For more information, |
| see <a href="flx_fxg_fx.html#WS145DAB0B-A958-423f-8A01-12B679BA0CC7_verapache">FXG |
| and MXML graphics</a>.</p> |
| |
| <p>The default layout class of the Group and SkinnableContainer |
| container is BasicLayout. The following example shows a Group container |
| with a horizontal layout and one with a vertical layout: </p> |
| |
| <div class="figborder"> |
| <img src="images/gc_sparkform_example1.png" alt="Box container with a horizontal layout and with a vertical layout"/> |
| </div> |
| |
| <p>For complete reference information, see the <em> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe |
| Flash<sup>®</sup> Platform</a> |
| </em>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSA14A96B9-91FC-4f25-A1DD-9236CF34C0F0_verapache"><a name="WSA14A96B9-91FC-4f25-A1DD-9236CF34C0F0_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark Group container</h3> |
| |
| |
| <div> |
| <p> |
| You |
| use the <samp class="codeph"><s:Group></samp> tag to define a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Group.html" target="_blank">Group</a> container. |
| Specify an <samp class="codeph">id</samp> value if you intend to refer to a |
| component elsewhere in your MXML, either in another tag or in an |
| ActionScript block. </p> |
| |
| <p>The following example shows a Group container with four Button |
| controls as its children:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkGroupContainerSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Group> |
| <s:Button label="Button 1" |
| left="10" top="13" bottom="10"/> |
| <s:Button label="Button 2" |
| left="110" top="13" bottom="10"/> |
| <s:Button label="Button 3" |
| left="210" top="13" bottom="10"/> |
| <s:Button label="Button 4" |
| left="310" top="13" bottom="10" right="10"/> |
| </s:Group> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>In this example, the Group container uses its default layout |
| specified by the BasicLayout class, which means it uses absolute |
| layout. The four button controls then use constraints to set their |
| positions in the container. For more information on constraints, |
| see <a href="flx_size_position_sp.html#WS2db454920e96a9e51e63e3d11c0bf69084-7df9_verapache">Using |
| constraints to control component layout </a>.</p> |
| |
| <p>You can add a graphic element to the container to define a background |
| for the buttons, as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkGroupContainerRect.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Group> |
| <s:Rect x="0" y="0" |
| radiusX="4" radiusY="4" |
| height="100%" width="100%"> |
| <s:stroke> |
| <s:LinearGradientStroke weight="1" scaleMode="normal"/> |
| </s:stroke> |
| <s:fill> |
| <s:LinearGradient> |
| <s:entries> |
| <mx:GradientEntry color="0x999999"/> |
| </s:entries> |
| </s:LinearGradient> |
| </s:fill> |
| </s:Rect> |
| <s:Button label="Button 1" |
| left="10" top="13" bottom="10"/> |
| <s:Button label="Button 2" |
| left="110" top="13" bottom="10"/> |
| <s:Button label="Button 3" |
| left="210" top="13" bottom="10"/> |
| <s:Button label="Button 4" |
| left="310" top="13" right="10" bottom="10"/> |
| </s:Group> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>In this example, you add an instance of the Rect class, a subclass |
| of GraphicElement, that defines a gray background and one pixel |
| border around the container. In this example the Rect is located |
| a coordinates 0,0 in the Group container, and sized to fill the |
| entire container. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS8733DA6F-CFF3-46b3-868A-DDB7604556F5_verapache"><a name="WS8733DA6F-CFF3-46b3-868A-DDB7604556F5_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark SkinnableContainer |
| container</h3> |
| |
| |
| <div> |
| <p> |
| You |
| use the <samp class="codeph"><s:SkinnableContainer></samp> tag to define |
| a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnableContainer.html" target="_blank">SkinnableContainer</a> container. |
| Specify an <samp class="codeph">id</samp> value if you intend to refer to a |
| component elsewhere in your MXML, either in another tag or in an |
| ActionScript block. </p> |
| |
| <p>The following example shows a SkinnableContainer container with |
| four Button controls as its children:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkContainerSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:SkinnableContainer> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:SkinnableContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The default layout class of the SkinnableContainer class is BasicLayout. |
| In this example, the SkinnableContainer uses the HorizontalLayout |
| class to arrange the buttons in a single row. </p> |
| |
| <p>If the SkinnableContainer uses BasicLayout, you can use a Rect |
| component as a child of the container to add a background color |
| and border. For an example, see <a href="flx_groups_containers_gc.html#WSA14A96B9-91FC-4f25-A1DD-9236CF34C0F0_verapache">Creating |
| a Spark Group container</a>. </p> |
| |
| <p>However, the SkinnableContainer class lets you apply a skin to |
| define the visual characteristics of the container. For example, |
| the following skin defines a gray background and a one pixel border |
| for the container: </p> |
| |
| <div class="p"> |
| <pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\mySkins\MyBorderSkin.mxml --> |
| <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| alpha.disabled="0.5"> |
| |
| <fx:Metadata> |
| [HostComponent("spark.components.SkinnableContainer")] |
| </fx:Metadata> |
| |
| <!-- Define the skin states. --> |
| <s:states> |
| <s:State name="normal" /> |
| <s:State name="disabled" /> |
| </s:states> |
| |
| <!-- Define a Rect to fill the area of the skin. --> |
| <s:Rect x="0" y="0" |
| radiusX="4" radiusY="4" |
| height="100%" width="100%"> |
| <s:stroke> |
| <s:LinearGradientStroke weight="1"/> |
| </s:stroke> |
| <s:fill> |
| <s:LinearGradient> |
| <s:entries> |
| <mx:GradientEntry color="0x999999"/> |
| </s:entries> |
| </s:LinearGradient> |
| </s:fill> |
| </s:Rect> |
| |
| <!-- Define the content area of the container. --> |
| <s:Group id="contentGroup" |
| left="5" right="5" top="5" bottom="5"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| </s:Group> |
| </s:Skin></pre> |
| |
| </div> |
| |
| <p>All SkinnableContainer skins must implement the view states defined |
| by the SkinnableContainer. Because the SkinnableContainer class |
| supports the normal and disabled view states, the skin must also |
| support them.</p> |
| |
| <p>The Rect component adds the border and gray background to the |
| skin.</p> |
| |
| <p>All the container’s children are added to the <samp class="codeph">contentGroup</samp> skin |
| part of the skin. In this example, the <samp class="codeph">contentGroup</samp> container |
| is a Group container with a vertical layout. Setting the <samp class="codeph">layout</samp> property |
| of the SkinnableContainer overrides the layout specified in the |
| skin.</p> |
| |
| <p>The advantage to defining a skin for the SkinnableContainer, |
| rather than adding the visual elements in the SkinnableContainer |
| definition, is that the skin is reusable. For example, you typically |
| define a consistent look for all SkinnableContainer containers in |
| an application. By encapsulating that look in a reusable skin class, |
| you can apply it to all containers in your application. </p> |
| |
| <p>Use the <samp class="codeph">skinClass</samp> property to apply the skin |
| to the SkinnableContainer, as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkContainerSkin.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:SkinnableContainer |
| skinClass="mySkins.MyBorderSkin"> |
| <s:layout> |
| <s:HorizontalLayout gap="10"/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:SkinnableContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information on skinning, see <a href="flx_gumboskinning_gs.html#WS53116913-F952-4b21-831F-9DE85B647C8A_verapache">Spark |
| Skinning</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS03d33b8076db57b9466e6a52123e854e5d5-8000_verapache"><a name="WS03d33b8076db57b9466e6a52123e854e5d5-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark BorderContainer container</h2> |
| |
| |
| <div> |
| <p>To change the visible appearance of a SkinnableContainer, |
| create a custom skin. However, to make it simple to add a border |
| or change the background of a container, Flex defines the Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/BorderContainer.html" target="_blank">BorderContainer</a> container |
| as a subclass of the SkinnableContainer. The BorderContainer container |
| provides a set of CSS styles and class properties to control the |
| border and background of the container. </p> |
| |
| <div class="p"> |
| <div class="note"><span class="notetitle">Note:</span> Because you use CSS styles and class properties to control |
| the appearance of the BorderContainer container, you typically do |
| not create a custom skin for it. If you do create a custom skin, |
| your skin class should apply any styles to control the appearance |
| of the container.</div> |
| |
| </div> |
| |
| <div class="p">The following example uses the <samp class="codeph">backgroundColor</samp>, <samp class="codeph">borderStyle</samp>, <samp class="codeph">borderWeight</samp>, |
| and <samp class="codeph">cornerRadius</samp> styles of the BorderContainer |
| container to control the appearance of the BorderContainer container: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkBorderSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:BorderContainer |
| backgroundColor="red" cornerRadius="10" |
| borderStyle="inset" borderWeight="4" > |
| <s:layout> |
| <s:HorizontalLayout |
| paddingLeft="5" paddingRight="5" |
| paddingTop="5" paddingBottom="5"/> |
| </s:layout> |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:BorderContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">Use the <samp class="codeph">backgroundImage</samp> style to specify an |
| image as the background of the container, as the following example |
| shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkBorderImage.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <fx:Script> |
| <![CDATA[ |
| [Embed(source="/assets/logo.jpg")] |
| [Bindable] |
| public var imgCls:Class; |
| ]]> |
| </fx:Script> |
| |
| <s:BorderContainer |
| backgroundImage="{imgCls}" |
| borderStyle="inset" borderWeight="2" |
| width="150" height="180"> |
| </s:BorderContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The BorderContainer container defines two properties that also |
| let you control the appearance of the container: <ul> |
| <li> |
| <p>The <samp class="codeph">backgroundFill</samp> property, |
| of type IFill, defines the fill of the container. If you set the <samp class="codeph">backgroundFill</samp> property, |
| then the container ignores the <samp class="codeph">backgroundAlpha</samp>, <samp class="codeph">backgroundColor</samp>, <samp class="codeph">backgroundImage</samp>, |
| and <samp class="codeph">backgroundImageResizeMode</samp> styles.</p> |
| |
| </li> |
| |
| <li> |
| <p>The <samp class="codeph">borderStroke</samp> property, of type IStroke, |
| defines the stroke of the border. If you set the <samp class="codeph">borderStroke</samp> property, |
| then the container ignores the <samp class="codeph">borderAlpha</samp>, <samp class="codeph">borderColor</samp>, <samp class="codeph">borderStyle</samp>, <samp class="codeph">borderVisible</samp>, and <samp class="codeph">borderWeight</samp> styles.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="p">The following example sets the <samp class="codeph">backgroundFill</samp> and <samp class="codeph">borderStroke</samp> properties: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkBorderFillStroke.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:BorderContainer cornerRadius="10"> |
| <s:layout> |
| <s:HorizontalLayout |
| paddingLeft="5" paddingRight="5" |
| paddingTop="5" paddingBottom="5"/> |
| </s:layout> |
| <s:backgroundFill> |
| <s:SolidColor |
| color="red" |
| alpha="100"/> |
| </s:backgroundFill> |
| <s:borderStroke> |
| <mx:SolidColorStroke |
| color="black" |
| weight="3"/> |
| </s:borderStroke> |
| |
| <s:Button label="Button 1"/> |
| <s:Button label="Button 2"/> |
| <s:Button label="Button 3"/> |
| <s:Button label="Button 4"/> |
| </s:BorderContainer> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>Because the BorderContainer container does not implement the |
| IViewport interface, it does not directly support scroll bars. However, |
| you can wrap the Scroller control inside the BorderContainer container |
| to add scroll bars, as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkScrollBorder.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" > |
| |
| <s:BorderContainer width="100" height="100" |
| borderWeight="3" borderStyle="solid"> |
| <s:Scroller width="100%" height="100%"> |
| <s:Group |
| horizontalScrollPosition="50" |
| verticalScrollPosition="50"> |
| <s:Image width="300" height="400" |
| source="@Embed(source='/assets/logo.jpg')"/> |
| </s:Group> |
| </s:Scroller> |
| </s:BorderContainer> |
| </s:Application> </pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSb96f4baaef289fcf-2107ed10123b8e266e7-8000_verapache"><a name="WSb96f4baaef289fcf-2107ed10123b8e266e7-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark NavigatorContent container</h2> |
| |
| |
| <div> |
| <div class="p">The MX navigator containers include the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/Accordion.html" target="_blank">Accordion</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/TabNavigator.html" target="_blank">TabNavigator</a>, |
| and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/containers/ViewStack.html" target="_blank">ViewStack</a> containers. |
| Navigator containers let users switch between multiple children, |
| where the children are other containers. The child containers of |
| a navigator can be any MX container and the Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/NavigatorContent.html" target="_blank">NavigatorContent</a> container.<div class="note"><span class="notetitle">Note:</span> You |
| cannot use Spark containers other than NavigatorContent as a child |
| of an MX navigator container. To use any other Spark container in |
| a navigator container, wrap it in an MX container or in the Spark |
| NavigatorContent container.</div> |
| |
| </div> |
| |
| <p>For more information on MX navigator containers, see <a href="flx_navigators_na.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb9_verapache">MX |
| navigator containers</a>.</p> |
| |
| <p>Do not use a NavigatorContent container outside an MX navigator |
| container. A NavigatorContent must be the child of an MX navigator |
| container, as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkNavContent.mxml --> |
| <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/mx"> |
| |
| <mx:Accordion> |
| <s:NavigatorContent label="Pane 1" |
| width="100" height="100"> |
| <s:layout> |
| <s:VerticalLayout paddingTop="10" paddingLeft="5"/> |
| </s:layout> |
| <s:Label text="Text for Pane 1"/> |
| <s:Button label="Button 1"/> |
| </s:NavigatorContent> |
| <s:NavigatorContent label="Pane 2" |
| width="100" height="100"> |
| <s:layout> |
| <s:VerticalLayout paddingTop="10" paddingLeft="5"/> |
| </s:layout> |
| <s:Label text="Text for Pane 2"/> |
| <s:Button label="Button 2"/> |
| </s:NavigatorContent> |
| <s:NavigatorContent label="Pane 3" |
| width="100" height="100"> |
| <s:layout> |
| <s:VerticalLayout paddingTop="10" paddingLeft="5"/> |
| </s:layout> |
| <s:Label text="Text for Pane 3"/> |
| <s:Button label="Button 3"/> |
| </s:NavigatorContent> |
| </mx:Accordion> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The value of the <samp class="codeph">label</samp> property of each NavigatorContent |
| child of the Accordion container defines the text that appears in |
| the button area of the Accordion. You can use the <samp class="codeph">NavigatorContent.icon</samp> property |
| to specify an icon in the button area.</p> |
| |
| <div class="p">The creation policy of the NavigatorContent container is based |
| on the creation policy of its parent navigator container, as the |
| following table shows: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e1822"> |
| <p>Creation policy of the parent navigator |
| container</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e1828"> |
| <p>Creation policy of the NavigatorContent |
| container</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e1822 "> |
| <p>none</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e1828 "> |
| <p>none</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e1822 "> |
| <p>all</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e1828 "> |
| <p>all</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e1822 "> |
| <p>auto</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e1828 "> |
| <p>none</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>For information on creation policy, see <a href="flx_containers_intro_cn.html#WS2FCF2174-EFDB-4d01-8D29-5A964D794ADA_verapache">About |
| the creation policy</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS842193BB-33E4-4bdc-9FD8-D76515B11FAE_verapache"><a name="WS842193BB-33E4-4bdc-9FD8-D76515B11FAE_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark Panel container</h2> |
| |
| |
| <div> |
| <p>A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Panel.html" target="_blank">Panel</a> container |
| includes a title bar, a title, a border, and a content area for |
| its children. Typically, you use Panel containers to wrap self-contained |
| application modules. For example, you could define several Panel |
| containers in your application where one Panel container holds a |
| form, a second holds a shopping cart, and a third holds a catalog. </p> |
| |
| <div class="p">The default layout class of the Panel container is BasicLayout. |
| The following example shows a Panel container with a vertical layout: <div class="figborder"> |
| <img src="images/fx_fxpanel_gc.png"/> |
| </div> |
| |
| </div> |
| |
| <p>For complete reference information, see the <em> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe |
| Flash Platform</a> |
| </em>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSF8717C6C-B07E-4af0-B68D-29D216F3EA06_verapache"><a name="WSF8717C6C-B07E-4af0-B68D-29D216F3EA06_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark Panel container</h3> |
| |
| |
| <div> |
| <p> |
| You |
| use the <samp class="codeph"><s:Panel></samp> tag to define a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Panel.html" target="_blank">Panel</a> container. |
| Specify an <samp class="codeph">id</samp> value if you intend to refer to a |
| component elsewhere in your MXML, either in another tag or in an |
| ActionScript block. </p> |
| |
| <p>The following example defines a Panel container that contains |
| a form as the top-level container in your application. In this example, |
| the Panel container provides you with a mechanism for including |
| a title bar, as in a standard GUI window. </p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkPanelSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" > |
| <s:Panel id="myPanel" title="My Application" x="20" y="20"> |
| <s:Form id="myForm" width="400"> |
| |
| <s:FormHeading label="Billing Information"/> |
| |
| <s:FormItem label="First Name"> |
| <s:TextInput id="fname" width="100%"/> |
| </s:FormItem> |
| |
| <s:FormItem label="Last Name"> |
| <s:TextInput id="lname" width="100%"/> |
| </s:FormItem> |
| |
| <s:FormItem label="Address"> |
| <s:TextInput id="addr1" width="100%"/> |
| <s:TextInput id="addr2" width="100%"/> |
| </s:FormItem> |
| <s:FormItem label="City"> |
| <s:TextInput id="city"/> |
| </s:FormItem> |
| |
| <s:FormItem label="State"> |
| <s:TextInput id="state"/> |
| </s:FormItem> |
| |
| <s:FormItem label="ZIP Code"> |
| <s:TextInput id="zip" width="100"/> |
| </s:FormItem> |
| |
| <s:FormItem> |
| <mx:HRule width="200" height="1"/> |
| <s:Button label="Submit Form"/> |
| </s:FormItem> |
| </s:Form> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSf483dfc8184fc259-579c9e69123cd5f6b65-8000_verapache"><a name="WSf483dfc8184fc259-579c9e69123cd5f6b65-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Adding a control bar to the Spark |
| Panel container</h3> |
| |
| |
| <div> |
| <p>A control bar contains a group of controls outside the |
| main content area of a Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Panel.html" target="_blank">Panel</a> container. |
| The control bar is always visible at the bottom of the Panel container. |
| Therefore, if the Panel container uses scroll bars, the control |
| bar is not scrolled along with the other container children. </p> |
| |
| <div class="p">Set the <samp class="codeph">controlBarVisible</samp> property to <samp class="codeph">true</samp> (the |
| default value) to make the control bar visible. You use the <samp class="codeph">Panel.controlBarContent</samp> property |
| to define the controls that appear in the control bar area, as the |
| following example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkPanelCB.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| width="750"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.controls.Alert; |
| ]]> |
| </fx:Script> |
| |
| <fx:Declarations> |
| <fx:XMLList id="menuXML"> |
| <fx:menuitem label="File"> |
| <fx:menuitem label="New" data="New"/> |
| <fx:menuitem label="Open" data="Open"/> |
| <fx:menuitem label="Save" data="Save"/> |
| <fx:menuitem label="Exit" data="Exit"/> |
| </fx:menuitem> |
| <fx:menuitem label="Edit"> |
| <fx:menuitem label="Cut" data="Cut"/> |
| <fx:menuitem label="Copy" data="Copy"/> |
| <fx:menuitem label="Paste" data="Paste"/> |
| </fx:menuitem> |
| <fx:menuitem label="View"/> |
| </fx:XMLList> |
| |
| <fx:Array id="cmbDP"> |
| <fx:String>Item 1</fx:String> |
| <fx:String>Item 2</fx:String> |
| <fx:String>Item 3</fx:String> |
| </fx:Array> |
| </fx:Declarations> |
| |
| <s:Panel title="Spark Panel"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <s:controlBarContent> |
| <mx:MenuBar height="100%" |
| dataProvider="{menuXML}" |
| labelField="@label" |
| showRoot="true"/> |
| <mx:HBox paddingBottom="5" |
| paddingTop="5"> |
| <mx:ComboBox dataProvider="{cmbDP}"/> |
| <mx:Spacer width="100%"/> |
| <mx:TextInput id="myTI" text=""/> |
| <mx:Button id="srch1" |
| label="Search" |
| click="Alert.show('Searching');"/> |
| </mx:HBox> |
| </s:controlBarContent> |
| <s:Button label="Button"/> |
| <s:TextArea width="300" height="200"/> |
| </s:Panel> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>By default, the controls in the control bar area use horizontal |
| layout. Use the <samp class="codeph">Panel.controlBarLayout</samp> property |
| to specify a different layout, as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><s:controlBarLayout> |
| <s:HorizontalLayout paddingLeft="12" gap="5"/> |
| </s:controlBarLayout></pre> |
| |
| </div> |
| |
| <p>The location and appearance of the control bar area of the Panel |
| container is determined by the spark.skins.spark.PanelSkin class, |
| the skin class for the Panel container. By default, the PanelSkin |
| class defines the control bar area to appear at the bottom of the |
| content area of the Panel container with a grey background. Create |
| a custom skin to change the default appearance of the control bar.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS67cd75b2532ad652-1abb110512d5bda966d-8000_verapache"><a name="WS67cd75b2532ad652-1abb110512d5bda966d-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark SkinnablePopUpContainer container</h2> |
| |
| |
| <div> |
| <p>You use the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnablePopUpContainer.html" target="_blank">SkinnablePopUpContainer</a> container |
| as a pop-up in your application. One typical use for a SkinnablePopUpContainer |
| container is to open a simple window in an application, such as |
| an alert window, to indicate that the user must perform some action.</p> |
| |
| <p>The SkinnablePopUpContainer container can be modal or nonmodal. |
| A modal container takes all keyboard and mouse input until it is |
| closed. A nonmodal container lets other components accept input |
| while the pop-up window is open. </p> |
| |
| <p>Flex also defines the Spark TitleWindow container that you can |
| use as a pop-up. A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TitleWindow.html" target="_blank">TitleWindow</a> container |
| consists of a title bar, a caption and status area in the title |
| bar, a border, content area, and optional close button. Users can |
| drag the TitleWindow container to move it around the application |
| window. For more information, see <a href="flx_groups_containers_gc.html#WS6c678f7b363d5da52e8f1ca1124a0430dcf-8000_verapache">The |
| Spark TitleWindow container</a>.</p> |
| |
| <p>Unlike the TitleWindow container, the SkinnablePopUpContainer |
| does not support dragging. It is a light-weight container that you |
| use for simple pop-ups. You can define a custom skin class to control |
| the visual aspects of the SkinnablePopUpContainer, such as the transitions |
| and effects that play when the container opens and closes. </p> |
| |
| </div> |
| |
| <div class="nested2" id="WSf50d443f3931dfaa684f795512d5c798aa6-7ffe_verapache"><a name="WSf50d443f3931dfaa684f795512d5c798aa6-7ffe_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a simple Spark SkinnablePopUpContainer container</h3> |
| |
| |
| <div> |
| <p>The <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnablePopUpContainer.html" target="_blank">SkinnablePopUpContainer</a> container |
| appears as a pop-up window on top of its parent container. Therefore, |
| you do not create a SkinnablePopUpContainer container as part of |
| the normal MXML layout code of its parent container. </p> |
| |
| <div class="p">Instead, you can define the SkinnablePopUpContainer container |
| as a custom MXML component in an MXML file. In the following example, |
| you define it in the file MyAlertPopUp.mxml: <pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\myComponents\MyAlertPopUp.mxml --> |
| <s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"> |
| |
| <s:Panel title="My Alert Panel"> |
| <s:VGroup width="100%" horizontalAlign="center" |
| paddingTop="20" gap="20"> |
| <s:Label text="Your custom alert box"/> |
| <s:Button label="OK" click="close();"/> |
| </s:VGroup> |
| </s:Panel> |
| |
| </s:SkinnablePopUpContainer></pre> |
| |
| </div> |
| |
| <p>The MyAlertPopUp.mxml component creates a SkinnablePopUpContainer |
| that contains a Panel container. Notice that the Button control |
| calls the <samp class="codeph">close()</samp> method to close the pop-up. </p> |
| |
| <div class="p">At runtime, you create an instance of the SkinnablePopUpContainer |
| in ActionScript, then call the following methods of the SkinnablePopUpContainer |
| class to open and close it: <ul> |
| <li> |
| <p> |
| <samp class="codeph">open()</samp> |
| </p> |
| |
| <p>Opens |
| a SkinnablePopUpContainer container. The <samp class="codeph">open()</samp> method |
| takes two arguments: the first specifies the parent container of |
| the SkinnablePopUpContainer container, and the second specifies |
| if the container is modal. </p> |
| |
| <p>Opening the SkinnablePopUpContainer |
| container dispatches the <samp class="codeph">open</samp> event.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">close()</samp> |
| </p> |
| |
| <p>Closes a SkinnablePopUpContainer |
| container. The <samp class="codeph">close()</samp> method takes two arguments: |
| the first specifies whether the container passes back any data to |
| the main application, and the second specifies an object containing |
| the returned data.</p> |
| |
| <p>Closing the SkinnablePopUpContainer container |
| dispatches the <samp class="codeph">close</samp> event.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The following example shows the main application file that uses |
| MyAlertPopUp.mxml:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkSkinnablePopUpContainerComponents.mxml --> |
| <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/mx"> |
| |
| <fx:Script> |
| <![CDATA[ |
| // Import the MyAlertPopUp class. |
| import myComponents.MyAlertPopUp; |
| |
| // Create an instance of MyAlertPopUp. |
| public var alertDB:MyAlertPopUp = new MyAlertPopUp(); |
| ]]> |
| </fx:Script> |
| |
| <!-- Open the MyAlertPopUp instance. --> |
| <s:Button label="Open Alert" click="alertDB.open(this, false);"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>In this application, you first import the MyAlertPopUp component, |
| then create an instance of it. The Button control calls the <samp class="codeph">open()</samp> method |
| to open the pop-up in response to a <samp class="codeph">click</samp> event. </p> |
| |
| <p>The first argument to the <samp class="codeph">open()</samp> method specifies <samp class="codeph">this</samp>. |
| Therefore, the parent container of the SkinnablePopUpContainer container |
| is the Application container. The second argument is <samp class="codeph">false</samp> to |
| specify a nonmodal window. </p> |
| |
| <p>In this example, the application creates a single instance of |
| the MyAlertPopUp component. It then reuses that instance every time |
| the user selects the Button control. Therefore, the pop-up component |
| stays in memory between uses.</p> |
| |
| <p>If the pop-up component is large, or you want to reduce the memory |
| use of the application, create a new instance of the component for |
| each pop-up. The component is then destroyed when it closes. However, |
| make sure to remove all references to the components, especially |
| event handlers, or else the component is not destroyed. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSf50d443f3931dfaa684f795512d5c798aa6-7fff_verapache"><a name="WSf50d443f3931dfaa684f795512d5c798aa6-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating an inline Spark SkinnablePopUpContainer container</h3> |
| |
| |
| <div> |
| <div class="p">You do not have to define the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnablePopUpContainer.html" target="_blank">SkinnablePopUpContainer</a> container |
| in a separate file. The following example uses the <samp class="codeph"><fx:Declaration></samp> tag |
| to define an inline component: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkSkinnablePopUpContainerSimple.mxml --> |
| <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/mx"> |
| |
| <fx:Declarations> |
| <fx:Component className="MyAlert"> |
| <s:SkinnablePopUpContainer> |
| <s:Panel title="My Alert Panel"> |
| <s:VGroup width="100%" horizontalAlign="center" |
| paddingTop="20" gap="20"> |
| <s:Label text="Your custom alert box"/> |
| <s:Button label="OK" click="close();"/> |
| </s:VGroup> |
| </s:Panel> |
| </s:SkinnablePopUpContainer> |
| </fx:Component> |
| </fx:Declarations> |
| |
| <s:Button label="Open Alert" click="(new MyAlert()).open(this, false);"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The <samp class="codeph"><fx:Component></samp> tag defines a class |
| named MyAlert. Notice that the <samp class="codeph">click</samp> event handler |
| for the Button control first creates a new instance of the MyAlert |
| class, then opens the pop-up.</p> |
| |
| <div class="p">Alternatively, you could write the inline component so that it |
| creates a single instance of the pop-up that is reused every time, |
| as the following example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkSkinnablePopUpContainerInlineReuse.mxml --> |
| <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/mx"> |
| |
| <fx:Declarations> |
| <s:SkinnablePopUpContainer id="alert"> |
| <s:Panel title="My Alert Panel"> |
| <s:VGroup width="100%" horizontalAlign="center" |
| paddingTop="20" gap="20"> |
| <s:Label text="Your custom alert box"/> |
| <s:Button label="OK" click="alert.close();"/> |
| </s:VGroup> |
| </s:Panel> |
| </s:SkinnablePopUpContainer> |
| </fx:Declarations> |
| |
| <s:Button label="Open Alert" click="alert.open(this, false);"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSa9bb02ff9fb4d2883376b64012d60ed7612-8000_verapache"><a name="WSa9bb02ff9fb4d2883376b64012d60ed7612-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Controlling the pop-up window</h3> |
| |
| |
| <div> |
| <div class="p">You can use properties of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnablePopUpContainer.html" target="_blank">SkinnablePopUpContainer</a> and |
| the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManager.html" target="_blank">mx.managers.PopUpManager</a> class |
| to control the pop-up window. In the following example, you modify |
| the width and height of the pop-up by setting properties of the |
| SkinnablePopUpContainer. You then use the <samp class="codeph">PopUpManager.centerPopUp()</samp> method |
| to center it in its parent container: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkSkinnablePopUpContainerMoveResize.mxml --> |
| <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/mx"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.collections.ArrayCollection; |
| import mx.managers.PopUpManager; |
| |
| protected function button1_clickHandler(event:MouseEvent):void { |
| |
| // Create an instance of MyAlert. |
| var alert:MyAlert = new MyAlert(); |
| alert.open(this, true); |
| |
| // Increase the width and height. |
| alert.width += 100; |
| alert.height += 100; |
| |
| // Center the pop-up in the parent container. |
| PopUpManager.centerPopUp(alert); |
| } |
| ]]> |
| </fx:Script> |
| |
| <fx:Declarations> |
| <fx:Component className="MyAlert"> |
| <s:SkinnablePopUpContainer> |
| <s:Panel title="My Alert Panel" width="100%" height="100%"> |
| <s:VGroup width="100%" horizontalAlign="center" |
| paddingTop="20" gap="20"> |
| <s:Label text="Your custom alert box"/> |
| <s:Button label="OK" click="close();"/> |
| </s:VGroup> |
| </s:Panel> |
| </s:SkinnablePopUpContainer> |
| </fx:Component> |
| </fx:Declarations> |
| |
| <s:Button label="Open Alert SMG" click="button1_clickHandler(event);"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSf50d443f3931dfaa684f795512d5c798aa6-8000_verapache"><a name="WSf50d443f3931dfaa684f795512d5c798aa6-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Passing data back from the Spark SkinnablePopUpContainer |
| container</h3> |
| |
| |
| <div> |
| <p>Use the <samp class="codeph">close()</samp> method of the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnablePopUpContainer.html" target="_blank">SkinnablePopUpContainer</a> container |
| to pass data back to the main application from the pop-up. The <samp class="codeph">close()</samp> method |
| has the following signature:</p> |
| |
| <div class="p"> |
| <pre class="codeblock">public function close(commit:Boolean = false, data:*):void</pre> |
| |
| </div> |
| |
| <div class="p">where: <ul> |
| <li> |
| <p> |
| <samp class="codeph">commit</samp> contains <samp class="codeph">true</samp> if |
| the returned data should be committed by the application.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">data</samp> specifies the returned data.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The <samp class="codeph">close()</samp> method dispatches the <samp class="codeph">close</samp> event. |
| The event object associated with the <samp class="codeph">close</samp> event |
| is an object of type spark.events.PopUpEvent. </p> |
| |
| <p>The PopUpEvent class defines two properties, <samp class="codeph">commit</samp> and <samp class="codeph">data</samp>, |
| that contain the values of the corresponding arguments to the <samp class="codeph">close()</samp> method. |
| In the event handler of the <samp class="codeph">close</samp> event, you use |
| these properties to inspect any data returned from the pop-up.</p> |
| |
| <div class="p">The following example of the Spark SkinnablePopUpContainer contains |
| a List control. If the user selects an item in the List, then the <samp class="codeph">close()</samp> method |
| passes that value back to the main application. If the user select |
| the Cancel button, the <samp class="codeph">close()</samp> method returns nothing:, <pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\myComponents\MyAlertPopUpReturn.mxml --> |
| <s:SkinnablePopUpContainer xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import spark.events.IndexChangeEvent; |
| |
| // Event handler for the change event of the List control. |
| protected function list1_changeHandler(event:IndexChangeEvent):void { |
| // Close the SkinnablePopUpContainer. |
| // Set the commit argument to true to indicate that the |
| // data argument contians a vaild value. |
| close(true, list1.selectedItem); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:Panel title="My Alert Panel"> |
| <s:VGroup width="100%" horizontalAlign="center" |
| paddingTop="20" gap="20"> |
| |
| <s:List id="list1" width="100%" height="100%" |
| change="list1_changeHandler(event);"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <s:dataProvider> |
| <s:ArrayCollection source="{['Add', 'Delete', 'Post', 'Bookmark']}"/> |
| </s:dataProvider> |
| </s:List> |
| |
| <s:Button label="Cancel" click="close();"/> |
| </s:VGroup> |
| </s:Panel> |
| |
| </s:SkinnablePopUpContainer></pre> |
| |
| </div> |
| |
| <div class="p">Shown below is the main application that uses this component: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkSkinnablePopUpContainerReturn.mxml --> |
| <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/mx"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| // Import the MyAlertPopUp class. |
| import myComponents.MyAlertPopUpReturn; |
| import spark.events.PopUpEvent; |
| |
| // Create and open the SkinnablePopUpContainer. |
| protected function button1_clickHandler(event:MouseEvent):void { |
| // Create an instance of MyAlertPopUp. |
| var alertDB:MyAlertPopUpReturn = new MyAlertPopUpReturn(); |
| |
| // Add an event handler for the close event to check for |
| // any returned data. |
| alertDB.addEventListener('close', alertDB_closeHandler); |
| alertDB.open(this, true); |
| } |
| |
| // Handle the close event from the SkinnablePopUpContainer. |
| protected function alertDB_closeHandler(event:PopUpEvent):void { |
| // If commit is false, do data is returned. |
| if (!event.commit) |
| return; |
| |
| // Write the returned String to the TextArea control. |
| myTA.text = event.data as String; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:Button label="Open Alert" click="button1_clickHandler(event);"/> |
| <s:TextArea id="myTA"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>This application uses the <samp class="codeph">click</samp> event of the |
| Button control to open the SkinnablePopUpContainer. The event handler |
| for the <samp class="codeph">click</samp> event creates an instance of the |
| MyAlertPopUpReturn components, and then adds an event listener for |
| the component’s <samp class="codeph">close</samp> event. </p> |
| |
| <p>The event handler for the <samp class="codeph">close</samp> event examines |
| the <samp class="codeph">commit</samp> property of the event object. If the <samp class="codeph">commit</samp> property |
| is <samp class="codeph">true</samp>, the data returned from the MyAlertPopUpReturn |
| component is written to the TextArea control. </p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS6c678f7b363d5da52e8f1ca1124a0430dcf-8000_verapache"><a name="WS6c678f7b363d5da52e8f1ca1124a0430dcf-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark TitleWindow container</h2> |
| |
| |
| <div> |
| <p>A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TitleWindow.html" target="_blank">TitleWindow</a> layout |
| container is a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Panel.html" target="_blank">Panel</a> container |
| that is optimized for use as a pop-up window. The container consists |
| of a title bar, a caption and status area in the title bar, a border, |
| and a content area for its children. Unlike the Panel container, |
| it can display a close button. The TitleWindow container is designed |
| to work as a pop-up window that users can drag around the screen |
| the application window.</p> |
| |
| <p> |
| <strong>Modality</strong> |
| </p> |
| |
| <p>A pop-up TitleWindow container can be <em>modal</em>, which means |
| that it takes all keyboard and mouse input until it is closed, or <em>nonmodal</em>, |
| which means other windows can accept input while the pop-up window |
| is still open. </p> |
| |
| <p> |
| <strong>Forms</strong> |
| </p> |
| |
| <p> |
| |
| One |
| typical use for a TitleWindow container is to hold a form. When |
| the user completes the form, you can close the TitleWindow container |
| programmatically, or let the user request the application to close |
| it by using the close icon (a box with an <em>x</em> inside it) in |
| the upper-right corner of the window. </p> |
| |
| <p> |
| <strong>PopUpManager</strong> |
| </p> |
| |
| <p> |
| Because |
| you pop up a TitleWindow, you do not create it directly in MXML, |
| as you do most controls. Instead you use the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManager.html" target="_blank">PopUpManager</a> to |
| open a TitleWindow container.</p> |
| |
| <p> |
| <strong>SkinnablePopUpContainer</strong> |
| </p> |
| |
| <p>Flex also defines the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnablePopUpContainer.html" target="_blank">SkinnablePopUpContainer</a> container. |
| Unlike the TitleWindow container, the SkinnablePopUpContainer does |
| not support dragging. It is a light-weight container that you use |
| for simple pop ups. You can define a custom skin class to control |
| the visual aspects of the SkinnablePopUpContainer, such as the transitions |
| and effects that play when the container opens and closes. For more |
| information, see <a href="flx_groups_containers_gc.html#WS67cd75b2532ad652-1abb110512d5bda966d-8000_verapache">The |
| Spark SkinnablePopUpContainer container</a>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS6c678f7b363d5da52e8f1ca1124a0430dcf-7fff_verapache"><a name="WS6c678f7b363d5da52e8f1ca1124a0430dcf-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using the PopUpManager to create |
| a Spark TitleWindow container</h3> |
| |
| |
| <div> |
| <p>To create and remove a pop-up TitleWindow container, you |
| use methods of the PopUpManager. The PopUpManager is in the mx.managers |
| package.</p> |
| |
| <div class="section"><h4 class="sectiontitle">Creating and deleting Spark pop-up window</h4> |
| |
| <p> |
| |
| |
| To create a pop-up window, use the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/managers/PopUpManager.html" target="_blank">PopUpManager</a> |
| <samp class="codeph"> createPopUp()</samp> method. |
| The <samp class="codeph">createPopUp()</samp> method has the following signature:</p> |
| |
| <pre class="codeblock"> public static createPopUp(<em>parent</em>:DisplayObject, <em>class</em>:Class, |
| <em>modal</em>:Boolean = false):IFlexDisplayObject</pre> |
| |
| <p>The |
| method takes the following arguments.</p> |
| |
| |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e2550"> |
| <p>Argument</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e2556"> |
| <p>Description</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2550 "> |
| <p> |
| <samp class="codeph"> |
| <em>parent</em> |
| </samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2556 "> |
| <p>A reference to a window to pop-up over.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2550 "> |
| <p> |
| <samp class="codeph"> |
| <em>class</em> |
| </samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2556 "> |
| <p>A reference to the class of object you want |
| to create. This is typically a custom MXML component that implements a |
| Spark or MX TitleWindow container. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2550 "> |
| <p> |
| <samp class="codeph"> |
| <em>modal</em> |
| </samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2556 "> |
| <p>(Optional) A Boolean value that indicates |
| whether the window is modal, and takes all keyboard and mouse input until |
| it is closed (<samp class="codeph">true</samp>), or whether interaction is |
| allowed with other controls while the window is displayed (<samp class="codeph">false</samp>). |
| The default value is <samp class="codeph">false</samp>. </p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <div class="note"><span class="notetitle">Note:</span> Flex continues executing |
| code in the parent even after you create a modal pop-up window. </div> |
| |
| <p>You |
| use the <samp class="codeph">createPopUp()</samp> method to create a pop-up |
| window from a component definition. Typically, that means you have |
| created an MXML component based on the TitleWindow container that |
| defines your pop-up window. You can also create a pop-up window |
| by passing an instance of a TitleWindow class or custom component |
| to the PopUpManager <samp class="codeph">addPopUp()</samp> method. </p> |
| |
| <p>To |
| remove a pop-up window, use the PopUpManager <samp class="codeph">removePopUp()</samp> method. |
| Pass the object created with the <samp class="codeph">createPopUp()</samp> method |
| or the <samp class="codeph">addPopUp()</samp> method to the <samp class="codeph">removePopUp()</samp> method. </p> |
| |
| </div> |
| |
| <div class="section"><h4 class="sectiontitle">Defining a custom Spark TitleWindow component</h4> |
| |
| <p>One |
| of the most common ways of creating a TitleWindow container is to |
| define it as a custom MXML component. Define the TitleWindow container, |
| its event handlers, and all of its children in the custom component. |
| Then, use the PopUpManager <samp class="codeph">createPopUp()</samp> and <samp class="codeph">removePopUp()</samp> methods |
| to create and remove the TitleWindow container.</p> |
| |
| <div class="p">The following |
| example code defines a custom MyLoginForm TitleWindow component |
| that is used as a pop-up window:<pre class="noswf"><?xml version="1.0"?> |
| <!-- containers\spark\myComponents\MyLoginForm.mxml --> |
| <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| close="handleCloseEvent();"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.managers.PopUpManager; |
| |
| // Handle the close button and Cancel button. |
| private function handleCloseEvent():void { |
| PopUpManager.removePopUp(this); |
| } |
| |
| // Handle the OK button. |
| private function processLogin():void { |
| // Check credentials (not shown) then remove pop up. |
| PopUpManager.removePopUp(this); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:Form> |
| <s:FormItem label="User Name"> |
| <s:TextInput id="username" width="100%"/> |
| </s:FormItem> |
| <s:FormItem label="Password"> |
| <s:TextInput id="password" |
| displayAsPassword="true" |
| width="100%"/> |
| </s:FormItem> |
| </s:Form> |
| <s:HGroup> |
| <s:Button label="OK" |
| click="processLogin();" /> |
| <s:Button label="Cancel" |
| click="handleCloseEvent();"/> |
| </s:HGroup> |
| </s:TitleWindow></pre> |
| |
| </div> |
| |
| <p>This file, named MyLoginForm.mxml, |
| defines a TitleWindow container by using the <samp class="codeph"><s:TitleWindow></samp> tag. |
| The TitleWindow container defines a Form container with two TextInput |
| controls for user name and password. It also defines two Button |
| controls for submitting the form and for closing the TitleWindow container. |
| This example does not include the code for verifying the user name and |
| password in the <samp class="codeph">submitForm()</samp> event listener.</p> |
| |
| <p>In |
| this example, you process the form data in an event listener of |
| the MyLoginForm.mxml component. To make this component more reusable, |
| you can define the event listeners in your main application. This |
| lets you create a generic form that leaves the data handling to |
| the application that uses the form. </p> |
| |
| <p> |
| <strong>Close icon</strong> |
| </p> |
| |
| <p>By |
| default, the TitleWindow container displays a close icon (a small <em>x</em> in |
| the upper-right corner of the TitleWindow title bar) to make it |
| appear similar to dialog boxes in a GUI environment. </p> |
| |
| <p> |
| <strong>Close event</strong> |
| </p> |
| |
| <p>The |
| TitleWindow broadcasts a <samp class="codeph">close</samp> event when the user |
| clicks the close icon. Flex does not close the window automatically. |
| Create a handler for that event and close the TitleWindow from within |
| that event handler. In the MyLoginForm.mxml component, you use the |
| same event handler for the close and Cancel buttons. You can create |
| a skin file for the TitleWindow to hide the close button, or set |
| the visible property of the close button to <samp class="codeph">false</samp>. </p> |
| |
| </div> |
| |
| <div class="section"><h4 class="sectiontitle">Using the PopUpManager.createPopUp() method to create |
| the pop-up Spark TitleWindow</h4> |
| |
| <div class="p">To create a pop-up window, |
| you call the PopUpManager <samp class="codeph">createPopUp()</samp> method |
| and pass it the parent, the name of the class that creates the pop-up, |
| and the modal Boolean value. The following main application code |
| creates the TitleWindow container defined in the previous section: <pre class="codeblock"><?xml version="1.0"?> |
| <!-- containers\spark\SparkMainMyLoginForm.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.managers.PopUpManager; |
| import spark.components.TitleWindow; |
| import myComponents.MyLoginForm; |
| |
| // Open the pop-up window. |
| private function showLogin():void { |
| // Create a non-modal TitleWindow container. |
| var helpWindow:TitleWindow= |
| PopUpManager.createPopUp(this, MyLoginForm, false) as TitleWindow; |
| PopUpManager.centerPopUp(helpWindow); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:VGroup width="300" height="300"> |
| <s:Button label="Login" |
| click="showLogin();"/> |
| </s:VGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p> |
| In this example, when |
| the user selects the Login button, the event listener for the <samp class="codeph">click</samp> event |
| uses the <samp class="codeph">createPopUp()</samp> method to create a TitleWindow container, |
| passing to it the name of the MyLoginForm.mxml file as the class name. </p> |
| |
| <div class="p">By |
| casting the return value of the <samp class="codeph">createPopUp()</samp> method |
| to TitleWindow, you can manipulate the properties of the pop-up |
| TitleWindow container, as the following example shows: <pre class="codeblock"><?xml version="1.0"?> |
| <!-- containers\spark\SparkMainMyLoginFormCast.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.managers.PopUpManager; |
| import spark.components.TitleWindow; |
| import myComponents.MyLoginForm; |
| |
| private function showLogin():void { |
| // Create the TitleWindow container. |
| var helpWindow:TitleWindow = |
| PopUpManager.createPopUp(this, MyLoginForm, false) as TitleWindow; |
| |
| // Add title to the title bar. |
| helpWindow.title="Enter Login Information"; |
| |
| // Make title bar slightly transparent. |
| helpWindow.setStyle("borderAlpha", 0.9); |
| |
| // Hide the close button. |
| helpWindow.closeButton.visible = false; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:VGroup width="300" height="300"> |
| <s:Button click="showLogin();" label="Login"/> |
| </s:VGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="section"><h4 class="sectiontitle">Using the PopUpManager.addPopUp() method to create |
| the pop-up Spark TitleWindow</h4> |
| |
| <p>You can use the <samp class="codeph">addPopUp()</samp> method |
| of the PopUpManager to create a pop-up window without defining a |
| custom component. This method takes an instance of any class that |
| implements IFlexDisplayObject. Because it takes a class instance, not |
| a class, you can use ActionScript code in an <samp class="codeph"><fx:Script></samp> block |
| to create the component instance to pop up, rather than as a separate |
| custom component. </p> |
| |
| <p>Using the <samp class="codeph">addPopUp()</samp> method |
| may be preferable to using the <samp class="codeph">createPopUp()</samp> method |
| if you have to pop up a simple dialog box that is not reused elsewhere |
| in the application. However, it is not the best coding practice |
| if the pop-up is complex, or if you want to create a component that |
| can be used anywhere in the application.</p> |
| |
| <div class="p">The following example |
| creates a pop-up with <samp class="codeph">addPopUp()</samp> method and adds |
| a Button control to that window that closes the window when you |
| click it: <pre class="codeblock"><?xml version="1.0"?> |
| <!-- containers\spark\MyPopUpButton.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| height="600" width="600" > |
| |
| <fx:Script> |
| <![CDATA[ |
| import spark.components.TitleWindow; |
| import flash.events.*; |
| import mx.managers.PopUpManager; |
| import spark.components.Button; |
| import mx.core.IFlexDisplayObject; |
| |
| // The variable for the TitleWindow container |
| public var myTitleWindow:TitleWindow = new TitleWindow(); |
| |
| // Method to instantiate and display a TitleWindow container. |
| // This is the initial Button control's click event handler. |
| public function openWindow(event:MouseEvent):void { |
| // Set the TitleWindow container properties. |
| myTitleWindow = new TitleWindow(); |
| myTitleWindow.title = "My Window Title"; |
| myTitleWindow.width= 220; |
| myTitleWindow.height= 150; |
| // Call the method to add the Button control to the |
| // TitleWindow container. |
| populateWindow(); |
| // Use the PopUpManager to display the TitleWindow container. |
| PopUpManager.addPopUp(myTitleWindow, this, true); |
| } |
| |
| // The method to create and add the Button child control to the |
| // TitleWindow container. |
| public function populateWindow():void { |
| var btn1:Button = new Button(); |
| btn1.label="close"; |
| btn1.addEventListener(MouseEvent.CLICK, closeTitleWindow); |
| myTitleWindow.addElement(btn1); |
| } |
| |
| // The method to close the TitleWindow container. |
| public function closeTitleWindow(event:MouseEvent):void { |
| PopUpManager.removePopUp(myTitleWindow); |
| } |
| ]]> |
| </fx:Script> |
| <s:Button label="Open Window" click="openWindow(event);"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="section"><h4 class="sectiontitle">Using the mouseDown event to close the Spark TitleWindow</h4> |
| |
| <div class="p">You |
| can use the <samp class="codeph">mouseDownOutside</samp> event to close the |
| pop-up window when a user clicks the mouse outside the TitleWindow. |
| To do this, you add an event listener to the TitleWindow instance |
| for the <samp class="codeph">mouseDownOutside</samp> event, as the following |
| example shows: <pre class="noswf"><?xml version="1.0"?> |
| <!-- containers\spark\MainMyLoginFormMouseDown.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.managers.PopUpManager; |
| import spark.components.TitleWindow; |
| import myComponents.MyLoginForm; |
| import mx.events.FlexMouseEvent; |
| |
| private var helpWindow:TitleWindow; |
| |
| private function showLogin():void { |
| // Create the TitleWindow container. |
| helpWindow = PopUpManager.createPopUp(this, |
| MyLoginForm, false) as TitleWindow; |
| helpWindow.addEventListener("mouseDownOutside", removeForm); |
| } |
| |
| private function removeForm(event:FlexMouseEvent):void { |
| PopUpManager.removePopUp(helpWindow); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:VGroup width="300" height="300"> |
| <s:Button click="showLogin();" label="Login"/> |
| </s:VGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>You define the event listener |
| in the main application, and then assign it to the pop-up window |
| when you create it. This technique lets you use a generic pop-up window, |
| defined by the component MyLoginForm.mxml, and then modify the behavior |
| of the component by assigning event listeners to it from the main |
| application. </p> |
| |
| </div> |
| |
| <div class="section"><h4 class="sectiontitle">Creating a modal pop-up window</h4> |
| |
| <p>The <samp class="codeph">createPopUp()</samp> method |
| takes an optional <em>modal</em> parameter. You can set this parameter |
| to <samp class="codeph">true</samp> to make the window modal. When a TitleWindow |
| is modal, you cannot select any other component while the window |
| is open. The default value of <em>modal</em> is <samp class="codeph">false</samp>. </p> |
| |
| <p> |
| The following example |
| creates a modal pop-up window:</p> |
| |
| <pre class="codeblock"> var pop1:IFlexDisplayObject = PopUpManager.createPopUp(this, MyLoginForm, true);</pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS6c678f7b363d5da5-57afda60124a09daf90-8000_verapache"><a name="WS6c678f7b363d5da5-57afda60124a09daf90-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Dragging the popup Spark TitleWindow</h3> |
| |
| |
| <div> |
| <p>After you pop up the Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TitleWindow.html" target="_blank">TitleWindow</a> container, |
| you can drag it around the application window. To drag the TitleWindow, |
| click and hold the mouse in the title bar area of the window, then |
| move the mouse.</p> |
| |
| <p>By default, you click in the title bar area of the TitleWindow |
| container to drag it. That area is defined by the <samp class="codeph">moveArea</samp> skin |
| part. You can create a custom skin class to modify the move area.</p> |
| |
| <p> |
| <strong>Events during a move operation</strong> |
| </p> |
| |
| <div class="p">The Tile Window dispatches the following events as part of a |
| move operation: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e2902"> |
| <p>Event</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e2908"> |
| <p>Descriptions</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2902 "> |
| <p> |
| <samp class="codeph">windowMove</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2908 "> |
| <p>Dispatched when you stop dragging the window. |
| This event can be dispatched multiple times before the <samp class="codeph">windowMoveEnd</samp> event |
| if you stop dragging the window but do not release the mouse button.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2902 "> |
| <p> |
| <samp class="codeph">windowMoveEnd</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2908 "> |
| <p>Dispatched when the user releases the mouse |
| button to end the drag. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2902 "> |
| <p> |
| <samp class="codeph">windowMoveStart</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2908 "> |
| <p>Dispatched when the user presses the mouse |
| button while the pointer is in the move area to begin the drag. This |
| event is cancelable.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2902 "> |
| <p> |
| <samp class="codeph">windowMoving</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e2908 "> |
| <p>Dispatched repeatedly as the user drags |
| the window. This event is cancelable.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <div class="p">The event handlers for these events receive an object of type <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/events/TitleWindowBoundsEvent.html" target="_blank">TitleWindowBoundsEvent</a>. |
| The TitleWindowBoundsEvent class defines the <samp class="codeph">beforeBounds</samp> and <samp class="codeph">afterBounds</samp> properties, |
| of type <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/geom/Rectangle.html" target="_blank">Rectangle</a>. |
| You can use these properties to determine the position of the TitleWindow |
| as it is dragged, as the following table shows: |
| <div class="tablenoborder"><table cellpadding="4" cellspacing="0" summary="" frame="border" border="1" rules="all"> |
| |
| |
| |
| <thead align="left"> |
| <tr> |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e3027"> |
| <p>Event</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e3033"> |
| <p>beforeBounds</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d253701e3039"> |
| <p>afterBounds</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3027 "> |
| <p> |
| <samp class="codeph">windowMove</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3033 "> |
| <p>The previous bounds of the window.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3039 "> |
| <p>The current bounds of the window.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3027 "> |
| <p> |
| <samp class="codeph">windowMoveEnd</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3033 "> |
| <p>The starting bounds of the window.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3039 "> |
| <p>The ending bounds of the window.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3027 "> |
| <p> |
| <samp class="codeph">windowMoveStart</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3033 "> |
| <p>The starting bounds of the window.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3039 "> |
| <p>null</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3027 "> |
| <p> |
| <samp class="codeph">windowMoving</samp> |
| </p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3033 "> |
| <p>The current bounds of the window.</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d253701e3039 "> |
| <p>The future bounds of the window if the window |
| moves to the current cursor position.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <div class="p">The following example shows a TitleWindow component that displays |
| each event in a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextArea.html" target="_blank">TextArea</a> control |
| as it occurs: <pre class="noswf"><?xml version="1.0"?> |
| <!-- containers\spark\myComponents\MyLoginFormMoveEvents.mxml --> |
| <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| width="300" height="300" |
| close="handleCloseEvent();" |
| windowMove="windowMoveHandler(event);" |
| windowMoveEnd="windowMoveEndHandler(event);" |
| windowMoveStart="windowMoveStartHandler(event);" |
| windowMoving="windowMovingHandler(event);"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import spark.events.TitleWindowBoundsEvent; |
| import mx.managers.PopUpManager; |
| |
| // Handle the close button and Cancel button. |
| private function handleCloseEvent():void { |
| PopUpManager.removePopUp(this); |
| } |
| protected function windowMoveHandler(event:TitleWindowBoundsEvent):void |
| { |
| myTA.text += "windowMove event occurred" + "\n" |
| } |
| |
| protected function windowMoveEndHandler(event:TitleWindowBoundsEvent):void { |
| myTA.text += "windowMoveEnd event occurred" + "\n" |
| } |
| |
| protected function windowMoveStartHandler(event:TitleWindowBoundsEvent):void { |
| myTA.text += "windowMoveStart event occurred" + "\n" |
| } |
| |
| protected function windowMovingHandler(event:TitleWindowBoundsEvent):void { |
| myTA.text += "windowMoving event occurred" + "\n" |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:TextArea id="myTA" |
| width="100%" height="100%"/> |
| |
| <s:HGroup> |
| <s:Button label="Cancel" |
| click="handleCloseEvent();"/> |
| <s:Button label="Clear" |
| click="myTA.text='';"/> |
| </s:HGroup> |
| </s:TitleWindow></pre> |
| |
| </div> |
| |
| <div class="p">The following example uses this component. As you drag the TitleWindow container |
| around the application, the event handlers write a string to the TextArea |
| control:<pre class="codeblock"><?xml version="1.0"?> |
| <!-- containers\spark\SparkMainMoveEvents.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.managers.PopUpManager; |
| import spark.components.TitleWindow; |
| import myComponents.MyLoginFormMoveEvents; |
| |
| // Open the pop-up window. |
| private function showLogin():void { |
| // Create a non-modal TitleWindow container. |
| var helpWindow:TitleWindow = |
| PopUpManager.createPopUp(this, MyLoginFormMoveEvents, false) as TitleWindow; |
| PopUpManager.centerPopUp(helpWindow); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:VGroup width="300" height="300"> |
| <s:Button label="Login" |
| click="showLogin();"/> |
| </s:VGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">You can disable dragging of the TitleWindow by setting the <samp class="codeph">visible</samp> property of |
| the <samp class="codeph">moveArea</samp> skin part to <samp class="codeph">false</samp>: <pre class="codeblock">helpWindow.moveArea.visible = false;</pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS6c678f7b363d5da52e8f1ca1124a0430dcf-7ffe_verapache"><a name="WS6c678f7b363d5da52e8f1ca1124a0430dcf-7ffe_verapache"><!-- --></a> |
| <h3 class="topictitle3">Passing data to and from a Spark |
| pop-up window</h3> |
| |
| |
| <div> |
| <p>To make your pop-up window more flexible, you might want |
| to pass data to it or return data from it. To do this, use the following |
| guidelines:</p> |
| |
| <ul> |
| <li> |
| <p>Create a custom component to be your pop-up. In most |
| circumstances, this component is a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TitleWindow.html" target="_blank">TitleWindow</a> container.</p> |
| |
| </li> |
| |
| <li> |
| <p>Declare variables in your pop-up that you set in the application |
| that creates the pop-up.</p> |
| |
| </li> |
| |
| <li> |
| <p>Cast the pop-up to be the same type as your custom component.</p> |
| |
| </li> |
| |
| <li> |
| <p>Pass a reference to that component to the pop-up window, |
| if the pop-up window is to set a value on the application or one |
| of the application’s components.</p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>For example, the following application populates a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/ComboBox.html" target="_blank">ComboBox</a> in |
| the pop-up window with an <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/collections/ArrayList.html" target="_blank">ArrayList</a> defined |
| in the main application. </p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0"?> |
| <!-- containers\spark\SparkMainArrayEntryForm.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.collections.ArrayList; |
| import mx.managers.PopUpManager; |
| import myComponents.ArrayEntryForm; |
| |
| public function displayForm():void { |
| /* ArrayList with data for the custom control ComboBox control. */ |
| var doctypes:ArrayList = new ArrayList(["*.as", "*.mxml", "*.swc"]); |
| |
| /* Create the pop-up and cast the |
| return value of the createPopUp() |
| method to the ArrayEntryForm custom component. */ |
| var pop1:ArrayEntryForm = ArrayEntryForm( |
| PopUpManager.createPopUp(this, ArrayEntryForm, true)); |
| |
| /* Set TitleWindow properties. */ |
| pop1.title="Select File Type"; |
| |
| /* Set properties of the ArrayEntryForm custom component. */ |
| pop1.targetComponent = ti1; |
| pop1.myArray = doctypes; |
| PopUpManager.centerPopUp(pop1); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:TextInput id="ti1" text=""/> |
| <s:Button id="b1" label="Select File Type" |
| click="displayForm();"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>When creating the pop-up, the application casts the pop-up to |
| be of type ArrayEntryForm, which is the name of the custom component |
| that defines the pop-up window. If you do not do this, the application |
| cannot access the properties that you create.</p> |
| |
| <p>The application passes a reference to the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/TextInput.html" target="_blank">TextInput</a> component |
| in the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Application.html" target="_blank">Application</a> container |
| to the pop-up window so that the pop-up can write its results back |
| to the container. The application also passes the ArrayList of filename |
| extensions for the pop-up ComboBox control’s data provider, and |
| sets the pop-up window’s title. By setting these in the application, |
| you can reuse the pop-up window in other parts of the application |
| without modification, because it does not have to know the name |
| of the component it is writing back to or the data that it is displaying, |
| only that its data is in an Array and it is writing to a TextArea.</p> |
| |
| <div class="p">The following custom component, ArrayEntryForm.mxml, declares |
| two variables. The first one is for the ArrayList that the parent |
| application passes to the pop-up window. The second holds a reference |
| to the parent application’s TextInput control. The component uses |
| that reference to update the parent application: <pre class="noswf"><?xml version="1.0"?> |
| <!-- containers\spark\myComponents\ArrayEntryForm.mxml --> |
| <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| width="200" borderAlpha="1" |
| close="removeMe();"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import spark.components.TextInput; |
| import mx.managers.PopUpManager; |
| import mx.collections.ArrayList; |
| |
| // Variables whose values are set by the main application. |
| // Data provider array for the component's ComboBox control. |
| [Bindable] |
| public var myArray:ArrayList; |
| // A reference to the TextInput control |
| // in which to put the result. |
| public var targetComponent:TextInput; |
| |
| // OK button click event listener. |
| // Sets the target component in the application to the |
| // selected ComboBox item value. |
| private function submitData():void { |
| targetComponent.text = String(cb1.selectedItem); |
| removeMe(); |
| } |
| |
| // Cancel button click event listener. |
| private function removeMe():void { |
| PopUpManager.removePopUp(this); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:ComboBox id="cb1" dataProvider="{myArray}"/> |
| <s:HGroup> |
| <s:Button label="OK" click="submitData();"/> |
| <s:Button label="Cancel" click="removeMe();"/> |
| </s:HGroup> |
| </s:TitleWindow> </pre> |
| |
| </div> |
| |
| <p>From within a pop-up custom component, you can also access properties |
| of the parent application by using the <samp class="codeph">parentApplication</samp> property. |
| For example, if the application has a Button control named b1, you |
| can get the label of that Button control, as the following example |
| shows:</p> |
| |
| <pre class="codeblock"> myLabel = parentApplication.b1.label;</pre> |
| |
| <p>This technique, however, uses a hard-coded value in the pop-up |
| component for both the target component id in the parent and the |
| property in the component.</p> |
| |
| <div class="section"><h4 class="sectiontitle">Passing data using events</h4> |
| |
| <div class="p">The following |
| example modifies the example from the previous section to use event |
| listeners defined in the main application to handle the passing |
| of data back from the pop-up window to the main application. This |
| example shows the ArrayEntryFormEvents.mxml file with no event listeners |
| defined within it. <pre class="noswf"><?xml version="1.0"?> |
| <!-- containers\spark\myComponents\ArrayEntryFormEvents.mxml --> |
| <s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| width="200" |
| borderAlpha="1"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.managers.PopUpManager; |
| import mx.collections.ArrayList; |
| |
| // Variables whose values are set by the main application. |
| // Data provider array for the component's ComboBox control. |
| [Bindable] |
| public var myArray:ArrayList; |
| |
| ]]> |
| </fx:Script> |
| |
| <s:ComboBox id="cb1" dataProvider="{myArray}"/> |
| <s:HGroup> |
| <s:Button id="okButton" label="OK"/> |
| <s:Button id="cancelButton" label="Cancel"/> |
| </s:HGroup> |
| </s:TitleWindow> </pre> |
| |
| </div> |
| |
| <div class="p">The main application |
| defines the event listeners and registers them with the controls |
| defined within the pop-up window:<pre class="codeblock"><?xml version="1.0"?> |
| <!-- containers\spark\SparkMainArrayEntryFormEvents.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.collections.ArrayList; |
| import mx.managers.PopUpManager; |
| import myComponents.ArrayEntryFormEvents; |
| |
| public var pop1:ArrayEntryFormEvents; |
| |
| public function displayForm():void { |
| /* ArrayList with data for the custom control ComboBox control. */ |
| var doctypes:ArrayList = new ArrayList(["*.as", "*.mxml", "*.swc"]); |
| |
| /* Create the pop-up and cast the return value |
| of the createPopUp() method to the ArrayEntryFormEvents custom |
| component. */ |
| pop1 = ArrayEntryFormEvents( |
| PopUpManager.createPopUp(this, ArrayEntryFormEvents, true)); |
| /* Set TitleWindow properties. */ |
| pop1.title="Select File Type"; |
| |
| /* Set the event listeners for |
| the ArrayEntryFormEvents component. */ |
| pop1.addEventListener("close", removeMe); |
| pop1.cancelButton.addEventListener("click", removeMe); |
| pop1.okButton.addEventListener("click", submitData); |
| |
| /* Set properties of the ArrayEntryFormEvents custom control. */ |
| pop1.myArray = doctypes; |
| PopUpManager.centerPopUp(pop1); |
| } |
| |
| /* OK button click event listener. |
| Sets the target component in the application to the |
| selected ComboBox item value. */ |
| private function submitData(event:Event):void { |
| ti1.text = String(pop1.cb1.selectedItem); |
| removeMe(event); |
| } |
| |
| /* Cancel button click event listener. */ |
| private function removeMe(event:Event):void { |
| PopUpManager.removePopUp(pop1); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:VGroup> |
| <s:TextInput id="ti1" text=""/> |
| </s:VGroup> |
| <s:Button id="b1" label="Select File Type" click="displayForm();"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSc5cd04c102ae3e973827a8e912ac2b325a4-8000_verapache"><a name="WSc5cd04c102ae3e973827a8e912ac2b325a4-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark Form, Spark FormHeading, |
| and Spark FormItem containers</h2> |
| |
| |
| <div> |
| <p>The Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Form.html" target="_blank">Form</a> is |
| a highly customizable container that supports multiple form designs |
| and helps you create richer form experiences. When designing forms, you |
| sometimes have limited space to display all the form elements. Spark |
| forms help you solve this problem by providing horizontal and stacked |
| layouts, as well as multiple customized columns. </p> |
| |
| <p>Spark Forms let you customize the appearance of your form through |
| skinning. </p> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e973827a8e912ac2b325a4-7fff_verapache"><a name="WSc5cd04c102ae3e973827a8e912ac2b325a4-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark Form </h3> |
| |
| |
| <div> |
| <p>You use the <samp class="codeph"><s:Form></samp> tag to define |
| a Spark Form. Specify an <samp class="codeph">id</samp> value if you intend |
| to refer to the entire form elsewhere in your MXML, either in another |
| tag or in an ActionScript block.</p> |
| |
| <p>To create a Spark Form, you typically use three different components: |
| the Form container, FormHeading controls, and FormItem containers, |
| as the following example shows:</p> |
| |
| <div class="figborder"><span class="figdesc">Spark Form example</span> |
| |
| <img src="images/gc_sparkform_example1.png"/> |
| <dl> |
| |
| <dt class="dlterm"> |
| <strong>A.</strong> |
| </dt> |
| |
| <dd>Form container</dd> |
| |
| |
| |
| <dt class="dlterm"> |
| <strong>B.</strong> |
| </dt> |
| |
| <dd>FormHeading control</dd> |
| |
| |
| |
| <dt class="dlterm"> |
| <strong>C.</strong> |
| </dt> |
| |
| <dd>FormItem containers</dd> |
| |
| |
| </dl> |
| |
| </div> |
| |
| <p>For complete reference information, see <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Form.html" target="_blank">Form</a>, <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/FormHeading.html" target="_blank">FormHeading</a>, |
| and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/FormItem.html" target="_blank">FormItem</a> in the <em> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe |
| Flash Platform</a> |
| </em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e973827a8e912ac2b325a4-7ffe_verapache"><a name="WSc5cd04c102ae3e973827a8e912ac2b325a4-7ffe_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark FormHeading control</h3> |
| |
| |
| <div> |
| <p> |
| A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/FormHeading.html" target="_blank"> Spark FormHeading</a> control |
| specifies an optional label for a group of FormItem containers. |
| The label is aligned with the start of the FormItem label controls |
| in the form. You can have multiple FormHeading controls in your |
| form to designate multiple content areas. You can also use FormHeading |
| controls with a blank <samp class="codeph">label</samp> property to create |
| vertical space in your form.</p> |
| |
| <p>You use the <samp class="codeph"><s:FormHeading></samp> tag to define |
| a FormHeading container. Specify an <samp class="codeph">id</samp> value if |
| you intend to refer to the heading elsewhere in your MXML, either |
| in another tag or in an ActionScript block. </p> |
| |
| <p>The following code example defines the FormHeading control for |
| the Spark Form:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\layouts\spark\SparkFormHeadingSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Form id="myForm" width="400" height="100"> |
| <s:FormHeading label="Spark Form Heading" /> |
| <!--Define FormItem containers here. --> |
| </s:Form> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For complete reference information, see the <em> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe |
| Flash Platform</a> |
| </em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e973827a8e912ac2b325a4-7ffd_verapache"><a name="WSc5cd04c102ae3e973827a8e912ac2b325a4-7ffd_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark FormItem container</h3> |
| |
| |
| <div> |
| <p>A <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/FormItem.html" target="_blank">Spark |
| FormItem</a> consists of the following parts:</p> |
| |
| <ul> |
| <li> |
| <p>A single label</p> |
| |
| </li> |
| |
| <li> |
| <p>A sequence label</p> |
| |
| </li> |
| |
| <li> |
| <p>One or more child controls or containers, such as text input |
| or button control</p> |
| |
| </li> |
| |
| <li> |
| <p>Help content that provides a description of the form item |
| or instructions for filling it out </p> |
| |
| </li> |
| |
| <li> |
| <p>Required indicator to indicate if a form item has to be filled</p> |
| |
| </li> |
| |
| </ul> |
| |
| <p>By default, all the FormItem elements are arranged in a horizontal |
| layout with the label placed on the left and the Help content on |
| the right.</p> |
| |
| <p>The following code example defines the Spark FormItem container |
| for the Spark Form:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\layouts\spark\SparkFormItemSimple.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Form id="myForm" width="450" height="125"> |
| <s:FormHeading label="Spark Form Heading" /> |
| <s:FormItem label="Username:"> |
| <s:TextInput id="username" /> |
| <s:helpContent> |
| <s:Label text="Enter your LDAP username" /> |
| </s:helpContent> |
| </s:FormItem> |
| </s:Form> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For complete reference information, see <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/FormItem.html" target="_blank">Spark FormItem</a> in |
| the <em> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe |
| Flash Platform</a> |
| </em>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e972ff8b74d12ac75e6104-8000_verapache"><a name="WSc5cd04c102ae3e972ff8b74d12ac75e6104-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using sequence labels in a Spark |
| FormItem control</h3> |
| |
| |
| <div> |
| <p>You sometimes need to fill the form in a sequential order. |
| Sequential labels help you design forms that define a visual order |
| to the form items. When laying out form items in a Spark Form, you |
| can define sequence labels using the <samp class="codeph">sequenceLabel</samp> property.</p> |
| |
| <div class="p">The following code example uses sequence labels, incrementing |
| the sequence number by one for each label:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\layouts\spark\SparkFormItemSequenceLabels.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:Form id="myForm" width="350" height="325"> |
| <!-- Reduce gap between form items. --> |
| <s:layout> |
| <s:FormLayout gap="-14"/> |
| </s:layout> |
| <s:Label fontSize="16" text="My Spark Form"/> |
| <s:FormItem label="Address" sequenceLabel="1."> |
| <s:TextInput width="100%"/> |
| <s:TextInput width="100%"/> |
| <s:TextInput width="100%"/> |
| </s:FormItem> |
| <s:FormItem label="City" sequenceLabel="2."> |
| <s:TextInput width="100%"/> |
| </s:FormItem> |
| <s:FormItem label="State" sequenceLabel="3."> |
| <s:TextInput width="100%"/> |
| </s:FormItem> |
| <s:FormItem label="ZipCode" sequenceLabel="4."> |
| <s:TextInput width="100%"/> |
| </s:FormItem> |
| </s:Form> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>You can customize the appearance of sequence labels by styling |
| the FormItem container’s sequenceLabelDisplay skin part. Properties |
| like label <samp class="codeph">color</samp> and <samp class="codeph">fontWeight</samp> are |
| explicitly set in the default FormItemSkin. To change these properties, |
| you can create a custom skin using MXML or ActionScript and override |
| the default styles. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e977d64d90d12aeb656dd2-8000_verapache"><a name="WSc5cd04c102ae3e977d64d90d12aeb656dd2-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Defining Help content in a Spark |
| FormItem control</h3> |
| |
| |
| <div> |
| <p>Help content provides a description for the form item or |
| instructions for filling out the form item. When you create a FormItem, |
| you use the <samp class="codeph">helpContent</samp> property to define the |
| Help content for the FormItem. </p> |
| |
| <p>In a BasicLayout Group container, the Help content is placed |
| next to the FormItem input control, by default. If you have multiple |
| items in your helpContent group, you can place the Help content |
| in an HGroup container or a VGroup container. The HGroup container |
| lays out Help content horizontally and the VGroup container lays |
| out Help content vertically. </p> |
| |
| <p>The following code example defines Help content for FormItems |
| in a Spark Form:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\layouts\spark\SparkFormItemHelpContent.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| width="600"> |
| |
| <s:Form id="form1" x="164" y="38"> |
| <!-- Reduce space between form items. --> |
| <s:layout> |
| <s:FormLayout gap="-14"/> |
| </s:layout> |
| <s:FormHeading label="Mailing Information"/> |
| <s:FormItem label="Address"> |
| <s:helpContent> |
| <s:Label text="(eg. 123 Main Street)"/> |
| </s:helpContent> |
| <s:TextInput/> |
| <s:TextInput/> |
| </s:FormItem> |
| <s:FormItem label="City/State"> |
| <s:TextInput/> |
| </s:FormItem> |
| <s:FormItem label="Phone" fontFamily="Verdana" required="true"> |
| <s:helpContent> |
| <s:VGroup> |
| <s:Label text="(xxx)-xxx-xxxx"/> |
| <s:Label text="Will appear in your profile"/> |
| </s:VGroup> |
| </s:helpContent> |
| <s:TextInput/> |
| </s:FormItem> |
| </s:Form> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>You can customize the appearance of the Help content by styling |
| the FormItem container’s <samp class="codeph">helpContentGroup</samp> skin |
| part. Properties like <samp class="codeph">fontStyle</samp> and <samp class="codeph">color</samp> are |
| explicitly set in the default FormItem skin. To change these properties, you |
| can create a custom skin using MXML or ActionScript and override |
| the default styles.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e973fcd45c412aeb66dbd6-7ffe_verapache"><a name="WSc5cd04c102ae3e973fcd45c412aeb66dbd6-7ffe_verapache"><!-- --></a> |
| <h3 class="topictitle3">Spark Form and Spark FormItem skin |
| classes</h3> |
| |
| |
| <div> |
| <p>The Flex framework provides two sets of skin classes for |
| the Spark Form and Spark FormItem controls: </p> |
| |
| <p>The default skin classes define a horizontal layout of form items. |
| The default skin classes include the following: </p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p>FormHeadingSkin: A horizontal layout for a FormHeading.</p> |
| |
| </li> |
| |
| <li> |
| <p>FormItemSkin: A horizontal layout for a FormItem with four |
| columns and five skin parts. For more information, see <a href="flx_groups_containers_gc.html#WSc5cd04c102ae3e97-1e8abf2f12b7608e6b7-8000_verapache">Using |
| the required indicator for form items</a>.</p> |
| |
| </li> |
| |
| <li> |
| <p>FormSkin: A four-column skin for the Form, where the columns |
| are arranged horizontally in a single row.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The stacked skin classes define each form item with the label |
| above the form control to use less horizontal space. The stacked |
| skin classes include the following:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p>StackedFormHeadingSkin: A stacked layout for a FormHeading</p> |
| |
| </li> |
| |
| <li> |
| <p>StackedFormItemSkin: A stacked layout for a FormItem with |
| four columns and five skin parts.</p> |
| |
| </li> |
| |
| <li> |
| <p>StackedFormSkin: A three-column skin with two rows per item, |
| and the label placed in the top row.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="p">The following code example defines a Spark Form control using |
| a StackedFormHeadingSkin, StackedFormItemSkin, and StackedFormSkin |
| class:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkFormStackedSkinClasses.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| width="300"> |
| |
| <fx:Style> |
| @namespace s "library://ns.adobe.com/flex/spark"; |
| |
| s|Form |
| { |
| skinClass: ClassReference("spark.skins.spark.StackedFormSkin"); |
| } |
| s|FormHeading |
| { |
| skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin"); |
| } |
| s|FormItem |
| { |
| skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin"); |
| } |
| </fx:Style> |
| |
| <s:Form id="frm" width="300"> |
| <!-- Reduce gap between form items. --> |
| <s:layout> |
| <s:FormLayout gap="-14"/> |
| </s:layout> |
| <s:FormHeading label="STACKED SPARK FORM" backgroundColor="Gray" color="#FFFFFF" width="300"/> |
| <s:FormItem sequenceLabel="1." label="First name" required="true"> |
| <s:TextInput id="fName" maxChars="64" /> |
| </s:FormItem> |
| <s:FormItem sequenceLabel="2." label="Last name"> |
| <s:TextInput id="lName" maxChars="64" /> |
| </s:FormItem> |
| <s:FormItem sequenceLabel="3." label="Address"> |
| <s:TextInput id="AddressLine1" maxChars="32"/> |
| <s:TextInput id="AddressLine2" maxChars="32"/> |
| <s:TextInput id="AddressLine3" maxChars="32"/> |
| </s:FormItem> |
| <s:FormItem sequenceLabel="4." label="City"> |
| <s:TextInput id="City" maxChars="64" /> |
| </s:FormItem> |
| <s:FormItem sequenceLabel="5." label="State"> |
| <s:TextInput id="State" maxChars="64" /> |
| </s:FormItem> |
| <s:FormItem sequenceLabel="6." label="ZipCode" required="true"> |
| <s:TextInput id="ZipCode" maxChars="64" /> |
| </s:FormItem> |
| </s:Form> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WSc5cd04c102ae3e97-1e8abf2f12b7608e6b7-8000_verapache"><a name="WSc5cd04c102ae3e97-1e8abf2f12b7608e6b7-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using the required indicator for |
| form items</h4> |
| |
| |
| <div> |
| <p>The <samp class="codeph">required</samp> state indicates that you |
| must enter the FormItem's content before submitting the form. The <samp class="codeph">required</samp> state |
| occurs when you set the FormItem's <samp class="codeph">required</samp> property |
| to true as follows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><s:FormItem label="Username:" required="true"> |
| <s:TextInput id="username" /> |
| </s:FormItem></pre> |
| |
| </div> |
| |
| <p>When you set the <samp class="codeph">required</samp> property to <samp class="codeph">true</samp>, |
| an asterisk (*) is used to denote the field. A Spark FormItem lets |
| you customize the appearance of the required fields through skinning. |
| For example, a required field can have a light green background, |
| a bold label, or a "(required)" text. </p> |
| |
| <p>An error state highlights the input error in the form item. The <samp class="codeph">error</samp> state |
| occurs when the FormItem's content fails validation. For example, |
| you can define a red border or a light red background to indicate |
| an error state. For more information on including form validation |
| in your Spark Form, see <a href="flx_groups_containers_gc.html#WSc5cd04c102ae3e973827a8e912ac2b325a4-7ffc_verapache">Validating |
| data in a Spark Form</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e973827a8e912ac2b325a4-7ffc_verapache"><a name="WSc5cd04c102ae3e973827a8e912ac2b325a4-7ffc_verapache"><!-- --></a> |
| <h3 class="topictitle3">Validating data in a Spark Form</h3> |
| |
| |
| <div> |
| <p>You can include form validation in your Spark Form. You |
| can add custom logic to validate the input controls to ensure that |
| the required data is entered in a proper format. To do so, you create |
| the proper validator or formatter controls, and associate them with |
| their Form Item controls. When a user enters incorrect data in the |
| Form Item, the Form Item skin uses a different state to represent |
| the erroneous state of the Form Item.</p> |
| |
| <p>The following code example shows a Spark Form where the phone |
| entry TextInput control is bound to a PhoneFormatter. The TextInput |
| control is bound to the PhoneFormatter such that the data entered |
| is formatted to display, as required. The ZIP code text input is |
| bound to a ZipCodeValidator for data validation, such that, on entering |
| incorrect data, an appropriate error message appears.</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkFormValidation.mxml --> |
| <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/mx"> |
| |
| <fx:Declarations> |
| <mx:PhoneFormatter |
| id="pnf" |
| areaCode="-1" |
| areaCodeFormat="(###)" |
| formatString="(###) ###-####" |
| validPatternChars="+()#-. "/> |
| <mx:ZipCodeValidator |
| id="zcv" |
| source="{ti_zip}" |
| property="text"/> |
| </fx:Declarations> |
| |
| <fx:Script> |
| <![CDATA[ |
| import mx.collections.ArrayCollection; |
| [Bindable] |
| public var statesDP:ArrayCollection = new ArrayCollection |
| (["Arizona","California","Kansas","New Mexico","Texas","Wyoming"]); |
| |
| import mx.events.ValidationResultEvent; |
| private var vResult:ValidationResultEvent; |
| // Event handler to validate and format input. |
| private function format():void { |
| ti_phone.text = pnf.format(ti_phone.text); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:Form width="500" height="600" backgroundColor="0xeeeeee"> |
| <s:Label fontSize="16" text="My Spark Form"/> |
| <s:FormItem label="Address" sequenceLabel="1."> |
| <s:TextInput width="100%"/> |
| <s:TextInput width="100%"/> |
| <s:TextInput width="100%"/> |
| <s:helpContent> |
| <s:Label text="(ex. 123 Main Street)" baseline="24" /> |
| <s:Button label="?" width="30" baseline="24" x="120"/> |
| </s:helpContent> |
| </s:FormItem> |
| <s:FormItem label="City" sequenceLabel="2."> |
| <s:TextInput width="100%"/> |
| </s:FormItem> |
| <s:FormItem label="State" sequenceLabel="3."> |
| <s:ComboBox dataProvider="{statesDP}" width="100%"/> |
| </s:FormItem> |
| <s:FormItem label="ZipCode" sequenceLabel="4." required="true"> |
| <s:TextInput widthInChars="4" restrict="0123456789"/> |
| <s:helpContent> |
| <s:Label text="Will appear in your profile" left="0" right="0" baseline="24" /> |
| </s:helpContent> |
| </s:FormItem> |
| <s:FormItem id="phoneZipItem" label="Phone and Zip" sequenceLabel="5."> |
| <s:TextInput id="ti_phone" width="100%" focusOut="format()"/> |
| <s:TextInput id="ti_zip" widthInChars="4" restrict="0123456789"/> |
| <s:helpContent> |
| <s:Label text="(xxx)-xxx-xxxx" left="0" right="0" baseline="24" /> |
| </s:helpContent> |
| </s:FormItem> |
| <s:Label text="PhoneZip ErrorString : {phoneZipItem.elementErrorStrings}"/> |
| </s:Form> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS8b1c39bd7e9fc3641a7d4740130ade8b192-8000_verapache"><a name="WS8b1c39bd7e9fc3641a7d4740130ade8b192-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Scrolling a Spark Form</h3> |
| |
| |
| <div> |
| <p>The simplest way to add scrolling to a Spark Form is to |
| wrap the Form in a Group container. Then wrap the Group container |
| in a <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/Scroller.html" target="_blank">Scroller</a>, |
| as the following example shows: </p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\layouts\spark\SparkFormScroll.mxml --> |
| <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/mx"> |
| |
| <s:Scroller width="300" height="200"> |
| <s:Group> |
| <s:Form> |
| <s:FormItem label="Label 1:" textAlign="right"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <s:TextInput width="30"/> |
| <s:TextInput width="30"/> |
| <s:TextInput width="30"/> |
| <s:TextInput width="30"/> |
| </s:FormItem> |
| |
| <s:FormItem label="Longer Label 2:" textAlign="right"> |
| <s:layout> |
| <s:HorizontalLayout/> |
| </s:layout> |
| <s:TextInput width="30"/> |
| <s:TextInput width="30"/> |
| <s:TextInput width="30"/> |
| <s:TextInput width="30"/> |
| </s:FormItem> |
| |
| <s:FormItem label="Label 3:" textAlign="right"> |
| <s:TextInput width="200"/> |
| </s:FormItem> |
| <s:FormItem label="Label 4:" textAlign="right"> |
| <s:TextInput width="200"/> |
| </s:FormItem> |
| </s:Form> |
| </s:Group> |
| </s:Scroller> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>Use a Group container because the Form container does not implements |
| the <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/core/IViewport.html" target="_blank">spark.core.IViewport</a> interface |
| that is required by all children of Scroller.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e973fcd45c412aeb66dbd6-8000_verapache"><a name="WSc5cd04c102ae3e973fcd45c412aeb66dbd6-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Changing the layout of FormItems |
| in a Spark Form</h3> |
| |
| |
| <div> |
| <p> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/layouts/FormLayout.html" target="_blank">FormLayout</a> is |
| the layout class for the FormSkin class and StackedFormSkin class. FormLayout |
| provides a vertical layout for its child FormItem containers in |
| the Form. Elements using FormItemLayout within a FormLayout are |
| aligned along columns.</p> |
| |
| <div class="p"> |
| <div class="note"><span class="notetitle">Note:</span> Only use the FormLayout class with the Form container. |
| Do not use it to lay out the contents of any other container. </div> |
| |
| </div> |
| |
| <div class="p">You can change the layout of a Spark Form by setting properties |
| such as <samp class="codeph">gap</samp> and padding properties on the FormLayout |
| tag. The following example reduces the vertical space between the |
| FormItems and indents the form by 25 pixels:<pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\layouts\spark\SparkFormLayout.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| width="600"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <s:Form id="form1" x="164" y="38"> |
| <!-- Reduce space between form items and indent form 25 pixels. --> |
| <s:layout> |
| <s:FormLayout gap="-14" paddingLeft="25"/> |
| </s:layout> |
| <s:FormHeading label="Mailing Information (Custom spacing)"/> |
| <s:FormItem label="Address"> |
| <s:TextInput prompt="Enter your address"/> |
| </s:FormItem> |
| <s:FormItem label="City/State"> |
| <s:TextInput prompt="Enter your city and state"/> |
| </s:FormItem> |
| <s:FormItem label="Phone" fontFamily="Verdana" required="true"> |
| <s:TextInput prompt="Enter your phone number"/> |
| </s:FormItem> |
| </s:Form> |
| |
| <s:Form id="form2" x="164" y="38"> |
| <!-- Reduce space between form items. --> |
| <s:layout> |
| <s:FormLayout gap="0" paddingLeft="0"/> |
| </s:layout> |
| <s:FormHeading label="Mailing Information (Default properties)"/> |
| <s:FormItem label="Address"> |
| <s:TextInput prompt="Enter your address"/> |
| </s:FormItem> |
| <s:FormItem label="City/State"> |
| <s:TextInput prompt="Enter your city and state"/> |
| </s:FormItem> |
| <s:FormItem label="Phone" fontFamily="Verdana" required="true"> |
| <s:TextInput prompt="Enter your phone number"/> |
| </s:FormItem> |
| </s:Form> |
| |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc5cd04c102ae3e97225d3caf12b0e6b006a-8000_verapache"><a name="WSc5cd04c102ae3e97225d3caf12b0e6b006a-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using the FormItemLayout layout |
| class</h3> |
| |
| |
| <div> |
| <p>FormItemLayout is a grid layout for the FormItemSkin and |
| StackedFormItemSkin classes. The FormItemLayout has a set of columns |
| and rows, where each layout element can position its edges relative |
| to each column and row.</p> |
| |
| <p>The FormItemLayout class is necessary for the Form container |
| to align the columns. Layout elements align to the specified columns |
| and rows using constraints.<span/> For more information, see <a href="flx_size_position_sp.html#WS2db454920e96a9e51e63e3d11c0bf633a0-7ff2_verapache">Using |
| constraint rows and columns with MX containers and the Spark FormLayout |
| class</a>.<span/> |
| <span/> |
| </p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS64909091-7042-4fb8-A243-8FD4E2990264_verapache"><a name="WS64909091-7042-4fb8-A243-8FD4E2990264_verapache"><!-- --></a> |
| <h2 class="topictitle2">The Spark DataGroup and Spark SkinnableDataContainer |
| containers</h2> |
| |
| |
| <div> |
| <p>The Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/DataGroup.html" target="_blank">DataGroup</a> and |
| Spark <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnableDataContainer.html" target="_blank">SkinnableDataContainer</a> containers |
| take as children any components that implement the IVisualElement |
| interface and are subclasses of DisplayObject. However, these containers |
| are primarily used to take data items as children. Data items can |
| be simple data items such String and Number objects, and more complicated |
| data items such as Object and XMLNode objects. </p> |
| |
| <p>An item renderer defines the visual representation of the data |
| item in the container. The item renderer converts the data item |
| into a format that can be displayed by the container. You must pass |
| an item renderer to a DataGroup or SkinnableDataContainer container. </p> |
| |
| <div class="p">The main differences between the DataGroup and SkinnableDataContainer containers |
| are: <ul> |
| <li> |
| <p>SkinnableDataContainer can be skinned. The DataGroup |
| container is designed for simplicity and minimal overhead, and cannot |
| be skinned.</p> |
| |
| </li> |
| |
| <li> |
| <p>DataGroup can be a child of the Scroller control to support |
| scroll bars. Create a skin for the SkinnableDataContainer to add |
| scroll bars.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The default layout class of the DataGroup container is BasicLayout. |
| The default layout class of the SkinnableDataContainer class is |
| VerticalLayout. For complete reference information, see the <em> |
| <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/" target="_blank">ActionScript 3.0 Reference for the Adobe |
| Flash Platform</a> |
| </em>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WSF9C55C5E-FD97-4a96-A846-0F9D22DCCC6C_verapache"><a name="WSF9C55C5E-FD97-4a96-A846-0F9D22DCCC6C_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark DataGroup and |
| Spark SkinnableDataContainer container</h3> |
| |
| |
| <div> |
| <p> |
| You |
| use the <samp class="codeph"><s:DataGroup></samp> and <samp class="codeph"><s:SkinnableDataContainer></samp> tags to |
| define a DataGroup and SkinnableDataContainer container. Specify |
| an <samp class="codeph">id</samp> value if you intend to refer to a component |
| elsewhere in your MXML, either in another tag or in an ActionScript |
| block. </p> |
| |
| <p>The <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/DataGroup.html" target="_blank">DataGroup</a> and <a href="http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/SkinnableDataContainer.html" target="_blank">SkinnableDataContainer</a> container |
| are examples of data provider components. Data provider components |
| require data for display or user interaction. To provide data, assign |
| a collection which implements the IList interface, such as an ArrayList, |
| ArrayCollection, or XMLListCollection object, to the container’s <samp class="codeph">dataProvider</samp> property. |
| For more information on using data providers, see <a href="flx_about_dataproviders_ab.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb8_verapache">Data |
| providers and collections</a>.</p> |
| |
| <p>The <samp class="codeph">dataProvider</samp> property takes an array of |
| children, as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><s:DataGroup itemRenderer=...> <strong> |
| <s:dataProvider> </strong> |
| <mx:ArrayList> |
| <fx:String>Dave Jones</fx:String> |
| <fx:String>Mary Davis</fx:String> |
| <fx:String>Debbie Cooper</fx:String> |
| </mx:ArrayList> <strong> |
| </s:dataProvider> </strong> |
| </s:DataGroup></pre> |
| |
| </div> |
| |
| <p>If you are using Flex Components as children of the container, |
| you can specify them as the following example shows:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><s:DataGroup itemRenderer=...> <strong> |
| <s:dataProvider> </strong> |
| <mx:ArrayList> |
| <s:Button/> |
| <s:Button/> |
| <s:Button/> |
| </mx:ArrayList> <strong> |
| </s:dataProvider> </strong> |
| </s:DataGroup></pre> |
| |
| </div> |
| |
| <div class="p">Because <samp class="codeph">dataProvider</samp> is the default property |
| of the DataGroup and SkinnableDataContainer container, you do not |
| have to specify a <samp class="codeph"><s:dataProvider></samp> child |
| tag. Therefore, you can write the example as shown below: <pre class="codeblock"><s:DataGroup itemRenderer=...> |
| <mx:ArrayList> |
| <fx:String>Dave Jones</fx:String> |
| <fx:String>Mary Davis</fx:String> |
| <fx:String>Debbie Cooper</fx:String> |
| </mx:ArrayList> |
| </s:DataGroup></pre> |
| |
| </div> |
| |
| <p>You can mix different types of data items in a container, or |
| mix data items and Flex components. For example, you might mix String, |
| Object, and XML data in the same container. However, you must define |
| an item renderer function to apply the correct item renderer to |
| the child. For more information, see <a href="flx_spark_itemrenderers_sir.html#WS94F31173-40D5-4ddd-B7B3-17D02BD57EAF_verapache">Using |
| an item renderer function with a Spark container</a>.</p> |
| |
| <p>You can skin the SkinnableDataContainer in the same way that |
| you skin the container. For an example of a skin, see <a href="flx_groups_containers_gc.html#WS8733DA6F-CFF3-46b3-868A-DDB7604556F5_verapache">Creating |
| a Spark SkinnableContainer container</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS9C96B430-E401-491c-95DB-D600CC9A9992_verapache"><a name="WS9C96B430-E401-491c-95DB-D600CC9A9992_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using a default item renderer with |
| a Spark container</h3> |
| |
| |
| <div> |
| <p>The DataGroup and SkinnableDataContainer containers require |
| an item renderer to draw each container child on the screen. By |
| default, the DataGroup and SkinnableDataContainer containers do |
| not define an item renderer. You can configure the containers to |
| use the item renderers provided by Flex, or define your own custom |
| item renderer. </p> |
| |
| <div class="p">Flex ships with two item renderers: spark.skins.spark.<ul> |
| <li> |
| <p>spark.skins.spark.DefaultItemRenderer Converts its data item |
| to a single String for display in a Spark Label control. It is useful |
| when displaying a scalar data item, such as a String or a Number, |
| that can be easily converted to a String.</p> |
| |
| </li> |
| |
| <li> |
| <p>spark.skins.spark.DefaultComplexItemRenderer Displays a Flex |
| component in a Group container. Each component is wrapped in its |
| own Group container. Therefore, it is useful when the children of |
| the container are visual elements, such as Flex components. </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The following example uses the DefaultItemRenderer with a DataGroup container:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkDataGroupContainerDefaultRenderer.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:DataGroup itemRenderer="spark.skins.spark.DefaultItemRenderer"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ArrayList> |
| <fx:String>Dave Jones</fx:String> |
| <fx:String>Mary Davis</fx:String> |
| <fx:String>Debbie Cooper</fx:String> |
| </mx:ArrayList> |
| </s:DataGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>Each data item of the container is a String. Because you use |
| the DefaultItemRenderer with the container, each String appears |
| in the container in a Label control.</p> |
| |
| <p>If the data item is of type Object or is a data type that is |
| not easily converted to a String, then you either have to convert |
| it to a String, or define a custom item renderer to display it. |
| For more information, see <a href="flx_spark_itemrenderers_sir.html#WS3B0D227A-DBFE-424c-9076-E834C5833E30_verapache">Passing |
| data to a Spark item renderer</a>.</p> |
| |
| <p>The following example shows a DataGroup container where all its |
| children are Flex components. The DataGroup class uses the DefaultComplexItemRenderer |
| to display each child:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkDataGroupContainerSimpleVisual.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| |
| <s:DataGroup itemRenderer="spark.skins.spark.DefaultComplexItemRenderer"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ArrayList> |
| <s:Button/> |
| <s:Button/> |
| <s:Button/> |
| <s:Button/> |
| </mx:ArrayList> |
| </s:DataGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>Because you use the DefaultComplexItemRenderer with the container, |
| each Button control appears in the container nested in its own Group |
| container. By wrapping each control in a Group container, the item |
| renderer can support selection highlighting for the individual children. |
| However, if you do not want each control to appear in its own Group |
| container, set the item renderer to <samp class="codeph">null</samp>, as shown |
| below:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><s:DataGroup itemRenderer="{null}"> </pre> |
| |
| </div> |
| |
| <div class="note"><span class="notetitle">Note:</span> If you are only displaying visual elements in a DataGroup |
| or SkinnableDataContainer container, you should instead use the |
| Group or SkinnableContainer containers.</div> |
| |
| <p>You might be able to create your application by using just the |
| DefaultItemRenderer and DefaultComplexItemRenderer classes. However, |
| you typically define a custom item renderer if your data items are |
| not simple values, or if you want more control over the appearance |
| of your container children. For more information on creating a custom |
| item renderer, see <a href="flx_spark_itemrenderers_sir.html#WS03d33b8076db57b9-23c04461124bbeca597-8000_verapache">Define |
| a custom Spark item renderer</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSefe892102f30ec487f647d26121208cbd8c-8000_verapache"><a name="WSefe892102f30ec487f647d26121208cbd8c-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Adding and removing children at |
| runtime</h3> |
| |
| |
| <div> |
| <div class="p">To modify the children of the DataGroup and SkinnableDataContainer |
| containers at runtime, modify the <samp class="codeph">dataProvider</samp> property. |
| The following example uses event handlers to add and remove container |
| children by calling the <samp class="codeph">addItem()</samp> and <samp class="codeph">removeItemAt()</samp> methods |
| on the <samp class="codeph">dataProvider</samp> property: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\spark\SparkDataGroupContainerAddRemoveChild.mxml --> |
| <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:mx="library://ns.adobe.com/flex/mx" |
| xmlns:s="library://ns.adobe.com/flex/spark"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| |
| private function addDGChild():void { |
| var newChild:String = "new child"; |
| myDG.dataProvider.addItem(newChild); |
| |
| addDG.enabled = false; |
| removeDG.enabled = true; |
| } |
| |
| private function removeDGChild():void { |
| myDG.dataProvider.removeItemAt(3); |
| |
| addDG.enabled = true; |
| removeDG.enabled = false; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:DataGroup id="myDG" |
| itemRenderer="spark.skins.spark.DefaultItemRenderer"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| <mx:ArrayList> |
| <fx:String>Dave Jones</fx:String> |
| <fx:String>Mary Davis</fx:String> |
| <fx:String>Debbie Cooper</fx:String> |
| </mx:ArrayList> |
| </s:DataGroup> |
| |
| <s:Button id="addDG" label="Add Child" |
| click="addDGChild();"/> |
| <s:Button id="removeDG" label="Remove Child" |
| enabled="false" |
| click="removeDGChild();"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information on using data providers, see <a href="flx_about_dataproviders_ab.html#WS2db454920e96a9e51e63e3d11c0bf69084-7fb8_verapache">Data |
| providers and collections</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS486D1976-E12C-4654-B330-3DF3B23614F6_verapache"><a name="WS486D1976-E12C-4654-B330-3DF3B23614F6_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using virtualization with Spark |
| DataGroup and SkinnableDataContainer </h3> |
| |
| |
| <div> |
| <p>A DataGroup or SkinnableDataContainer container can represent |
| any number of children. However, each child requires an instance |
| of an item renderer. If the container has many children, you might |
| notice performance degradation as you add more children to the container. </p> |
| |
| <p>Instead of creating an item renderer for each child, you can |
| configure the container to use a virtual layout. With virtual layout, |
| the container reuses item renderers so that it only creates item |
| renderers for the currently visible children of the container. As |
| a child is moved off the screen, possible by scrolling the container, |
| a new child being scrolled onto the screen can reuse its item renderer. </p> |
| |
| <p>To configure a container to use virtual layout, set the <samp class="codeph">useVirtualLayout</samp> property |
| to <samp class="codeph">true</samp> for the layout associated with the container. |
| Only the DataGroup or SkinnableDataContainer with the VerticalLayout, |
| HorizontalLayout, and TileLayout supports virtual layout. </p> |
| |
| <div class="p"> |
| <div class="note"><span class="notetitle">Note:</span> If you define an itemRendererFunction to determine the |
| item renderer for each data item, Flex will not reuse item renderers. |
| The itemRendererFunction must examine each data item and create |
| the item renderers as necessary for the specific data item type. |
| While Flex does not reuse item renderers, it only creates enough |
| item renderers for the currently visible data items. For more information, |
| see <a href="flx_spark_itemrenderers_sir.html#WS5ED0A932-BA59-4a77-9A9D-3745FE21D1E9_verapache">Creating |
| a recyclable item renderer for virtual layout</a>.</div> |
| |
| </div> |
| |
| <p>There are a few differences between the way a layout class works |
| when virtual layout is enabled and when it is disabled:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p>A layout with virtual layout enabled does not support |
| the layout’s major axis percent size property. This axis corresponds |
| to the <samp class="codeph">percentHeight</samp> property for the VerticalLayout |
| class, and the <samp class="codeph">percentWidth</samp> property for the HorizontalLayout |
| class. </p> |
| |
| </li> |
| |
| <li> |
| <p>A container using a virtual layout that contains few children |
| whose sizes vary widely can respond poorly to interactive scrolling |
| using the scroll thumb. No performance degradation occurs when scrolling |
| using the scroll arrows or by clicking in the scroll track. Responsiveness |
| improves as the variation in size decreases or the number of children |
| increases.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>Use virtual layout when the cost of creating or measuring a DataGroup |
| is prohibitive because of the number of data elements or the complexity |
| of the item renderers.</p> |
| |
| <p>For more information on creating item renderers, see <a href="flx_spark_itemrenderers_sir.html#WS03d33b8076db57b9-23c04461124bbeca597-8000_verapache">Define |
| a custom Spark item renderer</a>. </p> |
| |
| </div> |
| |
| </div> |
| |
| <p>Adobe and Adobe Flash Platform are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries and are used by permission from Adobe. No other license to the Adobe trademarks are granted.</p> |
| </div> |
| |
| |
| </body> |
| </html> |
