Peter Ent

2006-Apr-16
The code shown and provided by this article will not work with Flex 2 Beta 2 and beyond. This code was written with the Flex 2 Alpha 1 release and was meant to show what Flex 2 is or will be like.

This code has been ported to the latest Flex 2 Beta release on the labs.adobe.com site. Check in the showcase area.

My “port” of the Flickr PhotoSearch with Flex project from Flex 1.5 to Flex 2 is done. There is a link below where you can download the ZIP file and import it into your Flex Builder 2 workspace.

Make sure you click this button within a browser that has the Flash Player 8.5 plug-in. Launch Application

For Alpha-level software, Flex 2 did a great job, in opinion, and I don’t think I’m being biased. Because I could not spend 100% of my time on this project it lasted over two week, so don’t take that as an indication of how long it takes to work with Flex 2. Bear in mind there is a learning curve – even if you know Flex 1.5 already. You’ll really want to understand what new things Flex 2 has to offer and how developing applications in Flex 2 differs from Flex 1.5.

To Port or Not to Port

I don’t think you should port a perfectly good application from Flex 1.5 to Flex 2 unless the application falls into one of these categories:

• There is some deficiency in the application that Flex 2 can solve. For example some UI technique that your application lacks that is now possible with Flex 2.
• Your application is ready for its next version and you see features in Flex 2 that will benefit your application. Perhaps you wrote your own data-push code using XML sockets and you would like to abandon that in favor of Flex 2 Messaging (which is not yet available as an Alpha)
• You want to understand what Flex 2 is like and since you know your application thoroughly, porting it to Flex 2 will help you learn and understand Flex 2 better.

Keep in mind that porting an application is not just bringing it into Flex Builder 2 or running the Flex 2 compiler on the code. Sure you can fix the syntax errors and the data-typing issues, but are you really taking advantage of what Flex 2 has to offer? Just consider that before doing a port.

Caveat: when you do a port like this, it is essentially a re-write. This means you may introduce new errors.

Continue reading…

If you’ve been anxiously waiting for the finished Flex 2 version of my Flickr PhotoSearch app – I’m almost done.

As many of you know, Macromedia merged with Adobe and we’ve all been learning new things, so my Flickr project has been on hold for a bit. I promise I will get to it this week, in time for the holidays.

Thanks for your patience.

Getting closer now. It is really just finding solutions at this point. For example, the old issue of having one of something is not the same as having an Array of 1 item, bit me. I had to use the ever-trusty ArrayUtil class:

var ac:ArrayCollection = new ArrayCollection(  ArrayUtil.toArray( tags ) );

I spent a number of hours getting the ImageView and ImageInfo screens to work again. I found myself not really looking at the Flex 1.5 version code and just re-coded in the spirit of Flex 2. Sometimes I did reach over for an algorithm or technique, but mostly I just wrote new code. I guess I like typing. When you are thinking of using Flex 2 on an existing Flex 1.5 project, bear in mind that you will have to change code in some places, so approaching the application from a fresh perspective may turn out to be a better strategy in the long run.

Continue reading…

At this point I have a lot more working. Here’s what happened to get to this point.

Recap

Once I was able to receive the XML from Flickr containing the list of photos, I had to give it to the TileList. Then the TileList’s listItemRenderer would take the data and build the URL to display the actual thumbnail image. This turned out to be pretty easy:

1. The Gallery component has a setter for dataProvider which expects an Array. This will be the Array of photo information from Flickr.
2. The Gallery dataProvider setter takes this Array and creates a new ArrayCollection.

   [Bindable]
   public var ac:ArrayCollection;
   ...
   // inside of dataProvider setter:
   ac = new ArrayCollection( ar );
   

3. When the TileList has its dataProvider changed, it causes all of the renderers to receive new dataObjects (the elements of the ArrayCollection).
4. The Thumbnail renderer has an override to the setter for dataObject which causes the Thumbnail to switch to its base state that displays the “Loading” message and hides the image.
5. The dataObject setter also forms the URL for the thumbnail and assigns it to the Image.
6. When the Image complete event triggers, the Thumbnail switches to the image state, displaying the image and hiding the label.

That seems complicated, but the code is pretty clean right now. I know things need to become more complex in the next few days, but for right now, I’m getting to see thumbnails when I enter a tag into the Search Panel.

Continue reading…

I finally got the user interface laid out without having to port any of the Flex 1.5 version files. This was a good thing because it forced me to use the Flex Builder 2 design tools and it made things much easier. The next task is to get the program to connect to Flickr and return some pictures.

As I suspected, it wasn’t going to work right away. The com.macromedia.flickr.Flickr class was by and large fine. Instead of passing in a reference to an HTTPService that was created in the main application, the Flex 2 Flickr class creates an instance of HTTPService in its constructor function. It also used addEventListener to hook up result and fault handlers.

Continue reading…

Once I had the simpler classes compiling, I had to move on to getting the user interface developed. I did not want to just copy the original Flex 1.5 version for several reasons.

• First, I wanted to use Flex Builder 2 to make the components from scratch. I simply wanted the experience of using the design tools.
• Second, I knew there would be some compatability issues and may be lots of errors. I didn’t want to have to solve every error in all the files just to see something working. Imagine if this were an application that had a hundred components. I would have to make sure they all compiled cleanly, then cross my fingers that it would work. I did not want to face that amount of work (and frustration). So I decided the incremental approach was better.
• Finally, there are some new features in Flex 2 that I wanted to use and it would be easier to add them to a clean slate than to retrofit them.

The second point is very important, especially if you are porting a working application. If you copy all of your files and think you can just get the compilation errors removed and it will work, think again. In my first day’s experience I found that I had to make some adjustments in how the application was written. And that was with a handful of files. So I believed it would be best to start over, but to use my already working, Flex 1.5 application, as my base. Many of the functions I wrote would still work and I would not have to re-write everything.

Continue reading…

This section of my blog is devoted to the port of my recent Flickr PhotoSearch with Macromedia Flex application. As of this writing I do not have the app ported to Flex 2, I have just started. I thought it might be good to do a running journal of the effort just so I don’t lose any interesting and useful facts along the way.

First, let me set some expectations. This is Flex 2 Alpha we are talking about. This is not a final product. It may turn out that I redo this effort a couple of times. I’m not even expecting to get through it all now nor have a working app. If it does work, then all the credit goes to the Flex 2 team.

Second, I think most people who have running Flex 1.5 applications will not port them to Flex 2 unless there is a compelling reason. Oh, you may want to add new features to your app once you see what Flex 2 has to offer, but I don’t think you’d take a perfectly good application and port it. Afterall, you can run your Flex 1.5 app in the Flash Player 8.5 and just get a better performing app. My goal here is not a ‘port’ this application, but to enhance it with new Flex features and to take advantage of the improvements Flex 2 offers over Flex 1.5.

With the spirit of Rewrite sitting on my shoulder, I decided to take the plunge.

Continue reading…