Modifying the Flickr Application…

…after much tries… and exploring the Flex builder’s help, Adobe Developer connection and some articles… I managed to modify the application further… now the search can be started by pressing the return key and when a photo is selected, it will be displayed in a bigger format in a window…

You can click on the link to see how it looks like…

In this example, besides keyboard and list events… I have learnt more about the PopUpManager as well…

I have added a new TitleWindow component, photoPanel, in this modification to display the selected photo… So how the application works now….. When an item in the TileList is selected, it will trigger the openPhoto function.. and uses PopUpManager to create a photoPanel… it will, then, send the parameters of the selected photo to photoPanel… photoPanel will make use of these parameters and display the correct photo…

public function openPhoto( e2:ListEvent ):void {
   var oSelectedPhoto:photoPanel = photoPanel( PopUpManager.createPopUp( this, photoPanel, false ));
   oSelectedPhoto.photoTitle = e2.itemRenderer.data.title;
   oSelectedPhoto.photoURL = e2.itemRenderer.data.content.url;
}

Below, I have included the codings for my application here…..

Retrieving data from XML Files or Feeds?

…reference to yesterday post, I was wondering how did we parse the feeds from the Flickr as Arrays…

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

…so today, I tried pasting

http://api.flickr.com/services/feeds/photos_public.gne?format=rss_200_enc

into the web-browser and I got a photo feed page… viewing it’s source.. I noticed the xml page is formatted in this manner

<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>
             .... .... ....
             .... .... ....
                 <item>
                          <title>IMG_0359 copy</title>
                          <link>http://www.flickr.com/photos/stander/2884730150/</link>
                          .... .... ....
                          .... .... ....
                          <guid isPermaLink="false">tag:flickr.com,2004:/photo/2884730150</guid>
                          <media:content url="http://farm3.static.flickr.com/2294/2884730150_08b0c69027_o.jpg" type="image/jpeg" height="1000" width="1500"/>
                          <media:title>IMG_0359 copy</media:title>
                          <media:thumbnail url="http://farm3.static.flickr.com/2294/2884730150_22f80b06e8_s.jpg" height="75" width="75" />
                          <media:credit role="photographer">pics_by_me</media:credit>
                          <enclosure url="http://farm3.static.flickr.com/2294/2884730150_08b0c69027_o.jpg" type="image/jpeg" />
                 </item>

so when the event returns the feeds, we use rss.channel.item to make the results return from the item level and storing them in Arrays format.. This explains the code to display the thumbnails and the description of the thumbnails, using data.thumbnail.url and data.credit…. Looking at it, I think I can use the data.enclosure.url to blow up the thumbnail to a bigger picture… I will continue to explore to make that happen..

Building a Flickr Application…

…Flex is quite addictive… haha… and I tried out the second example shown… flickrViewer… it uses the HTTP services to send a request to the Flickr to download the photo feeds.. and show it in your Flex Application’s screen…

… In the second example, I found one error in the codes.. it is one of the parameters used to send request to Flickr to retrieve photos… params.text = textSearch.text;. The correct parameters should be tags, params.tags = textSearch.text;.

I found this from… Flickr Services

This is what I got..

The book teaches the code well, however, it didn’t describe what it actually does… so here I include a diagram from my own understandings… Haha.. It helps me understand better… not sure about others…

You are the Flex Application, Postman is the HTTP Service used to send and receive requests and Flickr is the web where you want to retrieve the photo feeds…

At point 1,
You: Mr Postman, Can you help me send a request to Flickr? These are the items I need…
You pass the parameters and the address (URL) to Postman. Following the address, Postman reaches the Flickr…

At point 2,
Postman: I have an request for you and this is the parameters of what is required… Can you pass me those items?
Flickr looking at the request and said, “Sure, please wait…”

At point 3,
Flickr pack all the items together (in Array Format) and pass it to Postman.
Flickr: Ok.. That’s it!

At point 4,
Postman: Here you go.. These are the items…

This is roughly how the application works… When you click the Seach button in the application.. it is actually the point 1 and 2, where the Flex application send the parameters to Flickr using HTTPServices… For point 3 and 4, HTTPService fetch the photo feed and send it back to Flex Application as arrays…

Just wondering from here.. If I selected one photo and wants to open it bigger.. How should I do it…

My first Flex application…

…read the Sitepoint’s Flex articles and at the end of it, I was given a free eBook,Getting Started with Flex 3, after attempting the quiz.

Usually, programming books use simple coding like helloworld, as their first tutorial… This book, however, uses a more attractive example as the first tutorial… Furthermore, the book is quite enjoyable and easy to understand… The first example used in this book is a simple application that teaches you some methods to manipulate images…

After going through and trying the codes… I tried to re-code it myself with some understandings.. and this is what I get… It is almost the same as the one in the book…

Flex is fun and easy… but really need some reference books to understand the usage of the tags…

Exploring Flex…

Although I came across Flex/Apollo like 2 years ago, I have not actually touch on it.. Well… maybe I should say, I did not know how or where to start with…. until few weeks ago… I read some articles on Flex and Flex Builder 3… then I decided to give it a try… It is fun and amazing… however, there are alot of tags resides in the language and I am not sure of how to use them… I am just wondering if there are any free reference guides around for Flex 3 which I can make use of…