Flex学习进阶之使用标签的步骤

Flex学习进阶之使用标签的步骤

第一步：建立应用项目

第二步：设计UI

• Title: Blog Reader
• Width: 475
• Height: 400
• X: 10
• Y: 10

• Id: dgPosts
• X: 20
• Y: 20
• Width: 400

• X: 20
• Y: 175
• Width: 400

• Label: Read Full Post
• X: 20
• Y: 225

第三步：插入HTTPService标签

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

页http://weblogs.macromedia.com/mchotin/index.xml代码如下：
浏览地址

<rss version="2.0">
<channel>
<title>Matt Chotin</title>
<link>http://weblogs.macromedia.com/mchotin/</link>
<description/>
<language>en</language>
<copyright>Copyright 2006</copyright>
<lastBuildDate>Sun, 29 Oct 2006 16:12:32 -0800</lastBuildDate>
<generator>http://www.movabletype.org/?v=3.16</generator>
<docs>http://blogs.law.harvard.edu/tech/rss</docs>
<item>
<title>Have your friends try Flex</title>
<description>
Most folks who read my blog already have Flex installed, but we hear all the time about the need to convince friends that Flex is as cool as we say it is. Look no further, send them to The FLEXifier!...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/have_your_frien.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/have_your_frien.cfm
</guid>
<category>General</category>
<pubDate>Sun, 29 Oct 2006 16:12:32 -0800</pubDate>
</item>
<item>
<title>New Labs Logo</title>
<description>
I don't know when we did it but the logo on the Adobe Labs page has been updated. I like it....
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/new_labs_logo.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/new_labs_logo.cfm
</guid>
<category>General</category>
<pubDate>Fri, 27 Oct 2006 18:07:18 -0800</pubDate>
</item>
<item>
<title>Don't be late to the MAX Keynote on Tuesday</title>
<description>
You will significantly regret missing the beginning of the keynote, so please be on time or early even!...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/dont_be_late_to.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/dont_be_late_to.cfm
</guid>
<category>MAX</category>
<pubDate>Mon, 23 Oct 2006 12:06:03 -0800</pubDate>
</item>
<item>
<title>Flash Player 9 for Linux</title>
<description>
The beta of the Linux Player is now available! More info on Emmy's blog too. You can use the free Flex 2 SDK to build apps on Linux as we speak! Debugging support via fdb and Linux Debugger Players is...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/flash_player_9_1.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/flash_player_9_1.cfm
</guid>
<category>General</category>
<pubDate>Wed, 18 Oct 2006 17:42:24 -0800</pubDate>
</item>
<item>
<title>Quality Engineer Needed for Apollo</title>
<description>
The Apollo team is looking for QE engineers. Learn more by going to http://www.adobecareers.com/, putting my blog down as where you heard about this, then go searching for the job JW050606. More info: You will join a small, highly motivated...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/quality_enginee.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/quality_enginee.cfm
</guid>
<category>General</category>
<pubDate>Tue, 17 Oct 2006 20:26:30 -0800</pubDate>
</item>
<item>
<title>Find me at MAX</title>
<description>
I'm looking forward to seeing folks again and meeting new people at MAX. Please come find me and say hello, you'll definitely see me during these times: Monday during the welcome reception at the RIA Cabana Tuesday and Wednesday 11:30-2:30...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/find_me_at_max.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/find_me_at_max.cfm
</guid>
<category>MAX</category>
<pubDate>Mon, 16 Oct 2006 20:40:49 -0800</pubDate>
</item>
<item>
<title>Flash Player 9 Update Beta now available</title>
<description>
Please start testing your Flex apps with this Player. More info on Emmy's blog....
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/flash_player_9.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/flash_player_9.cfm
</guid>
<category>General</category>
<pubDate>Wed, 04 Oct 2006 16:52:09 -0800</pubDate>
</item>
<item>
<title>MAX Early Bird Discount Extended</title>
<description>
Register now at http://www.adobe.com/events/max/ . $200 off the conference registration and preconference training. Deadline extended until October 16th....
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/10/max_early_bird.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/10/max_early_bird.cfm
</guid>
<category>MAX</category>
<pubDate>Mon, 02 Oct 2006 08:12:11 -0800</pubDate>
</item>
<item>
<title>UrlKit released</title>
<description>
Joe Berkovitz and Todd Rein have released UrlKit, a library that improves the integration of a Flex app with the browser. The problem they're solving is not new, but I think they've done a pretty good job in addressing it....
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/09/urlkit_released.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/09/urlkit_released.cfm
</guid>
<category>General</category>
<pubDate>Tue, 26 Sep 2006 22:58:18 -0800</pubDate>
</item>
<item>
<title>Adobe Flex Jobs!</title>
<description>
A few interesting jobs are becoming available right now. 1) In San Francisco we need a mid to senior engineer who has UI experience (and preferably Java backend experience) to work on prototyping and proof-of-concept work for the next generation...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/09/adobe_flex_jobs.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/09/adobe_flex_jobs.cfm
</guid>
<category>General</category>
<pubDate>Tue, 26 Sep 2006 22:44:33 -0800</pubDate>
</item>
<item>
<title>Motionbox using Flex</title>
<description>
Check out the new Motionbox video player that allows deep tagging within the videos themselves and a nifty selection mechanism. Motionbox was an Adobe Site of the Day recently. They use the Flash Media Server along with Flex. Pretty cool!...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/09/motionbox_using.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/09/motionbox_using.cfm
</guid>
<category>General</category>
<pubDate>Tue, 19 Sep 2006 22:45:56 -0800</pubDate>
</item>
<item>
<title>
Check out the new Flex community app on the Dev Center
</title>
<description>
We've added a new mini-app to the front page of the Flex Developer Center. It shows off recent blog entries related to Flex along with a list of relevant bloggers, upcoming Flex-related events, and recent Flex-related articles. It's got some...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/09/check_out_the_n.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/09/check_out_the_n.cfm
</guid>
<category>General</category>
<pubDate>Mon, 18 Sep 2006 15:53:05 -0800</pubDate>
</item>
<item>
<title>
Senior Developer needed at Adobe for Flex/LiveCycle
</title>
<description>
Summary: The successful candidate for Senior Computer Scientist for the Enterprise Developer Business Unit will have more than eight (8) years of experience in software development in the high technology industry, preferably someone who has worked on developing Flex or...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/09/senior_develope.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/09/senior_develope.cfm
</guid>
<category>General</category>
<pubDate>Fri, 15 Sep 2006 09:40:14 -0800</pubDate>
</item>
<item>
<title>MAX Banners</title>
<description>
If you're so inclined to post a banner promoting MAX you can download some potentials here. I'm honestly not competent enough to edit the template and add a banner myself :-)...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/09/max_banners_1.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/09/max_banners_1.cfm
</guid>
<category>MAX</category>
<pubDate>Mon, 11 Sep 2006 13:51:36 -0800</pubDate>
</item>
<item>
<title>Come to MAX, learn lots of Flex</title>
<description>
I think we have a lot of great sessions at MAX this year and because I'm so excited I've asked some of our speakers to post their own thoughts and give more previews of what they'll be talking about. I...
</description>
<link>
http://weblogs.macromedia.com/mchotin/archives/2006/09/come_to_max_lea.cfm
</link>
<guid>
http://weblogs.macromedia.com/mchotin/archives/2006/09/come_to_max_lea.cfm
</guid>
<category>MAX</category>
<pubDate>Fri, 08 Sep 2006 11:49:41 -0800</pubDate>
</item>
</channel>
</rss>

2.在主标签里面调用添加一个监听事件函数 creationComplete="feedRequest.send()"
即
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">

3.改变<Panel>的title属性值为
title="{feedRequest.lastResult.rss.channel.title}"
即
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.link}">//绑定HTTPService中的rss.channel.link 标签值

第四步 对DataGrid 标签进行定义事件和修改属性

修改后的代码如下：
<mx:DataGrid x="20" y="20" id="dgPosts" width="400" dataProvider="{feedRequest.lastResult.rss.channel.item}">//绑定HTTPService中的rss.channel.item 标签值
  <mx:columns>
    <mx:DataGridColumn headerText="Posts" dataField="title" />//“dataField”绑定HTTPService标签值
    <mx:DataGridColumn headerText="Date" dataField="pubDate" width="150" />
  </mx:columns>
</mx:DataGrid> 

第五步 更改TextArea标签的属性值

<mx:TextArea x="20" y="175" width="400" htmlText="{dgPosts.selectedItem.description}" /> //绑定 DataGrid 改变事件产生的值，将选定的值添加到TextArea属性中，Flex同样支持HTML语言，只需把其属性定义为htmlText="*"

第五步 为连接按钮定义一个动态跳转地址

<mx:LinkButton x="20" y="225" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));" /> //click事件函数值为获取的 DataGrid 标签值

最后完成代码如下：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedRequest.send()">
<mx:HTTPService id="feedRequest" url="http://weblogs.macromedia.com/mchotin/index.xml" useProxy="false" />
<mx:Panel x="10" y="10" width="475" height="400" layout="absolute" title="{feedRequest.lastResult.rss.channel.link}">
<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"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea x="20" y="175" width="400" htmlText="{dgPosts.selectedItem.description}"/>
<mx:LinkButton x="20" y="225" label="Read Full Post" click="navigateToURL(new URLRequest(dgPosts.selectedItem.link));"/>
</mx:Panel>

</mx:Application>

点击看看效果吧！能够做出来不是目的，最重要的还是灵活运用。