FLEX 初学笔记之一，使用HTTPService读取Data.xml文件，显示于表示层

客官°小女子只卖身不卖艺 2022-08-25 15:46 96阅读 0赞

FLEX 学习笔记

\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#

1，和JAVA整合，进行目录的配置。

(1) FLEX中的设置  
Main source folder: flexsrc  
Output folder : E:/PowerJava.v2/web/flex  
Output folder URL : [http://localhost:8080/flex][http_localhost_8080_flex]

(2) JAVA中的设置  
Default output folder : PowerJava.v2/web/WEB-INF/classes  
Project Folder : PowerJava.v2/web

(3) TOMCAT中的设置  
<Context path="" docBase="E:/PowerJava.v2/web" debug="0"></Context>

\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#

2，采用HTTPService获取信息源的模式，读取数据文件。新建一个data.xml文件，内容如下：

<?xml version="1.0" encoding="utf-8" ?>  
  
<rss version="2.0" xmlns:sns="[http://blog.sina.com.cn/sns][http_blog.sina.com.cn_sns]">  
<channel>  
<title>徐小明的BLOG</title>  
<description></description>  
<link>http://blog.sina.com.cn/xuxiaoming8</link>  
<lastBuildDate>Thu, 31 Jan 2008 16:29:25 GMT+8</lastBuildDate>  
<generator>SINABLOG 3.5(beta)</generator>  
<language>zh-cn</language>  
<copyright>Copyright 1996 - 2007 SINA Inc. All Rights Reserved.</copyright>  
<pubDate>Thu, 31 Jan 2008 08:29:25 GMT+8</pubDate>  
<item>  
<title>周四操作策略：做好入场准备</title>  
<link>http://blog.sina.com.cn/s/blog\_4d89b83401008ax6.html</link>  
<description><!\[CDATA\[<div><a href="http://blog.sina.com.cn/main/html/showpic.html\#url=http://static15.photo.sina.com.cn/orignal/4d89b834444ec3a18952e" TARGET="\_blank"></A>&nbsp;  
<p>周四操作策略：做好入场准备</P>  
<p>&nbsp;</P>  
\]\]></description>  
<author>徐小明</author>  
<category>行情分析</category>  
<comments>http://blog.sina.com.cn/s/blog\_4d89b83401008ax6.html\#comment</comments>  
<pubDate>Wed, 30 Jan 2008 08:20:24 GMT+8</pubDate>  
<guid>http://blog.sina.com.cn/s/blog\_4d89b83401008ax6.html</guid>  
</item>  
</channel>  
</rss>

\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#\#

3，新建一个mxml文件，放置一个Panel、DataGrid、TextArea控件，用于读取data.xml文件内容，并显示于用户。

<?xml version="1.0" encoding="gbk"?>  
<mx:Application  
xmlns:mx="[http://www.adobe.com/2006/mxml][http_www.adobe.com_2006_mxml]"  
layout="absolute"  
creationComplete="feed.send()"  
initialize="flash.system.System.useCodePage=true">  
<mx:HTTPService  
id="feed"  
url="/data.xml"  
useProxy="false"/>  
<mx:Panel x="10" y="10" fontSize="12" width="687" height="709" layout="absolute" title="\{feed.lastResult.rss.channel.title\}">  
<mx:DataGrid id="post" x="10" y="10" width="647" height="200" dataProvider="\{feed.lastResult.rss.channel.item\}">  
<mx:columns>  
<mx:DataGridColumn headerText="标题" dataField="title"/>  
<mx:DataGridColumn headerText="作者" dataField="author"/>  
<mx:DataGridColumn headerText="时间" dataField="pubDate" />  
</mx:columns>  
</mx:DataGrid>  
<mx:TextArea fontSize="12" x="10" y="218" width="647" height="439" htmlText="\{post.selectedItem.description\}"/>

</mx:Panel>  
  
</mx:Application>

在<mx:Application>标签中，添加creationComplete属性。  
<mx:Application xmlns:mx="[http://www.adobe.com/2006/mxml][http_www.adobe.com_2006_mxml]" layout="absolute" creationComplete="feedRequest.send()" >  
表明应用程序每次启动时，HTTPService 组件的send()方法将被调用。该方法向指定的URL 发出HTTP GET 或POST 请求，并得到HTTP 回应。  
并设置 initialize 属性，避免乱码的问题。value 值等于"flash.system.System.useCodePage=true"。

在<mx:HTTPService>标签中，设置 url 路径，调用之前设置的data.xml文件。并将ID设为feed供后面调用。  
设置Panel布局面板，title值为data.xml中的title值 ，通过title="\{feed.lastResult.rss.channel.title\}"进行设置。

设置DataGrid中dataProvider的属性，使用rss.channel.item节点为DataGrid提供数据。并将ID设为POST

设置DataGridColumn中的dataField属性，使用item节点中的字段提供显示。分别为title,author,pubDate

设置<mx:TextArea>标签中htmlText="\{post.selectedItem.description\}"，使用DataGrid中选择项中的内容。

![1.JPG][]

[http_localhost_8080_flex]: http://localhost:8080/flex
[http_blog.sina.com.cn_sns]: http://blog.sina.com.cn/sns
[http_www.adobe.com_2006_mxml]: http://www.adobe.com/2006/mxml
[1.JPG]: /images/20220824/5694c8acf31c482787d6d98af507915c.png