Learning to Flex
Learning Flex has been a fun but challenging experience for me thus far. The concept, the classes, and even Actionscript all make perfect sense to me, but though I may understand the logic, learning the syntax can be incredibly difficult. I decided to make my first application in Flex a blog RSS reader and Flickr thumbnail viewer. I still have a ways to go (with the flickr portion especially) but here is the source code for this Adobe Flex Application thus far:
The Application
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" layout="absolute" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#6C6803, #143500]" viewSourceURL="srcview/index.html">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.rpc.events.ResultEvent;
[Bindable]
private var photoFeed:ArrayCollection;
private function requestPhotos():void {
photoService.cancel();
var params:Object = new Object();
params.format = 'rss_200_enc';
photoService.send(params);
}
private function photoHandler(event:ResultEvent):void {
photoFeed = event.result.rss.channel.item as ArrayCollection;
}
]]>
</mx:Script>
<mx:HTTPService id="photoService"
url="http://api.flickr.com/services/feeds/photos_public.gne?id=95397424@N00"
result="photoHandler(event)" />
<mx:Panel width="450" height="500" horizontalCenter="-230" verticalCenter="0" title="Flickr">
<mx:HBox paddingTop="5" horizontalAlign="center">
<mx:Label text="Doesn't do anything but load thumbs, but I'll be adding more to this later" creationComplete="requestPhotos()" />
</mx:HBox>
<mx:TileList height="425" width="100%" borderThickness="0"
dataProvider="{photoFeed}"
itemRenderer="FlickrThumb">
</mx:TileList>
</mx:Panel>
<mx:HTTPService showBusyCursor="true" id="RSSfeed" url="http://feeds2.feedburner.com/thinkclay" resultFormat="object" />
<mx:Panel creationComplete="RSSfeed.send()" width="450" height="500" horizontalCenter="230" verticalCenter="0" resizeEffect="Resize" title="Latest Blog Posts">
<mx:DataGrid width="100%" id="entries" dataProvider="{RSSfeed.lastResult.rss.channel.item}"
click="{body.htmlText=RSSfeed.lastResult.rss.channel.item[entries.selectedIndex].description}"
horizontalCenter="0" verticalCenter="-64">
<mx:columns>
<mx:DataGridColumn dataField="pubDate" headerText="Date"/>
<mx:DataGridColumn dataField="title" headerText="Title"/>
</mx:columns>
</mx:DataGrid>
<mx:TextArea width="100%" height="290" id="body" horizontalCenter="0" borderThickness="0"/>
</mx:Panel>
<mx:Text text="Welcome to My First Dynamic Flex Application" fontSize="18" color="#FFFFFF" horizontalCenter="0"/>
<mx:Text text="This is the first application that I've built on Flex 3 using Flickr's API and RSS/XML parsing for blog feeds. It's pretty simple, but it's the first of many applications to come!"
color="#efefef" horizontalCenter="0" y="30" />
</mx:Application> |
Flickr Thumbnail Component
1
2
3
4
5
6
7
8
9
| <?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center"
paddingBottom="5" paddingLeft="6" paddingRight="5" paddingTop="5">
<mx:Image
width="75" height="75"
source="{data.thumbnail.url}" />
</mx:VBox> |
