使用网络服务

为了向我们的程序提供数据，Adobe Flex包含特别为与网络服务，HTTP服务器，或者是远程对象服务(Java对象)进行交互而设计的组件。这些组件被称之为远程过程调用(RPC)服务组件。

在这一节，我们将会为一个Blog创建一个简单程序，这个程序会列出过去30天内最受欢迎的文章。我们可以决定要列出的文章的数目。我们使用一个名为WebService的RPC服务组件来发送用户的选择，并且由Blog网站所提供的基于SOAP的网络服务获取数据，然后我们在一个DataGrid控件中来是显示这些数据。

 

设置工程

在我们开始这一节之前，我们需要完成下面的任务：
创建Lessons工程
确保打开了自动编译选项

 

回顾到远程数据源的访问

为了安全的原因，在客户机上的Flash播放器地的程序只有在满足下面的条件之一时才可以访问远程数据源：

我们的程序所编译的SWF文件与远程数据源在同一个域。

我们使用代理，并且我们的SWF文件与代理在同一个服务器上。
Adobe Flex数据服务为Flex程序提供了一个完整的代理管理系统。我们可以使用网络脚本语言，例如ColdFusion，JSP,PHP，或者是ASP创建一个简单的代理服务。

在数据源的主机安装了一个crossdomain.xml文件。
crossdomain.xml文件允许其他域的SWF文件也可以访问数据源。

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

 

插入并且放置组件

在这一部分，我们创建报告程序的布局。我们决定使用一个ComboBox控件来允许用户选择要列出的文章的数目，一个DataGrid控件来显示数据。

1 在浏览视图中选择Lessons工程，创建一个名为Services.mxml的程序文件。

2 将Services.mxml文件设置为默认编译的程序文件。

3 在MXML编辑器的设计模式中添加一个Panel容器，并且设置如下的属性：
Title: Most Popular Posts
Width: 475
Height: 400
X: 10
Y: 10

4 在设计模式中，向Panel容器中添加下面的控件：
ComboBox
DataGrid
LinkButton

5 布局控件，效果如下图所示：

6 选择ComboBox控件，将其id属性设置为cbxNumPosts。

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控件，并且将其label属性设计为Select and item and click here for full post。
布局效果如下图所示：

10 切换到代码模式，程序代码如下所示：
<?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组件

我们使用Flex的WebService组件来访问一个基于SOAP的网络服务并且获取Blog最近发表文章的信息。

1 在代码模式下，在<mx:Application>标签之后输入<mx:WebService>标签。
<mx:WebService id="wsBlogAggr"
    wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
    useProxy="false">
</mx:WebService>

2 指定要传递给网络服务方法的参数
通过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属性必须与网络服务方法名相匹配。

我们为daysBack参数使用一个定值，但是我们将limit参数绑定到cbxNumPosts ComboBox控件所选择的数目的值。我们希望用户指明要列出的文章的数目。

下一步就是要使程序调用网络服务方法。我们决定当ComboBox响应用户的选择改变时调用这个方法。

3 在<mx:ComboBox>标签中添加下面的change属性：
<mx:ComboBox x="30" y="25" id="cbxNumPosts"
    change="wsBlogAggr.getMostPopularPosts.send()">

最终的程序代码如下所示：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:WebService id="wsBlogAggr"
        wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
        useProxy="false">
        <mx:operation name="getMostPopularPosts">
            <mx:request>
                <daysBack>30</daysBack>
                <limit>{cbxNumPosts.value}</limit>
            </mx:request>
        </mx:operation>
    </mx:WebService>
    <mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
        title="Most Popular Posts">

        <mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
            <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>

 

组装DataGrid组件

我们希望使用DataGrid控件来显示网络服务所返回的数据。特别的是，我们希望显示最受欢迎文章的标题以及点击数。

1 在代码模式下，在<mx:DataGrid>标签中添加下面的dataProvider属性：
<mx:DataGrid x="30" y="75" id="dgTopPosts" width="400" dataProvider="{wsBlogAggr.getMostPopularPosts.lastResult}">

2 在第一个<mx:DataGridColumn>标签中，添加下面的headerText与dataField属性值：
<mx:DataGridColumn headerText="Top Posts" dataField="postTitle" />

3 在第二个<mx:DataGridColumn>标签中，添加下面的headerText，dataField以及width属性：
<mx:DataGridColumn headerText="Clicks" dataField="clicks" width="75" />

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 保存文件，待编译完成后运行程序。

6 在代码模式下，输入下面的creationComplete属性：
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="wsBlogAggr.getMostPopularPosts.send()">

最终的程序代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute"
    creationComplete="wsBlogAggr.getMostPopularPosts.send()">
    <mx:WebService id="wsBlogAggr"
        wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
        useProxy="false">
        <mx:operation name="getMostPopularPosts">
            <mx:request>
                <daysBack>30</daysBack>
                <limit>{cbxNumPosts.value}</limit>
            </mx:request>
        </mx:operation>
    </mx:WebService>
    <mx:Panel x="10" y="10" width="475" height="400" layout="absolute"
        title="Most Popular Posts">

        <mx:ComboBox x="30" y="25" id="cbxNumPosts" change="wsBlogAggr.getMostPopularPosts.send()">
            <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" 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>

        <mx:LinkButton x="30" y="250"
            label="Select an item and click here for full post"/>
    </mx:Panel>
   
</mx:Application>

7 保存文件，在编译完成后运行。
程序的运行结果如下所示：

创建动态链接

我们决定创建一个动态链接可以打开浏览器查看全部的内容。

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));"/>

2 保存文件，在编译完成后运行。