flex中获取并显示数据

 
[align=left]为了在应用程序中使用数据，Adobe Flex 包括了与HTTP servers，web services 或remote object services（Java objects）进行交互的组件，这些组件被称之为远程过程调用（RPC）服务组件。[/align]
[align=left]与Adobe ColdFusion，PHP 或类似的服务器技术不同，Flex 应用程序并不直接连接数据库。[/align]
[align=left]举个例子，你可以在一个Flex 文件中插入HTTP service 来实现ColdFusion 文件的交互，以获取MySQL 数据库中的数据，转换成XML，然后返馈给Flex 应用程序。[/align]
[align=left]在本节中，你将学习创建一个简单的blog 阅读器。你使用了被称之HTTPService 的RPC service 组件从RSS 中获取数据，然后将数据绑定到Label、DataGrid、TextArea 和LinkButton 控件上。[/align]
[align=left] [/align]
[align=left]为了完成这个项目，执行的步骤如下：[/align]
[align=left]1. 设置项目[/align]
[align=left]2. 检查要访问的远程数据源[/align]
[align=left]出于安全的原因，在客户端计算机上Flash Player 中运行的应用程序，只有在满足如下条件之一的情况下，才能访问远程的数据：[/align]
[align=left]a. 应用程序的SWF 文件与远程数据源位于同一个域中。[/align]
[align=left]b. 使用代理，同时SWF 文件与代理位于同一个服务器中。[/align]
[align=left]c. 在数据源的宿主web 服务器上安装crossdomain.xml（跨域策略）文件。[/align]
[align=left]本节中例子使用的是第三种方法。[/align]
[align=left]第一步:[/align]
[align=left]1. 在导航视图中选择Lessons 项目，选择File > New > MXML Application 并创建一个叫BlogReader.mxml 的文件。[/align]
[align=left]2. 将BlogReader.mxml 设置为被编译的默认文件。[/align]
[align=left]3. 在MXML 编辑器的设计模式下，从组件视图中拖拉出一个面板容器，并设置它的相应属性值：[/align]
[align=left]Title: Blog Reader[/align]
[align=left]Width: 475[/align]
[align=left]Height: 400[/align]
[align=left]X: 10[/align]
[align=left]Y: 10[/align]
[align=left]4. 在设计模式下，从组件视图中拖拉出如下组件到面板容器里：[/align]
[align=left]DataGrid[/align]
[align=left]TextArea[/align]
[align=left]LinkButton[/align]
[align=left]5. 使用鼠标将控件布置成垂直排列的、左对齐的列。[/align]
[align=left]6. 选择DataGrid 控件并设置相应属性：[/align]
[align=left]Id: dgPosts[/align]
[align=left]X: 20[/align]
[align=left]Y: 20[/align]
[align=left]Width: 400[/align]
[align=left]7. 选择TextArea 控件并设置相应属性：[/align]
[align=left]X: 20[/align]
[align=left]Y: 175[/align]
[align=left]Width: 400[/align]
[align=left]8. 选择LinkButton 控件并设置相应属性：[/align]
[align=left]Label: Read Full Post[/align]
[align=left]X: 20[/align]
[align=left]Y: 225[/align]
[align=left]9. 点击工具条上的Source button 切换成编辑器源代码模式。看一下BlogReader.mxml 文件的MXML 代码.[/align]
[align=left]10. 保存文件， 完成编译后运行。[/align]
[align=left]到这一步，应用程序还没有显示任何blog 信息。接下来的一步是使用一个称之为HTTPService 的RPC 服务组件来获取blog 的信息。[/align]
[align=left]第二步：[/align]
[align=left]插入HTTPService 组件，对于blog 阅读器这个项目，其数据源来自于http://www.adobe.com/go/mchotinblog。你使用HTTPService 组件来访问blog 的XML。该组件发送HTTP GET 或POST 请求，并获取反馈回来的数据。[/align]
[align=left]1. 在源代码模式下，在<mx:Application>标签中输入<mx:HTTPService>标签：[/align]
[align=left]<mx:HTTPService[/align]
[align=left]id="feedRequest"[/align]
[align=left]url="http://weblogs.macromedia.com/mchotin/index.xml"[/align]
[align=left]useProxy="false"/>[/align]
[align=left]url 属性指明了被请求文件所在的位置。在本例中，该URL 一直是有效的，但是你仍然需要确定它是否已经发生改变。[/align]
[align=left]useProxy 属性表明你并不打算在服务器上使用代理。因为Matt's blog 上面有[/align]
[align=left]crossdomain.xml 设置，所以Flash Player 可以访问该服务器上的远程数据。[/align]
[align=left]接下来提示应用程序向指定的URL 发送请求。[/align]
[align=left]2. 在<mx:Application>标签后，添加creationComplete 属性（粗体显示）：[/align]
[align=left]<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"[/align]
[align=left]creationComplete="feedRequest.send()" >[/align]
[align=left]你的应用程序每次启动时，HTTPService 组件的send（）方法将被调用。该方法向指定的URL 发出HTTP GET 或POST 请求，并得到HTTP 回应。在本例中，RSS feed 将返回XML 数据。[/align]
[align=left]接下来，检测RSS feed 的获取是否成功。然后将数据绑定到Label 控件上，就象这样：[/align]
[align=left]3. 在<mx:Panel>标签中，将title 属性的值用随后的表达式替换：[/align]
[align=left]title="{feedRequest.lastResult.rss.channel.title}"[/align]
[align=left]当HTTPService 组件返回XML 时，在名叫lastResult 的ActionScript 对象中进行剖析。[/align]
[align=left]lastResult 对象的结构反映了XML 文档的结构。[/align]
[align=left]XML 的结构通常如下所示：[/align]
[align=left]<rss>[/align]
[align=left]<channel>[/align]
[align=left]<title>[/align]
[align=left]other child nodes of <channel>[/align]
[align=left]<item>[/align]
[align=left]<title>[/align]
[align=left]other child nodes of <item>[/align]
[align=left]</item>[/align]
[align=left]...[/align]
[align=left]HTTPService 组件的lastResult 对象反映了这种结构，你的代码看起来就象这样：[/align]
[align=left]<?xml version="1.0" encoding="utf-8"?>[/align]
[align=left]<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"[/align]
[align=left]layout="absolute"[/align]
[align=left]creationComplete="feedRequest.send()" >[/align]
[align=left]<mx:HTTPService[/align]
[align=left]id="feedRequest"[/align]
[align=left]url="http://weblogs.macromedia.com/mchotin/index.xml"[/align]
[align=left]useProxy="false" />[/align]
[align=left]<mx:Panel x="10" y="10" width="475" height="400" layout="absolute"[/align]
[align=left]title="{feedRequest.lastResult.rss.channel.title}">[/align]
[align=left]<mx:DataGrid x="20" y="20" id="dgPosts" width="400">[/align]
[align=left]<mx:columns>[/align]
[align=left]<mx:DataGridColumn headerText="Column 1" dataField="col1"/>[/align]
[align=left]<mx:DataGridColumn headerText="Column 2" dataField="col2"/>[/align]
[align=left]<mx:DataGridColumn headerText="Column 3" dataField="col3"/>[/align]
[align=left]</mx:columns>[/align]
[align=left]</mx:DataGrid>[/align]
[align=left]<mx:LinkButton x="20" y="225" label="Read Full Post"/>[/align]
[align=left]<mx:TextArea x="20" y="175" width="400"/>[/align]
[align=left]</mx:Panel>[/align]
[align=left]</mx:Application>[/align]
[align=left]4. 保存文件，编译完运行。[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]第三步：[/align]
[align=left]组装DataGrid 控件[/align]
[align=left]在应用程序中，使用DataGrid 控件显示新近贴子的标题。[/align]
[align=left]1. 在源代码模式下，在<mx:DataGrid>标签中输入随后的dataProvider 属性：[/align]
[align=left]<mx:DataGrid x="20" y="20" id="dgPosts" width="400"[/align]
[align=left]dataProvider="{feedRequest.lastResult.rss.channel.item}" >[/align]
[align=left]名称为item 的XML 结点为DataGrid 控件提供数据。在XML 中这个结点是重复的，所[/align]
[align=left]以它在DataGrid 中也是重复的。[/align]
[align=left]2. 在第一个<mx:DataGridColumn>标签里，键入如随后所示的headerText 和dataField[/align]
[align=left]属性值：[/align]
[align=left]<mx:DataGridColumn headerText="Posts" dataField="title" />[/align]
[align=left]DataGrid 控件的第一列用来显示标题。实现它是通过确定包含标题数据的XML 中的字[/align]
[align=left]段，然后输入这个字段作为dataField 的属性值。在dataProvider 属性（item）中指定的XML[/align]
[align=left]结点，名为title 的子结点中包含了所需的信息。[/align]
[align=left]3. 在第二个<mx:DataGridColumn>标签中，输入如随后所示的headerText，dataField 和[/align]
[align=left]width 属性值：[/align]
[align=left]<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />[/align]
[align=left]DataGrid 中的第二列用来显示日期。在本例中，包含数据的字段被称之为pubDate。[/align]
[align=left]4. 删除第三个<mx:DataGridColumn>标签，因为我们在这里并不需要第三列。[/align]
[align=left]<mx:DataGrid>标签看起来就象这样：[/align]
[align=left]<mx:DataGrid x="20" y="20" id="dgPosts" width="400"[/align]
[align=left]dataProvider="{feedRequest.lastResult.rss.channel.item}">[/align]
[align=left]<mx:columns>[/align]
[align=left]<mx:DataGridColumn headerText="Posts" dataField="title" />[/align]
[align=left]<mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />[/align]
[align=left]</mx:columns>[/align]
[align=left]</mx:DataGrid>[/align]
[align=left]5. 保存文件，编译后运行。[/align]
[align=left] [/align]
[align=left] [/align]
[align=left]第四步：[/align]
[align=left]显示所选的项[/align]
[align=left]当用户在DataGrid 控件中进行选择时，你希望应用程序在TextArea 控件中只显示贴子的头几行内容。在XML 供给器的项结点中，这个信息被包含在一个称之为description 的字段里。[/align]
[align=left]1. 在源代码模式中，在<mx:TextArea>标签中输入如随后所示的htmlText 属性：[/align]
[align=left]<mx:TextArea x="20" y="175" width="400"[/align]
[align=left]htmlText="{dgPosts.selectedItem.description}" />[/align]
[align=left]对于在DataGrid 组件中所选择的每个项（名称为dgPosts），description 字段的数值被使[/align]
[align=left]用作为htmlText 的属性，该属性使你可以显示HTML 格式的文本。[/align]
[align=left]2. 保存文件，编译后运行。 [/align]
[align=left]点击DataGrid 控件中的分列，每个贴子的头几行内容将出现在TextArea 控件中。[/align]
[align=left] [/align]
[align=left]第五步：[/align]
[align=left]创建一个动态连接[/align]
[align=left]RSS 供给器并不提供贴子的完整文本，但是你还是可以使用户能够读到这些贴子，如果他们有兴趣的话。RSS 供给器没有提供的信息，可以通过连接到各个贴子的URLs 来实现。[/align]
[align=left]在XML 供给器的item 结点中，这个信息被包含在一个称之为link 的字段中。[/align]
[align=left]你可以创建一个动态连接来显示在DataGrid 中被选贴子的全部内容。[/align]
[align=left]1. 在源代码模式里，在<mx:LinkButton>标签中输入如随后所示的click 属性：[/align]
[align=left]<mx:LinkButton x="20" y="225" label="Read Full Post"[/align]
[align=left]click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" />[/align]
[align=left]DataGrid 控件中被选项的连接字段的值，dgPosts.selectedItem.link 由navigateToURL（）[/align]
[align=left]方法的参数所指定，每当用户点击LinkButton 控件时被调用。navigateToURL（） 方法在一[/align]
[align=left]个新打开的浏览器窗口中，加载从指定URL 传来的文档。[/align]
[align=left]2. 保存文件，编译后运行。[/align]
[align=left]在本节中，你学习了使用称为HTTPService 的RPC service 组件从RSS 供给器中获取数据，然后将数据绑定到Label，DataGrid，TextArea 和LinkButton 控件上。[/align]
 


<?xml version="1.0" encoding="utf-8"?>


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


<!--你的应用程序每次启动时，HTTPService 组件的send（）方法将被调用。该方法向指定的URL 发出HTTP GET 或POST 请求，并得到HTTP 回应。  -->


    <mx:HTTPService


        id="feedRequest"


        url="http://weblogs.macromedia.com/mchotin/index.xml"   


        useProxy="false"/>    


    <!--HTTPService 的RPC 服务组件来获取blog 的信息。-->


    <!-- url 属性指明了被请求文件所在的位置 -->


    <!-- useProxy 属性表明你并不打算在服务器上使用代理   -->


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


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


        <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>


        <mx:TextArea x="20" y="175" id="text" width="400" htmlText="{dgPosts.selectedItem.description}"/>


        <!-- 对于在DataGrid 组件中所选择的每个项（名称为dgPosts），description 字段的数值被使用作为htmlText 的属性，该属性使你可以显示HTML 格式的文本。  -->


        <mx:Button x="20" y="237" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>    


    </mx:Panel>    


</mx:Application>