This week I'm spending a little time looking into Flex and revising the AS3 lessons of a few months ago.
Whilst actually figuring out where to start wasn't so easy, the actual learning process and overall Flex structure was surprisingly straight forward. Whilst I've only really travelled .001% of the way towards being a Flex master, I'm happy to say that my first impressions were positive. They just might make an RIA developer out of me yet!
I decided that the easiest place to start was probably an RSS reader... so that's what we've got here. I've also posted the code so that you guys can tell me if I've gone wrong (or could've done something more efficiently) and perhaps it will be of service to the next AS2 jockey that wants to look into the world of Flex.
It took me a few hours to go through some online lessons and figure all of this out but I'd guess that this sort of application would only take you 5-10 mins if you knew what you were doing. There is so little code that it's almost rude... but the trade-off is that what you see below is 260K. Ouch!
... and here's the code or if you prefer, download the mxml file here.
-
<?xml version="1.0" encoding="utf-8"?>
-
<mx:Application
-
xmlns:mx="http://www.adobe.com/2006/mxml"
-
layout="absolute"
-
width="440"
-
height="440"
-
horizontalAlign="center"
-
verticalAlign="middle"
-
creationComplete="feed.send();"
-
>
-
-
-
<mx:Script>
-
<![CDATA[
-
-
import flash.net.navigateToURL;
-
import mx.rpc.events.FaultEvent;
-
import mx.rpc.events.ResultEvent;
-
import mx.controls.Alert;
-
-
[Bindable]
-
private var _photoFeed:XML;
-
[Bindable]
-
private var _selectedLink:String;
-
-
-
// Define and use the RSS 2 namespace
-
private namespace rss2 = "http://backend.userland.com/rss2";
-
use namespace rss2;
-
-
-
private function resultHandler(event:ResultEvent):void {
-
this._photoFeed = event.result as XML;
-
}
-
-
-
private function faultHandler(event:FaultEvent):void {
-
Alert.show(event.fault.message, "Could not load feed!");
-
}
-
-
-
]]>
-
</mx:Script>
-
-
-
<!-- define the HTTP service -->
-
<mx:HTTPService id="feed" useProxy="false"
-
url="http://feeds.feedburner.com/MichaelBattle-WorkPlay"
-
resultFormat="object"
-
result="resultHandler(event);"
-
fault="faultHandler(event);"
-
showBusyCursor="true"
-
/>
-
-
-
<mx:Panel x="10" y="10" width="420" height="420" layout="absolute" title="Michael Battle - Work & Play" horizontalAlign="center" verticalAlign="middle" cornerRadius="5" fontSize="15">
-
-
<mx:DataGrid id="headlines"
-
dataProvider="{feed.lastResult.rss.channel.item}"
-
click="{itemContent.htmlText=feed.lastResult.rss.channel.item[headlines.selectedIndex].description}"
-
showHeaders="false" width="380" height="171" x="10" y="10" cornerRadius="5" borderThickness="2" fontSize="12">
-
-
<mx:columns>
-
<mx:DataGridColumn dataField="title" />
-
</mx:columns>
-
-
</mx:DataGrid>
-
-
-
<mx:TextArea x="10" y="199" width="380" height="121" id="itemContent" paddingLeft="5" paddingRight="5"
-
editable="false" wordWrap="true" enabled="true" cornerRadius="5" borderThickness="2" backgroundColor="#f7f8f9" fontSize="12"/>
-
<mx:HRule x="10" y="189" width="380"/>
-
-
-
<mx:ControlBar>
-
<mx:Button x="10" y="374" label="SELECT POST AND CLICK HERE TO READ MORE"
-
click="{navigateToURL(new URLRequest(feed.lastResult.rss.channel.item[headlines.selectedIndex].link))}"
-
width="400" height="30" fontSize="12"
-
/>
-
</mx:ControlBar>
-
-
</mx:Panel>
-
-
</mx:Application>
The next Flex milestone I'm going to aim for is a simple Twitter app.
If you're trying to learn too, here are some links that I found useful:
If you've got some tips or links, I'd really appreciate your words of wisdom.
