Flex中文帮助 第四章

转载自[url=http://www.airia.cn/]AIRIA.cn[/url]

[size=large][b]第四章 Flex编程入门教程[/b][/size]

本章节将提供一系列的课程教授你如何开发 Flex应用程序。

[size=medium][b]第一节 创建你的第一个应用程序[/b][/size]

本节将向你展示如何使用 Adobe Flex Builder编译和运行一个简单的 Flex应用程序。其中涉及的重点内容包括 Flex Builder项目的概念。在 Flex Builder中，所有的程序都被包含在项目/projects里。

[b]创建一个项目[/b]

在 Flex Builder中创建一个 Flex应用程序之前，你必须首先要创建一个项目。当创建好项目文件时，主 MXML程序文件就已经准备好。然后你就可以在项目中添加各种资源，如 MXML组件文件、 ActionScript文件等等。其主要操作步骤有：

1. 启动 Flex Builder并从主菜单中选择 File > New > Flex Project，出现新项目向导 /New Flex Project wizard。
2. 在打开的屏幕中，选择基础数据选项 /Basic data option并点下一步 /Next。接下来会询问你指定保存项目文件的目录。
3. 在项目名称栏中输入 Lessons。在项目内容区域，确保使用默认目录选项 /Use Default Location option被选定。默认的目录是 C:\Documents and Settings\your_user_name\My Documents\Flex Builder 2。Flex Builder将在该目录下创建 Lessons文件夹。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431701.jpg[/img]

4. 点击完成 /Finish。 Flex Builder创建好新的项目并在导航视图中进行显示。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431702.jpg[/img]

新建项目向导将自动生成项目配置文件，存放被编译 SWF文件的输出目录，以及主程序文件 Lessons.mxml。

5. 确定自动构造选项 /automatic build option是打开的，选择 Select Project > Build Automatically。

[b]创建并运行应用程序[/b]

1. 如果 Lessons.mxml文件没有被打开，请在导航视图中找到并双击来打开它。
2. 切换到 MXML编辑器。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431703.jpg[/img]

Flex Builder将在 Lessons.mxml文件中插入随后代码：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

</mx:Application>

3. 在<mx:Application>组标签之间输入随后的代码来添加一个面板容器。 <mx:Panel title="My Application" width="200" height="300"> </mx:Panel> 面板容器是 Flex布局的基本部件。
4. 在<mx:Panel>组标签之间输入随后的代码来添加一个 Label控件。
<mx:Label text="Welcome to Flex!" mouseDownEffect="WipeRight" />你可以点击设计按钮 /Design button是预览布局的效果。
5. 保存文件每当你保存文件时， Flex Builder就会自动地构造应用程序。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431704.jpg[/img]

构造完成后，请点击运行 /Run按钮来执行程序。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431705.jpg[/img]

一个浏览器打开并运行应用程序。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431706.jpg[/img]

在这一节中，你学习了在 Flex Builder中如何创建一个项目，以及如何编译和运用一个 Flex应用程序。

[size=medium][b]第二节 获取并显示数据[/b][/size]

为了在应用程序中使用数据， Adobe Flex包括了与 HTTP servers，web services或 remote object services（Java objects）进行交互的组件，这些组件被称之为远程过程调用（ RPC）服务组件。

与 Adobe ColdFusion，PHP或类似的服务器技术不同， Flex应用程序并不直接连接数据库。举个例子，你可以在一个 Flex文件中插入 HTTP service来实现与 ColdFusion文件的交互，以获取 MySQL数据库中的数据，转换成 XML，然后返馈给 Flex应用程序。

在本节中，你将学习创建一个简单的 blog阅读器。你使用了被称之为 HTTPService的 RPC service组件从 RSS中获取数据，然后将数据绑定到 Label、DataGrid、TextArea和 LinkButton控件上。

为了完成这个项目，执行的步骤如下：

1. 设置项目
2. 检查要访问的远程数据源
出于安全的原因，在客户端计算机上 Flash Player中运行的应用程序，只有在满足如下条件之一的情况下，才能访问远程的数据：

a. 应用程序的 SWF文件与远程数据源位于同一个域中。
b. 使用代理，同时 SWF文件与代理位于同一个服务器中。
c.在数据源的宿主 web服务器上安装 crossdomain.xml（跨域策略）文件。 本节中例子使用的是第三种方法。
插入并配置 blog阅读器 在本小节，你将学习创建一个 blog阅读器。

1. 在导航视图中选择 Lessons项目，选择 File > New > MXML Application并创建一个叫 BlogReader.mxml的文件。
2. 将 BlogReader.mxml设置为被编译的默认文件。
3. 在 MXML编辑器的设计模式下，从组件视图中拖拉出一个面板容器，并设置它的相应属性值：


[quote]Title: Blog Reader Width: 475 Height: 400
X: 10
Y: 10[/quote]

4. 在设计模式下，从组件视图中拖拉出如下组件到面板容器里： DataGrid TextArea LinkButton
5. 使用鼠标将控件布置成垂直排列的、左对齐的列。
6. 选择 DataGrid控件并设置相应属性：

[quote]Id: dgPosts
X: 20
Y: 20 Width: 400[/quote]

7. 选择 TextArea控件并设置相应属性：

[quote]X: 20
Y: 175 Width: 400[/quote]

8. 选择 LinkButton控件并设置相应属性：

[quote]Label: Read Full Post
X: 20
Y: 225[/quote]

界面布局看起来就象这样：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431707.jpg[/img]

9. 点击工具条上的 Source button切换成编辑器源代码模式。在 BlogReader.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="475" height="400" layout="absolute" title="Blog Reader"> 
<mx:DataGrid x="20" y="20" id="dgPosts" width="400">

<mx:columns> 
<mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

</mx:columns> 
</mx:DataGrid> 
<mx:LinkButton x="20" y="225" label="Read Full Post"/> 
<mx:TextArea x="20" y="175" width="400"/>

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

10.保存文件，完成编译后运行。一个浏览器窗口将打开，如下所示。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431708.jpg[/img]

到这一步，应用程序还没有显示任何 blog信息。接下来的一步是使用一个称之为 HTTPService的 RPC服务组件来获取 blog的信息。

[b]插入 HTTPService组件[/b]

对于 blog阅读器这个项目，其数据源来自于 http://www.adobe.com/go/mchotinblog。你使用 HTTPService组件来访问 blog的 XML。该组件发送 HTTP GET或 POST请求，并获取反馈回来的数据。

1.在源代码模式下，在 <mx:Application>标签中输入 <mx:HTTPService>标签：

<mx:HTTPService id="feedRequest" url="http://weblogs.macromedia.com/mchotin/index.xml" useProxy="false"/>

url属性指明了被请求文件所在的位置。在本例中，该 URL一直是有效的，但是你仍然

需要确定它是否已经发生改变。 useProxy属性表明你并不打算在服务器上使用代理。因为 Matt's blog上面有 crossdomain.xml设置，所以 Flash Player可以访问该服务器上的远程数据。接下来提示应用程序向指定的 URL发送请求。

2. 在<mx:Application>标签后，添加 creationComplete属性（粗体显示）：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()" >

你的应用程序每次启动时， HTTPService组件的 send（）方法将被调用。该方法向指定的 URL发出 HTTP GET或 POST请求，并得到 HTTP回应。在本例中， RSS feed将返回 XML数据。

接下来，检测 RSS feed的获取是否成功。然后将数据绑定到 Label控件上，就象这样：

3. 在<mx:Panel>标签中，将 title属性的值用随后的表达式替换：

[quote]title="{feedRequest.lastResult.rss.channel.title}"[/quote]

当 HTTPService组件返回 XML时，在名叫 lastResult的 ActionScript对象中进行剖析。 lastResult对象的结构反映了 XML文档的结构。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/47431709.jpg[/img]

XML的结构通常如下所示：

<rss>
<channel> 
<title> 
other child nodes of 
</title>
</channel> 
<item>
other child nodes of 
</item> 
...

HTTPService组件的 lastResult对象反映了这种结构，你的代码看起来就象这样：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()" >

<mx:HTTPService id="feedRequest" url="http://weblogs.macromedia.com/mchotin/index.xml" useProxy="false" />

<mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.title}">

<mx:DataGrid x="20" y="20" id="dgPosts" width="400">

<mx:columns> 
<mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/>

</mx:columns> 
</mx:DataGrid>

<mx:LinkButton x="20" y="225" label="Read Full Post"/> 
<mx:TextArea x="20" y="175" width="400"/> 
</mx:Panel>

</mx:Application>

4. 保存文件，编译完运行。

组装 DataGrid控件 在应用程序中，使用 DataGrid控件显示新近贴子的标题。

1. 在源代码模式下，在 <mx:DataGrid>标签中输入随后的 dataProvider属性：

<mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}" >

名称为 item的 XML结点为 DataGrid控件提供数据。在 XML中这个结点是重复的，所以它在 DataGrid中也是重复的。

2. 在第一个 <mx:DataGridColumn>标签里，键入如随后所示的 headerText和 dataField属性值：

<mx:DataGridColumn headerText="Posts" dataField="title" />

DataGrid控件的第一列用来显示标题。实现它是通过确定包含标题数据的 XML中的字段，然后输入这个字段作为 dataField的属性值。在 dataProvider属性（ item）中指定的 XML结点，名为 title的子结点中包含了所需的信息。

3. 在第二个 <mx:DataGridColumn>标签中，输入如随后所示的 headerText，dataField和 width属性值： <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />
DataGrid中的第二列用来显示日期。在本例中，包含数据的字段被称之为 pubDate。


4. 删除第三个 <mx:DataGridColumn>标签，因为我们在这里并不需要第三列。<mx:DataGrid>标签看起来就象这样：

<mx:DataGrid x="20" y="20" id="dgPosts" width="400" 
dataProvider="{feedRequest.lastResult.rss.channel.item}">

<mx:columns> 
<mx:DataGridColumn headerText="Posts" dataField="title" /> <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />

</mx:columns> 
</mx:DataGrid>

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

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/474317010.jpg[/img]

[b]显示所选的项[/b]

当用户在 DataGrid控件中进行选择时，你希望应用程序在 TextArea控件中只显示贴子的头几行内容。在 XML供给器的项结点中，这个信息被包含在一个称之为 description的字段里。

1. 在源代码模式中，在 <mx:TextArea>标签中输入如随后所示的 htmlText属性：

<mx:TextArea x="20" y="175" width="400" htmlText="{dgPosts.selectedItem.description}" />

对于在 DataGrid组件中所选择的每个项（名称为 dgPosts），description字段的数值被使

用作为 htmlText的属性，该属性使你可以显示 HTML格式的文本。

2. 保存文件，编译后运行。点击 DataGrid控件中的分列，每个贴子的头几行内容将出现在 TextArea控件中。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122401.jpg[/img]

[b]创建一个动态连接 [/b]

RSS供给器并不提供贴子的完整文本，但是你还是可以使用户能够读到这些贴子，如果他们有兴趣的话。 RSS供给器没有提供的信息，可以通过连接到各个贴子的 URLs来实现。在 XML供给器的 item结点中，这个信息被包含在一个称之为 link的字段中。

你可以创建一个动态连接来显示在 DataGrid中被选贴子的全部内容。

1. 在源代码模式里，在 <mx:LinkButton>标签中输入如随后所示的 click属性：

<mx:LinkButton x="20" y="225" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" />

DataGrid控件中被选项的连接字段的值， dgPosts.selectedItem.link由 navigateToURL（）方法的参数所指定，每当用户点击 LinkButton控件时被调用。 navigateToURL（）方法在一个新打开的浏览器窗口中，加载从指定 URL传来的文档。

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

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122402.jpg[/img]

在本节中，你学习了使用称为 HTTPService的 RPC service组件从 RSS供给器中获取数据，然后将数据绑定到 Label，DataGrid，TextArea和 LinkButton控件上。

[size=medium][b]第三节 创建一个受约束的布局[/b][/size]

本节将教你学会如何创建一个布局受约束的应用程序。受约束的布局可以确保用户界面中的组件在程序窗口大小发生变化时，也能自动地作出调节。备注：你可以通过使用嵌套的布局容器 /nested layout container来实现相同的目的。

受约束的布局每当用户改变应用程序的窗口大小时，你希望布局的组件能够自动地进行调节，改变它

们的大小和位置。受约束的布局方式能够实现这种效果。创建受约束的布局，你必须将容器的布局属性设置为绝对方式（ layout="absolute"）。备注：帆布容器 /canvas container并不需要进行 layout=”absolute”的属性设置，因为它默

认是绝对布局方式。举个例子，如果你想在用户增宽程序的窗口时拉长 TextInput文本框，你可以将控件锚定在容器的左右边缘上，使文本框的宽度由窗体来确定。在 Flex中，所有的约束都是被设置为与容器的相对距离，它们不可能被设置为相对于其它控件。

插入并放置组件创建受约束布局的第一步是在容器中放置组件，并将布局属性设置为绝对值方式。为了精确到象素，你可以直接设置 x和 y坐标，而不是在容器中拖拉组件。

1. 在导航视图中选择 File > New > MXML Application，创建一个名叫 Layout.mxml的应用程序。默认地， Flex Builder将 Application标签中的布局属性设置为绝对方式。
2. 将 Layout.mxml文件作为进行编译的默认文件，并在关联菜单中选择 Set As Default Application。
3. 在 MXML编辑器的设计模式中，将 Label控件和 TextInput控件从组件视图中（Window > Components）拖拉到 Layout.mxml文件里。
4. 使用鼠标指针将 Label控件和 TextInput控件放置到距离容器顶端 60象素的地方。
5. 在 Flex属性视图中，打开 Common and the Layout categories of properties。
6. 在布局中选择 Label控件，并在属性项中进行相应的设置：

[quote]Text: Email
X: 20
Y: 60[/quote]

7. 在布局中选择 TextInput控件，并设置相应的 TextInput属性：

[quote]X: 90
Y: 60 Width: 300[/quote]

8. 切换到 MXML编辑器源代码模式，在 Layout.mxml文件中输入随后的 MXML代码：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> 
<mx:Label x="20" y="60" text="Email"/> 
<mx:TextInput x="90" y="60" width="300"/> 
</mx:Application>

9. 在<mx:TextInput>标签后输入额外的内容，就象这样：

<mx:Label x="20" y="90" text="Comments"/> 
<mx:TextArea x="90" y="90" width="300" />

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122403.jpg[/img]

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122404.jpg[/img]

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122405.jpg[/img]

如果你看到的是属性表格而不是预览视图，请点击视图工具条中的标准视图按钮 /Standard View button。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122406.jpg[/img]

然后，点击工具条上的设计按钮来预览布局效果。它看起来就象这样：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122407.jpg[/img]

10. 保存文件并运行。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122408.jpg[/img]

11. 拖拉浏览器的边缘使之更大或更小。组件保持它们与窗体左 /上边界的相对位置，但是它们并没有进行扩展或压缩。举个例子，如果你的窗体过于狭窄，那么发送按钮就会看不到，而 TextInput控件和 TextArea控件也会被拦住一部分。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48122409.jpg[/img]

接下来的一步是为控件设置布局约束，以便它们可以在程序窗体大小改变时进行调节。

[b]定义布局约束[/b]

在布局中放置好组件后，你就可以进行布局约束的定义了。在 MXML编辑器的设计模式中，选择 TextInput控件（用来输入电子邮件地址的）。

在 Flex属性视图中，确保 Layout category of properties是展开的。 Layout category中包含了设置锚定的选项。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/481224010.jpg[/img]

3. 为 TextInput控件定义布局约束，在视图中选择左 /右锚定框，并指定距离窗体左边缘 90，距离窗体右边缘 60，就象这样：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/481224011.jpg[/img]

这些约束也可以通过 MXML代码来实现：

<mx:TextInput y="60" left="90" right="60"/>

4. 在编辑器的设计模式下，选择 TextArea控件，为它设置四个角与容器的距离： Left: 90 Right: 60 Top: 90 Bottom: 190

在 Flex属性视图中的布局分类里， TextArea控件看起来就象这样：

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/481224012.jpg[/img]


5. 在布局中选择 Button控件，选择右 /底锚定框，分别设置数值 60和 150，就象这样：
6. 保存文件，编译后运行。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/481224013.jpg[/img]

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/481224014.jpg[/img]

7. 拖拉浏览器窗体的边缘使其更大或更小。举个例子，如果你使窗体更狭窄， Send按钮会向左边移动，同时 TextInput和 TextArea文本框会变得更加狭窄。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/481224015.jpg[/img]

如果你使浏览器窗体更加宽大， Send按钮会向右边移动， TextInput和 TextArea文本框会变得更宽。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/481224016.jpg[/img]

在本节中，你学习了如何使用 Flex Builder创建受约束的布局。

[size=medium][b]第四节 使用列表控件[/b][/size]

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

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

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

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


[quote]Title: Rate Customer Service
Width: 350
Height: 200
X: 10
Y: 10[/quote]

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

[quote]ID: cbxRating
X: 20
Y: 20 ComboBox[/quote]

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

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

[quote]Label: Send
X: 140
Y: 20[/quote]

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

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48620931.jpg[/img]

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>

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

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48620932.jpg[/img]

装载列表你可以使用 <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>

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

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48620933.jpg[/img]

如果你想要访问 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. 保存文件，编译后运行。

[b]将列表项与数值相关联[/b]

将列表项与数值进行关联的方法与在你在 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应用程序中插入列表控件，并进行数据的装载。

[size=medium][b]第五节 使用事件监听器[/b][/size]

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

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

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

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

[quote]Title: Currency Converter Width: 450 Height: 150
X: 20
Y: 20[/quote]

4. 从组件视图中拖拉两个 Label控件，一个 TextInput控件和一个按钮控件到面板容器中。
5. 布置这些控件，使布局看起来就象这样：
6. 选择第一个 Label控件，将它的文本属性设置为 Price in Dollars。
7. 选择 TextInput控件，并将它的 id属性值设置为 txtPrice。
8. 选择按钮控件并进行相应的设置： ID: btnConvert Label: Convert to Yen
9. 选择第二个 Label控件（位于 TextInput控件下）并进行相应的设置：清空它的文本属性值将 lblResults作为它的 id属性值

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48620934.jpg[/img]

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

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48620935.jpg[/img]

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（）。

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48620936.jpg[/img]

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

[img]http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/48620937.jpg[/img]

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

1. 切换到源代码模式。
2. 删除<mx:Button>标签中的 click属性和它的数值。
3. 在 convertCurrency事件监听器中声明一个事件对象，就象这样：

public function convertCurrency(e:Event):void { ...
每当监听器的功能函数被调用时， Flex创建一个事件对象并传递给监听器。因此，最好的办法是在监听器的功能函数中声明事件对象。因此，你在 convertCurrency函数中声明了一个叫 e的事件类型对象。


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);
} 
} 
]]>

</mx:Script>

5. 在<mx:Application>标签中，输入随后的属性值以便 createListener（）功能函数被调用，并且使事件监听器在程序被创建后立即被注册：

[quote]creationComplete="createListener();"[/quote]

<mx:Application>标签看起来就象这样：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createListener();">

6. 保存文件，编译后运行。
7. 输入价格并点击“ Convert to Yen”按钮。 TextInput控件下方的 Lable控件将以人民币为单位进行显示。
在本节中，你学习了为按钮控件编写一个事件监听器，然后使用两种方法将它与按钮单击事件相关联。在第一种方法中，你通过指定按钮控件的 MXML标签里的 click属性来进行关联。在第二种方法中，你使用 ActionScript 功能函数来进行关联。

转载自[url=http://www.airia.cn/]AIRIA.cn[/url]