为了向我们的程序提供数据,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最近发表文章的信息。
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 保存文件,在编译完成后运行。
分享到:
相关推荐
"以对服务端点基本透明的方式利用网络服务的方法和设备"这一主题,旨在探讨如何在不显著改变服务端点架构的前提下,有效地管理和利用网络资源,以改善网络游戏的性能。 首先,服务端点透明性意味着游戏客户端在与...
《网络游戏-利用网络服务的精神状态分析》是一份深入探讨网络游戏对用户精神状态影响的专业资料。在当今社会,网络游戏已经成为人们日常娱乐生活的重要组成部分,尤其在青少年群体中极为流行。这份资料旨在通过网络...
用户必须遵守法律法规,遵循网络协议,不得利用网络服务从事任何非法活动,也不得干扰或破坏网络的正常运行。 总之,《网络服务使用协议》作为用户与服务提供商之间的法律桥梁,它不仅是服务提供商保障服务正常运行...
《网络服务使用协议》是用户使用网络服务时必须遵循的一份法律文件,它规定了服务提供者(在本文档中以“______”代替)与用户之间的权利与义务。这份协议详细阐述了用户如何注册、使用网络服务,以及服务可能发生的...
总体来说,《网络服务平台用户协议范本最新整理版》作为一份法律文件,其目的在于为网络服务平台与用户之间建立一个公平、安全、有序的网络使用环境。用户在享受网络服务的同时,必须严格遵守协议中的条款,以免产生...
它是双方签订的法律文件,其中详细规定了用户在使用网络服务时的权利、义务和责任。由于服务协议书具有极强的法律效应,因此,了解和遵守这些条款对于每一位网络用户来说都至关重要。 首先,服务协议的确定是用户与...
根据描述,几乎半数的蜂窝网络允许设备间直接通信,这为攻击者提供了机会,他们可以利用网络服务中的漏洞发起远程无接触攻击。例如,Android系统的移动应用网络服务就曾遭受Wormhole攻击,这显示了对移动应用网络...
然而,随着网络服务的广泛使用,用户与服务提供者之间因权利义务关系所产生的纠纷也日益增多。为了明确各自的权利与义务,合理解决可能出现的争议,《网络服务平台用户协议书范本》应运而生。 用户协议书,作为一份...
【网络服务用法协议】是用户与服务提供商之间达成的法律文档,明确规定了用户使用网络服务的条款和条件。这份协议通常由一个公司(在本文档中以_________代替)提供,涵盖了用户如何访问和使用该公司的在线服务,...
最后,为了实现更精细的服务级分配,游戏开发者还会利用网络服务质量标记(如DiffServ或MPLS的 EXP 字段)来区分不同类型的网络流量。这些标记可以让网络设备识别并优先处理游戏数据,进一步优化游戏体验。 总的来...
Linux操作系统应用:第6章配置网络和使用ssh服务.pptx
这份协议书是互联网服务提供商与用户之间就网络服务使用和规范达成的一致意见,它明确规定了双方的权利和义务,以确保互联网世界的正常秩序和各方的合法权益。 首先,网络用户服务协议书的性质与目的是为了明确服务...
该文件涵盖了网络安全服务的多个方面,包括网络安全行为红线、网络安全违规问责、客户网络操作、客户设备安装、数据使用、网络安全问题反馈和求助渠道等。 从题目中可以看到,网络安全行为红线是指在网络安全服务中...
标题和描述中提到的“关于用于将功能引入应用以与网络服务一起使用的系统和方法”着重探讨的是如何有效地将应用程序的功能扩展,使其能够利用网络服务来提升用户体验、增强功能或优化性能。这通常涉及到API(应用...
2. **Windows Server 2012 R2安装与基础**:学习如何安装和初始化Windows Server 2012 R2操作系统,掌握服务器管理器的使用,进行基本的网络服务器设置,以及利用Windows PowerShell进行自动化管理。 3. **系统配置...
总的来说,这个课程旨在提升用户对Internet服务的全面理解,通过实际操作增强网络应用技能,这对于日常生活、工作和学习中有效利用网络资源是非常重要的。通过这些实验,用户能够更加熟练地在Internet上进行信息获取...