Flex中文帮助 第五章

转载自AIRIA.cn

第五章 Flex使用行为

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

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

创建一个行为

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

1. 在导航视图中选择 Lessons项目，选择 File > New > MXML Application并创建名叫 Behaviors.mxml的文件。
2. 将 Behaviors.mxml设置为被编译的默认文件，并在关联菜单中选择 Set As Default Application。
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而非按钮上。

5. 在<mx:Label>标签中将 visible属性设置为 false，隐藏 Label控件：

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

这些数字不会被显示，直到用户点击查看按钮。


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. 在源代码模式中，在 <mx:Blur>标签前的 <mx:Parallel>标签中输入： <mx:Parallel id="BlurMoveShow"> </mx:Parallel>
并行组合的效果名称为 BlurMoveShow。
2. 在代码中选择整个 <mx:Blur>标签，然后粘贴到<mx:Parallel>标签对中，让它成为 <mx:Parallel>标签的子标签。
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. 在导航视图中选定 Lessons项目，选择 File > New > MXML Application并创建一个名叫 ViewStates.mxml的文件。
2. 将导航视图中的 ViewStates.mxml设计成被编译的默认文件，并且在关联菜单中选择 Set As Default Application。
3. 在 MXML编辑器设计模式中，从组件视图的布局分类中拖拉出一个面板容器，将它添中到 ViewStates.mxml文件里。
4. 选择布局中的面板容器，并进行相应的属性设置：

引用

Width: 300 Height: 400
X: 5
Y: 5

5. 从组件视图的控件分类中将随后控件拖拉到面板中：

引用

Label TextInput Button LinkButton

6. 选择面板中的 Label控件，并进行相应的属性设置：

引用

Text: Search
X: 20
Y: 70

7. 选择 TextInput控件，并进行相应的属性设置：

引用

X: 20
Y: 90

8. 选择按钮控件，并进行相应的属性设置：

引用

Label: Go
X: 185
Y: 90

9. 选择 LinkButton控件，并进行相应的属性设置：

引用

Label: Advanced Options
X: 20
Y: 120

10. 切换到编辑器的源代码模式下，在 ViewStates.mxml文件中输入如下代码：

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

布局看起来就象这样：

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

<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容器会自动地纵向排列控件。

5. 选择 VBox容器中的第一个 CheckBox控件，将它的标签属性值设置为 Regular Expression。
6. 选择第二个 CheckBox控件，将它的标签属性值设置为 Case sensitive。
7. 选择第三个 CheckBox控件，将它的标签属性值设置为 Exact Phrase。 布局看起来就会象这样：
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. 在导航视图中选择 Lessons项目，选择 File > New > MXML Application并创建名为 Main.mxml的应用程序文件。
2. 将导航视图中的 Main.mxml设计为被编译的默认文件，并在关联菜单中选择 Set As Default Application。
3. 在 MXML编辑器设计模式下，将组件视图中布局分类里的面板容器，拖拉到 Main.mxml文件里。
4. 选择 Main.mxml文件中的面板容器，进行相应的属性设置：

引用

Title: Main Application Window Width: 375 Height: 300
X: 20
Y: 20

布局看起来就象这样：


 
5. 保存文件。

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

创建定制组件文件

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

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

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


 
4. 在文件名文本框中，输入 LoginBox。
5. 在弹出菜单中，选择 Panel。你想要扩展面板 /panel组件。
6. 在布局弹出菜单里，确定 Absolute被选定（它应该是默认的）。
7. 点击完成。 Flex Builder创建并保存 LoginBox.mxml文件到 myComponents 文件夹中，然后在
MXML编辑器里打开。如果你切换到设计模式，就会在组件视图的定制分类中看到它：


 
设计定制组件的布局

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

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

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

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

http://www.airia.cn/AIRIA/up_files/image/Article/2008/07/06/495989217.jpg

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


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

4. 切换到源代码模式下，将鼠标移到 <mx:Panel>标签后使之获得焦点。
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. 保存文件。

使用定制组件接下来的一步就是将定制组件添加到 MXML程序文件中，然后编译并运行以测试其效果。

1. 在设计模式中，切换到 Main.mxml文件。
2. 在组件视图的定制分类中找到 LoginBox组件。
3. 将 LoginBox组件拖拉到布局中面板的右边缘。
4. 在布局中选择 LoginBox组件，进行相应的属性设置：

引用

X: 400
Y: 20

完成的布局看起来就象这样：


 
5. 切换到 MXML编辑器源代码模式下，在文件中插入如下代码：

<?xml version="1.0" encoding="utf-8"?> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:ns1="myComponents.*"> 
<mx:Panel x="20" y="20" width="375" height="300" layout="absolute" title="Main Application Window"> 
</mx:Panel> 
<ns1:LoginBox x="400" y="20"> 
</ns1:LoginBox>

</mx:Application>当你将定制组件拖拉到 MXML文件中时， Flex Builder会定义一个叫 ns1的命名空间，

然后在<mx:Panel>标签后插入一个 <ns1:LoginBox>标签。

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


 
应用程序会显示你在主文件中所插入的 LoginBox组件。你可以在多个 MXML文件中复用相同的组件。

点击 Login按钮检验事件监听器是否正确调用，字符串"logging in..."将出现在 Login按钮的左边。（译者注：这只是一个演示定制组件的简单程序，在实际工作中，取而代之的是进行相应处理的逻辑。）

在本节中，你创建了一个定制的 MXML组件，并在应用程序中使用它。你设计好组件的布局，并且为控制它而定义好事件监听器。

第九章 使用 Web服务

为了在应用程序中使用数据库， Adobe Flex提供了若干特定的组件，如 web services， HTTP servers或 remote object services（Java对象）。这些组件被称为远程过程调用（ RPC）服务组件。

在本节中，你创建了一个简单的报表程序，用来显示最近 30天最热门的贴子，程序还可以让用户来决定显示贴子的数量。使用名叫 WebService的 RPC服务组件去提交用户的选择，同时从源数据站点的 SOAP-based web service上获取数据，并将这些数据显示在 DataGrid控件中。

相关 API资料

MXNA为开发人员提供一组 web services，其网站位于 www.adobe.com/go/mxna_developers。在你开始创建自己的应用程序前，应该查看他们 Web服务的相关 API资料，以确保存在你想要的接收信息的方法。相关 API资料位于 www.adobe.com/go/mxna_api。

文档资料描述了一种称为 getMostPopularPosts的方法。该方法将返回近 30天最热门的贴子。对于每一个返回的贴子，均包含如下信息： postId，clicks，dateTimeAggregated，feedId， feedName，postTitle，postExcerpt，和 postLink。

该方法使用了两个参数：

daysBack指出你想要返回的天数。 Limit指出你想要返回的贴子总数，不能超过 50。

插入并放置控件在本节中，你首先创建好报表程序的布局。使用 ComboBox控件来让用户设置贴子列表的数量，并在 DataGrid中进行显示。

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

引用

Title: Most Popular Posts Width: 475 Height: 400
X: 10
Y: 10

4. 在设计模式下，将以下控件从组件视图中拖拉到面板容器里： ComboBox DataGrid LinkButton
5. 使用鼠标将控件布置好，看起来就象这样：
 


6. 选择 ComboBox控件，将 cbxNumPosts作为它的 id属性值。

ComboBox控件还没有显示任何项，你需要装载它。

7. 切换到编辑器的源代码模式，在 <mx:ComboBox>标签对中输入随后代码： <mx:Object label="Top 5" data="5"/> <mx:Object label="Top 10" data="10"/> <mx:Object label="Top 15" data="15"/>

8. 切换回设计模式，选择 DataGrid组件，为它指定如下属性值： ID: dgTopPosts Width: 400
9. 选择 LinkButton控件，将 Select an item and click here for full post 作为它的标签属性
值。整个布局看起来就象这样：

 

10. 切换到源代码模式。在 Services.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="Most Popular Posts">
<mx:ComboBox x="30" y="25" id="cbxNumPosts"> 
<mx:Object label="Top 5" data="5" /> 
<mx:Object label="Top 10" data="10" /> 
<mx:Object label="Top 15" data="15" />
</mx:ComboBox> 
<mx:DataGrid x="30" y="75" id="dgTopPosts" 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="30" y="250" label="Select an item and click here for full post"/> 
</mx:Panel>
</mx:Application>

接下来就是在程序中插入并设置 RPC组件， WebService。

插入 WebService组件你可以使用 Flex WebService组件去访问使用 SOAP的 web服务器并获取相应的信息。

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

<mx:WebService id="wsBlogAggr" wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl" useProxy="false">
</mx:WebService>

Wsdl属性指出了 web服务器 WSDL文件的位置。在本例中，该地址是始终有效的，但是你依然需要进行检测以确保它是否发生改变。最近的 WSDL文件位于开发者页面 www.adobe.com/go/mxna_developers。（译者注：如果你愿意，也可以使用别名 http://www.adobe.com/go/flex_mxna_wsdl。

useProxy属性表明你不打算在服务器上使用代理。

2. 指定传送参数到 web服务器的方法。 根据 API文档资料， getMostPopularPosts方法需要使用了两个参数： daysBack指定你想要返回的天数。 Limit指定你想要返回的总行数。 为了指定这些参数，在 <mx:WebService>标签对中输入如下代码：

<mx:operation name="getMostPopularPosts">
<mx:request> 
<daysBack>30</daysBack> 
<limit>{cbxNumPosts.value}</limit>
</mx:request> 
</mx:operation>

<mx:operation>标签的 name属性必须与 web服务器方法的 name相同。

3. 在<mx:ComboBox>标签中，添加随后的 change属性：

<mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">

当用户在 ComboBox控件中选择某个选项时， wsBlogAggr WebService组件的 getMostPopularPosts方法就被调用。方法的参数在 WebService组件的 <mx:operation>标签中进行指定。 Limit参数在程序运行时由用户所作的选项来决定。

应用程序已经准备好调用 web service。接下来就是显示从 web service中返回的数据。

装载 DataGrid组件你打算使用 DataGrid控件来显示从 web service返回的数据。具体地，你打算显示更热门贴子的标题，以及它们被浏览点击的次数。

1. 在源代码模式下，在 <mx:DataGrid>标签中输入如下代码： <mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">
你打算在 DataGrid控件中显示 web service的 getMostPopularPosts的操作结果。
2. 在第一个 <mx:DataGridColumn>标签中，输入 headerText和 dataField 属性值： <mx:DataGridColumn headerText="Top Posts" dataField="postTitle" />
DataGrid控件的第一列用来显示贴子的标题。根据从 web service操作所返回的包含 title数据的字段，将该字段名作为 dataField属性的值。根据 getMostPopularPosts 方法的 API文档资料，在名叫 postTitle的字段中包含了你想要的信息。
3. 在第二个 <mx:DataGridColumn>标签中，输入 headerText， dataField和 width属性值：
<mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" /> DataGrid控件的第二列用来显示最近 30天每个贴子的浏览点击次数。根据 API文档资料，包含该数据的字段名叫 clicks。

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

<mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}"> <mx:columns>
<mx:DataGridColumn headerText="Top Posts" dataField="postTitle"/> <mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75"/> 
</mx:columns> 
</mx:DataGrid>

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

但是你会发现出现了一点问题，那就是 ComboBox取值 Top 5但 DataGrid并没有显示任何信息。出现这样的问题，是因为应用程序并没有调用 web service，它只是在 ComboBox发生改变时才进行调用。修正这个问题，使 web service在程序创建时就立即被调用。

6. 在源代码模式中，在 <mx:Application>标签中输入 creationComplete属性值：

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

7. 保存文件并运行程序。


 
创建动态链接

web service并不显示贴子的所有文本。如果用户有兴趣的话，你可以使他们能够阅读到所有的内容。虽然 web service没有提供这些信息，但是它们可以由贴子各自的 URLs来实现。根据 getMostPopularPosts方法的 API文档资料，包含了此信息的字段名叫 postLink。

你打算创建动态链接，当用户在 DataGrid控件中选定贴子时可以显示它的全部内容。

1. 在源代码模式下，在 <mx:LinkButton>标签中输入 click属性：

<mx:LinkButton x="30" y="250" label="Select an item and click here for full post" click="navigateToURL(new URLRequest(dgTopPosts.selectedItem.postLink));" />

DataGrid控件中被选项的 link字段的数值 dgTopPosts.selectedItem.postLink，在 navigateToURL（）方法里指定，当用户点击 LinkButton控件时进行调用。navigateToURL（）从指定的 URL中加载一个文档到新的浏览器窗体中。

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

在本节中，你学习了使用 WebService组件调用和传送方法参数给 SOAP-based web service，然后将 web service返回的数据绑定到 DataGrid和 LinkButton控件上。

转载自AIRIA.cn