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

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