Flex4 Spark组件数据驱动简单示例

此处通过一个示例来使用List、DropDownList、ButtonBar三个数据驱动组件。

<?xml version="1.0" encoding="utf-8"?>
<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"
  width="100%" height="100%">
<fx:Script><![CDATA[
  import spark.events.IndexChangeEvent;
  import mx.collections.ArrayCollection;

  [Bindable]
  private var _jobTitle:ArrayCollection =
    new ArrayCollection(["CEO","CTO","CIO"]);
  
  [Bindable]
  private var _coffees:ArrayCollection = new ArrayCollection([
    "mocha","macchiato","cappuccino","latte"]);

  [Bindable]
  private var _lunches:ArrayCollection = new ArrayCollection(["Subway","Yoshinoya","Mcdonalds"]);
  
  [Bindable]
  private var _Choice:String = "CEO";
  
  [Bindable]
  private var _coffeeChoice:String = "macchiato";
  
  [Bindable]
  private var _lunchChoice:String = "Yoshinoya";
   
  //此函数用于相应“咖啡选择变化”
  private function coffeeChanged(event:IndexChangeEvent):void {
    if (event.newIndex == -1) return;
    _coffeeChoice = _coffees.getItemAt(event.newIndex) as String;
  }
]]></fx:Script>
  <s:layout>
    <s:VerticalLayout paddingLeft="15" paddingTop="15"/>
  </s:layout>
  <s:Label text="Spark 数据驱动 简单示例" fontSize="18"/>
  <s:List id="list" dataProvider="{_jobTitle}"
    selectedItem="{_Choice}"
	  change="_Choice = list.selectedItem;"/>
  <!--DropDownList是List的一个子类，如果在Flex3中，此处也许会选择ComboBox-->
  <s:DropDownList id="ddl" width="120"
    dataProvider="{_coffees}"
    selectedItem="{_coffeeChoice}"
    change="coffeeChanged(event)"/>
  <!--ButtonBar能与视图状态结合进行导航，此示例中可见三个按钮就在一个容器中-->
  <s:ButtonBar id="buttonBar" dataProvider="{_lunches}"
    selectedItem="{_lunchChoice}"
    click="_lunchChoice = buttonBar.selectedItem;"/>      
  <s:Label width="300"
    text="Mr XXX is a {_Choice},he would like to went to Costa for a {_coffeeChoice},and then have lunch in {_lunchChoice}. "/>
</s:Application>