爱华网<?xml version="1.0"encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
<mx:Script>
<![CDATA[
importmx.collections.ArrayCollection;
[Bindable]
public varcards:ArrayCollection=new ArrayCollection
(
[{label:"Visa",data:1},
{label:"MasterCard",data:2},
{label:"American Express",data:3}]
)
privatefunction closeHandler(event:Event):void
{
myLabel.text="你选择了:"+ComboBox(event.target).selectedItem.label;
myData.text = "Data: "+ ComboBox(event.target).selectedItem.data;
}
]]>
</mx:Script>
<mx:Panel title="ComboBox ControlExample" height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10"paddingRight="10">
<mx:ComboBoxdataProvider="{cards}"close="closeHandler(event);"/>
<mx:VBox width="250">
<mx:Text width="200" color="blue"text="Select a type of credit card."/>
<mx:Label id="myLabel" text="Youselected:"/>
<mx:Label id="myData"text="Data:"/>
</mx:VBox>
</mx:Panel>
</mx:Application>
-------------------------------------------------------------------------------------------
为ComboBox添加内容
<mx:ComboBox id="myComboBox" width="171" x="10"y="10">
<mx:dataProvider>
<mx:Array>
<mx:String>ComboBox1</mx:String>
<mx:String>ComboBox2</mx:String>
<mx:String>ComboBox3</mx:String>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
将两个进行连接：
<mx:Label id="myText"maxWidth="20" width="244" height="23" y="60"x="10"text="{myComboBox.value}"/>
可以在这个时候发布一下看看效果。因为下面会有一些其他效果要体现。
有人会问到我要取的值不是ComboBox1，ComboBox2，ComboBox3怎么办，当然有方法了，需要修改String为Object,再将其data属性为你想要取出的值，改变如下：
<mx:dataProvider>
<mx:Array>
<mx:Object label="ComboBox1" data="1"/>
<mx:Object label="ComboBox2" data="2"/>
<mx:Object label="ComboBox3" data="3"/>
</mx:Array>
</mx:dataProvider>
再次发布看看这次取的是不是data的值呀。
呦，我们的按钮还没有用上呢，你发现了没有，这回要用上代码了ActionScript3.0哦。给大家秀一下：
<?xml version="1.0"encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute">
<mx:Script>
<![CDATA[
importflash.events.MouseEvent;
publicfunction show(event:MouseEvent):void{
myText.text= String(myComboBox.value);
}
]]>
</mx:Script>
<mx:Panel title="ComboBox"width="402" height="188" x="90.5" y="79"layout="absolute">
<mx:ComboBox id="myComboBox" width="171" x="10"y="10">
<mx:dataProvider>
<mx:Array>
<mx:Object label="ComboBox1" data="1"/>
<mx:Object label="ComboBox2" data="2"/>
<mx:Object label="ComboBox3" data="3"/>
</mx:Array>
</mx:dataProvider>
</mx:ComboBox>
<mx:Button id="myButton"label="Send" x="200" y="10"click="show(event);"/>
<mx:Label id="myText"maxWidth="20" width="244" height="23" y="60"x="10" />
</mx:Panel>
</mx:Application>
-----------------------------------------------------------------------------------
添加一个定义咖啡品牌的数组对象
本程序的数据模型是一个简单的数组（内容是一系列的对象），你可以直接在程序中用Array和Object元素创建。这里每个数组单元对象都有两个属性：label和data，你可以将这两个属性写成对象的子标签。用这两个属性名称是为了提供给ComboBox和List这样的控件元素使用，稍后我们会介绍。
这些控件元素可以使用更加复杂的数据对象，但是既然现在是手工创建数据模型，我们就使用简单的形式。通常的语法是：
<mx:Arrayid="identifier">
<mx:Object>
<label>literalstring</label>
<data>another literalstring</data>
</mx:Object>
</mx:Array>
留意这里的ID属性。ID几乎是所有Flex元素都具备的属性，它将元素“贴”上标志以区分其他元素。如果你要在数据绑定或ActionScript中使用这个元素，最好给它指定一个ID。
不可见元素可以由你随意摆放，但是把他们放到程序的首部--即可见元素的前面--是一个好习惯。
<mx:Arrayid="coffeeArray">
<mx:Object>
<label>RedSea</label>
<data>Smoothand fragrant</data>
</mx:Object>
<mx:Object>
<label>Andes</label>
<data>Richand pungent</data>
</mx:Object>
<mx:Object>
<label>BlueMountain</label>
<data>Delicate andrefined</data>
</mx:Object>
</mx:Array>
添加一个显示咖啡品牌的ComboBox
Flex的ComboBox类似于HTML的select功能，而且更加强大。需显示的数组由dataProvider属性指定。你可以在dataProvider标签中直接创建数组，但是更为常用的方法是在别处创建或导入一个数组，然后在dataProvider处指定：
<mx:ComboBoxid="myCombo" dataProvider="{myArray}"/>
这里的大括号告诉编译器：里面是一个变量或者代求算的变量，而不是字符串。
如果对象包含label和data属性，他们会自动按显示数据（label）和关联数据（data）区分，data可以是简单的值，也可以是复杂的类型（如对象）。如果对象既没有label属性也没有data属性，那么整个对象将作为data属性，而label属性则为由ComboBox的labelField属性指定的对象属性。例如ComboBox的labelField值为"name"，那么label的值就为对象的name属性。
8.在Label之后添加一个ComboBox，id取为coffeeComb，使用dataProvider属性将CombBox绑定到上一步创建的coffeeArray数组：
<mx:ComboBoxid="coffeeCombo" dataProvider="{coffeeArray}"/>
添加一个显示说明的Text(文本)控件
Text控件与Label相似，不同的是它可以显示多行数据。这里我们用它来显示ComboBox中选中的咖啡品牌的说明。这里要用到ComboBox中选择的项目的data属性。
9.在ComboBox之后，添加一个带有text属性的文本控件，将text属性设置为“Description:”然后加上一个到ComboBox选择项目的data属性的绑定：
<mx:Texttext="Description:{coffeeCombo.selectedItem.data}"/>
添加一个增加咖啡品牌到购物栏的按钮
Button控件很简单。它有一个label的属性来设置显示的文字，还有一个click事件，用来指定鼠标点击事件的处理动作。
在这里，我们添加一个按钮，通过调用一个addToCart函数，把ComboBox中选择的项目添加到购物栏中。我们将在后面创建这个函数。
10. 添加一个显示“Add toCart”的按钮，被点击后调用addToCart函数：
<mx:Button label="Add toCart" click="addToCart()"/>
给购物车添加一个List（列表）控件
List控件和ComboBox唯一的区别是它能同时显示和选择多条项目。这里用的List不需要指定dataProvider属性了，因为它在用户添加数据前是空的。
11. 在按钮之后，添加一个List控件，id取为cart:
<mx:Listid="cart"/>
添加一段处理按钮点击事件的脚本
教程的最后一步是添加一段ActionScript脚本，用来处理按钮的点击事件。在这个简单的应用程序中，我们在Script标签中添加脚本。
Script标签中的ActionScript代码将被包含在<![CDATA[ ]]>里面，这个标志里面的内容不被XML解析器解析。这个是标准的XML用法，在这里是为了保护ActionScript的一些可能会被XML解析器误处理的一些字符（如<等），实际上这样不仅保护了这些字符，也省去了XML解析器解析ActionScript内容。
这里用到的ActionScript语法很简单，函数的通常语法是：
function 函数名(参数1:数据类型...):返回数据类型
{
[ActionScript 语句]
}
在addToCart函数中，使用List类的addItem方法添加项目。该方法需要有label参数和data参数，这些参数正好是ComboBox中选中的项目的label属性和data属性。
12.在Array标签之后，插入一个带有CDATA包装的Script标签：
<mx:Script>
<![CDATA[]]>
</mx:Script>
13.在CDATA里面，添加一个名为addToCart不返回任何值的函数：
function addToCart():Void
{
}
14.在函数体内部，使用List类的addItem方法将ComboBox中所选项目label属性和data属性添加到List上。
cart.addItem(coffeeCombo.selectedItem.label,coffeeCombo.selectedItem.data);
15. 保存文件，在浏览器中预览应用程序（查看浏览MXML文件的方法见第一页）
