不可见元素可以由你随意摆放,但是把他们放到程序的首部--即可见元素的前面--是一个好习惯。
<mx:Array id="coffeeArray"> <mx:Object> <label>Red Sea</label> <data>Smooth and fragrant</data> </mx:Object> <mx:Object> <label>Andes</label> <data>Rich and pungent</data> </mx:Object> <mx:Object> <label>Blue Mountain</label> <data>Delicate and refined</data> </mx:Object> </mx:Array>
添加一个显示咖啡品牌的ComboBox
Flex的ComboBox类似于HTML的select功能,而且更加强大。需显示的数组由dataProvider属性指定。你可以在dataProvider标签中直接创建数组,但是更为常用的方法是在别处创建或导入一个数组,然后在dataProvider处指定:
<mx:ComboBox id="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:ComboBox id="coffeeCombo" dataProvider="{coffeeArray}"/>
添加一个显示说明的Text(文本)控件
Text控件与Label相似,不同的是它可以显示多行数据。这里我们用它来显示ComboBox中选中的咖啡品牌的说明。这里要用到ComboBox中选择的项目的data属性。
9. 在ComboBox之后,添加一个带有text属性的文本控件,将text属性设置为“Description:”然后加上一个到ComboBox选择项目的data属性的绑定:
<mx:Text text="Description: {coffeeCombo.selectedItem.data}"/>
添加一个增加咖啡品牌到购物栏的按钮
Button控件很简单。它有一个label的属性来设置显示的文字,还有一个click事件,用来指定鼠标点击事件的处理动作。
在这里,我们添加一个按钮,通过调用一个addToCart函数,把ComboBox中选择的项目添加到购物栏中。我们将在后面创建这个函数。
10. 添加一个显示“Add to Cart”的按钮,被点击后调用addToCart函数:
<mx:Button label="Add to Cart" click="addToCart()"/>
给购物车添加一个List(列表)控件
List控件和ComboBox唯一的区别是它能同时显示和选择多条项目。这里用的List不需要指定dataProvider属性了,因为它在用户添加数据前是空的。
11. 在按钮之后,添加一个List控件,id取为cart:
<mx:List id="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上。
|