1b. Code Files - Flex 3 Getting Started - Adobe Learning Resources

----------------------------------------

Resources

Code Files

This section provides the completed code for the Flickr RIA. To see the application in action, see the Part I Introduction or the Code Anatomy. For step-by-step instructions to build this application, see the Tutorial.

User rating?	1 2 3 4 5

Learn more

Main Application (FlickrRIA.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[0xFFFFFF, 0xAAAAAA]"
    horizontalAlign="left"
    verticalGap="15"
    horizontalGap="15">

    <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';
                params.tags = searchTerms.text;
                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"
        result="photoHandler(event)" />

	<mx:HBox>
		<mx:Label text="Flickr tags or search terms:" />
		<mx:TextInput id="searchTerms" />
		<mx:Button label="Search"
			click="requestPhotos()" />
	</mx:HBox>

	<mx:TileList width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail">
	</mx:TileList>

</mx:Application>

Custom component item renderer (FlickrThumbnail.mxml)

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
	width="125" height="125"
	horizontalAlign="center"
	paddingBottom="5" paddingLeft="5" paddingRight="5" paddingTop="5">

	<mx:Image
		width="75" height="75"
		source="{data.thumbnail.url}" />

	<mx:Text width="100" text="{data.credit}" />

</mx:VBox>

Comments (Hide)

Hi there Folks of Trilemetry I enchaded this example to this one bellow.
added some extra code to better beginnier user experience.

See code bellow.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundGradientColors="[0xFFFFFF, 0xAAAAAA]"
    horizontalAlign="left"
    verticalGap="15"
    horizontalGap="15" creationComplete="addListenerToControls()">

    <mx:Script>
        <![CDATA[
        	import mx.controls.Alert;
        	import mx.rpc.events.FaultEvent;
        	import mx.events.FlexEvent;
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var photoFeed:ArrayCollection;
			
			// add a event listener to textInput control using the Event Listeners
			// You can search more at addEventListeners on this site
			private function addListenerToControls():void {
					searchTerms.addEventListener(FlexEvent.ENTER,requestPhotos);
			}
			// Request photos based on keyword criteria you insert
            private function requestPhotos(event:Event):void {
            	// if the photoService is still loading we cancel to prevent errors 
            	// then we call again.
                photoService.cancel();
                var params:Object = new Object();
                params.format = 'rss_200_enc';
                params.tags = searchTerms.text;
                photoService.send(params);
            }
            // Handler the result function from HTTPService request you did 
            // and convert the result into a Array Collection
            private function photoHandler(event:ResultEvent):void {
                 photoFeed = event.result.rss.channel.item as ArrayCollection;
            }
            // If the HTTPService had errors, we handle it here show an alert message
            // like we have in Javascript
            private function photoFaultHandler(event:FaultEvent):void {
                 Alert.show("Impossible to load or reach photos from services","Error");
            }
         ]]>
    </mx:Script>

    <mx:HTTPService id="photoService" showBusyCursor="true"
        url="http://api.flickr.com/services/feeds/photos_public.gne"
        result="photoHandler(event)" fault="photoFaultHandler(event)" />

	<mx:HBox>
		<mx:Label text="Flickr tags or search terms:" />
		<mx:TextInput id="searchTerms" />
		<mx:Button label="Search"
			click="requestPhotos(event)" />
	</mx:HBox>

	<mx:TileList width="100%" height="100%"
		dataProvider="{photoFeed}"
		itemRenderer="FlickrThumbnail">
	</mx:TileList>

</mx:Application>

Posted by Igor Costa at Feb 27, 2008 16:31

Above example is not working properly in case flickr returns only one picture as result. I know it's not frequent, but solution is very simple – just change type of photoFeed from ArrayCollection to Object and avoid casting in photoHandler.

Posted by Przemyslaw Madzik at May 13, 2008 06:09

thanks for the help, but i solved the problem. There is a localization problem on flex with countries like turkey.

Adding

-Duser.language=en
-Duser.location=us

to the "FlexBuilder.ini" file fixed the problem. Same as, adding it to the "eclipse.ini" solved the problem for the eclipse plugin of flex builder. Hope it helps for the users like me...

Posted by gokhan tanisik at Jun 29, 2008 13:21

thanks，igor costa's code is very useful

Posted by sc zhang at Nov 30, 2008 01:06

Hi:

I changed the bkgd colors so that my app wouldn't like just like Adobe's. But I keep getting an error mssg and the search form doesn't work. Can you tell me where I am going wrong? I copied the error message and my code below. Thanks.

Severity and Description Path Resource Location Creation Time Id
Multiple initializers for property 'dataProvider'. (note: 'dataProvider' is the default property of 'mx.controls.TileList'). FlickRIA/src FlickRIA.mxml line 37 1260645986327 216

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="horizontal" backgroundGradientAlphas="[1.0, 1.0]"
    backgroundGradientColors="[#F4F0F0, #F8E193]" verticalAlign="middle">
    <mx:Style source="Flick.css"/>

    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var photoFeed:ArrayCollection;
            private function requestPhotos():void

Unknown macro: { photoService.cancel(); var params}

private function photoHandler(event:ResultEvent):void

Unknown macro: { photoFeed = event.result.rss.channel.item as ArrayCollection; }

        ]]>
    </mx:Script>

    <mx:HTTPService id="photoService"
        url="http://api.flickr.services/feeds/photos_public.gne"
        result="photoHandler(event)"/>

    <mx:HBox width="394" color="#452C18" borderStyle="outset" horizontalAlign="center" verticalAlign="top">
        <mx:Label text="Search Terms" id="search" enabled="true"/>
        <mx:TextInput id="searchTerms" enter="requestPhotos()" width="124"/>
        <mx:Button label="Search" click="requestPhotos()" color="#36281D" fillAlphas="[1.0, 1.0]" fillColors="[#F3DCBE, #E3DED7]"/>
    </mx:HBox>
    <mx:TileList width="100" height="100"
        dataProvider="

Unknown macro: {photoFeed}

" direction="horizontal" verticalAlign="middle">
        itemRenderer="FlickrThumbnail">
    </mx:TileList>
</mx:Application>

Posted by dawn jones at Dec 12, 2009 11:43

I think everyone can understand if you show some sample result from the HTTPService.

&nbsp; <?xml version="1.0" encoding="utf-8" ?>
\- <rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:flickr="urn:flickr:">
\- <channel>
&nbsp; <title>Recent Uploads tagged p8800</title>
&nbsp; <link>http://www.flickr.com/photos/tags/p8800/</link>
&nbsp; <description />
&nbsp; <pubDate>Wed, 02 Dec 2009 10:27:07 \-0800</pubDate>
&nbsp; <lastBuildDate>Wed, 02 Dec 2009 10:27:07 \-0800</lastBuildDate>
&nbsp; <generator>http://www.flickr.com/</generator>
\- <image>
&nbsp; <url>http://l.yimg.com/g/images/buddyicon.jpg</url>
&nbsp; <title>Recent Uploads tagged p8800</title>
&nbsp; <link>http://www.flickr.com/photos/tags/p8800/</link>
&nbsp; </image>
\- <item>
&nbsp; <title>Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)</title>
&nbsp; <link>http://www.flickr.com/photos/arjhay/4152918141/</link>
&nbsp; <description><p><a href="http://www.flickr.com/people/arjhay/">fleas2016</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/arjhay/4152918141/" title="Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)"><img src="http://farm3.static.flickr.com/2703/4152918141_f5154b9bf7_m.jpg" width="240" height="180" alt="Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)" /></a></p> <p>Cleaned and ready for AS5 application</p></description>
&nbsp; <pubDate>Wed, 02 Dec 2009 10:27:07 \-0800</pubDate>
&nbsp; <dc:date.Taken>2009-12-02T02:06:29-08:00</dc:date.Taken>
&nbsp; <author flickr:profile="http://www.flickr.com/people/arjhay/">nobody@flickr.com (fleas2016)</author>
&nbsp; <guid isPermaLink="false">tag:flickr.com,2004:/photo/4152918141</guid>
&nbsp; <media:content url="http://farm3.static.flickr.com/2703/4152918141_f5154b9bf7_m.jpg" type="image/jpeg" height="180" width="240" />
&nbsp; <media:title>Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)</media:title>
&nbsp; <media:description type="html"><p>Cleaned and ready for AS5 application</p></media:description>
&nbsp; <media:thumbnail url="http://farm3.static.flickr.com/2703/4152918141_f5154b9bf7_s.jpg" height="75" width="75" />
&nbsp; <media:credit role="photographer">fleas2016</media:credit>
&nbsp; <media:category scheme="urn:flickr:tags">cpu p8800 slglr</media:category>
&nbsp; <enclosure url="http://farm3.static.flickr.com/2703/4152918141_f5154b9bf7_m.jpg" type="image/jpeg" />
&nbsp; </item>
\- <item>
&nbsp; <title>Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)</title>
&nbsp; <link>http://www.flickr.com/photos/arjhay/4153680118/</link>
&nbsp; <description><p><a href="http://www.flickr.com/people/arjhay/">fleas2016</a> posted a photo:</p> <p><a href="http://www.flickr.com/photos/arjhay/4153680118/" title="Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)"><img src="http://farm3.static.flickr.com/2572/4153680118_8d71aae26b_m.jpg" width="180" height="240" alt="Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)" /></a></p> <p>sSpec SLGLR - 25W TDP<br /> <br /> My new and current processor. Runs cooler than any of my previous two on stock voltage.</p></description>
&nbsp; <pubDate>Wed, 02 Dec 2009 10:27:31 \-0800</pubDate>
&nbsp; <dc:date.Taken>2009-12-02T02:07:02-08:00</dc:date.Taken>
&nbsp; <author flickr:profile="http://www.flickr.com/people/arjhay/">nobody@flickr.com (fleas2016)</author>
&nbsp; <guid isPermaLink="false">tag:flickr.com,2004:/photo/4153680118</guid>
&nbsp; <media:content url="http://farm3.static.flickr.com/2572/4153680118_8d71aae26b_m.jpg" type="image/jpeg" height="240" width="180" />
&nbsp; <media:title>Intel Core 2 Duo P8800 (2.66GHz/3M/1066MHz)</media:title>
&nbsp; <media:description type="html"><p>sSpec SLGLR - 25W TDP<br /> <br /> My new and current processor. Runs cooler than any of my previous two on stock voltage.</p></media:description>
&nbsp; <media:thumbnail url="http://farm3.static.flickr.com/2572/4153680118_8d71aae26b_s.jpg" height="75" width="75" />
&nbsp; <media:credit role="photographer">fleas2016</media:credit>
&nbsp; <media:category scheme="urn:flickr:tags">cpu p8800 slglr</media:category>
&nbsp; <enclosure url="http://farm3.static.flickr.com/2572/4153680118_8d71aae26b_m.jpg" type="image/jpeg" />
&nbsp; </item>
&nbsp; </channel>
&nbsp; </rss>

&nbsp;

Then from there, it's easier to visualize this part of the code:

photoFeed = event.result.rss.channel.item as ArrayCollection;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Posted by RJ Camarillo at Dec 17, 2009 04:54

wow! crazy formatting...

Posted by RJ Camarillo at Dec 17, 2009 04:55

oops...u need to change some code.Its not work if anyone follow 100% with this tutorial

Posted by Alief Abd Halim at Dec 29, 2009 17:56