<mx:Application>标签看起来就象这样： <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="createListener();">

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

在本节中，你学习了为按钮控件编写一个事件监听器，然后使用两种方法将它与按钮单击事件相关联。在第一种方法中，你通过指定按钮控件的 MXML标签里的 click属性来进行关联。在第二种方法中，你使用 ActionScript 功能函数来进行关联。

第六节使用行为

Adobe Flex行 为使你可以为应用程序添加动画和运动，来对用户和编程活动作出反应。行为，是由一个触发器和一种效果组合而成。触发器是一种活动，如鼠标在组件上点击，组 件获得焦点，或组件可见。效果是在目标组件上的可视性或可听性上的某种变化，以毫秒计算。效果的例子包括淡出，尺寸变化，或者组件发生移动。

本节将教授你如何在 Flex用户界面中添加行为。具体内容包括如何使用 MXML去创建行为，如何从不同的组件调用一种效果，以及如何组合多种效果以产生合成效果。

创建一个行为

你打算创建一个行为，当按钮被用户点击时变成绿色，维持一秒半以后，离开按钮时变成淡绿色以表明它已经被点击过。

1. 1. 在导航视图中选择 Lessons项目，选择 File > New > MXML Application并创建名叫 Behaviors.mxml的文件。
2. 2. 将 Behaviors.mxml设置为被编译的默认文件，并在关联菜单中选择 Set As Default Application。
3. 3. 在 MXML编辑器源代码模式中，在 <mx:Application>标签后定义绿色效果： <mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/>

绿色效果开始时十分饱满，然后逐步变得透明，但不完全透明。最后变成淡绿色以表明按钮已经被点击过。

4. 在设计模式下，从组件视图拖拉一个面板容器到布局上，并设置其相应属性： Width: 200 Height: 300

X: 10

Y: 10

5. 从组件视图中拖拉一个按钮控件到面板上，并设置其相应属性： ID: myButton Label: View

X: 40

Y: 60 6. 在属性视图中，点击工具条中的分类视图 /Category View查看属性，然后找到效果分类/Effects category。

按钮控件相对应的触发器分类列表。

7. 通过在波浪括号中键入效果的 ID来作为触发器的值，为 mouseUpEffect触发器赋上绿色渐变效果，就象这样：

mouseUpEffect: {buttonGlow}

波浪括号（ { }）是必须的，因为效果是使用数据绑定来分配给它们的触发器的。在源代码模式下， <mx:Button>标签看起来就象这样： <mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" />

8. 保存文件，编译后运行。结果如下：从不同的组件调用一种效果

取代组件触发器，你还可以使用 Flex事件去调用效果。这样就可以使同一种效果为不同的组件所调用。举个例子，你可以使用按钮控件的点击事件去告知 TextArea控件播放淡入淡出的效果。

当用户点击应用程序的查看按钮时，你希望 Label组件的文本逐渐由模糊到清楚。

1. 在设计模式中，在查看 /View按钮下插入一个 Label控件，并设置相应的属性： ID: myLabel Text: 4 8 15 16 23 42

X: 40

Y: 100

2. 切换到源代码模式下，在 <mx:Glow>标签后的 <mx:Blur>里定义好绿色渐变效果：

<mx:Blur id="numbersBlur" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/>

3. 在<mx:Blur>标签中，将名为 myLabel的控件指定为效果的目标控件：

<mx:Blur id="numbersBlur" target="{myLabel}" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/>这样，myLabel组件便有了设置的效果。

4. 在<mx:Button>标签中，将 numbersBlur效果指定为点击事件要播放的效果：

<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}"

click="numbersBlur.play();"/> 当用户点击按钮控件时，应用程序调用效果的 play（）方法。因为 numbersBlur效果的目标是 myLabel控件，所以应用程序将效果运用到 label而非

按钮上。

1. 5. 在<mx:Label>标签中将 visible属性设置为 false，隐藏 Label控件： <mx:Label id="myLabel" x="40" y="100" text="4 8 15 16 23 42" visible="false" />
2. 这些数字不会被显示，直到用户点击查看按钮。
1. 6. 当用户点击查看按钮时，使用语句将按钮的 visible属性设为真，使 Label控件可见： <mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="numbersBlur.play(); myLabel.visible=true;"/>

当用户点击按钮时，绿色渐变效果开始播放， Label控件变得可见。

在 Behaviors.mxml文件中输入如下代码：

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Glow id="buttonGlow" color="0x99FF66" alphaFrom="1.0" alphaTo="0.3" duration="1500"/> <mx:Blur id="numbersBlur" target="{myLabel}" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000" /> <mx:Panel x="10" y="10" width="200" height="300" layout="absolute"> <mx:Button x="40" y="60" label="View" id="myButton" mouseUpEffect="{buttonGlow}" click="numbersBlur.play(); myLabel.visible=true;"/>

<mx:Label x="40" y="100" text="4 8 15 16 23 42" id="myLabel" visible="false"/> </mx:Panel> </mx:Application>

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

创建一个组合效果你还可以使 Label组件在获得焦点的同时向下移动 20个象素。也就是说，你可以将绿色渐变效果与移动效果组合起来。

Flex提供将超过一种的多种效果组合起来的能力。你可以使用 <mx:Parallel>标签或 <mx:Sequence>标签来定义一个组合效果，这取决你是想要组合的效果是并行地或顺序地进行播放。在例子中，是要绿色渐变的效果与移动的效果同时进行。

1. 1. 在源代码模式中，在 <mx:Blur>标签前的 <mx:Parallel>标签中输入： <mx:Parallel id="BlurMoveShow"> </mx:Parallel>
2. 并行组合的效果名称为 BlurMoveShow。
1. 2. 在代码中选择整个 <mx:Blur>标签，然后粘贴到<mx:Parallel>标签对中，让它成为 <mx:Parallel>标签的子标签。
2. 3. 在<mx:Blur>标签中选择 target="{myLabel}"属性，然后将它移动到 <mx:Parallel>标签内，让它成为 <mx:Parallel>标签的属性： <mx:Parallel id="BlurMoveShow" target="{myLabel}">

你希望组合效果作用在名叫 myLabel 的组件上。

4. 在<mx:Blur>标签后的 <mx:Move>标签中定义移动的效果：

<mx:Move id="numbersMove" yBy="20" duration="2000" />你希望 Label控件在两秒钟内向下移动 20个象素。完成的<mx:Parallel>标签看起来就象这样：

<mx:Parallel id="BlurMoveShow" target="{myLabel}">

<mx:Blur id="numbersBlur" blurYFrom="10.0" blurYTo="0.0" blurXFrom="10.0" blurXTo="0.0" duration="2000"/>

<mx:Move id="numbersMove" yBy="20" duration="2000" /> </mx:Parallel>

5. 在<mx:Button>标签中，用 BlurMoveShow组合效果取代 numbersBlur效果来响应点击事件：

<mx:Button id="myButton" x="40" y="60" label="View" mouseUpEffect="{buttonGlow}" click="BlurMoveShow.play(); myLabel.visible=true;"/>

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

在本节中，你学习了如何创建行为，从不同的组件调用相同的效果，以及如何将多种效果合成来生成组合效果。

第七节使用视图状态和变换

你可以在 Adobe Flex 中使用视图状态和变换来创建更为丰富、更为互动性的用户经历。举个例子，你可以使用视图状态去创建用户界面，它可以根据用户所执行的任务来改变它的外观。

视图状态 /view states是你为一个 MXML程序或组件定义的布局命名。你可以为一个程序或组件定义几种视图状态，并且根据用户的行为在它们之间进行切换。视图状态允许你动态地改变用户界面，以便来对用户的活动或增加的内容作出响应。

备注：当然，你还可以使用 ViewStack导航容器来实现同样的效果。

变换/transition是当一个视图状态发生变化时成组播放的几种效果。变换的目的是使视觉上的变化更为平滑和有趣。

本节将教授你如何使用视图状态和变换去创建用户界面。

设计基础状态

在你使用视图状态之前，你必须设计好应用程序或组件的基础状态。所谓的基础状态，就是指程序或定制组件的默认状态。

在本节中，你创建好有一个简单搜索表格的基础状态。

1. 1. 在导航视图中选定 Lessons项目，选择 File > New > MXML Application并创建一个名叫 ViewStates.mxml的文件。
2. 2. 将导航视图中的 ViewStates.mxml设计成被编译的默认文件，并且在关联菜单中选择 Set As Default Application。
1. 3. 在 MXML编辑器设计模式中，从组件视图的布局分类中拖拉出一个面板容器，将它添中到 ViewStates.mxml文件里。
2. 4. 选择布局中的面板容器，并进行相应的属性设置： Width: 300 Height: 400
3. X: 5
4. Y: 5
1. 5. 从组件视图的控件分类中将随后控件拖拉到面板中： Label TextInput Button
2. LinkButton
1. 6. 选择面板中的 Label控件，并进行相应的属性设置： Text: Search
5. X: 20
6. Y: 70
7. 7. 选择 TextInput控件，并进行相应的属性设置：
8. X: 20
9. Y: 90
10. 8. 选择按钮控件，并进行相应的属性设置： Label: Go
11. X: 185
12. Y: 90
13. 9. 选择 LinkButton控件，并进行相应的属性设置： Label: Advanced Options
14. X: 20
15. Y: 120
3. 10. 切换到编辑器的源代码模式下，在 ViewStates.mxml文件中输入如下代码： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

布局看起来就象这样：

<mx:Panel x="5" y="5" width="300" height="400" layout="absolute"> <mx:Label x="20" y="70" text="Search"/> <mx:TextInput x="20" y="90"/> <mx:Button x="185" y="90" label="Go"/> <mx:LinkButton x="20" y="120" label="Advanced Options"/>

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

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

设计视图状态范例程序提供了一个满足大多用户需要的，简单的搜索机制。然而，一些用户可能会比较喜欢更多的搜索选项。你可以使用视图状态来提供这些需求。

1. 在设计模式中，在状态查看（ Window > States）上点击新状态 /New State按钮。

新状态对话框出现。

在名称框中键入 Advanced并点击。新状态出现在状态查看中。

你可以使用 Flex Builder中的布局工具去修改新状态的外观。你可以修改、添加或删除组件，对新状态变化的描述都被编码成 MXML代码。

3. 在设计模式下，在 Advanced Search link下插入一个 VBox容器，为出现的对话框指

定宽度 160高度 80，并设置相应的属性： ID: myVBox

X: 20

Y: 160

4. 拖拉三个 CheckBox控件到 VBox容器。 VBox容器会自动地纵向排列控件。

1. 5. 选择 VBox容器中的第一个 CheckBox控件，将它的标签属性值设置为 Regular Expression。
1. 6. 选择第二个 CheckBox控件，将它的标签属性值设置为 Case sensitive。
2. 7. 选择第三个 CheckBox控件，将它的标签属性值设置为 Exact Phrase。 布局看起来就会象这样：
1. 8. 切换到源代码模式，并检测代码。在<mx:Application>标签后插入 <mx:states>标签： <mx:states> <mx:State name="Advanced"> <mx:AddChild relativeTo="{panel1}" position="lastChild">

<mx:VBox x="20" y="160" width="160" height="80" id="myVBox"> <mx:CheckBox label="Regular expression"/> <mx:CheckBox label="Case sensitive"/> <mx:CheckBox label="Exact phrase"/>

</mx:VBox> </mx:AddChild> </mx:State> </mx:states>

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

程序并没有显示在新视图状态中插入控件。默认地， Flex应用程序只显示基础状态。你必须定义用户如何变换视图状态，通常是点击某个控件。

定义用户如何转换视图状态

你可以设计你的应用程序，使它在用户点击 Advanced Options link时，布局会变换成附有额外搜索选项的高级查看状态。当用户再次点击 link，布局又会变换回基本状态并隐藏那些选项。为了实现这种效果，你需要定义变换状态的点击事件处理器。

1. 在设计模式中，在状态视图中的列表里选择基础状态。

因为你将为 Link控件定义的事件处理器是基础状态的一部分，所以你需要将 MXML编辑器的焦点变到基础状态上。

当你在这一步选择基础状态时， MXML编辑器并没有显示那三个 CheckBox控件，因为它们并不是基础状态的一部分。

2. 选择布局中的 LinkButton控件，在 On Click文本框中输入如下数值： currentState='Advanced'

点击属性表明，当用户点击 LinkButton控件时，应用程序从当前状态变换成高级查看状态，它将显示额外那三个 check框。

接下来，当用户第二次点击 LinkButton 控件时，隐藏那三个 check框，并恢复到基础状态。

3. 在状态视图中，选择 Advanced state。

4. 在高级查看状态的布局中选择 LinkButton控件，指定点击属性： currentState=''

将 currentState的值指定为空的字符串，是要恢复成基础状态。

5. 保存文件，编译后运行。创建一个变换

当你在应用程序中改变视图状态时， check框立即出现在屏幕上。你可以定义一个 Flex变换，让它产生揩去和淡化的效果而不是突然变化。

1. 在源代码模式下，创建一个 Transition对象，在<mx:states>标签后添加 <mx:transitions>标签，指定触发它的变换：

<mx:transitions>

<mx:Transition id="myTransition" fromState="*" toState="Advanced">

</mx:Transition> </mx:transitions>

代码定义了一个名叫 myTransition的变换对象。（你可以在 <mx:transitions>标签中定义更多的变换）

代码还确定，当应用程序从任何视图状态（ fromState="*"）变换成高级查看状态（toState="Advanced"）时，变换就会执行。数值 "*"是一个通配符，用来指定任何视图状态。

2. 为变换指定目标组件，以及效果的播放形式，是同时还是顺序进行：

<mx:Transition id="myTransition" fromState="*" toState="Advanced">

<mx:Parallel target="{myVBox}">

</mx:Parallel> </mx:Transition>

变换的目标组件是名叫 myVBox的 VBox容器。

因为你希望在变换期间两种效果同时发生，所以使用了 <mx:Parallel>标签。如果你希望

两种效果顺序发生，则需要使用 <mx:Sequence>标签。

3. 在<mx:Parallel>标签对中输入<mx:WipeDown>和<mx:Dissolve>标签，指定在变换期用播放的效果：

<mx:Parallel target="{myVBox}">

<mx:WipeDown duration="2000"/>

<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/> </mx:Parallel>

完成后的 <mx:transitions>标签看起来就象这样： <mx:transitions>

<mx:Transition id="myTransition" fromState="*" toState="Advanced">

<mx:Parallel target="{myVBox}">

<mx:WipeDown duration="2000"/>

<mx:Dissolve alphaFrom="0.0" alphaTo="1.0" duration="2000"/>

</mx:Parallel> </mx:Transition> </mx:transitions>

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

在本节中，你学习了如何使用视图状态和变换去创建更加灵活的用户界面。

第八节创建定制的组件

创建定制 MXML组件可以简化构造复杂程序的过程。将程序划分为便于管理的块，你可以编写并测试每个独立的组件。同时，你还可以在同一程序或其它程序中复用这些组件，以加快开发的速度。

本节将教授你如何构造 MXML组件并将它们插入到应用程序中。

为定制组件创建一个测试文件

你打算构造一个定制 MXML组件，一个登录框。在你开始之前，不管怎样，需要创建一个 MXML应用程序文件去测试它。

1. 1. 在导航视图中选择 Lessons项目，选择 File > New > MXML Application并创建名为 Main.mxml的应用程序文件。
2. 2. 将导航视图中的 Main.mxml设计为被编译的默认文件，并在关联菜单中选择 Set As Default Application。
3. 3. 在 MXML编辑器设计模式下，将组件视图中布局分类里的面板容器，拖拉到 Main.mxml文件里。

4. 选择 Main.mxml文件中的面板容器，进行相应的属性设置： Title: Main Application Window Width: 375 Height: 300

X: 20

Y: 20

布局看起来就象这样：

5. 保存文件。

现在，你可以构造并测试定制的组件了。

创建定制组件文件

构造定制 MXML组件的第一步是创建文件。大多数进行定制的组件都是利用已经存在的组件。比如你的新登录框组件，是由 MXML面板组件扩展而来，因为它提供了用于登录表格的基本用户界面。

在开始之前，创建一个子目录去保存定制组件。

1. 1. 在导航视图中，右击 Lessons父文件夹，并从关联菜单中选择 New > Folder。新文件夹对话框出现。
2. 2. 在文件夹名称文本框中，输入 myComponents并点击完成。 Flex Builder创建一个名叫 myComponents的子目录。
3. 3. 在导航视图中选择 myComponents文件夹，选择 File > New > MXML Component。

新 MXML组件对话框出现，将 Lessons/myComponents文件夹设置为定制组件的默认文件夹。

1. 4. 在文件名文本框中，输入 LoginBox。
1. 5. 在弹出菜单中，选择 Panel。你想要扩展面板 /panel组件。
2. 6. 在布局弹出菜单里，确定 Absolute被选定（它应该是默认的）。
2. 7. 点击完成。 Flex Builder创建并保存 LoginBox.mxml文件到 myComponents 文件夹中，然后在

MXML编辑器里打开。如果你切换到设计模式，就会在组件视图的定制分类中看到它：

设计定制组件的布局

接下来是设计定制组件的界面布局。对于你的 LoginBox组件，你希望在布局中包括用户名和密码框，以及一个提交 /submit按钮。

1. 1. 确保在设计模式中 LoginBox组件是打开的。
2. 2. 选择面板并设置相应的属性： Title: Member Login Width: 275 Height: 150
3. 3. 在面板中插入两个 Label控件，并让它们垂直排列。
4. 4. 在 Label控件右边插入两个 TextInput控件，并让它们垂直排列。
5. 5. 选择第一个 Label控件，并将它的文本属性值设为 Username。
6. 6. 选择第二个 Label控件，并将它的文本属性值设为 Password。
7. 7. 选择第一个 TextInput控件，将 txtUID作为它的 id属性值。

8. 选择第二个 TextInput控件，将 txtPwd作为它的 id属性值，并将 Display As Password值设置为 true。

9. 在第二个 TextInput控件下方插入一个按钮控件，将 Login作为它的标签属性值。

10. 放置好这些控件，使布局看起来就象这样：请输入随后的代码（你可以改变其中的坐标值）：

<?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275" height="150" title="Member Login">

<mx:Label x="10" y="12" text="Username"/> <mx:Label x="10" y="42" text="Password"/> <mx:TextInput x="74" y="10" id="txtUID"/> <mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/> <mx:Button x="178" y="70" label="Login"/>

</mx:Panel>

11. 保存文件。

为定制组件定义事件监听器有时，你希望定制组件包含可以处理用户活动的逻辑。比如说你的 LoginBox组件，当用户点击登录按钮时，组件对用户名和密码进行校验，然后仅向授权的用户传送数据。本节将教授你如何为登录按钮定义一个简单的事件监听器。一个事件监听器，就是我们常说的事件处理器。首先，插入并修改一个 Label控件以测试事件监听器是否正确地进行调用。

1. 1. 在设计模式中，在 Login按钮左边的空白处插入一个 Label控件，就象这样：
2. 2. 选择 Labe控件，将 lblTest作为它的 ID属性，同时清空文本属性的值。
3. 3. 选择按钮控件，在 On Click文本框中输入 handleLoginEvent（）。

当用户点击按钮时，希望程序能够调用 handleLoginEvent功能函数。接下来，编写监听器的程序。

1. 4. 切换到源代码模式下，将鼠标移到 <mx:Panel>标签后使之获得焦点。
2. 5. 输入<mx:Script>直到所有标签在代码提示中被选择，按 Enter键插入标签，然后使用

结束方括号来完成标签。 Flex Builder会生成一个包含 CDATA结构的 <mx:Script>脚本块。

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

private function handleLoginEvent():void { lblTest.text = "logging in..."; //login logic

}

关键字 private表明了功能函数的作用范围。在本例中，其作用范围仅限于组件内。如果你将它改成 public，则功能函数在整个代码中均有效。关键字 void表明功能函数不返回任何数值。

组件的代码看起来就象这样：

<?xml version="1.0" encoding="utf-8"?> <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="275" height="150" title="Member Login">

<mx:Script> <![CDATA[

private function handleLoginEvent():void { lblTest.text = "logging in..."; //login logic

}

]]> </mx:Script> <mx:Label x="10" y="12" text="Username"/> <mx:Label x="10" y="42" text="Password"/> <mx:TextInput x="74" y="10" id="txtUID"/> <mx:TextInput x="74" y="40" id="txtPwd" displayAsPassword="true"/> <mx:Button x="178" y="70" label="Login" click="handleLoginEvent()"/> <mx:Label x="74" y="72" id="lblTest"/>

</mx:Panel>

7. 保存文件。

使用定制组件接下来的一步就是将定制组件添加到