Day 1: The Port Begins

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.


My plan of attack is to start at the bottom and work up. Afterall, I have to get the classes that are used throughout the application to compile before I can get the rest to work. So I brought over the com.macromedia.flickr.* files – the package in Flex 2/ActionScript 3.0 terms.

Even with my careful planning of putting ‘public’ and ‘private’ before all of my methods and variables and with data-typing everything there were some issues to resolve.

  • I didn’t data-type everything as it turns out. Some little things slipped by me.
  • I had to change every undefined to null. I personally like undefined. It means something to me. A variable that is set to null has a value. But what can I do?
  • Of course I had to use the package syntax in the files. Could not have done that in Flex 1.5.
  • And then there were the Events. Those I had not data-typed and now, not only did I have to select a data-type, I also had to fix my quick syntax of dispatch( {type:"click"} ) to use a real Event class as the argument to dispatchEvent.

Data-typing

Using data-types is a good thing. Your code is more readable, the code executes faster, and errors can be found sooner. Plus you can alway use Object if you aren’t sure. This is especially true if you have a dynamic object – one that gets new properties or members at runtime. For example:

var test:Object = new Object();
test.firstName = "Peter";

That is perfectly acceptable in ActionScript 3.

Numbers are another matter. In AS3 you now have int and uint. There may also be floating point data-types, too; I haven’t looked them up yet. But the Number type is still there and should be used for values which will exceed the capacity of int and uint. What that means is something simple like:

for( var i:Number=0; i < dp.length; i++) { /* do something */ }

should now be changed to:

for( var i:int=0; i < dp.length; i++) { /* do something */ }

and the loop will run much faster.

I retained the Number type for use in the MD5 class because the produces very large integers during the encoding process.

Events

The com.macromedia.flickr.Flickr class was the biggest challenge. The Flickr class in Flex 1.5 extended UIObject so I could easily dispatch events. For Flex 2, I have the class extending EventDispatcher. That gets me the functions (dispatchEvent, addEventListener, etc.), but I still need events.

In the Flex 1.5 version, I just dispatched events without thinking about them. For example, when there is a failure from Flicker, I just dispatched a “fail” event with the Flickr code and message. For others, I just dispatched a simple event with a type. Cannot do this so easily in Flex 2.

So I decided to embrace the Event system and created a FlickrEvent class which extends the flash.events.Event class. I made the constructor of my class take 4 arguments and made 3 of them have default values:

package com.macromedia.flickr {
class FlickrEvent extends flash.events.Event {
public function FlickrEvent( type:String, data:Object=null, code:Number=-1, msg:String=null ) {
super(type); // there are other arguments to this which I'm sure I will use in the near future.
this.data = data;
this.code = code;
this.msg = msg;
}
// data definitions here
}

Now I can easily dispatch events from the Flickr class:

dispatchEvent( new FlickrEvent("authorized") );
dispatchEvent( new FlickrEvent("photos",photos) );
dispatchEvent( new FlickrEvent("fail", null, rsp.code, rsp.msg) );

HTTPService

Along with events was how to use HTTPService in Flex 2. Turns out there isn’t much difference, but there is a new way to use it. First, you can still use the MXML tag. But now you can create instances of HTTPService from ActionScript. This is really how I wanted to use it in the Flickr class anyway. In the Flex 1.5 version, it was awkward to declare the HTTPService as an MXML tag and then pass a reference to it to the Flickr class which is the place it was being used. Now in the Flex 2 version, the Flickr class creates an instance of HTTPService and everything is nicely encapsulated.

getURL

If you didn’t know it, getURL is history in Flex 2. The Flex 2 documentation tells you why. All I had to do was change over to navigateToURL and include an import statement to find it. Oh, and use the URLRequest on the URL string. But that was all.

Flex Builder 2 Quirks

I’ve found Flex Builder 2 to be quite stable and pretty quick. Except for the following things:

  • It can take a long time to build the project when you save a file. I eventually turned the automatic build off. Now I realize Flex Builder is not optimized or tuned yet, so I’m not complaining.
  • Double-clicking does not select what I want. For example, if I have event.type and I double-click the mouse over “type” it selects “event.type”. If I have _style and I double-click the mouse over it, Flex Builder selects just “style” and not the preceeding underscore. May be there is a settng for this, but any code editor ought to know the rules of variable names.
  • Not everything is documented. Again, Flex 2 is now in Alpha, so I shouldn’t complain. But it is a little frustrating trying to figure out where some class is and how to use it.

Conclusion

In this phase of the port, the Flickr class has undergone the most change. It now contains its own instance of HTTPService, throws its own events, and should work like a charm. I hope.

That’s all I have for this entry. At this point the base classes have been ported and compile cleanly. Now it is time to build the UI.