第四章 Flex编程入门 （4-5小节）

第四节使用列表控件

你可以在程序中使用列表控件， 如 ComboBox ， List 或 HorizontalList 。在插入这些类型的控件后，你必须装入内容并进行显示。 在 Flex 中，控件是由数据提供器来进行组装的，它就象一个类似于数组的对象收集器。

在本节中，你将学习如何装入列表控件并进行显示。

插入并放置控件首先，创建一个简单的布局，在其中包含一 个 ComboBox 控件和一 个 submit 按钮 。

1. 1. 在导航视图中选 定 Lessons 项目，选 择 File > New > MXML Application 并创建一个名 叫 ListControl.mxml 的文件 。
2. 2. 将 ListControl.mxml 文件设计为被编译的默认文件，并在关联菜单中选 择 Set As Default Application from the context menu 。
3. 3. 在 MXML 编辑器的设计模式下，从组件视图中拖拉一个面板容器到布局上，并在属性视图中设置相应的属性 ：

Title: Rate Customer Service

Width: 350

Height: 200

X: 10

Y: 10

1. 4 . 从组件视图中拖拉出其它所需的控件到面板容器中 ： ComboBo x Butto n
2. 5 . 在布局中选 择 ComboBox 控件，并在属性视图中对它的相应属性进行设置 ： ID: cbxRating

X: 20

Y: 2 0 ComboBox 控件现在并没有显示任何项，你需要稍后装入它们 。

6 . 选 择 Button 控件并进行相应在的属性设置 ： Label: Send

X: 140

Y: 20

本例的布局在设计模式下看起来就象这样 ：

7. 切换到编辑器的源代码模式下， 在 ListControl.mxml 文件中输入随后 的 MXML 代码 ： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel x="10" y="10" width="350" height="200" layout="absolute " title="Rate Customer Service" > <mx:ComboBox x="20" y="20" id="cbxRating"></mx:ComboBox > <mx:Button x="140" y="20" label="Send"/ >

</mx:Panel> </mx:Application>

1. 8 . 保存文件，编译后运行。如下图所示 ：
2. 9. 点击浏览器中 的 ComboBox 控件。这时并没有显示任何项，因为你还没有定义它的数据提供者。

装载列表你可以使 用 <mx:dataProvider> 子标签来装载列表控件 。 <mx:dataProvider> 标签使你可以用几种方法来指定列表项。最简单的方法就是指定一个字符串数据，就象随后所示 。

1. 在编辑器的源代码模式下， 在 <mx:ComboBox> 标签对中输入 ： <mx:dataProvider>

<mx:Array > <mx:String>Satisfied</mx:String > <mx:String>Neutral</mx:String > <mx:String>Dissatisfied</mx:String >

</mx:Array> </mx:dataProvider>

1. 2. 保存文件，编译后运行 。
2. 3. 点 击 ComboBox 控件去查看列表项。

如果你想要访 问 ComboBox 控件中所选项的值，你可以使用随后的表达式 ： cbxRating.value

在本例中 ， ComboBox 控件 （ cbxRating.value ） 的 value 属性可以 是 Satisfied ， Neutral 或 Dissatisfied 。

5. 为了测试控件， 在 ListControl.mxml 文件中的 <mx:Button> 标签中插入随后内容 ： <mx:Label x="20" y="120" text="{cbxRating.value}" />

波浪括号 （ { } ）里的表达式用来 将 ComboBox 控件的数值属性 ， cbxRating.value 绑定 到 Label 控件的文本属性上。换而言之 ， Lable 控件的文本属性是 由 ComboBox 控件中的所选项的数值来决定的 。

6. 保存文件，编译后运行。

将列表项与数值相关联

将列表项与数值进行关联的方法与在你 在 HTML 中使 用 SELECT 一样。使用一个对象组件数据来装 载 ComboBox 控件。 在 <mx:Object> 标签中你定义了一 个 label 属性，它包含了 在 ComboBox 中显示的字符串，以及想要进行关联的数据 。

1. 在编辑器的源代码模式下，用随后 的 <mx:Object> 标签代替掉三 个 <mx:String> 标签 ： <mx:Object label="Satisfied" data="5"/> <mx:Object label="Neutral" data="3"/> <mx:Object label="Dissatisfied" data="1"/>

如果你想要访 问 ComboBox 控件中被选项的数值，你可以在代码中使用随后的表达式 ： cbxRating.value

2. 保存文件，编译后运行 。 在本节中，你学习了 在 Flex 应用程序中插入列表控件，并进行数据的装载 。

第五节使用事件监听器

当你开 发 Adobe Flex 应用程序时，事件处 理 /event handling 是最基本而且最重要的任务之一。事件让你知道何时发生了何事。它们可以由用户设备如鼠标和键盘来产生，或者其它外部输入 如 web 服务器调用的返回而产生。事件还可以由一个组件的生命周期发生变化时触发，如创建或摧毁某个组件。

你可以使用事件监听 器 / event listeners 来对某个事件作出反应。事件监听器是你所编写的，用来对特定事件作出响应的功能函数或类方法，也就是我们所熟知的事件处理。本节将教授你如何使用事件监听器，使用两种不同的方法对按钮单击事件作出响应。

创建一个简单的用户界面你打算为在线商店创建一个简单的货币对换器，使用户可以将美元对换成等值的人民币。要做的第一步是设计一个简单的用户界面 。

1. 1. 在导航视图中选 定 Lessons 项目，选 择 File > New > MXML Application 并创建一个名 叫 Events.mxml 的文件 。
2. 2. 将 Events.mxml 设置为被编译的默认文件，并在关联菜单中选 择 Set As Default Application 。
3. 3. 在 MXML 编辑器的设计模式下，从组件视图中拖拉一个面板容器到布局上，并设置相应的属性 ：

Title: Currency Converte r Width: 45 0 Height: 15 0

X: 20

Y: 20

4. 从组件视图中拖拉两 个 Label 控件，一 个 TextInput 控件和一个按钮控件到面板容器中 。

1. 5. 布置这些控件，使布局看起来就象这样：
2. 6 . 选择第一 个 Label 控件，将它的文本属性设置 为 Price in Dollars 。
3. 7 . 选 择 TextInput 控件，并将它 的 id 属性值设置 为 txtPrice 。
4. 8 . 选择按钮控件并进行相应的设置 ： ID: btnConver t Label: Convert to Ye n
5. 9 . 选择第二 个 Label 控件（位 于 TextInput 控件下）并进行相应的设置：清空它的文本属性值 将 lblResults 作为它 的 id 属性 值

10 . 调整好控件的位置，使它看起来就象这样 ：

11. 切换到源代码模式下，输入如下代码（你可以改变其中的坐标数值） ： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Panel x="20" y="20" width="450" height="150" layout="absolute " title="Currency Converter" > <mx:Label x="25" y="37" text="Price in Dollars"/ > <mx:Label x="120" y="65" id="lblResults"/ > <mx:TextInput x="120" y="35" id="txtPrice"/ > <mx:Button x="290" y="35" label="Convert to Yen" id="btnConvert"/ >

</mx:Panel> </mx:Application>

12 . 保存文件。

编写一个事件监听器接下来，为转换人民币按钮编写一个事件监听器。该事件监听器 的 ActionScript 功能函数可以进行计算并以人民币为单位进行显示 。

1 . 切换到源代码模式下， 在 <mx:Application> 中放置插入点 。

2. 输入 <mx:Script> 直到整个标签在代码提示中被选定，按 下 Enter 键在代码中插入标签，随后输入结束方括号。

<mx:Script> 脚本块包含 了 CDATA 结构 。

3. 在 CDATA 结构输入随后的代码 ：

public function convertCurrency():void { var rate:Number = 120; var price:Number = Number(txtPrice.text); if (isNaN(price)) {

lblResults.text = "Please enter a valid price.";

} else { price = price * rate ; lblResults.text = "Price in Yen: " + String(price) ;

} }

4. 保存文件。

使 用 MXML 将监听器与事件相关联将一个监听器与一个事件相关联，或者注册它，就意味着在你的应用程序中包含了某种

逻辑，用来通知触发事件的监听者。注册监听器的一种方法是 在 <mx:Button> 标签中将它指定 为 click 的属性值。同时，你还可以使 用 ActionScript 去注册监听器 。

1. 在设计模式下，选择按钮控件并在属性视图中 的 On Click 文本框中输 入 convertCurrency （） 。

1. 2. 保存文件，编译后运行。
2. 3. 输入价格，并点击 “ Convert to Yen ”按钮 。 TextInput 控件下方 的 Label 控件将以人民币为单位进行显示 。

使 用 ActionScript 将监听器与事件相关联你还可以使 用 ActionScript 将监听器与指定的事件相关联，如鼠标点击。每当事件发生时，监听器就被通报并开始运行 。

1. 1. 切换到源代码模式 。
2. 2. 删除 <mx:Button> 标签中 的 click 属性和它的数值 。

1.  
   1. 3. 在 convertCurrency 事件监听器中声明一个事件对象，就象这样 ： public function convertCurrency(e:Event):void { ...
   2. 每当监听器的功能函数被调用时 ， Flex 创建一个事件对象并传递给监听器。因此，最好的办法是在监听器的功能函数中声明事件对象。因此，你 在 convertCurrency 函数中声明了一个 叫 e 的事件类型对象 。
2. 4. 在 <mx:Script> 标签中 的 convertCurrency 函数前输入随后的代码 ： public function createListener():void { btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency); } 每当用户点 击 btnConvert 按钮 ， convertCurrency 事件监听器就被通知相应的触发事件已

经发生。监听器函数执行货币计算并显示结果。脚本块看起来就象这样 ：

<mx:Script> <![CDATA[ public function createListener():void {

btnConvert.addEventListener(MouseEvent.CLICK, convertCurrency) ; }

public function convertCurrency(e:Event):void { var rate:Number = 120 ; var price:Number = Number(txtPrice.text) ; if (isNaN(price)) {

lblResults.text = "Please enter a valid price.";

} else { price = price * rate ; lblResults.text = "Price in Yen: " + String(price) ;

} } ]] font-size: 10.5pt; font-family: 'serif'