| <?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 name="DC.Type" content="topic"/> |
| <meta name="DC.Title" content="Spark list-based controls"/> |
| <meta name="DC.Format" content="XHTML"/> |
| <meta name="DC.Identifier" content="WSc2368ca491e3ff923c946c5112135c8ee9e-8000_verapache"/> |
| <title>Spark list-based controls</title> |
| </head> |
| <body id="WSc2368ca491e3ff923c946c5112135c8ee9e-8000_verapache"><a name="WSc2368ca491e3ff923c946c5112135c8ee9e-8000_verapache"><!-- --></a> |
| |
| <div> |
| <p>The Spark list-based controls are designed to display data |
| items in different visual formats and layouts.</p> |
| |
| </div> |
| |
| <div class="nested1" id="WSc2368ca491e3ff92-1483ec4a12136246e76-8000_verapache"><a name="WSc2368ca491e3ff92-1483ec4a12136246e76-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">Using Spark list-based controls</h2> |
| |
| |
| <div> |
| <p>The Spark list-based controls include the following: </p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/components/ButtonBar.html" target="_blank">ButtonBar</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/components/DataGrid.html" target="_blank">DataGrid</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/components/List.html" target="_blank">List</a> |
| </p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/components/TabBar.html" target="_blank">TabBar</a> |
| </p> |
| |
| </li> |
| |
| </ul> |
| The |
| Spark list-based controls are all subclasses of the SkinnableDataContainer and |
| ListBase classes. The SkinnableDataContainer class is designed to |
| display data items by using item renderers. Data items can be simple |
| data types, such as String and Number objects, or more complex data |
| types such as Object and XMLNode objects.</div> |
| |
| <p>The ListBase class is a subclass of the SkinnableDataContainer |
| class. The ListBase class adds support for item selection in the |
| list of data items, and for controlling the text displayed in the |
| list. The ButtonBar, ComboBox, DropDownList, List, and TabBar controls |
| add additional functionality to the ListBase class. </p> |
| |
| <p>For more information on SkinnableDataContainer, and on creating |
| item renderers, see <a href="flx_groups_containers_gc.html#WS64909091-7042-4fb8-A243-8FD4E2990264_verapache">The |
| Spark DataGroup and Spark SkinnableDataContainer containers</a>.</p> |
| |
| </div> |
| |
| <div><div class="relinfo"><strong>Related information</strong><br/> |
| <div><a href="flx_l10n_ln.html#WS19f279b149e7481c-2b2dfa9012bd01637f0-8000_verapache">Sorting and matching</a></div> |
| </div> |
| </div> |
| <div class="nested2" id="WS6cd884023d998a9b-3788b0fe1213a1cf27d-8000_verapache"><a name="WS6cd884023d998a9b-3788b0fe1213a1cf27d-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Defining the children of a list-based |
| control</h3> |
| |
| |
| <div> |
| <p>The list-based controls 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 control'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>Data items can be simple data items such as String and Number |
| objects, and more complicated data items such as Object and XMLNode |
| objects. The following example shows a List control that displays |
| data items represented by String data:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSimple.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> |
| |
| <s:List> |
| <s:dataProvider> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Flex</fx:String> |
| </mx:ArrayCollection> |
| </s:dataProvider> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For simple data items, such as Strings and Numbers, the controls |
| display the entire data item as a String. For more complicated data |
| items, such as Objects, you can control the text displayed in the |
| control based on the data item. For more information, see <a href="flx_spark_dpcontrols_sdp.html#WS03d33b8076db57b9-6c0c29cf12154aeebb3-8000_verapache">Controlling |
| the text displayed for each data item</a>.</p> |
| |
| <div class="p">Because <samp class="codeph">dataProvider</samp> is the default property |
| of the list-based controls, 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"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSimpleNoDP.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> |
| |
| <s:List> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Flex</fx:String> |
| </mx:ArrayCollection> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS03d33b8076db57b9-6c0c29cf12154aeebb3-8000_verapache"><a name="WS03d33b8076db57b9-6c0c29cf12154aeebb3-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Controlling the text displayed |
| for each data item</h3> |
| |
| |
| <div> |
| <div class="p">The following example shows a List control where each data |
| item is represented by an Object with three fields: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSimpleObjects.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> |
| |
| <s:List id="myList" |
| labelField="firstName"> |
| <mx:ArrayCollection> |
| <fx:Object firstName="Bill" lastName="Smith" companyID="11233"/> |
| <fx:Object firstName="Dave" lastName="Jones" companyID="13455"/> |
| <fx:Object firstName="Mary" lastName="Davis" companyID="11543"/> |
| <fx:Object firstName="Debbie" lastName="Cooper" companyID="14266"/> |
| </mx:ArrayCollection> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>When the data items contains multiple fields, you must configure |
| the control to display the correct String. In the previous example, |
| you use the <samp class="codeph">labelField</samp> property to specify to display |
| the firstName field in the control.</p> |
| |
| <div class="p">You can use several different mechanisms for controlling the |
| String displayed by the control:<ul> |
| <li> |
| <p>Use the <samp class="codeph">labelFunction</samp> property</p> |
| |
| <p>The <samp class="codeph">labelFunction</samp> property |
| lets you define a function that returns a String for display by |
| the control. By default, the <samp class="codeph">labelFunction</samp> property takes |
| precedence over the <samp class="codeph">labelField</samp> property.</p> |
| |
| </li> |
| |
| <li> |
| <p>Use the <samp class="codeph">labelField</samp> property</p> |
| |
| <p>The <samp class="codeph">labelField</samp> property |
| specifies the field of the data item to display in the control. </p> |
| |
| </li> |
| |
| <li> |
| <p>Override the <samp class="codeph">itemToLabel()</samp> method</p> |
| |
| <p>Override |
| the <samp class="codeph">itemToLabel()</samp> method to convert the data item |
| to a String that is then passed to an item renderer. This method |
| is defined on the SkinnableDataContainer class. </p> |
| |
| <p>By default, <samp class="codeph">itemToLabel()</samp> prioritizes <samp class="codeph">labelFunction</samp> over <samp class="codeph">labelField</samp>. |
| If you override <samp class="codeph">itemToLabel()</samp>, you can implement |
| it however you like. Your implementation can then choose to use |
| or ignore <samp class="codeph">labelField</samp> and <samp class="codeph">labelFunction</samp>. |
| For an example that overrides this method, see <a href="flx_spark_itemrenderers_sir.html#WSdfd41de286dc919d-63248ba71211ccd7b7c-8000_verapache">Passing |
| data using the IItemRenderer.label property</a>.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>When you use the <samp class="codeph">labelFunction</samp> property, you |
| define a function that calculates the String to display. Typically, |
| the String is derived from the fields of the data item. The label |
| function must have the following signature:</p> |
| |
| <pre class="codeblock"> <em>labelFunction</em>(<em>item</em>:Object):String</pre> |
| |
| <p>The <samp class="codeph"> |
| <em>item</em> |
| </samp> parameter contains the data |
| item. The function must return a String. </p> |
| |
| <div class="p">The following example uses a label function to concatenate the |
| firstName and lastName fields of each data item for display by the |
| control: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSimpleObjectsLF.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[ |
| public function myLabelFunc(item:Object):String { |
| return item.firstName + " " + item.lastName; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:List id="myList" |
| labelFunction="myLabelFunc"> |
| <mx:ArrayCollection> |
| <fx:Object firstName="Bill" lastName="Smith" companyID="11233"/> |
| <fx:Object firstName="Dave" lastName="Jones" companyID="13455"/> |
| <fx:Object firstName="Mary" lastName="Davis" companyID="11543"/> |
| <fx:Object firstName="Debbie" lastName="Cooper" companyID="14266"/> |
| </mx:ArrayCollection> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS03d33b8076db57b964c4381112154bd95e4-8000_verapache"><a name="WS03d33b8076db57b964c4381112154bd95e4-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Modifying the children of a list-based |
| control</h3> |
| |
| |
| <div> |
| <p>A list-based control creates list items based on the value |
| of its <samp class="codeph">dataProvider</samp> property. Typically, the control |
| creates one list item for each data item. For example, the List |
| control creates one list item for each data item, and the ButtonBar |
| control creates one button for each data item.</p> |
| |
| <div class="p">Use the <samp class="codeph">addItem()</samp> and <samp class="codeph">removeItem()</samp> methods |
| to manipulate the <samp class="codeph">dataProvider</samp> property. A ButtonBar |
| control automatically adds or removes children based on changes |
| to the <samp class="codeph">dataProvider</samp> property, as the following example |
| shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkBBarSimpleModDP.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[ |
| // Add data item, and button, to the ButtonBar. |
| private function addFlexToDP():void { |
| myBB.dataProvider.addItem("Flex"); |
| addFlex.enabled=false; |
| removeFlex.enabled=true; |
| } |
| |
| // Remove data item, and button, from the ButtonBar. |
| private function removeFlexToDP():void { |
| myBB.dataProvider.removeItemAt(4); |
| addFlex.enabled=true; |
| removeFlex.enabled=false; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:ButtonBar id="myBB"> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Flex</fx:String> |
| </mx:ArrayCollection> |
| </s:ButtonBar> |
| |
| <s:Button id="addFlex" label="Add Flex" |
| click="addFlexToDP();"/> |
| <s:Button id="removeFlex" label="Remove Flex" |
| enabled="false" |
| click="removeFlexToDP();"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc2368ca491e3ff9235db62891213693cb54-8000_verapache"><a name="WSc2368ca491e3ff9235db62891213693cb54-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Setting the layout</h3> |
| |
| |
| <div> |
| <div class="p">The list-based controls support the <samp class="codeph">layout</samp> property |
| to let you control the layout of the data items. For example, the |
| default layout of the List control is VerticalLayout. You can use |
| any of the Flex layout classes with the list-based controls, and |
| any custom layouts that you create. <div class="note"><span class="notetitle">Note:</span> The Spark list-based controls |
| do not support the BasicLayout class. Do not use BasicLayout with |
| the Spark list-based controls.</div> |
| |
| </div> |
| |
| <p>The following example overrides that layout to use TileLayout:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListLayout.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:List width="200"> |
| <s:layout> |
| <s:TileLayout/> |
| </s:layout> |
| <mx:ArrayCollection> |
| <fx:String>Flex</fx:String> |
| <fx:String>Installer</fx:String> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Flex</fx:String> |
| <fx:String>TourDeFlex</fx:String> |
| </mx:ArrayCollection> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information on Spark layouts, see <a href="flx_groups_containers_gc.html#WS0141D24B-6AEB-4721-BA04-9BF15F86350F_verapache">About |
| Spark layouts</a>. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS6cd884023d998a9b28545f3b1213a16c583-8000_verapache"><a name="WS6cd884023d998a9b28545f3b1213a16c583-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Working with list events</h3> |
| |
| |
| <div> |
| <div class="p">The list-based classes all support the following events:<ul> |
| <li> |
| <p> |
| <samp class="codeph">caretChange</samp> Dispatched after the focus has |
| changed from one data item to another. For more information, see <a href="flx_spark_dpcontrols_sdp.html#WSbe2da7400ffe6ad4-4db7fd2d121d08216ab-8000_verapache">Working |
| with the caret item</a>.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">change</samp> Dispatched after the currently selected |
| data item changes to another data item. This event is dispatched |
| when the user interacts with the control. </p> |
| |
| <p>When you change |
| the value of the <samp class="codeph">selectedIndex</samp> or <samp class="codeph">selectedItem</samp> properties |
| programmatically, the control does not dispatch the <samp class="codeph">change</samp> event. |
| It dispatches the <samp class="codeph">valueCommit</samp> event instead.</p> |
| |
| <p>For |
| more information, see <a href="flx_spark_dpcontrols_sdp.html#WSc2368ca491e3ff92-d0f023d1213641203f-8000_verapache">Working |
| with the selected item</a>.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">changing</samp> Dispatched before the currently |
| selected data item changes. This event is dispatched when the user |
| interacts with the control. </p> |
| |
| <p>Calling the <samp class="codeph">preventDefault()</samp> method |
| in the event handler prevents the selection from changing. This |
| event is useful when you want to perform processing on the currently |
| selected item before selection moves to a new data item, or to prevent |
| an item from being selected.</p> |
| |
| <p>When you change the value of |
| the <samp class="codeph">selectedIndex</samp> or <samp class="codeph">selectedItem</samp> properties |
| programmatically, it does not dispatch the <samp class="codeph">changing</samp> event. |
| It dispatches the <samp class="codeph">valueCommit</samp> event instead.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The event object for all events is spark.events.IndexChangeEvent.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc2368ca491e3ff92-d0f023d1213641203f-8000_verapache"><a name="WSc2368ca491e3ff92-d0f023d1213641203f-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Working with the selected item</h3> |
| |
| |
| <div> |
| <p>The ListBase class adds support for item selection in the |
| list of data items, and for controlling the text displayed in the |
| list. Several properties of the ListBase class handle the selection |
| of a data item in the control. These properties include the following:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">requireSelection</samp> Specifies that a |
| data item must always be selected. The default is <samp class="codeph">false</samp>. |
| If <samp class="codeph">true</samp>, then the first data item is selected by |
| default until the user selects a list item, or until you set the <samp class="codeph">selectedIndex</samp> property.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">selectedIndex</samp> The index of the currently |
| selected data item. The index of items in the list-based controls |
| is zero-based, which means that values are 0, 1, 2, ... , <em>n</em> - |
| 1, where <em>n</em> is the total number of items. If <samp class="codeph">requireSelection</samp> is <samp class="codeph">false</samp>, |
| you can also set <samp class="codeph">selectedIndex</samp> to -1 to deselect |
| all data items.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">selectedItem</samp> The object from the data provider |
| corresponding to the currently selected data item. </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>You often use these properties in event handlers, as the following |
| example shows for the <samp class="codeph">change</samp> event. In this example, |
| the List control displays the firstName field of each data item. |
| When you select a data item in the control, the event handler for |
| the <samp class="codeph">change</samp> event displays the index and the lastName |
| field of the data item in TextArea controls. </p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSelected.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" |
| height="450"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import spark.events.IndexChangeEvent; |
| |
| protected function selectionChangedHandler(event:IndexChangeEvent):void |
| { |
| var currentIndx:int = event.currentTarget.selectedIndex; |
| var currentDataItem:Object = event.currentTarget.selectedItem; |
| selIndex.text = String(currentIndx); |
| selLName.text = String(currentDataItem.lastName); |
| } |
| |
| ]]> |
| </fx:Script> |
| |
| <s:List id="myList" |
| labelField="firstName" |
| change="selectionChangedHandler(event)"> |
| <mx:ArrayCollection> |
| <fx:Object firstName="Bill" lastName="Smith" companyID="11233"/> |
| <fx:Object firstName="Dave" lastName="Jones" companyID="13455"/> |
| <fx:Object firstName="Mary" lastName="Davis" companyID="11543"/> |
| <fx:Object firstName="Debbie" lastName="Cooper" companyID="14266"/> |
| </mx:ArrayCollection> |
| </s:List> |
| |
| <s:Label text="Selected index:"/> |
| <s:TextArea id="selIndex" height="50"/> |
| |
| <s:Label text="Selected Last Name:"/> |
| <s:TextArea id="selLName" height="50"/> |
| |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>The <samp class="codeph">currentTarget</samp> property of the object passed |
| to the event handler contains a reference to the List control. Therefore, |
| the <samp class="codeph">currentTarget.selectedIndex</samp> field contains |
| the index of the selected item, and the <samp class="codeph">currentTarget.selectedItem</samp> field |
| contains a copy of the selected item. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSbe2da7400ffe6ad4-4db7fd2d121d08216ab-8000_verapache"><a name="WSbe2da7400ffe6ad4-4db7fd2d121d08216ab-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Working with the caret item</h3> |
| |
| |
| <div> |
| <p>The selected item is the item in the control selected by |
| clicking on the item, or by using the arrow keys. For more information |
| about determining the selected item, see <a href="flx_spark_dpcontrols_sdp.html#WSc2368ca491e3ff92-d0f023d1213641203f-8000_verapache">Working |
| with the selected item</a>.</p> |
| |
| <p>The caret item is the data item that currently has focus. The |
| caret item can be the currently selected data item, or it can be |
| a different item. </p> |
| |
| <p>You use the <samp class="codeph">caretIndex</samp> property to determine |
| the index of the data item that currently has focus. The index is |
| zero-based, which means that values are 0, 1, 2, ... , <em>n</em> - |
| 1, where <em>n</em> is the total number of items. </p> |
| |
| <div class="p">The following example displays the <samp class="codeph">selectedIndex</samp> and |
| the <samp class="codeph">caretIndex</samp> properties for a List control: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListCaret.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 paddingTop="5" paddingLeft="5"/> |
| </s:layout> |
| <s:Label text="The selected item is: {myList.selectedIndex}" /> |
| <s:Label text="The caret item is: {myList.caretIndex}" /> |
| |
| <s:List id="myList"> |
| <s:dataProvider> |
| <s:ArrayCollection> |
| <fx:String>One</fx:String> |
| <fx:String>Two</fx:String> |
| <fx:String>Three</fx:String> |
| <fx:String>Four</fx:String> |
| <fx:String>Five</fx:String> |
| <fx:String>Six</fx:String> |
| <fx:String>Seven</fx:String> |
| <fx:String>Eight</fx:String> |
| <fx:String>Nine</fx:String> |
| <fx:String>Ten</fx:String> |
| </s:ArrayCollection> |
| </s:dataProvider> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>To see the difference between the <samp class="codeph">selectedIndex</samp> and |
| the <samp class="codeph">caretIndex</samp> properties:</p> |
| |
| <div class="p"> |
| <ol> |
| <li> |
| <p>Select an item in the List control by clicking on |
| it. Notice that because the item is both selected and in focus that |
| the <samp class="codeph">selectedIndex</samp> and the <samp class="codeph">caretIndex</samp> properties |
| have the same value.</p> |
| |
| </li> |
| |
| <li> |
| <p>Use the Up Arrow and Down Arrow keys to move the selected |
| item. Notice that because the item is both selected and in focus |
| that the <samp class="codeph">selectedIndex</samp> and the <samp class="codeph">caretIndex</samp> properties |
| have the same value.</p> |
| |
| </li> |
| |
| <li> |
| <p>With an item selected:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p>(On Windows) Hold |
| down the Control key, and then use the Up Arrow and Down Arrow keys |
| to move the caret index. </p> |
| |
| </li> |
| |
| <li> |
| <p>(On OSX) Hold down the Command key, and then use the Up Arrow |
| and Down Arrow keys to move the caret index.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>Notice |
| that the List control displays a blue box around the data item at |
| the caret index, but the index of the selected item does not change. |
| The data item at the caret index has focus, but is not selected. |
| Press the Space key to select the data item at the caret index.</p> |
| |
| </li> |
| |
| </ol> |
| |
| </div> |
| |
| <p>The list-based controls dispatch the <samp class="codeph">caretChange</samp> event |
| when the caret item changes.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc2368ca491e3ff9236e165f11213640d404-7fff_verapache"><a name="WSc2368ca491e3ff9236e165f11213640d404-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">Working with item renderers</h3> |
| |
| |
| <div> |
| <div class="p">Because the list-based classes are subclasses of the SkinnableDataContainer class, |
| they require an item renderer to display the data items. The SkinnableDataContainer |
| class does not define a default item renderer. However, the list-based classes |
| all define a default item render 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="d874342e737"> |
| <p>Control</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e743"> |
| <p>Default item renderer</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e737 "> |
| <p>ButtonBar</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e743 "> |
| <p>ButtonBarButton</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e737 "> |
| <p>ComboBox</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e743 "> |
| <p>DefaultItemRenderer</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e737 "> |
| <p>DropDownList</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e743 "> |
| <p>DefaultItemRenderer</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e737 "> |
| <p>List</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e743 "> |
| <p>DefaultItemRenderer</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e737 "> |
| <p>TabBar</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e743 "> |
| <p>ButtonBarButton with TabBarButtonSkin as |
| the skin</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| <p>You can override the default item renderer. 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> |
| |
| </div> |
| |
| <div class="nested3" id="WS685c4ccbb85d340c6617851e121d4b8abae-8000_verapache"><a name="WS685c4ccbb85d340c6617851e121d4b8abae-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using virtualization with list-based |
| controls</h4> |
| |
| |
| <div> |
| <p>A list-based control can represent any number of children. |
| However, each child requires an instance of an item renderer. If |
| the container has many children, you can notice performance degradation |
| as you add more children to the container. </p> |
| |
| <p>Instead of creating an item renderer for each child, you can |
| use the <samp class="codeph">useVirtualLayout</samp> property to configure |
| the control to use a virtual layout. With virtual layout enabled, |
| the control 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>The layout class associated with a component determines if the |
| component supports virtual layout. Typically, you use the component's |
| skin class to specify the layout class. By default, the skins for |
| the Spark list-based classes have the <samp class="codeph">useVirtualLayout</samp> property |
| to <samp class="codeph">true</samp> to enable virtual layout. </p> |
| |
| <p>However, the default skins of some components use layouts that |
| do not support the <samp class="codeph">useVirtualLayout</samp> property. The |
| TabBar and ButtonBar components use the ButtonBarHorizontalLayout |
| which does not support the <samp class="codeph">useVirtualLayout</samp> property |
| or virtual layout.</p> |
| |
| <p>For more information on virtualization, see <a href="flx_groups_containers_gc.html#WS486D1976-E12C-4654-B330-3DF3B23614F6_verapache">Using |
| virtualization with Spark DataGroup and SkinnableDataContainer</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS685c4ccbb85d340c20922a64121d4f3334f-8000_verapache"><a name="WS685c4ccbb85d340c20922a64121d4f3334f-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">Supporting view states in an item |
| renderer for a list-based control</h4> |
| |
| |
| <div> |
| <p>The Spark list-based controls support view states that |
| you can use in a custom item renderer. Support for these view states |
| is not required. If the host component attempts to set the item |
| renderer to a view state that is not defined in the renderer, then |
| the item renderer uses the normal view state. </p> |
| |
| <div class="p">Flex defines the following view states for item renderers. <ul> |
| <li> |
| <p>normal The data item has no user interaction.</p> |
| |
| </li> |
| |
| <li> |
| <p>hovered The mouse is over the data item.</p> |
| |
| </li> |
| |
| <li> |
| <p>selected The data item is selected.</p> |
| |
| </li> |
| |
| <li> |
| <p>dragging The data item is being dragged.</p> |
| |
| </li> |
| |
| <li> |
| <p>normalAndShowCaret The data item is in the normal state, |
| and it has focus in the item list. </p> |
| |
| </li> |
| |
| <li> |
| <p>hoveredAndShowCaret The data item is in the hovered state, |
| and it has focus in the item list.</p> |
| |
| </li> |
| |
| <li> |
| <p>selectedAndShowCaret The data item is in the selected state, |
| and it has focus in the item list.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The default item renderers, including DefaultItemRenderer and |
| DefaultComplexItemRenderer, support all of these view states. </p> |
| |
| <p>The list-based controls add the ability to select a data item. |
| Therefore, one of the view states corresponds to the data item being |
| selected. The item renderer can use the selected view state to modify |
| the appearance of the item when selected.</p> |
| |
| <p>Several view states are associated with the caret index. The |
| caret index identifies the data item that has focus. That item does |
| not have to be the selected item, </p> |
| |
| <div class="p">The following example shows a simple item renderer for the List |
| class that supports the selected view state. In this example, the |
| item renderer shows the selected item in red with a black border: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <s:ItemRenderer 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[ |
| |
| override public function set label(value:String):void { |
| super.label = value; |
| labelDisplay.text = label; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:states> |
| <s:State name="normal"/> |
| <s:State name="hovered"/> |
| <s:State name="selected"/> |
| </s:states> |
| |
| <s:Rect left="0" right="0" top="0" bottom="0"> |
| <s:stroke.selected> |
| <s:SolidColorStroke |
| color="0x000000" |
| weight="1"/> |
| </s:stroke.selected> |
| <s:fill> |
| <s:SolidColor |
| color.normal="0xFFFFFF" |
| color.hovered="0xCEDBEF" |
| color.selected="0x00FF00"/> |
| </s:fill> |
| </s:Rect> |
| <s:Label id="labelDisplay" |
| fontWeight.selected="bold" |
| verticalCenter="0" |
| left="3" right="3" |
| top="6" bottom="4"/> |
| </s:ItemRenderer></pre> |
| |
| </div> |
| |
| <p>This item renderer does not define all possible view states. |
| If the host component attempts to set it to any undefined view state, |
| the item renderer uses the normal state.</p> |
| |
| <div class="p">The following application uses this item renderer: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListIR.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> |
| |
| <s:List itemRenderer="myComponents.ListSelectedIR"> |
| <s:dataProvider> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Flex</fx:String> |
| </mx:ArrayCollection> |
| </s:dataProvider> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested3" id="WS77c1dbb1bd80d3836663fb6012af31eb8a5-8000_verapache"><a name="WS77c1dbb1bd80d3836663fb6012af31eb8a5-8000_verapache"><!-- --></a> |
| <h4 class="topictitle4">Using a mobile item renderer with |
| a Spark list-based control</h4> |
| |
| |
| <div> |
| <p>Flex provides two item renderers that you can use with |
| Spark list-based controls in mobile applications. These item renderers, <a href="https://flex.apache.org/asdoc/spark/components/LabelItemRenderer.html" target="_blank">spark.components.LabelItemRenderer</a> and <a href="https://flex.apache.org/asdoc/spark/components/IconItemRenderer.html" target="_blank">spark.components.IconItemRenderer</a>, |
| are written in ActionScript to provide the highest level of performance |
| required by mobile applications. </p> |
| |
| <p>The default theme for mobile applications built in Flex is the |
| Mobile theme. When you use the Mobile theme, Flex automatically |
| uses the LabelItemRenderer for the Flex list-based controls. Like |
| the DefaultItemRenderer, the LabelItemRenderer displays a single |
| text field for each data item. </p> |
| |
| <p>You can use the IconItemRenderer in a mobile application. The |
| IconItemRenderer displays two text fields, one above the other, |
| and two icons for every data item. </p> |
| |
| <div class="p">The following example shows a List control defined in the view |
| of a mobile application. In this example, the List control uses |
| the IconItemRenderer to display the first name, last name, and an |
| icon for every data item in the list: <pre class="noswf"><?xml version="1.0" encoding="utf-8"?> |
| <!-- containers\mobile\views\ContactsMobileIconIR.mxml --> |
| <s:View xmlns:fx="http://ns.adobe.com/mxml/2009" |
| xmlns:s="library://ns.adobe.com/flex/spark" |
| title="Contacts View Main"> |
| <s:layout> |
| <s:VerticalLayout paddingTop="10"/> |
| </s:layout> |
| |
| <fx:Style> |
| @namespace s "library://ns.adobe.com/flex/spark"; |
| .myFontStyle { |
| fontSize: 15; |
| color: #9933FF; |
| } |
| |
| </fx:Style> |
| |
| <s:Label text="Select a contact name"/> |
| <s:List id="myList" |
| width="100%" height="100%" |
| labelField="firstName"> |
| <s:itemRenderer> |
| <fx:Component> |
| <s:IconItemRenderer messageStyleName="myFontStyle" fontSize="25" |
| labelField="firstName" |
| messageField="lastName" |
| decorator="@Embed(source='assets/logo_small.jpg')"/> |
| </fx:Component> |
| </s:itemRenderer> |
| <s:ArrayCollection> |
| <fx:Object firstName="Dave" lastName="Duncam" company="Adobe" phone="413-555-1212"/> |
| <fx:Object firstName="Sally" lastName="Smith" company="Acme" phone="617-555-1491"/> |
| <fx:Object firstName="Jim" lastName="Jackson" company="Beta" phone="413-555-2345"/> |
| <fx:Object firstName="Mary" lastName="Moore" company="Gamma" phone="617-555-1899"/> |
| </s:ArrayCollection> |
| </s:List> |
| </s:View></pre> |
| |
| </div> |
| |
| </div> |
| |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSc2368ca491e3ff923c946c5112135c8ee9e-7fff_verapache"><a name="WSc2368ca491e3ff923c946c5112135c8ee9e-7fff_verapache"><!-- --></a> |
| <h2 class="topictitle2">Spark List control</h2> |
| |
| |
| <div> |
| <p>The Spark <a href="https://flex.apache.org/asdoc/spark/components/List.html" target="_blank">List</a> control |
| displays a list of data items. Its functionality is very similar to |
| that of the SELECT form element in HTML. The user can select one |
| or more items from the list. The List control automatically displays |
| horizontal and vertical scroll bar when the list items do not fit |
| the size of the control.</p> |
| |
| <p>The List control is a subclass of the SkinnableDataContainer |
| container. Therefore, you can set the layout of the List control, |
| apply a skin to it, and define a custom item renderer. For more |
| information on the SkinnableDataContainer container, see <a href="flx_groups_containers_gc.html#WS64909091-7042-4fb8-A243-8FD4E2990264_verapache">The |
| Spark DataGroup and Spark SkinnableDataContainer containers</a>. |
| To define a look and feel of items displayed in the List control, |
| read more about <a href="flx_spark_itemrenderers_sir.html#WS03d33b8076db57b9-23c04461124bbeca597-8000_verapache">Define |
| a custom Spark item renderer</a>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS6cd884023d998a9b-e76770c1213a7d1e1c-8000_verapache"><a name="WS6cd884023d998a9b-e76770c1213a7d1e1c-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark List control</h3> |
| |
| |
| <div> |
| <p>You use the <samp class="codeph"><s:List></samp> tag to define |
| a Spark List control. 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> |
| |
| <div class="p">You specify the data for the List control by using the <samp class="codeph">dataProvider</samp> property of |
| the control. However, because <samp class="codeph">dataProvider</samp> is the |
| List control's default property, you do not have to specify a <samp class="codeph"><s:dataProvider></samp> child |
| tag of the <samp class="codeph"><s:List></samp> tag, as the following |
| example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSimpleNoDP.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> |
| |
| <s:List> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Flex</fx:String> |
| </mx:ArrayCollection> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The default skin for the List control, ListSkin, defines scroll |
| bars by including a Scroller component in the skin class. You can |
| reference the Scroller component from the List by using the <samp class="codeph">List.scroller</samp> skin |
| part. Therefore, if the data items do not fit in the size of the |
| control, Flex automatically display scroll bars, as the following |
| example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSimpleScroll.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> |
| |
| <s:List height="100"> |
| <s:dataProvider> |
| <mx:ArrayCollection> |
| <fx:String>Flex</fx:String> |
| <fx:String>Installer</fx:String> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Mobile Trader</fx:String> |
| <fx:String>TourDeFlex</fx:String> |
| <fx:String>Squiggly</fx:String> |
| </mx:ArrayCollection> |
| </s:dataProvider> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc2368ca491e3ff923c946c5112135c8ee9e-7ffe_verapache"><a name="WSc2368ca491e3ff923c946c5112135c8ee9e-7ffe_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using the styles of the Spark List |
| control</h3> |
| |
| |
| <div> |
| <p>The List control defines several styles that you can use |
| to modify the appearance of the control. You can use styles to make |
| some visual changes to the control, but you create a skin for total |
| control over the display.</p> |
| |
| <div class="p">The following example uses the <samp class="codeph">alternatingItemColors</samp> and <samp class="codeph">rollOverColor</samp> styles |
| with the List control. The <samp class="codeph">alternatingItemColors</samp> styles |
| defines an Array with two entries, #66FFFF for light blue and #33CCCC |
| for a blue-gray. Therefore, the rows of the List control alternate |
| between these two colors. If you specify a three-color array, the |
| rows alternate among the three colors, and so on. <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\spark\SparkListSimpleStyles.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> |
| |
| <s:List |
| alternatingItemColors="[#66FFFF, #33CCCC]" |
| rollOverColor="#CC6600"> |
| <s:dataProvider> |
| <mx:ArrayCollection> |
| <fx:String>Flex</fx:String> |
| <fx:String>Installer</fx:String> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Mobile Trader</fx:String> |
| </mx:ArrayCollection> |
| </s:dataProvider> |
| </s:List> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS6cd884023d998a9b152784b61213a82af4e-8000_verapache"><a name="WS6cd884023d998a9b152784b61213a82af4e-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Handling multiple selection in |
| the Spark List control</h3> |
| |
| |
| <div> |
| <p>The List control lets you select multiple items in the |
| control. To enable multiple selection, set the <samp class="codeph">allowMultipleSelection</samp> property |
| to <samp class="codeph">true</samp>. The default value is <samp class="codeph">false</samp>. </p> |
| |
| <p>After enabling multiple selection, select the first data item |
| in the List by clicking on it. Then hold down the Control key to |
| select additional items. If the item is currently deselected, clicking |
| on it while holding down the Control key selects it. If the item |
| is already selected, clicking on it while holding down the Control |
| key deselects it.</p> |
| |
| <p>You can also use the Shift key to select a range of data items. |
| To select a range, select the first data item in the List by clicking |
| on it. Then hold down the Shift key to select one additional item. |
| The List control selects all data items between the two data items. </p> |
| |
| <p>The List control defines two Vector properties that you use with |
| multiple selection: <samp class="codeph">selectedIndices</samp> and <samp class="codeph">selectedItems</samp>. |
| The <samp class="codeph">selectedIndices</samp> Vector is of type int, and |
| the <samp class="codeph">selectedItems</samp> Vector is of type Object. These |
| Vectors contain a list of the selected indices and selected data items |
| in the reverse order in which they were selected. That means the |
| first element in each Vector corresponds to the last item selected. |
| The length of each Vector is the same as the number of selected |
| items in the control. If your list contains 100 data items, these |
| Vectors can be up to 100 elements long. </p> |
| |
| <div class="p">The following example enables multiple selection for the List |
| control. It displays the index of all selected items in one TextArea |
| control, and the data item itself in a second TextArea control: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkListSimpleMultipleSelection.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" |
| height="450"> |
| <s:layout> |
| <s:VerticalLayout/> |
| </s:layout> |
| |
| <fx:Script> |
| <![CDATA[ |
| import spark.events.IndexChangeEvent; |
| |
| private function myChangedHandler(event:IndexChangeEvent):void { |
| |
| var selIndices:Vector.<int> = event.currentTarget.selectedIndices; |
| var selItems:Vector.<Object> = event.currentTarget.selectedItems; |
| var numItems:Number = selIndices.length; |
| |
| selIndicesTA.text = ""; |
| selItemsTA.text = ""; |
| |
| for (var i:Number = 0; i<numItems; i++) |
| { |
| selIndicesTA.text = selIndicesTA.text + selIndices[i] + "\n"; |
| selItemsTA.text = selItemsTA.text + selItems[i] + "\n"; |
| } |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:List allowMultipleSelection="true" |
| change="myChangedHandler(event);"> |
| <mx:ArrayCollection> |
| <fx:String>Flex</fx:String> |
| <fx:String>Installer</fx:String> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Mobile Trader</fx:String> |
| </mx:ArrayCollection> |
| </s:List> |
| |
| <s:Label text="Selected indices"/> |
| <s:TextArea id="selIndicesTA" height="75"/> |
| <s:Label text="Selected items"/> |
| <s:TextArea id="selItemsTA" height="75"/> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>Selecting multiple items does not dispatch the <samp class="codeph">changing</samp> event. |
| It only dispatches the <samp class="codeph">change</samp> event. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS6cd884023d998a9b6fc64cf61213a764be1-8000_verapache"><a name="WS6cd884023d998a9b6fc64cf61213a764be1-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Spark List control user interaction</h3> |
| |
| |
| <div> |
| <p>The user clicks individual data items to select them, and |
| holds down the Control and Shift keys while clicking to select multiple |
| items. You must set the <samp class="codeph">allowMultipleSelection</samp> property |
| to <samp class="codeph">true</samp> to allow multiple selection.</p> |
| |
| <p>A List control shows the number of data items that fit in the |
| display. Paging down through the data items displayed by a 10-line |
| List control shows records 0-9, 10-19, 20-29, and so on.</p> |
| |
| <p>The |
| List control has the following default keyboard navigation features:</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="d874342e1251"> |
| <p>Key</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e1257"> |
| <p>Action</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Up Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection up one item. Hold down the |
| Control key (Windows) or Command key (OSX) to only move focus, but |
| not change the selected item.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Down Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection down one item. Hold down |
| the Control key (Windows) or Command key (OSX) to only move focus, |
| but not change the selected item.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Left Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection one column to the left, |
| if you are using HorizontalLayout or TileLayout only. Hold down |
| the Control key (Windows) or Command key (OSX) to only move focus, |
| but not change the selected item.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Right Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection one column to the right, |
| if you are using HorizontalLayout or TileLayout only. Hold down |
| the Control key (Windows) or Command key (OSX) to only move focus, |
| but not change the selected item.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Page Up</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection up one page.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Page Down</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection down one page.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Home</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection to the top of the list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>End</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Moves selection to the bottom of the list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Alphanumeric keys</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Jumps to the next item with a label that |
| begins with the character typed.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Control</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Toggle key. Allows for multiple (noncontiguous) |
| selection and deselection. Works with key presses, click selection, |
| and drag selection.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1251 "> |
| <p>Shift</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e1257 "> |
| <p>Contiguous selection key. Allows for contiguous |
| selections. Works with key presses, click selection, and drag selection.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSc2368ca491e3ff92-59bf082612135c9e688-8000_verapache"><a name="WSc2368ca491e3ff92-59bf082612135c9e688-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">Spark ButtonBar and TabBar controls</h2> |
| |
| |
| <div> |
| <p>The |
| Spark <a href="https://flex.apache.org/asdoc/spark/components/ButtonBar.html" target="_blank">ButtonBar</a> control |
| defines a horizontal row of related buttons with a common appearance. |
| The controls define a single event, the <samp class="codeph">itemClick</samp> event, that |
| is dispatched when any button in the control is selected. </p> |
| |
| <p>The buttons maintain their state, either selected or deselected. |
| Only one button in the ButtonBar control can be in the selected |
| state. That means when you select a button in a ButtonBar control, |
| the button stays in the selected state until you select a different |
| button.</p> |
| |
| <p>The <a href="https://flex.apache.org/asdoc/spark/components/ButtonBar.html" target="_blank">TabBar</a> control |
| is similar to the ButtonBar control, except that is displays a horizontal |
| row of tabs instead of buttons. </p> |
| |
| </div> |
| |
| <div class="nested2" id="WSc2368ca491e3ff92-21cccce612135cde179-8000_verapache"><a name="WSc2368ca491e3ff92-21cccce612135cde179-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark ButtonBar control</h3> |
| |
| |
| <div> |
| <p>You create a Spark ButtonBar control in MXML by using the <samp class="codeph"><s:ButtonBar></samp> tag. |
| 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> |
| |
| <div class="p">You specify the data for the ButtonBar control by using the <samp class="codeph">dataProvider</samp> property |
| of the control. However, because <samp class="codeph">dataProvider</samp> is |
| the ButtonBar control's default property, you do not have to specify |
| a <samp class="codeph"><s:dataProvider></samp> child tag of the <samp class="codeph"><s:ButtonBar></samp> tag, |
| as the following example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkBBarSimple.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 paddingLeft="20" paddingTop="20"/> |
| </s:layout> |
| |
| <s:ButtonBar> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Mobile Trader</fx:String> |
| </mx:ArrayCollection> |
| </s:ButtonBar> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>This example creates a row of four Button controls. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSed1ae4ff1d6fc04c40e2042a124f8a6d4f3-8000_verapache"><a name="WSed1ae4ff1d6fc04c40e2042a124f8a6d4f3-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Creating a Spark TabBar control</h3> |
| |
| |
| <div> |
| <p>You create a Spark TabBar control in MXML by using the <samp class="codeph"><s:TabBar></samp> tag. 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> |
| |
| <div class="p">You specify the data for the TabBar control by using the <samp class="codeph">dataProvider</samp> property |
| of the control. However, because <samp class="codeph">dataProvider</samp> is |
| the TabBar control's default property, you do not have to specify |
| a <samp class="codeph"><s:dataProvider></samp> child tag of the <samp class="codeph"><s:TabBar></samp> tag, |
| as the following example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkTabBarSimple.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 paddingLeft="20" paddingTop="20"/> |
| </s:layout> |
| |
| <s:TabBar> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Mobile Trader</fx:String> |
| </mx:ArrayCollection> |
| </s:TabBar> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>This example creates a row of four tabs. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS70ef25857c0d979e-5df5db17123beb1864c-8000_verapache"><a name="WS70ef25857c0d979e-5df5db17123beb1864c-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using the Spark ButtonBar and TabBar |
| controls with an MX ViewStack container</h3> |
| |
| |
| <div> |
| <div class="p">You can use the Spark <a href="https://flex.apache.org/asdoc/spark/components/ButtonBar.html" target="_blank">ButtonBar</a> and <a href="https://flex.apache.org/asdoc/spark/components/ButtonBar.html" target="_blank">TabBar</a> controls |
| to set the active child of a <a href="https://flex.apache.org/asdoc/mx/containers/ViewStack.html" target="_blank">ViewStack</a> container, |
| as the following example shows: <pre class="codeblock"><?xml version="1.0"?> |
| <!-- containers\navigators\VSSparkButtonBar.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:VGroup> |
| <!-- Create a Spark ButtonBar control to navigate |
| the ViewStack container. --> |
| <s:ButtonBar dataProvider="{myViewStack}"/> |
| |
| <!-- Define the ViewStack and the three child containers. --> |
| <mx:ViewStack id="myViewStack" |
| borderStyle="solid" |
| width="100%"> |
| |
| <s:NavigatorContent id="search" label="Search"> |
| <s:Label text="Search Screen"/> |
| </s:NavigatorContent> |
| |
| <s:NavigatorContent id="custInfo" label="Customer Info"> |
| <s:Label text="Customer Info"/> |
| </s:NavigatorContent> |
| |
| <s:NavigatorContent id="accountInfo" label="Account Info"> |
| <s:Label text="Account Info"/> |
| </s:NavigatorContent> |
| </mx:ViewStack> |
| </s:VGroup> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>For more information on the ViewStack control, see the <a href="flx_navigators_na.html#WS2db454920e96a9e51e63e3d11c0bf69084-7e4d_verapache">MX |
| ViewStack navigator container</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS685c4ccbb85d340c37aa4c55121d51f471a-8000_verapache"><a name="WS685c4ccbb85d340c37aa4c55121d51f471a-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Using skins and styles with the |
| Spark ButtonBar and TabBar controls</h3> |
| |
| |
| <div> |
| <div class="p">The default skin class for the ButtonBar control, <a href="https://flex.apache.org/asdoc/spark/skins/spark/ButtonBarSkin.html" target="_blank">spark.skins.spark.ButtonBarSkin</a>, references |
| three skin classes to define the buttons: <ul> |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/skins/spark/ButtonBarFirstButtonSkin.html" target="_blank">spark.skins.spark.ButtonBarFirstButtonSkin</a> The |
| skin for the first button.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/skins/spark/ButtonBarMiddleButtonSkin.html" target="_blank">spark.skins.spark.ButtonBarMiddleButtonSkin</a> The |
| skin for the middle buttons.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <a href="https://flex.apache.org/asdoc/spark/skins/spark/ButtonBarLastButtonSkin.html" target="_blank">spark.skins.spark.ButtonBarLastButtonSkin</a> The |
| skin for the last button.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>The individual button skins define the buttons to be instances |
| of the ButtonBarButton control. You can define custom skin classes |
| for the ButtonBar control. Your custom skin classes can then use |
| any control to represent each data item, not just the ButtonBarButton |
| control. </p> |
| |
| <p>The tabs on a TabBar control are all drawn in the same way. Therefore, |
| the default skin class for the TabBar control, <a href="https://flex.apache.org/asdoc/spark/skins/spark/TabBarSkin.html" target="_blank">spark.skins.spark.TabBarSkin</a>, |
| references only a single skin class to draw the tabs: <a href="https://flex.apache.org/asdoc/spark/skins/spark/TabBarButtonSkin.html" target="_blank">spark.skins.spark.TabBarButtonSkin</a>.</p> |
| |
| <p>You can also set styles to control the appearance of the buttons |
| and tabs. The following example uses styles on the ButtonBar and |
| ButtonBarButton controls to define the appearance of the individual |
| buttons:</p> |
| |
| <div class="p"> |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkBBStyled.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 paddingLeft="20" paddingTop="20"/> |
| </s:layout> |
| |
| <fx:Style> |
| @namespace s "library://ns.adobe.com/flex/spark"; |
| s|ButtonBar s|ButtonBarButton:upAndSelected, |
| s|ButtonBar s|ButtonBarButton:overAndSelected, |
| s|ButtonBar s|ButtonBarButton:downAndSelected, |
| s|ButtonBar s|ButtonBarButton:disabledAndSelected { |
| chromeColor: #663366; |
| color: #9999CC; |
| } |
| s|ButtonBar { |
| chromeColor: #9999CC; |
| color: #663366; |
| } |
| </fx:Style> |
| |
| <s:ButtonBar |
| requireSelection="true" |
| width="320"> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Mobile Trader</fx:String> |
| </mx:ArrayCollection> |
| </s:ButtonBar> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>In this example, you use CSS descendant selectors to style the |
| ButtonBarButton controls of the ButtonBar, and to set styles directly |
| on the ButtonBar control. The styles of the ButtonBarButton controls |
| define the appearance of the controls for different view states |
| of the ButtonBarButton control. </p> |
| |
| <p>For more information on using descendant selectors, see <a href="flx_styles_st.html#WS2db454920e96a9e51e63e3d11c0bf62883-7ff2_verapache">Using |
| Cascading Style Sheets</a>.</p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSc2368ca491e3ff92e5025b12135cf1d52-8000_verapache"><a name="WSc2368ca491e3ff92e5025b12135cf1d52-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Handling Spark ButtonBar and TabBar |
| events</h3> |
| |
| |
| <div> |
| <p>The ButtonBar and TabBar controls dispatches a <samp class="codeph">change</samp> event |
| when you select a button or tab. The event object passed to the |
| event listener is of type <a href="https://flex.apache.org/asdoc/mx/events/IndexChangedEvent.html" target="_blank">IndexChangeEvent</a>. |
| Access properties of the event object to determine the index of the |
| selected button or tab, and other information. The index of the |
| first button or tab is 0. For more information about the event object, |
| see the description of the ItemClickEvent class in the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| <p>The ButtonBar control in the following example defines an event |
| listener, named <samp class="codeph">changeHandler()</samp>, for the <samp class="codeph">change</samp> event:</p> |
| |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkBBarEvent.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 spark.events.IndexChangeEvent; |
| |
| private function changeHandler(event:IndexChangeEvent):void { |
| myTA.text="Selected button index: " + |
| String(event.newIndex) + "\n" + |
| "Selected button label: " + |
| event.target.selectedItem; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:ButtonBar |
| change="changeHandler(event);"> |
| <mx:ArrayCollection> |
| <fx:String>Falcon</fx:String> |
| <fx:String>AntOnAIR</fx:String> |
| <fx:String>FlexJS</fx:String> |
| <fx:String>Mobile Trader</fx:String> |
| </mx:ArrayCollection> |
| </s:ButtonBar> |
| |
| <s:TextArea id="myTA" width="250" height="100"/> |
| </s:Application></pre> |
| |
| <p>In this example, the click handler displays the index and label |
| of the selected button in a TextArea control in response to an <samp class="codeph">change</samp> event. </p> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WSc2368ca491e3ff92-59bf082612135c9e688-7fff_verapache"><a name="WSc2368ca491e3ff92-59bf082612135c9e688-7fff_verapache"><!-- --></a> |
| <h2 class="topictitle2">Spark DropDownList control</h2> |
| |
| |
| <div> |
| <p>The <a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> control |
| pops up a list when the user selects the anchor. When the user selects |
| an item from the drop-down list, the data item appears in the prompt |
| area of the control. </p> |
| |
| <p>The following image shows the DropDownList control:</p> |
| |
| <div class="p"> |
| <div class="figborder"> |
| <img src="images/sdp_dropdownlist.png"/> |
| <dl> |
| |
| <dt class="dlterm">A.</dt> |
| |
| <dd>Prompt in a closed DropDownList</dd> |
| |
| |
| |
| <dt class="dlterm">B.</dt> |
| |
| <dd>Drop-down |
| list in an open DropDownList</dd> |
| |
| |
| |
| <dt class="dlterm">C.</dt> |
| |
| <dd>Anchor |
| in a closed DropDownList</dd> |
| |
| |
| </dl> |
| |
| </div> |
| |
| </div> |
| |
| <p>Unlike the <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control, |
| the DropDownList control is not editable.</p> |
| |
| <p>When the drop-down list is closed, clicking the anchor button |
| opens it.</p> |
| |
| <div class="p">When the drop-down list is open: <ul> |
| <li> |
| <p>Clicking the anchor |
| button closes the drop-down list and commits the currently selected |
| data item.</p> |
| |
| </li> |
| |
| <li> |
| <p>Clicking outside the drop-down list closes the drop-down |
| list and commits the currently selected data item.</p> |
| |
| </li> |
| |
| <li> |
| <p>Clicking on a data item selects that item and closes the |
| drop-down list.</p> |
| |
| </li> |
| |
| <li> |
| <p>If the <samp class="codeph">requireSelection</samp> property is <samp class="codeph">false</samp>, |
| clicking on a data item while pressing the Control key deselects |
| the item and closes the drop-down list.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <p>For a complete list of keyboard command for the DropDownList |
| control, see <a href="flx_spark_dpcontrols_sdp.html#WSadd5e192b30094714d63c41412158f77a50-8000_verapache">Spark |
| DropDownList control user interaction</a>.</p> |
| |
| <p>For complete reference information, see the <em> |
| <a href="https://flex.apache.org/asdoc/" target="_blank">ActionScript 3.0 Reference for Apache Flex</a></em>.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS6cd884023d998a9b-7e46afdc1213b366d95-8000_verapache"><a name="WS6cd884023d998a9b-7e46afdc1213b366d95-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Create a Spark DropDownList control</h3> |
| |
| |
| <div> |
| <p>You define a <a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> control |
| in MXML by using the <samp class="codeph"><s:DropDownList></samp> tag. |
| Specify an <samp class="codeph">id</samp> value if you intend to refer to a |
| component elsewhere in your MXML application, either in another |
| tag or in an ActionScript block.</p> |
| |
| <div class="p">You specify the data for the DropDownList control by using the <samp class="codeph">dataProvider</samp> property. |
| However, because <samp class="codeph">dataProvider</samp> is the DropDownList |
| control's default property, you do not have to specify a <samp class="codeph"><s:dataProvider></samp> child |
| tag of the <samp class="codeph"><s:DropDownList></samp> tag, as the following |
| example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkDDSimple.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:DropDownList width="140"> |
| <mx:ArrayCollection> |
| <fx:String>Alabama</fx:String> |
| <fx:String>Alaska</fx:String> |
| <fx:String>Arizona</fx:String> |
| <fx:String>Arkansas</fx:String> |
| <fx:String>California</fx:String> |
| </mx:ArrayCollection> |
| </s:DropDownList> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS2932d624c07cb90d2dc2c0e12140baed89-8000_verapache"><a name="WS2932d624c07cb90d2dc2c0e12140baed89-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Set the prompt in the Spark DropDownList |
| control</h3> |
| |
| |
| <div> |
| <p>By default, the prompt area is empty when the control first |
| loads. Selecting a data item in the drop-down list sets the prompt |
| to the data item. </p> |
| |
| <p>Use the <samp class="codeph">prompt</samp> property to define the text to |
| display when the <a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> loads, |
| as the following example shows: </p> |
| |
| <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkDDSimplePrompt.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 paddingLeft="10" |
| paddingTop="10"/> |
| </s:layout> |
| |
| <s:DropDownList width="140" |
| prompt="Select a state"> |
| <mx:ArrayCollection> |
| <fx:String>Alabama</fx:String> |
| <fx:String>Alaska</fx:String> |
| <fx:String>Arizona</fx:String> |
| <fx:String>Arkansas</fx:String> |
| <fx:String>California</fx:String> |
| </mx:ArrayCollection> |
| </s:DropDownList> |
| </s:Application></pre> |
| |
| <p>If you set the <samp class="codeph">requireSelection</samp> property to <samp class="codeph">true</samp>, |
| the control ignores the <samp class="codeph">prompt</samp> property. Instead, |
| it sets the prompt area and the <samp class="codeph">selectedIndex</samp> property |
| to the first data item in the control. </p> |
| |
| <div class="p">Alternatively, you can set the <samp class="codeph">selectedIndex</samp> property |
| to any data item. The prompt area displays the data item specified |
| by the <samp class="codeph">selectedIndex</samp> property. In the following |
| example, you set the <samp class="codeph">selectedIndex</samp> property to |
| 4 to select California by default when the application starts: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkDDSimpleSetSelectedIndex.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 paddingLeft="10" |
| paddingTop="10"/> |
| </s:layout> |
| |
| <s:DropDownList width="140" |
| selectedIndex="4"> |
| <mx:ArrayCollection> |
| <fx:String>Alabama</fx:String> |
| <fx:String>Alaska</fx:String> |
| <fx:String>Arizona</fx:String> |
| <fx:String>Arkansas</fx:String> |
| <fx:String>California</fx:String> |
| </mx:ArrayCollection> |
| </s:DropDownList> |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS6cd884023d998a9b-6c85c04d1213b6a3490-8000_verapache"><a name="WS6cd884023d998a9b-6c85c04d1213b6a3490-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Handle Spark DropDownList events</h3> |
| |
| |
| <div> |
| <p>The <a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> control |
| inherits the events of the ListBase class, and adds the following |
| events: </p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p> |
| <samp class="codeph">close</samp> Dispatched when the drop-down |
| list closes for any reason.</p> |
| |
| </li> |
| |
| <li> |
| <p> |
| <samp class="codeph">open</samp> Dispatched when the drop-down list |
| opens for any reason.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WSadd5e192b30094714d63c41412158f77a50-8000_verapache"><a name="WSadd5e192b30094714d63c41412158f77a50-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Spark DropDownList control user |
| interaction</h3> |
| |
| |
| <div> |
| <p>A page in the <a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> control |
| is defined as the number of data items that fit in the drop-down |
| list. Paging down through the data displayed by a six-line control |
| shows records 0-5, 6-11, 12-17, and so on.</p> |
| |
| <p> |
| <strong>Keyboard navigation when DropDownList is closed</strong> |
| </p> |
| |
| <p>The DropDownList control has the following keyboard navigation |
| features when the drop-down list is closed:</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="d874342e2079"> |
| <p>Key</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e2085"> |
| <p>Action</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>Alphanumeric keys</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Displays the closest match in the item list. |
| The DropDownList does not open.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>Up Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Moves selection up one item. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>Down Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Moves selection down one item.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>Control + Down Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Opens the drop-down list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>Page Up</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Moves the selection up one page. If the <samp class="codeph">selectedIndex</samp> is |
| currently -1, do nothing.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>Page Down</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Moves the selection down one page. If you |
| are at the end of the list, do nothing.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>Home</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Moves selection to the top of the drop-down |
| list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2079 "> |
| <p>End</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2085 "> |
| <p>Moves selection to the bottom of the drop-down |
| list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p> |
| <strong>Keyboard navigation when DropDownList is open</strong> |
| </p> |
| |
| <p>The |
| DropDownList control has the following keyboard navigation features |
| when the drop-down list is open:</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="d874342e2247"> |
| <p>Key</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e2253"> |
| <p>Action</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Alphanumeric keys</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Scrolls to and highlights the closest match |
| in the item list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Up Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Moves selection up one item but does not |
| commit the selection until the drop-down list closes. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Down Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Moves selection down one item but does not |
| commit the selection until the drop-down list closes. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Control + Up Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Closes the drop-down list and commits the |
| selection.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Escape</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Closes the drop-down list but do not commit |
| the selection.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Page Up</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Moves the selection to the top of the data |
| items currently displayed but does not commit the selection until |
| the drop-down list closes. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Page Down</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Moves the selection to the bottom of the |
| data items currently displayed but does not commit the selection |
| until the drop-down list closes.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>Home</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>If <samp class="codeph">selectedIndex</samp> = -1, |
| do not change the currently selected data item. Otherwise, moves |
| selection to the first data item in the drop-down list. Does not |
| commit the selection until the drop-down list closes.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2247 "> |
| <p>End</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2253 "> |
| <p>Moves selection to the last data item in |
| the drop-down list. Does not commit the selection until the drop-down |
| list closes.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested1" id="WS70f0d54f063b9b081aac8d1d1247252e4a0-8000_verapache"><a name="WS70f0d54f063b9b081aac8d1d1247252e4a0-8000_verapache"><!-- --></a> |
| <h2 class="topictitle2">Spark ComboBox control</h2> |
| |
| |
| <div> |
| <p>The <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control |
| is a child class of the <a href="https://flex.apache.org/asdoc/spark/components/supportClasses/DropDownListBase.html" target="_blank">DropDownListBase</a> control. |
| Like the <a href="https://flex.apache.org/asdoc/spark/components/DropDownList.html" target="_blank">DropDownList</a> control, |
| when the user selects an item from the drop-down list in the ComboBox |
| control, the data item appears in the prompt area of the control. </p> |
| |
| <p> |
| <strong>Differences between ComboBox and DropDownList</strong> |
| </p> |
| |
| <p>One difference between the controls is that the prompt area of |
| the ComboBox control is implemented by using the TextInput control, |
| instead of the Label control for the DropDownList control. Therefore, |
| a user can edit the prompt area of the ComboBox control to enter |
| a value that is not one of the predefined options; the values in |
| the DropDownList cannot be edited.</p> |
| |
| <p>For example, the DropDownList control only lets the user select |
| from a list of predefined items in the control. The ComboBox control |
| lets the user either select a predefined item, or enter a new item |
| into the prompt area. When the user enters a new item, the <samp class="codeph">selectedIndex</samp> property |
| is set to -3. Your application can recognize that a new item has |
| been entered and, optionally, add it to the list of items in the |
| control.</p> |
| |
| <p> |
| <strong>Searching</strong> |
| </p> |
| |
| <p>The ComboBox control also searches the item list as the user |
| enters characters into the prompt area. As the user enters characters, |
| the drop-down area of the control opens. It then and scrolls to |
| and highlights the closest match in the item list.</p> |
| |
| </div> |
| |
| <div class="nested2" id="WS70f0d54f063b9b08626480d2124725f692c-8000_verapache"><a name="WS70f0d54f063b9b08626480d2124725f692c-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Create a Spark ComboBox control</h3> |
| |
| |
| <div> |
| <p>You define a <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control |
| in MXML by using the <samp class="codeph"><s:ComboBox></samp> tag. Specify |
| an <samp class="codeph">id</samp> value if you intend to refer to a component |
| elsewhere in your MXML application, either in another tag or in |
| an ActionScript block.</p> |
| |
| <div class="p">You specify the data for the ComboBox control by using the <samp class="codeph">dataProvider</samp> property. |
| However, because <samp class="codeph">dataProvider</samp> is the ComboBox control's |
| default property, you do not have to specify a <samp class="codeph"><s:dataProvider></samp> child |
| tag of the <samp class="codeph"><s:ComboBox></samp> tag, as the following |
| example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkCBSimple.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 paddingTop="5" paddingLeft="5"/> |
| </s:layout> |
| <s:Label text="The selected index is: {myCB.selectedIndex}"/> |
| <s:Label text="The selected item is: {myCB.selectedItem}"/> |
| |
| <s:ComboBox id="myCB" width="140" prompt="Select a Color"> |
| <s:dataProvider> |
| <mx:ArrayList> |
| <fx:String>Red</fx:String> |
| <fx:String>Orange</fx:String> |
| <fx:String>Yellow</fx:String> |
| <fx:String>Blue</fx:String> |
| <fx:String>Green</fx:String> |
| </mx:ArrayList> |
| </s:dataProvider> |
| </s:ComboBox> |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">This example demonstrates the following functionality of the |
| ComboBox control: <ul> |
| <li> |
| <p>When you select an item in the drop-don |
| list, the item appears in the prompt area of the control. The <samp class="codeph">ComboBox.selectedIndex</samp> property |
| contains the index of the selected item in the data provider of |
| the control. The <samp class="codeph">ComboBox.selectedItem</samp> property |
| contains the selected data item.</p> |
| |
| </li> |
| |
| <li> |
| <p>As you enter characters in the prompt area, it scrolls to |
| and highlights the closest match in the item list. </p> |
| |
| <p>You can |
| control the matching algorithm by creating a custom callback function. |
| You then specify that function as the value of the <samp class="codeph">ComboBox.itemMatchingFunction</samp> property. |
| The callback function returns a Vector.<int> that contains |
| the index of each item in the data provider that matches the input. |
| To disable matching, create a callback function that returns an |
| empty Vector.<int>.</p> |
| |
| </li> |
| |
| <li> |
| <p>If you enter a value in the prompt area that does not match |
| an item in the list, and commit the item, the index of the selected |
| item is -3. This value is determined by the <samp class="codeph">ComboBox.CUSTOM_SELECTED_ITEM</samp> constant. </p> |
| |
| <p>Commit |
| a new item by pressing the Enter or Tab key while the cursor is |
| in the prompt area. </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS03d33b8076db57b93a2c2bed124779e9c80-8000_verapache"><a name="WS03d33b8076db57b93a2c2bed124779e9c80-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Handle events for the Spark ComboBox |
| control</h3> |
| |
| |
| <div> |
| <p>You commonly use the following events with the <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p>The ComboBox control dispatches the <samp class="codeph">changing</samp> event |
| after each character is entered in the prompt area. </p> |
| |
| </li> |
| |
| <li> |
| <p>The ComboBox control dispatches the <samp class="codeph">change</samp> event |
| when the user selects an existing item in the drop-down list, or |
| enters a new item in the prompt area. </p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="p">You can also add event listeners to the <samp class="codeph">textInput</samp> skin |
| part of the ComboBox control to handle events on the <a href="https://flex.apache.org/asdoc/spark/components/TextInput.html" target="_blank">TextInput</a> control. |
| For example, the following line adds an event handler for the <samp class="codeph">change</samp> event |
| to the <samp class="codeph">textInput</samp> skin part of the ComboBox named |
| myCB: <pre class="codeblock">myCB.textInput.addEventListener('change', myChangeHandler);</pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS70f0d54f063b9b08626480d2124725f692c-7fff_verapache"><a name="WS70f0d54f063b9b08626480d2124725f692c-7fff_verapache"><!-- --></a> |
| <h3 class="topictitle3">Process new data items entered |
| into the Spark ComboBox control</h3> |
| |
| |
| <div> |
| <p>When using the <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control, |
| you must decide on how your application handles new values entered |
| into the prompt are of the control. For example, your application |
| can recognize the new value and perform some action, it can provide user |
| feedback with a list of allowed values, and it can add the item |
| to the current list of data items.</p> |
| |
| <p>The following actions occur when the user enters a value into |
| the prompt area of the control, and the value is not found in the |
| current list of data items:</p> |
| |
| <div class="p"> |
| <ul> |
| <li> |
| <p>The ComboBox control dispatches the <samp class="codeph">change</samp> event |
| when the user commits the change, typically by pressing the Enter |
| or Tab key. </p> |
| |
| </li> |
| |
| <li> |
| <p>The <samp class="codeph">ComboBox.selectedIndex</samp> property is set |
| to <samp class="codeph">ComboBox.CUSTOM_SELECTED_ITEM</samp>. The default value |
| of this constant is -3.</p> |
| |
| </li> |
| |
| <li> |
| <p>The ComboBox control calls the function defined by the <samp class="codeph">ComboBox.labelToItemFunction</samp> property |
| to convert the new value to the same data type as the data items |
| in the data provider. </p> |
| |
| <p>If your data items are simple data |
| types, such as String or int, then you can use the default function |
| defined by the <samp class="codeph">labelToItemFunction</samp> property. If your |
| data items are Objects, then you typically have to write your own function.</p> |
| |
| </li> |
| |
| <li> |
| <p>The converted value returned by the function specified by |
| the <samp class="codeph">ComboBox.labelToItemFunction</samp> property is written |
| to the <samp class="codeph">ComboBox.selectedItem</samp> property.</p> |
| |
| </li> |
| |
| </ul> |
| |
| </div> |
| |
| <div class="p">The following example uses the <samp class="codeph">change</samp> event |
| to recognize that a new item was entered into the prompt, and adds |
| it to the data provider of the control: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkCBAddItem.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 paddingTop="5" paddingLeft="5"/> |
| </s:layout> |
| <fx:Script> |
| <![CDATA[ |
| import spark.events.IndexChangeEvent; |
| |
| // Event handler to determine if the selected item is new. |
| protected function myCB_changeHandler(event:IndexChangeEvent):void |
| { |
| // Determine if the index specifies a new data item. |
| if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM) |
| // Add the new item to the data provider. |
| myCB.dataProvider.addItem(myCB.selectedItem); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:Label text="The selected index is: {myCB.selectedIndex}"/> |
| <s:Label text="The selected item is: {myCB.selectedItem}"/> |
| |
| <s:ComboBox id="myCB" width="140" change="myCB_changeHandler(event);"> |
| <s:dataProvider> |
| <mx:ArrayList> |
| <fx:String>Red</fx:String> |
| <fx:String>Orange</fx:String> |
| <fx:String>Yellow</fx:String> |
| <fx:String>Blue</fx:String> |
| <fx:String>Green</fx:String> |
| </mx:ArrayList> |
| </s:dataProvider> |
| </s:ComboBox> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>In this example, the ComboBox control initially defines five |
| colors. The user can either select one of the predefined colors, |
| or enter a new one in the prompt area. When the user commits the |
| new item, by pressing the Enter or Tab key, the application uses |
| the <samp class="codeph">change</samp> even to add the new item to the data |
| provider. </p> |
| |
| <p>The ComboBox in the previous example used simple String data |
| for its data items. That means the application can use the default |
| function defined by the <samp class="codeph">ComboBox.labelToItemFunction</samp> property |
| to convert new values to the same data type as the data items in |
| the data provider.</p> |
| |
| <div class="p">However, your ComboBox control can use more complicated data |
| items. In that case, you write a custom function to convert new |
| data items to the format required by the data provider, as the following |
| example shows: <pre class="codeblock"><?xml version="1.0" encoding="utf-8"?> |
| <!-- dpcontrols\sparkdpcontrols\SparkCBAddItemObj.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 paddingTop="5" paddingLeft="5"/> |
| </s:layout> |
| <fx:Script> |
| <![CDATA[ |
| import spark.events.IndexChangeEvent; |
| |
| // Define a custom function for the labelFunction property |
| // to display an Object in the ComboBox control. |
| public function myLabelFunc(item:Object):String { |
| return item.firstName + " " + item.lastName; |
| } |
| |
| // Define a custom function for the labelToItemFunction property |
| // to convert the new value to an Object of the correct format |
| // for storage in the data provider of the control. |
| public function myLabelToItemFunc(value:String):Object { |
| var tempObj:Object = new Object(); |
| var spaceChar:int = value.indexOf(' '); |
| tempObj.firstName = value.substr(0, spaceChar); |
| tempObj.lastName = value.substr(spaceChar+1, value.length); |
| return tempObj; |
| } |
| |
| // Event handler to determine if the selected item is new. |
| protected function myCB_changeHandler(event:IndexChangeEvent):void |
| { |
| // Determine if the index specifies a new data item. |
| if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM) |
| // Add the new item to the data provider. |
| myCB.dataProvider.addItem(myCB.selectedItem); |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:Label text="The selected index is: {myCB.selectedIndex}"/> |
| <s:Label text="The selected item is: {myCB.selectedItem.firstName + ' ' |
| + myCB.selectedItem.lastName}"/> |
| |
| <s:ComboBox id="myCB" width="140" |
| labelFunction="myLabelFunc" |
| labelToItemFunction="myLabelToItemFunc" |
| change="myCB_changeHandler(event);"> |
| <s:dataProvider> |
| <mx:ArrayList> |
| <fx:Object firstName="Steve" lastName="Smith"/> |
| <fx:Object firstName="John" lastName="Jones"/> |
| <fx:Object firstName="Mary" lastName="Moore"/> |
| </mx:ArrayList> |
| </s:dataProvider> |
| </s:ComboBox> |
| </s:Application></pre> |
| |
| </div> |
| |
| <p>In this example, the data items are represented by Objects. Each |
| Object contains two fields: <samp class="codeph">firstName</samp> and <samp class="codeph">lastName</samp>.</p> |
| |
| <p>This example adds two new functions. The first, <samp class="codeph">myLabelFunction()</samp>, converts |
| the Objects in the data provider of the control to a String for |
| display by the ComboBox control. Use the <samp class="codeph">labelFunction</samp> property |
| to assign this function to the ComboBox control. For more information, |
| see <a href="flx_spark_dpcontrols_sdp.html#WS03d33b8076db57b9-6c0c29cf12154aeebb3-8000_verapache">Controlling |
| the text displayed for each data item</a>.</p> |
| |
| <p>The second function, <samp class="codeph">myLabelToItemFunc()</samp>, converts |
| a new data item into the format required by the data provider of |
| the control. Use the <samp class="codeph">labelToItemFunction</samp> property |
| to assign this function to the ComboBox control. The ComboBox control |
| writes the value returned by the function to the <samp class="codeph">selectedItem</samp> property.</p> |
| |
| <div class="p">The signature of the function specified to the <samp class="codeph">labelToItemFunction</samp> property |
| is shown below: <pre class="codeblock">function <em>funcName</em>(value:String):Object {}</pre> |
| |
| </div> |
| |
| <p>The value passed to the function is the String entered into the |
| prompt area of the control. The function returns an Object written |
| to the <samp class="codeph">selectedItem</samp> property. </p> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS70f0d54f063b9b08-69285d3c124728d5793-8000_verapache"><a name="WS70f0d54f063b9b08-69285d3c124728d5793-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Spark ComboBox control user interaction</h3> |
| |
| |
| <div> |
| <p>A page in the <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control |
| is defined as the number of data items that fit in the drop-down |
| list. Paging down through the data displayed by a six-line control |
| shows records 0-5, 6-11, 12-17, and so on.</p> |
| |
| <p> |
| <strong>Keyboard navigation when ComboBox is closed</strong> |
| </p> |
| |
| <p>The ComboBox control has the following keyboard navigation features |
| when the drop-down list is closed:</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="d874342e2812"> |
| <p>Key</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e2818"> |
| <p>Action</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Alphanumeric keys</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Opens the drop-down list. The drop-down |
| list it scrolls to and highlights the closest match in the item list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Enter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Commit the highlighted data item, if one |
| is highlighted. If no data item is highlighted, commit the value |
| of the prompt area. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Up Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Moves selection up one item. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Down Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Moves selection down one item.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Control + Down Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Opens the drop-down list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Page Up</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Moves the selection up one page. If the <samp class="codeph">selectedIndex</samp> is |
| currently -1, do nothing.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Page Down</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Moves the selection down one page. If you |
| are at the end of the list, do nothing.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>Home</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Moves selection to the top of the drop-down |
| list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2812 "> |
| <p>End</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2818 "> |
| <p>Moves selection to the bottom of the drop-down |
| list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p> |
| <strong>Keyboard navigation when ComboBox is open</strong> |
| </p> |
| |
| <p>The ComboBox control has the following keyboard navigation features |
| when the drop-down list is open:</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="d874342e2992"> |
| <p>Key</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e2998"> |
| <p>Action</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Alphanumeric keys</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Scrolls to and highlights the closest match |
| in the item list.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Enter</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Close the drop-down list. Commit the highlighted |
| data item, if one is highlighted. If no data item is highlighted, |
| commit the value of the prompt area. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Up Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Moves selection up one item but does not |
| commit the selection until the drop-down list closes. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Down Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Moves selection down one item but does not |
| commit the selection until the drop-down list closes. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Control + Up Arrow</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Closes the drop-down list and commits the |
| selection.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Escape</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Closes the drop-down list but do not commit |
| the selection.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Page Up</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Moves the selection to the top of the data |
| items currently displayed but does not commit the selection until |
| the drop-down list closes. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Page Down</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Moves the selection to the bottom of the |
| data items currently displayed but does not commit the selection |
| until the drop-down list closes.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>Home</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>If <samp class="codeph">selectedIndex</samp> = -1, |
| do not change the currently selected data item. Otherwise, moves |
| selection to the first data item in the drop-down list. Does not |
| commit the selection until the drop-down list closes.</p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2992 "> |
| <p>End</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e2998 "> |
| <p>Moves selection to the last data item in |
| the drop-down list. Does not commit the selection until the drop-down |
| list closes.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p> |
| <strong>Mouse navigation when ComboBox is closed</strong> |
| </p> |
| |
| <p>The ComboBox control has the following mouse navigation features |
| when the drop-down list is closed:</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="d874342e3186"> |
| <p>Mouse action</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e3192"> |
| <p>Action</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3186 "> |
| <p>Click in the prompt area</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3192 "> |
| <p>Puts focus in the prompt area. If it was |
| not previously in focus, then all of text in the prompt area is selected. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3186 "> |
| <p>Click in open button</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3192 "> |
| <p>Opens the drop-down list, removes the focus |
| ring from the ComboBox control, removes focus from the prompt area, |
| and highlights the closest match to the input string.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| <p> |
| <strong>Mouse navigation when ComboBox is open</strong> |
| </p> |
| |
| <p>The ComboBox control has the following mouse navigation features |
| when the drop-down list is open:</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="d874342e3257"> |
| <p>Mouse action</p> |
| |
| </th> |
| |
| <th class="cellrowborder" valign="top" width="NaN%" id="d874342e3263"> |
| <p>Action</p> |
| |
| </th> |
| |
| </tr> |
| |
| </thead> |
| |
| <tbody> |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3257 "> |
| <p>Click in the prompt area</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3263 "> |
| <p>Puts focus in the prompt area. If it was |
| not previously in focus, then all of text in the prompt area is selected. </p> |
| |
| </td> |
| |
| </tr> |
| |
| <tr> |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3257 "> |
| <p>Click in open button</p> |
| |
| </td> |
| |
| <td class="cellrowborder" valign="top" width="NaN%" headers="d874342e3263 "> |
| <p>Closes the drop-down list and commit the |
| selection. Removes focus from the ComboBox and control and from |
| the prompt area.</p> |
| |
| </td> |
| |
| </tr> |
| |
| </tbody> |
| |
| </table> |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div class="nested2" id="WS19f279b149e7481c3ae73812d80da7397-8000_verapache"><a name="WS19f279b149e7481c3ae73812d80da7397-8000_verapache"><!-- --></a> |
| <h3 class="topictitle3">Use prompt text with the Spark |
| ComboBox control</h3> |
| |
| |
| <div> |
| <p>The Spark <a href="https://flex.apache.org/asdoc/spark/components/ComboBox.html" target="_blank">ComboBox</a> control |
| supports adding prompt text. Prompt text appears in the prompt area |
| of the control when no item is selected. Prompt text disappears |
| when you focus on the control. When you remove focus without selecting an |
| item, the prompt text reappears.</p> |
| |
| <p>You set prompt text on a ComboBox control by using the <samp class="codeph">prompt</samp> property. |
| This property can be bound to the value of another property or it |
| can be static text.</p> |
| |
| <div class="p">The following example displays prompt when the application first |
| starts. When you focus on the ComboBox control, the prompt text |
| disappears. If you click the Reset button, the value of the ComboBox's <samp class="codeph">selectedIndex</samp> property |
| is reset to -1, and the prompt text reappears.<pre class="codeblock"><?xml version="1.0"?> |
| <!-- dpcontrols/sparkdpcontrols/SparkCBPrompt.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[ |
| [Bindable] |
| private var promptText:String = "Choose Game"; |
| |
| /* When you set selectedIndex to -1 and remove focus, the prompt text reappears. */ |
| private function resetCB():void { |
| myComboBox.selectedIndex = -1; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:VGroup> |
| <s:ComboBox id="myComboBox" prompt="{promptText}"> |
| <s:dataProvider> |
| <s:ArrayList> |
| <fx:String>Durche die Wuste</fx:String> |
| <fx:String>Samurai</fx:String> |
| <fx:String>Traumfabrik</fx:String> |
| </s:ArrayList> |
| </s:dataProvider> |
| </s:ComboBox> |
| <s:Button label="Reset" click="resetCB()"/> |
| </s:VGroup> |
| |
| </s:Application></pre> |
| |
| </div> |
| |
| <div class="p">The prompt text is defined by the <a href="https://flex.apache.org/asdoc/spark/components/TextInput.html" target="_blank">TextInput</a> subcontrol |
| of the ComboBox control. It cannot include any HTML markup, but |
| can be styled using CSS. To style the prompt text, use the <samp class="codeph">normalWithPrompt</samp> (for |
| the normal state) and <samp class="codeph">disabledWithPrompt</samp> (for the |
| disabled state) pseudo selectors on a TextInput or <a href="https://flex.apache.org/asdoc/spark/components/supportClasses/SkinnableTextBase.html" target="_blank">SkinnableTextBase</a> class |
| in your CSS, as the following example shows:<pre class="codeblock"><?xml version="1.0"?> |
| <!-- dpcontrols/sparkdpcontrols/SparkCBPromptStyles.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:Style> |
| @namespace s "library://ns.adobe.com/flex/spark"; |
| |
| s|TextInput:normalWithPrompt { |
| color: #FF3366; |
| fontStyle: italic; |
| } |
| |
| s|TextInput:disabledWithPrompt { |
| color: #CCFFFF; |
| fontStyle: italic; |
| } |
| </fx:Style> |
| |
| <fx:Script> |
| <![CDATA[ |
| [Bindable] |
| private var promptText:String = "Choose Game"; |
| |
| /* When you set selectedIndex to -1 and remove focus, the prompt text reappears. */ |
| private function resetCB():void { |
| myComboBox.selectedIndex = -1; |
| } |
| ]]> |
| </fx:Script> |
| |
| <s:VGroup> |
| <s:ComboBox id="myComboBox" prompt="{promptText}"> |
| <s:dataProvider> |
| <s:ArrayList> |
| <fx:String>Durche die Wuste</fx:String> |
| <fx:String>Samurai</fx:String> |
| <fx:String>Traumfabrik</fx:String> |
| </s:ArrayList> |
| </s:dataProvider> |
| </s:ComboBox> |
| <s:Button label="Reset" click="resetCB()"/> |
| </s:VGroup> |
| |
| </s:Application></pre> |
| |
| </div> |
| |
| </div> |
| |
| </div> |
| |
| <div> |
| <p><strong>Navigation</strong></p> |
| <p><a href="index.html">Using Flex</a> » <a href="flx_p3_building_ui.html">Building the user interface</a></p> |
| </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> |
