在 Flex 微型博客应用程序中使用 pureXML,第 2 部分: 使用 Flex 构建应用程序的用户界面

使用 Flex 和 ActionScript 构建连接到 DB2 支持的 Web 服务的用户界面

IBM DB2® 的 pureXML® 功能允许您不需任何修改将原生 XML 储存在数据库中,并且 Adobe® Flex® 应用程序能够直接读取 XML 和填充 Flex 用户界面。在这个共分为 3 部分的系列文章中,您将利用 pureXML、Web 服务和 Adobe Flex 创建一个微型博客应用程序;它甚至允许您在 Twitter 上发布自己的微型博客更新。在本系列的第 1 部分中,您了解了 Web Services,以及如何在创建和测试微型博客数据库时使用 DB2 pureXML 支持它们。本文是本系列的第二篇,它将介绍如何使用 Adobe Flex 和 ActionScript® 创建应用程序的用户界面。

Joe Lennon, 软件开发人员, Freelance

Joe Lennon 是一位来自爱尔兰科克市的软件开发人员,他今年 23 岁。Joe 目前为 Core International 工作,是 Web 应用程序和 Oracle PL/SQL 开发人员。他 2007 年毕业于 University College Cork,并获得商业信息系统专业的学位。他现在和他的女朋友 Jill 生活在科克市。


developerWorks 投稿作者

2009 年 12 月 03 日

先决条件

在这个系列文章中,您将使用开放源码 Flex SDK 构建样例应用程序。参考资料 部分提供 Adobe Flex 产品页面的链接。您需要安装 DB2 数据库服务器 —— Express-C 版本的 DB2。要获得如何下载和安装 DB2 Express-C 的信息,请查看 参考资料。您还将使用 IBM® Data Studio 和 WebSphere® Application Server Community Edition(此后简称为 Community Edition)将服务部署到 Web 服务器上。查看 参考资料 部分获得下载信息。


Flex 简介

常用缩略词

  • Ajax:异步 JavaScript + XML
  • HTML:超文本标记语言
  • HTTP:超文本传输协议
  • IDE:集成开发环境
  • MXML:最小 XML
  • REST:具像状态传输
  • RSS:真正简单的联合
  • SDK:软件开发工具箱
  • UI:用户界面
  • XML:可扩展标记语言

Adobe Flex 是一个开源应用程序开发框架,通过它能够更轻松地开发可以部署到任何支持 Adobe Flash® 的计算机上的 Rich Internet Applications(RIA)。这些应用程序可以在 Web 上使用,这将要求在用户的 Web 浏览器上安装 Adobe Flash Player 插件,或者在桌面上使用,这通常使用 Adobe AIR™ 平台进行部署。

使用 Flex 和 Ajax 开发应用程序的主要好处是,您不需要关心应用程序是否能够在所有 Web 浏览器和操作系统上运行。不管您在什么环境中使用 Flex 应用程序,它的外观都是一致的,但前提是要安装 Adobe Flash。

在开发 Flex 应用程序之前,您有两种基本的选择。您可以下载免费的开源 Flex SDK,它包含可以编译和调试 Flex 应用程序的工具。或者选择购买 Adobe 的 Flex Builder IDE,它提供许多工具帮助您开发 Flex 应用程序,包含拖放用户界面设计。这个 IDE 构建在开源的 Eclipse 平台之上,并且可以作为 Eclipse 插件使用。

Flex 和 XML

Flex 应用程序开发通常划分成两个部分:

  • 用 MXML 定义应用程序用户界面
  • 用 ActionScript 定义应用程序逻辑

Flex 支持 ActionScript 3.0,它在 Flash 开发中是赫赫有名的。该脚本语言通过一组遵循 ECMAScript for XML (E4X) 规范的类支持 XML 数据。使用这些类简化了开发能够处理 XML 数据的 Flex 应用程序。

Flex 应用程序并没有直接与数据库服务器通信,而是使用可以通过 REST 式 HTTP 或 SOAP 接口访问的 Web 服务处理数据。在本文后面构建了样例应用程序之后,您将看到它的实际运行效果。

样例应用程序

样例应用程序是一个微型博客应用程序的简单界面。这个应用程序允许您:

  • 创建新的状态更新
  • 查看以前的状态更新

开发应用程序的第一步就是使用 MXML 创建用户界面并使用 ActionScript 定义应用程序的逻辑。接下来,您将看到如何为应用程序将数据储存在 XML 文件中。最后,您将配置应用程序,让它能够与在本系列的第 1 部分中创建的 Web 服务通信,从而实现将应用程序需要使用的数据储存在 DB2 pureXML 数据库中。

最终的应用程序类似于 图 1

图 1. Flex 微型博客应用程序的用户界面
Flex 微型博客应用程序的用户界面的屏幕截图

安装 Flex SDK

在本系列文章中,您将使用开源 Flex SDK 构建样例应用程序。现在马上下载和安装 Flex SDK。在 Adobe Flex 产品页面(从 参考资料 部分获得相关链接)中,您可以在右侧找到链接 “Get the Free Flex 3.x SDK”,如 图 2 中突出显示的部分所示。您可以从该链接的目标页面下载 SDK。

图 2. Adobe Flex 产品页面
Adobe Flex 产品页面的屏幕截图,突出显示 'Get the Free Flex 3.x SDK' 链接

在成功下载压缩文件之后(可能需要一段时间;我下载的文件的大小为 120 MB),将其解压缩到文件夹 C:\flex。没有可以运行的安装程序。在继续下一步之前,将包含 Flex 编译器的目录添加到系统的路径。这将允许您编译 Flex 源代码,并且不需要每次都指定 Flex 编译器的位置。

在 Control Panel 上打开 System,然后单击 Advanced 选项卡。单击 Environment Variables,它在窗口的底部,如 图 3 所示。

图 3. 环境变量
System Properties 上的 Advanced 选项卡的屏幕截图,突出显示 'Environment Variables' 按钮

在 Environment Variables 对话框底部的 System variables 部分,滚动并找到 Path 变量,如 图 4 所示。

图 4. Path 环境变量
在 Environment Variables 对话框中突出显示 Path 环境变量的屏幕截图

双击 Path 变量打开 Edit System Variable 对话框。在 Variable value 字段保留现有的值,并在其后添加:;c:\flex\bin图 5 显示了一个例子。

图 5. Edit Path Variable 对话框
在 Edit Path Variable 对话框上更新 Variable value 字段的屏幕截图

OK 关闭打开的所有对话框。现在,您可以开始开发一些 Flex 应用程序了!让我们测试 Flex 编译器是否在您的 Path 上,并了解如何开发一个 Hello World Flex 应用程序。在磁盘上创建一个新文件夹 c:\flexapps,用于储存应用程序的源代码。现在在该文件夹内创建一个子文件夹 c:\flexapps\hello。打开一个普通文本编辑器(比如记事本)并输入 清单 1 中的代码,然后以 hello.mxml 为名称将该文件保存在 hello 文件夹中。

提示:如果您使用的是记事本,在保存文件时用双引号括住文件名(例如,“hello.mxml”)以防止记事本给文件添加扩展名 .txt。

清单 1. hello.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  horizontalAlign="center" verticalAlign="center"
  width="400" height="300">
    <mx:Script>
      <![CDATA[
        import flash.events.MouseEvent;

        private function helloHandler(event:MouseEvent):void {
          if(btnHello.label == "Hello!") {
            btnHello.label = "World!";
          } else {
            btnHello.label = "Hello!";
          }
        }
      ]]>
      </mx:Script>
      <mx:Button id="btnHello" label="Hello!"
        click="helloHandler(event);" />
</mx:Application>

我简要介绍一下这段代码。首先,XML 声明告诉编译器这个文件是一个使用 UTF-8 编码的 XML 文档。接下来,打开主 MXML Application 标记(mx:Application),传入定义应用程序的大小和布局的属性,比如 width、height 和 alignment。在下一个部分中(清单 1)是一个 MXML Script 块(mx:Script),它包含 ActionScript 代码。在这个例子中,ActionScript 定义了一个函数,它在用户单击按钮时触发。该函数检查按钮当前显示的文本并更改它。

在关闭 mx:Script 标记之后,创建一个 MXML 标记(mx:Button),并给它一个 id 属性,让 ActionScript 代码能够轻松找到它。此外,还要创建一个 label 属性,它定义显示在按钮上的文本和一个事件处理程序;在这个例子中,让单击事件调用 helloHandler 函数。

现在,使用 Flex 编译器编译您的代码。打开命令提示符(Start>Programs>Accessories>Command Prompt)。要切换到 hello 项目文件夹,发出命令:cd \flexapps\hello

要编译 MXML 文件,发出以下命令:mxmlc hello.mxml

您将看到类似于 图 6 所示的结果(查看 文本格式的图 6)。

图 6. 编译第一个应用程序
编译 Hello World Flex 应用程序得到的结果

这在 hello 文件夹中创建了一个名为 hello.swf 的新文件。要在命令提示符中打开该文件,仅需输入它的名称或在 Windows® Explorer 中双击该文件。

提示:如果您没有安装独立的 Adobe Flash Player,那么尝试用 Web 浏览器打开 SWF 文件。您也可以下载 Adobe Flash Player 的调试发行版(调试版本能够出色地找到 Flex 应用程序中的 bug)。从 参考资料 部分获得相关链接。

现在,该应用程序应该类似于 图 7

图 7. 我们的第一个应用程序
Adobe Flash Player 窗口中的 Hello World 应用程序

要切换 图 7 的应用程序中按钮上的文本,单击 Hello! 将切换到 “World!”,单击 World! 将切换回到 “Hello!”。在下一个 小节中,您将为主样例应用程序创建界面。


部署样例应用程序

接下来,我们开始开发微型博客应用程序。首先创建一个用于保存应用程序的新文件夹:c:\flexapps\microblog。现在,使用文本编辑器创建一个新文件并以 microblog.mxml 为名称将该文件保存到刚才创建的文件夹中。您将把应用程序代码放到这个文件中。让我们开始创建用户界面!

创建用户界面

开发 Flex 应用程序的第一步是创建用户界面。尽管用 Flex 创建用户界面有好几种方法,但您将使用 MXML 组件来组织应用程序的布局。在本小节完成之后,您的应用程序的外观将类似于 图 8,并且包含显示剩余字符数的功能。

图 8. 微型博客应用程序 UI
微型博客应用程序的用户界面

要创建这个用户界面,将 清单 2 中的代码放到 microblog.mxml 文件中。

清单 2. microblog.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400">
    <mx:Script>
    <![CDATA[
      import flash.events.Event;

      private function statusChangeHandler(event:Event):void {
        remaining.text = String(140 - status.length);
      }
    ]]>
    </mx:Script>
    <mx:Panel layout="absolute" left="10" right="10"
      top="10" bottom="10" title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
            maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">

        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"/>
    </mx:Panel>
</mx:Application>

现在,打开命令提示符并使用以下命令导航到 microblog 文件夹:cd \flexapps\microblog.

要编译应用程序源代码,发出以下命令:mxmlc microblog.mxml

如果编译成功,项目文件中将包含一个 microblog.swf 文件。使用 Flash Player(或安装了 Flash Player 插件的 Web 浏览器)打开该文件,现在您将看到一个类似于 图 8 的界面。

与本文前面开发的 Hello World 应用程序相比,这个文件并没有复杂很多。您使用绝对位置来放置使用 x 和 y 坐标的 UIcontrols,并且引入了一些其他 Flex 控件:mx:Panelmx:Labelmx:TextAreamx:VBoxmx:Panel 控件是一个用于布局的容器控件。在这个例子中,您将它用作应用程序的窗口样式容器。mx:Label 控件只是一个描述性文本标签。这里使用的标签之一有一个 id remaining,您使用它来表明可以在 statusmx:TextArea 控件中输入多少个字符。在该控件上有一个 change 属性,它定义在触发了 change 事件时要调用的函数。

这里引入的最后一个新控件是 mx:VBox 控件。像 mx:Panel 一样,这也是一个用于控制布局的容器控件。您可以在下一个小节中使用它来保存前面的状态更新。

在创建了应用程序的外观之后,您可以使用来自 XML 文件的一些状态更新填充 VBox 控件。

在 XML 文件中储存更新

首先,创建一个 XML 文件,应用程序将使用它来获取一个状态更新列表,并填充应用程序的 Previous updates 部分。在 microblog.mxml 和 microblog.swf 文件所在的目录中,创建一个名为 updates.xml 的文件,并将 清单 3 中的代码添加到其中。

清单 3. updates.xml
<?xml version="1.0"?>
<updates>
    <update>
        <text>Flex and XML are an awesome combination!</text>
        <date_created>2009-09-02 23:45:01</date_created>
    </update>
    <update>
        <text>Finished a hard day of work, phew...</text>
        <date_created>2009-09-01 19:02:57</date_created>
    </update>
    <update>
        <text>I think I need some strong coffee right now.</text>
        <date_created>2009-09-01 11:14:51</date_created>
    </update>
    <update>
        <text>Less than an hour till lunch time! Mmmm food...</text>
        <date_created>2009-08-31 12:04:43</date_created>
    </update>
    <update>
        <text>Playing some Xbox 360!</text>
        <date_created>2009-08-22 09:44:27</date_created>
    </update>
    <update>
        <text>Creating a DB2 database</text>
        <date_created>2009-08-15 23:30:36</date_created>
    </update>
    <update>
        <text>Half-day today woohoo</text>
        <date_created>2009-08-06 01:28:19</date_created>
    </update>
    <update>
        <text>Looking forward to Snow Leopard being released</text>
        <date_created>2009-08-03 14:19:08</date_created>
    </update>
    <update>
        <text>Time to go home! Yipeeeee!</text>
        <date_created>2009-07-30 18:00:50</date_created>
    </update>
</updates>

当然,您完全可以根据自己的兴趣和想象更改这些更新的文本!现在,我们对 Flex 应用程序进行一些修改,以加载 XML 文件并将其呈现给用户。另外,您将添加一下代码来让 Refresh 按钮生效。

清单 4 中的代码是更新之后的 microblog.mxml 文件。

清单 4. microblog.mxml(已更新)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="updates.xml" id="updateData"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;

        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.update}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.text} (Posted: 
{r.currentItem.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

在这里,最重要的新元素是 mx:HTTPService 控件,您将使用它来加载 XML 文件。您将注意到,您在 mx:Application 标记中创建了一个名为 creationComplete 的新属性,它调用 mx:HTTPService 对象上的 send 方法。这是为了告诉应用程序在自身加载之后马上加载 XML 文件。

使用 Flex 进行开发时,您通常可以使用许多不同的技术从 XML 文件获取数据,并处理这些数据以在 Flex 应用程序中使用它们。在这个例子中,您可以使用 mx:XMLListCollection(随后被 mx:Repeater 使用)作为数据提供者。mx:Repeater 控件主要接收它内部的控件,并在每次遍历它使用的数据源时重复它们。因为您的 XML 文件有 9 个记录,所以 mx:Repeater 控件将在 mx:VBox 控件内部输出 9 个 mx:Text 控件。

最后,您向 Refresh 按钮添加一个事件处理程序,它在按下按钮时从 XML 文件重新加载数据。

打开 Command Prompt 窗口并导航到项目文件夹,就像 之前所做 的一样。现在使用这个命令编译应用程序:mxmlc microblog.mxml

打开 microblog.swf 文件。糟糕,没有实现预期目标!您将收到如 图 9 所示的错误(查看 文本格式的图 9 )。

图 9. ActionScript 错误
在 Adobe Flash Player 窗口中的 ActionScript 本地文件错误的屏幕截图

该错误告诉您 Flash 没有加载本地文件。这是一个安全性特性,它防止通过网络恶意使用该应用程序。因为您是从文件系统加载文件,所以要告诉 Flex 编译器您没有将该应用程序部署到网络上:mxmlc -use-network=false microblog.mxml

这次重新运行 microblog.swf 文件将看到更满意的结果,如 图 10 所示。

图 10. 支持 XML 的应用程序的运行效果
支持 XML 的应用程序的运行效果

在下一个小节中,您将把 Flex 应用程序绑定到在本系列文章的第 1 部分创建的 Web 服务中。


与 pureXML Web 服务集成

到目前为止,您都是从本地文件系统运行 microblog SWF 文件。要满足访问外部 Web 服务的安全策略,比如在这个例子中,您必须将 SWF 文件部署到部署 Web 服务的 WebSphere Application Server。

首先要做的是修改应用程序,告诉它使用哪个 Web 服务发布新的更新和获取现有的更新。打开 microblog.mxml 并按照 清单 5 更改它。

清单 5. microblog.mxml(最终版本)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute" width="600" height="400"
  creationComplete="updateData.send()">
      <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates
/rest/StatusUpdates/getAllUpdates" id="updateData"
  resultFormat="e4x"/>
    <mx:HTTPService url="http://localhost:8080/MicroblogStatusUpdates/
rest/StatusUpdates/insertUpdate" id="newUpdate"
  resultFormat="e4x"/>

      <mx:Script>
      <![CDATA[
        import flash.events.Event;
        import flash.events.MouseEvent;
       
        private function statusChangeHandler(event:Event):void {
            remaining.text = String(140 - status.length);
        }

      private function postClickHandler(event:MouseEvent):void {
        var params:Object = new Object();
        params.C_TEXT = status.text;
        params.C_DISPLAY = true;
        newUpdate.send(params);
        updateData.send();
  }

        private function refreshClickHandler(event:MouseEvent):void {
            updateData.send();
        }
      ]]>
      </mx:Script>

      <mx:XMLListCollection id="xmlUpdates"
  source="{updateData.lastResult.row}"/>

    <mx:Panel layout="absolute" left="10"
      right="10" top="10" bottom="10"
      title="Microblog">
        <mx:Label x="10" y="10" text="Update your status:"/>
        <mx:Label x="525" y="10" text="140" id="remaining"/>
        <mx:TextArea x="10" y="30" width="540" id="status"
          maxChars="140" change="statusChangeHandler(event);"/>
        <mx:Button x="499" y="80" label="Post" id="post"
  click="postClickHandler(event);"/>
        <mx:Label x="10" y="105" text="Previous updates:"/>
        <mx:VBox x="10" y="125" width="540" height="180"
          borderStyle="solid">
            <mx:Repeater id="r" dataProvider="{xmlUpdates}">
                <mx:Text text="{r.currentItem.DATA.update.text} (Posted:
 {r.currentItem.DATA.update.date_created})"/>
            </mx:Repeater>
        </mx:VBox>
        <mx:Button x="480" y="312" label="Refresh" id="refresh"
            click="refreshClickHandler(event);"/>
    </mx:Panel>    
</mx:Application>

这个版本的应用程序源代码的主要修改是删除了本地 XML mx:HTTPService 控件,并使用两个 mx:HTTPService 控件替换它的位置,这两个控件用于从 Web 服务获取现有的状态更新,以及向其发送新的状态更新。在启动应用程序时,仅调用获取数据的 mx:HTTPService,因为为了创建新数据,您必须接受用户输入。

另一个主要更改是 ActionScript mx:Script 块中的 postClickHandler 函数的定义。在这个函数中,您定义一个新对象,并为该对象的 C_TEXTC_DISPLAY 字段分配值。一定要注意为这些参数传递的值的大小写,否则向 Web 服务发出的任何请求都会失败。然后,将这个对象作为参数传递给 newUpdate mx:HTTPService 控件的 send 方法。最后,刷新数据视图,ping 从Web 服务获取数据的控件。继续往下看该代码的时候,您还会发现您将 Post 按钮设置为在触发 click 事件时调用该函数。

受到 Web 服务显示储存在 pureXML 数据库中的 XML 的方式的影响,您需要对 mx:XMLListCollection 组件的源代码进行一些更改。每个更改都包含在 <row> 标记的最高级别中,因此您将源定义为 updateData.lastResult.row

最后需要注意的一点是,您还更改了重复的 mx:Text 组件的文本属性中的字段。同样,这也被更改为与 Web 服务生成的 XML 的格式相匹配。现在,每个行都类似于 清单 6 中的 XML。

清单 6. 每行的 XML
<row>
    <DATA>
        <update>
            <text>Update text</text>
            <date_created>Date/time value</text>
        </update>
    </DATA>
</row>

结果是您需要告诉 mx:Text 组件查看 r.currentItem.DATA.update.textr.currentItem.DATA.update.date_created,以为这些标记获取正确的值。

现在,打开命令提示符并导航到项目文件夹,然后再次编译 MXML 源文件。因为您将 SWF 文件部署到一个应用程序服务器中,并且应用程序现在使用网络数据而非本地数据,所以没有使用 -use-network=false 参数。换句话说,编译源代码的命令还是:mxmlc microblog.mxml

如果您现在尝试直接在本地计算机上运行 microblog.swf 文件,您将收到类似于 图 11 的错误(查看 文本格式的图 11)。

图 11. 安全错误
Adobe Flash Player 窗口中的 ActionScript 安全错误的屏幕截图

您可能花很多时间在 WebSphere 应用程序服务器上配置跨域策略,但仅将 SWF 文件本身部署到应用程序服务器要容易得多。在 Windows Explorer 中找到 microblog.swf 文件,右键单击它并单击 Copy 选项。现在,打开 IBM Data Studio 并连接到 MBLOG 数据库。打开 Navigator 视图 (Window>Show View>Navigator),从该视图应该看到 3 个文件夹,第三个文件夹为 MicroblogStatusUpdatesWeb。展开该文件夹,右键单击 WebContent 文件夹并单击 Paste。如果您正确执行这些操作,microblog.swf 现在应该储存在服务器上了,如 图 12 所示。

图 12. 将 microblog.swf 部署到 Application Server
在 Data Studio 中将 microblog.swf 部署到 Application Server 的导航视图

现在,启动您的 Community Edition (WASCE) 服务器实例。当服务器就绪之后,打开 Web 浏览器并导航到 http://localhost:8080/MicroblogStatusUpdates/microblog.swf。查看微型博客应用程序并检查它是否从数据库获取状态更新。此外,尝试发布一个新的更新,然后检查它是否储存到数据库中并添加到先前的更新列表中。要检查 Refresh 按钮是否有效,使用 DB2 Command Editor 在数据库中创建一个新行,然后单击 Refresh 看看是否获取这个新行。

最终的应用程序如 图 13 所示

图 13. 最终的应用程序
最终的微型博客应用程序的屏幕截图

结束语

在本文中,您学习了如何使用 Adobe Flex 创建连接到您在第 1 部分中创建的 DB2 Web 服务的富用户界面。

第 3 部分是本系列的最后部分,在这个部分中,您将从 Web 服务和 pureXML 获取数据并用多种格式公开它们(比如 RSS 和 HTML),然后将您的应用程序与流行的微型博客 Web 站点 Twitter 集成起来。


下载

描述名字大小
本文源代码xmlflexpt2.source.zip3KB

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=XML, Information Management, Open source, Web development
ArticleID=452387
ArticleTitle=在 Flex 微型博客应用程序中使用 pureXML,第 2 部分: 使用 Flex 构建应用程序的用户界面
publish-date=12032009