FlashAs作品发表>>我要投稿 | FlashAs讨论区>>AS论坛 Flash Media Server学习站>>www.FMScn.com

输入您的搜索字词 提交搜索表单

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

第一节创建你的第一个应用程序

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

创建一个项目

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

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

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

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

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

创建并运行应用程序

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

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>

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

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

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

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

第二节获取并显示数据

为了在应用程序中使用数据， 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. 1. 设置项目
2. 2. 检查要访问的远程数据源

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

a. 应用程序的 SWF文件与远程数据源位于同一个域中。

b. 使用代理，同时 SWF文件与代理位于同一个服务器中。

c.在数据源的宿主 web服务器上安装 crossdomain.xml（跨域策略）文件。 本节中例子使用的是第三种方法。

插入并配置 blog阅读器 在本小节，你将学习创建一个 blog阅读器。

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

Title: Blog Reader Width: 475 Height: 400

X: 10

Y: 10

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

X: 20

Y: 20 Width: 400

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

X: 20

Y: 175 Width: 400

8. 选择 LinkButton控件并设置相应属性： Label: Read Full Post

X: 20

Y: 225

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

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.保存文件，完成编译后运行。一个浏览器窗口将打开，如下所示。

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

插入 HTTPService组件

对于 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属性的值用随后的表达式替换：

title="{feedRequest.lastResult.rss.channel.title}"

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

XML的结构通常如下所示： <rss>

<channel> <title> other child nodes of <channel> <item>

<title>

other child nodes of <item> </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. 1. 在源代码模式下，在 <mx:DataGrid>标签中输入随后的 dataProvider属性： <mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}" >
2. 名称为 item的 XML结点为 DataGrid控件提供数据。在 XML中这个结点是重复的，所以它在 DataGrid中也是重复的。
1. 2. 在第一个 <mx:DataGridColumn>标签里，键入如随后所示的 headerText和 dataField属性值：

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

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

1. 3. 在第二个 <mx:DataGridColumn>标签中，输入如随后所示的 headerText，dataField和 width属性值： <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />
2. DataGrid中的第二列用来显示日期。在本例中，包含数据的字段被称之为 pubDate。
1. 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. 保存文件，编译后运行。

显示所选的项

当用户在 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控件中。

创建一个动态连接

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. 保存文件，编译后运行。

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

第三节创建一个受约束的布局

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

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

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

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

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

1. 1. 在导航视图中选择 File > New > MXML Application，创建一个名叫 Layout.mxml的应用程序。默认地， Flex Builder将 Application标签中的布局属性设置为绝对方式。
1. 2. 将 Layout.mxml文件作为进行编译的默认文件，并在关联菜单中选择 Set As Default Application。
2. 3. 在 MXML编辑器的设计模式中，将 Label控件和 TextInput控件从组件视图中（Window > Components）拖拉到 Layout.mxml文件里。
1. 4. 使用鼠标指针将 Label控件和 TextInput控件放置到距离容器顶端 60象素的地方。
2. 5. 在 Flex属性视图中，打开 Common and the Layout categories of properties。
3. 6. 在布局中选择 Label控件，并在属性项中进行相应的设置： Text: Email
3. X: 20
4. Y: 60
5. 7. 在布局中选择 TextInput控件，并设置相应的 TextInput属性：
6. X: 90
7. Y: 60 Width: 300
1. 8. 切换到 MXML编辑器源代码模式，在 Layout.mxml文件中输入随后的 MXML代码： <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
2. <mx:Label x="20" y="60" text="Email"/> <mx:TextInput x="90" y="60" width="300"/> </mx:Application>
2. 9. 在<mx:TextInput>标签后输入额外的内容，就象这样： <mx:Label x="20" y="90" text="Comments"/> <mx:TextArea x="90" y="90" width="300" />

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

<mx:Button x="330" y="150" label="Send"/>

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

10. 保存文件并运行。

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

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

定义布局约束

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

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

3. 为 TextInput控件定义布局约束，在视图中选择左 /右锚定框，并指定距离窗体左边

缘 90，距离窗体右边缘 60，就象这样：

这些约束也可以通过 MXML代码来实现： <mx:TextInput y="60" left="90" right="60"/>

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

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

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

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

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

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

第四节使用列表控件

你可以在程序中使用列表控件，如 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. 在