I tried to follow one of the examples in "Getting Started with Flex 3" (create Flickr browser) and faced a couple of issues. This is a working solution, however instead of Flickr RSS it is using Picasa and is using some Flex 4-specific stuff (mainly for data-access). Flickr at the moment is sending an RSS with one of the tags invalid for Flex 4 XML parser (or to be more precise: you cannot generate AS classes from it).
The mxml starts as in the original example (except for colour values, that is):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
minWidth="1024" minHeight="768"
xmlns:photoservice="services.photoservice.*"
backgroundGradientColors="[#BB78D7, #75637C]">
The next part is a bit simpler than in the original example, since we have nice service generation in Flex 4 (more about this later).
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import mx.controls.Alert;
import services.photoservice.PhotoService;
import mx.rpc.AsyncToken;
import mx.rpc.CallResponder;
import services.photoservice.PicasaPhotos;
private var callResponder:CallResponder;
protected function search():void
{
fetchResult.token = photoService.fetch("rss","photo","en_US");
}
protected function tileList_creationCompleteHandler(event:FlexEvent):void
{
fetchResult.token = photoService.fetch("rss","photo","en_US");
}
]]>
</fx:Script>
Last part is the actual design part, which also is mostly as in original example, except for the service-related part:
<mx:HBox>
<mx:Label text="Picasa tags or search terms:"/>
<mx:Text id="searchTerms" width="150"/>
<s:Button label="Search" click="search()"/>
</mx:HBox>
<mx:TileList width="100%" height="100%" id="tileList"
creationComplete="tileList_creationCompleteHandler(event)"
dataProvider="{fetchResult.lastResult.item}" labelField="title"
itemRenderer="PicasaThumbnail">
</mx:TileList>
<fx:Declarations>
<s:CallResponder id="fetchResult"/>
<photoservice:PhotoService id="photoService" fault="Alert.show(event.fault.faultString)" showBusyCursor="true" />
</fx:Declarations>
</mx:Application>
The PicasaThumbnail.mxml class looks as follows:
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
width="250" height="250"
paddingBottom="10" paddingLeft="15" paddingRight="15" paddingTop="10"
alpha="1"
>
<mx:Image width="200" height="200" source="{data.enclosure.url}" alpha="1"/>
<mx:Text text="{data.title}"/>
</mx:VBox>
The main reason all this works is a very nice addition coming in Flash Builder 4 - Data/Services wizard. It's enough to select menu Data -> Connect to HTTP... and on presented wizard provide a few details (URL, required parameters, service name - and that's it). This will generate a service class. After this is done you can "Configure return type" - the tool will connect to your service, parse example XML and try to prepare a set of classes representing it nicely. Works very well and allows all the nice tools of Eclipse (autocompletion) to be much more helpful.
Overall I am very pleasantly surprised how easy the whole task was and I can see great potential to simplify my work with the data wizard tool.
