获取并显示数据

获取并显示数据

为了向我们的程序提供数据，Adobe Flex包含特别为与HTTP服务器，网络服务或者是远程对象服务(Java对象)进行交互的而设计的组件。这些组件被称之为远程过程调用(RPC)服务组件。
与Adobe ColdFusion,PHP或者是相似的服务器技术创建的程序不同，Flex程序并能直接与一个数据库进行交互。他们使用服务与数据进行交互。例如，我们可以在Flex文件中插入一个HTTP服务来与ColdFusion文件进行交互，从而从一个MySQL数据取得数据，转换成为XML，然后发送到我们的Flex程序。
在这一节，我们将会创建一个简单的获取最近留言并且允许用户读取留言的最前几条的BlogReader程序。我们可以使用一个名为HTTPService的RPC服务组件从一个RSS获取数据，然后我们将数据绑定到一个Label,DataGrid,TextArea和LinkButton控件。

设置我们的工程
在我们开始这一节之前，我们完成下面的任务：
如果我们没有创建工程，创建Lessons工程。
确保打开了自动构建选项。

回顾到远程数据源的访问
出于安全的原因，运行在客户端计算机上的Flash播放中的程序只有在满足下面的条件时才可以访问远程数据源：
1 我们程序所编译的SWF文件与远程数据源在同一个域。
2 我们使用代理并且我们的SWF文件与代理在同一个服务器上。
Adobe Flex数据服务为Flex程序提供了一个完整的代理管理系统。我们也可以使用Web脚本语言，例如ColdFusion，JSP,PHP或者ASP创建一个简单的代理服务。
3 在远程数据源的服务器上安装一个crossdomain.xml文件。crossdomain.xml文件允许其他域的SWF文件

访问数据源。
在这一节所使用的数据源位于一个配置了crossdomain.xml文件的域。所以，Flash播放器可以访问远程数据。

插入与定位Blog Reader控件
在这一节，我们创建我们的Blog-Reader程序的布局。
1 在浏览视图中选择Lessons工程，选择File>New>MXML Application创建一个名为BlogReader.mxml的程序文件。
2 通过在浏览视图中右击这个文件并从弹了菜单中选择Set As Default Appliction将设置为默认编译的程序文件。
3 在MXML编辑器的设计模式中，从内容视图的布局类中拖放一个面板容器，并且将其设置为如下面的属性：
Title: Blog Reader
Width: 475
Height: 400
X: 10
Y: 10
4 在设计模式中，通过在组件视图中拖放添加如下的控件：
DataGrid
TextArea
LinkButton
5 使用鼠标将这些控件布局为垂直，左对齐的列。
6 选择DataGrid控件设置为如下的属性：
Id: dgPosts
X: 20
Y: 20
7 选择TextArea控件设置为如下的属性：
X: 20
Y: 175
Width: 400
8 选择LinkButton控件设置如下的属性：
Label: Read Full Post
X: 20
Y: 225
布局效果如下图所示：

9 切换到代码模式。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 id="dgPosts" x="20" y="20" 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:TextArea x="20" y="175" width="400"/>
        <mx:LinkButton x="20" y="225" label="Read Full Post"/>
    </mx:Panel>
</mx:Application>

10 保存文件，待到构建完成时运行程序。
程序运行效果如下图所示：

下一步就是获取最近的Blog留言信息。我们可以使用名为HTTPService的RPC服务组件来完成这个任务。

插入HTTPService组件
对于这一节的BlogReader程序，我们将会从Matt Chotion的Bloghttp://www.adobe.com/go/mchotinblog获取留言信息。Matt是Flex开发团队的产品经理，并且在他的Blog写有关Flex的内容。
我们可以使用HTTPService组件来访问Blog的XML并且获取最近的留言信息。这个组件可以让我们发送一个GET或是POST请求，然后获取响应中的数据。
1 在代码模式中，在<mx:Application>标签之后加入下面的<mx:HTTPService>标签。
<mx:HTTPService
    id="feedRequest"
    url="http://weblogs.macromedia.com/mchotin/index.xml"
    useProxy="false"/>
url属性指定了请求文件的位置，在这种情况下是Matt Chotion Blog的RSS 2.0。在编写本指南时，这个URL是可用的，但是我们应检测是否发生了改变。我们可以使用在http://www.adobe.com/go/mchotinblog列出的最新的RSS2.0的地址。
useProxy指明了我们不希望使用服务器上的代理。Matt的Blog位于一个配置了crossdomain.xml的域，所以Flash播放器可以访问这个服务器上的远程数据源，包括RSS。
下一步就是要让程序向指定的URL发送一个请求。我们决定在程序启动时自动发送一个请求。如下面所示。
2 在<mx:Application>标签中添加下面的creationComplete属性：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
当我们的程序启动完成时，HTTPService组件的send()方法就会被调用。这个方法向指定的URL发送了一个GET或是POST语法，并且会返回一个HTTP响应。在这种情况下，RSS返回XML数据。
下一步，我们希望检测程序是否成功的取得了RSS数据。我们可以通过将数据绑定到Label控件来做到，如下所示。
3 在<mx:Panel>标签中，将title属性替换为下面的绑定表达式：
title="{feedRequest.lastResult.rss.channel.title}"
这个表达式将title域绑定到Panel控件。这个表达式反映了XML的结构。当XML返回到HTTPService组件时，这个组件将其解析成名为lastResult的ActionScript对象。lastResult的结构是XML文档结构的镜像。为了检测XML的结构，下载RSS的XML文件(http://www.adobe.com/go/flex_blogfeed)并且在浏览器中打开。
XML的通常结构如下所示：

<rss>
    <channel>
        <title>
        other child nodes of <channel>
        <item>
            <title>
            other child nodes of <item>
        </item>
        ...
一些节点具有包含数据的孩子节节点，包括channel节点的"title"孩子节点。HTTPService组件的lastResult对象反映了这种结构：
feedRequest.lastResult.rss.channel.title

我们代码应是如下的样子：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="feedRequest.send()" layout="absolute">

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

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

        <mx:DataGrid id="dgPosts" x="20" y="20" 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:TextArea x="20" y="175" width="400"/>
        <mx:LinkButton x="20" y="225" label="Read Full Post"/>
    </mx:Panel>
   
</mx:Application>

4 保存这个文件，待到构建完成后运行这个程序。
这样就会打开浏览器来运行这个程序。Blog的标题，Matt Chotin，就会作为Panel控件的标题出现，这样就表这个程序成功的从RSS取得了相应的数据信息。

处理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中包含title数据的域来做到，并且将这个域作为dataField属性值。在dataProvider属性指定的XML节点中，名为title的子节点包含我们希望的信息。
3 在第二个<mx:DataGridColumn>标签中，输入下面的headerText,dataField以及width属性值：
<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150"/>
我们希望在DataGrid的第二列显示留言发表的日期。在这种情况下，包含数据的域名为pubDate。
4 删除第三个<mx:DataGridColumn>标签，因为我们并不需要第三列。
最终的程序看起来应是如下的样子：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    creationComplete="feedRequest.send()" layout="absolute">

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

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

        <mx:DataGrid id="dgPosts" x="20" y="20" 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>

        <mx:TextArea x="20" y="175" width="400"/>
        <mx:LinkButton x="20" y="225" label="Read Full Post"/>
    </mx:Panel>
   
</mx:Application>
5 保存文件，待到程序编译完成时，运行这个程序。
程序的运行效果如下：

Blog标题以及日期应出现在DataGrid控件中，表明程序成功的从RSS取得了数据信息。

显示选择的列
当用户在DataGrid控件中选择了一条留言，我们希望程序在TextArea控件中显示这条留言的最前几行。在XML的item节点中，这些信息包含在名为description的域中。
1 在源码模式下，在<mx:TextArea>标签中输入下面的htmlText属性：
<mx:TextArea x="20" y="175" width="400"
    htmlText="{dgPosts.selectedItem.description}" />

对于DataGrid组件中的第一个选择的item,description域的值将会作为htmlText属性的值。htmlText属性可以让我们显示HTML格式的文本。
2 保存文件，待到程序编译完成时，运行程序。
点击DataGrid控件中的条目时，每条留言的最前几行就会出现在TextArea控件中。

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

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

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

        <mx:DataGrid id="dgPosts" x="20" y="20" 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>

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

DataGrid控件中选定条目的link域的值，dgPosts.selectedItem.link，指定为navigateToURL()方法的参数，当用点击时就会调用这个方法。navigateToURL()方法在一个新的浏览器窗口中装入一个文档。
2 保存文件，待到Flex Builder完成程序编译时，运行这个程序。
点击DataGrid控件中的一个条目并且点击Read Full Post链接时，就会打开一个新的浏览器窗口并且显示全部的留言信息。

在这一部分，我们使用名为HTTPService的RPC服务组件来从RSS获取信息，然后我们将这些信息绑定到Labe,DataGrid，TextArea以及LinkButton控件。