Subscribe to
Posts
Comments

Flickr & Flex

As I said in my previous post, I’ve started working in Flex! So far I have been very impressed! Creating dynamic content and application designs is much more natural and faster. Although I miss the timeline, I question whether a pseudo-designer type such as myself would need Flash at all.
That being said, I’ll divulge some of the details of my first Flex component. For this project I was asked to create a Flex component using AS#, and quickly! I had a few neat ideas but decided to kill two birds with one stone and design a lightbox/gallery type component I could use on my art website.

I’ve never been great at designing databases, and don’t reinvent the wheel when I don’t have to. Yahoo’s Flickr service provided all the tools I needed for managing a gallery: tags, dating, sets, and automatic resizing to multiple formats. Yahoo is also kind enough to give access to their Flickr API services so you can access image data from webservice calls which return XML.

Thanks to ActionScript 3’s new E4X extension, XML is easy. If you have ever tried parsing XML in AS2, you will be very happy with this addition!

The section of this project that I’m going to focus on for this post is the Flickr package I’ve been working on. I will admit that there are probably plenty of other AS3 classes that connect to Flickr, but part of the purpose of this project was to challenge myself and get some experience using webservicee (something we don’t get a to use a lot in e-Learning!).

The Flickr Package currently consists of four classes: FlickrImage, FlickrImageData, FlickrUserData and FlickrUserPhotosData. Each of these correlate to one or more Flickr webservice calls. For example, FlickrImageData takes in a picture id and returns almost all the information that is needed for that image, including title, date, user and the paths to the image sizes. I combined the two webservices because I honestly couldn’t see very many times when one wouldn’t need all the data.

Now one question I’m going to pose to the blogsphere is whether or not it is necessary, good or bad to recreate the variables passed in from the XML. For example, in the FlickrUserData class I have this bit of code:

private function onInfoXMLDataLoaded(event:Event):void {
var data:XML = XML(_urlLoaderInfo.data);
_userName = data.person.username;
_realName = data.person.realname;
_location = data.person.location;
_photosUrl = data.person.photosurl;
_profileUrl = data.person.profileurl;
_photosCount = data.person.photos.count;
_isLoadedInfo = true;
dispatchEvent(new Event(FlickrUserData.LOADED, true, true));
}

I’m just taking all the attributes and variables passed in from the XML and attaching them to hardcoded variables. Is this a good practice or does it waste memory and efficency? I would think that one could create getter methods that access the loaded XML directly, but how would these objects work when passed around? Or if one were to create a clone() function? I like creating the actual variables because its what I’m used to and makes sense, but am open to any discussion saying otherwise.

You’ll notice that the FlickrImageData contains just that, all the data, but doesn’t actually show anything to the user. The FlickrImageData class is simply a model class. The FlickrImage class extends the mx:Image class and is the View for the FlickrImageData. You could potentially use a FlickrImage component anywhere you would create a normal image. You simply pass it the Flickr Image ID and a size (if desired, it defaults to Original) and the FlickrImage class will grab all the necessary data and display the image! This is an example of the most popular design pattern in application development today, the Model View Control (MVC) design pattern.

Leave a Reply