Helping customers be successful with Adobe Flex and LiveCycle Mosaic

Day 6: Finished Product

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.

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.

The Flex 2 Code

Before you download this code, you must have the Flex 2 Alpha 1 installed. You must have the Flash Player 8.5 or this will not work.

Bear in mind this is the first public Alpha version of this software. Neither Flex Builder 2, Flex Framework 2, nor the Flash Player 8.5 have been optimized or tuned. While you may think the resulting SWF is large, just keep those facts in mind.

Flex 2 Update – Feb 1 2006
The source is no longer available from this entry. Instead, go to the Adobe Labs showcase page, run the Flickr PhotoSearch application and right-click on it to View the source.

PhotoSearch in Flex 2

Here’s a brief list of what’s different between the two versions:

There is no need for a Flickr account – anyone can use this application. That’s not a Flex 2 issue because I realized I did not need that requirement. Perhaps a later version will need authentication, but now you do not.

Drag and drop to the Trashcan does not work correctly. It is because I cannot tell where the data is coming from – the Gallery, the Search History, or Favorites. I believe this will be rectified in the future. In the meantime, you can drag things from Search History and Favorites to the Trashcan where they will be discarded. But you can also drag Thumbnails from the Gallery to the Trashcan (it will not really delete the images from Flickr!) and you can duplicate images in Favorites. These last two things you should not be able to do, but you are not prevented from doing it right now.

There is no Progress Bar because I could not figure out how to make the Gallery into a source for the Progress Bar. I decided not to spend too much time on this because it was not important.

I used a TileList with the Thumbnail as a renderer versus using a Tile container and the Thumbnail as a child. To the end-user there is no visual difference. But I believe the application is now simpler.

I used States in a number of places: the main application (welcome vs. running), Thumbnails (loading vs. image), SearchPanel (normal vs. advanced options), ImageViewer (loading vs. image), and even the Trashcan has multiple states.

There is more “code” in this Flex 2 version because I created a couple more classes, such as the SearchEvent class. I could have done that with the Flex 1.5, but Flex 2 encourages you to do this.

Flex 2 Differences

This is not meant to be an exhaustive list of the differences between Flex 1.5 and Flex 2. In fact, if I were to port another application I’m certain I would uncover other differences simply because I was following a different path. These items are in no particular order.

Data typing. You must data-type every variable now. This not only makes the code run faster, but you will also uncover errors sooner.

Runtime errors. Before Flash Player 8.5, errors during the execution of the SWF went unsaid. For example, if you simply said x += 5 without defining x you would not get a warning and the variable would assume to be undefined. In Flash Player 8.5 you will get a runtime error. Sometimes these unspoken errors were deliberately coded (I know I used that fact), but if they were not it could become difficult to find the error.

Packages. Formal packages are now introduced in ActionScript 3. You can see this in the com.macromedia.flickr package in this project.

Eclipse. Almost without saying, Eclipse is the base for the new Flex Builder 2. Java developers will find this a familiar environment. Flex Builder 2 is offered (or will be) in two flavors: a standalone version and a plug-in version if you already use an Eclipse environment.

Cell renderering. It is now much, much easier to make renderers for lists of all sorts. Most Flex classes now implement the DataObject interface and include a dataObject property which is set when the class is used as a cell renderer. The dataObject contains the current record for which the renderer is being used.

Cell editing. This project did not use any cell editors, but they are worth mentioning. In Flex 1.5 you had only a cell renderer. In Flex 2, editing a cell is different from rendering a cell. For example, if you have a Boolean value for a cell, you can render it as “Yes” and “No” while editing it with the CheckBox derivitive.

States. The idea of a State is simple: the user interface has a different appearance in each state is may be used. The SearchPanel is a good example. It has a normal state which shows just the TextInput and button for doing a search. But there is also an “advanced” button which changes the State and causes more controls to appear. Now you can certainly do this would states (just look at the Flex 1.5 version of this code), but having all of the controls appear and disappear just by changing a variable makes it easy and reliable.

Collections. Arrays should not be used as dataProviders for List (or Tree) classes unless you are happy with 1-time binding. Collections (such as ArrayCollection) now implement the proper ChangeEvent code.

Bindable. In Flex 1.5 all variables were automatically flagged as bindable. In Flex 2 you must flag a variable using the compiler directive, [Bindable], immediately above the variable declaration.

Import. You’ll find you need to import more classes than before. That’s because a number of classes that were included by default are no longer brought into the SWF. You will need to understand and use the import statement.

Events. Flex (and Flash) are event driven. This is even more apparent in Flex 2/ActionScript 3. Many of the classes now dispatch very specific event types. For example, the ListEvent, is dispatched by the list-bases classes. Before you could just dispatch an Object and add whatever values you like. Now the dispatchEvent function demands that its first argument be derived from the base Event class, making it impossible (or at lease, very hard) to do this.

Event Model. The event model is a bit more complex now. For example, you can have events bubble up from lower classes without having to make all of the intervening classes pass them on. You can see this in the events dispatched by the ImageInfo class.

Alphas and Scale. In Flex 2, the values for Alpha are 0 to 1 (not 0 to 100) and scale works the same way.

Layout Constraints. New to Flex 2 are layoutConstraints. When using a Canvas container you can specify how UI components are positioned relative to the Canvas’ side in addition to or in place of their (x,y) location.

I’m sure there are obvious things I’m forgetting.

Conclusion

Don’t port a perfectly good Flex 1.5 just to bring it into Flex 2. There is effort involved. It is certainly a good learning exercise, but to just fix compliation and link errors will not teach you anything. You need to sit down with Flex 2 and understand what it is capable of.

I’m very pleased with my approach – I used my Flex 1.5 version as a guide, but re-coded the UI and ported the AS classes. I also added classes, specifically events, to fill in the missing pieces.

While the application has a few issues, it is a useable application that demonstrates some of the new features of Flex 2. Remember, this is Alpha software and with that are no guarantees that this is the final code. New functions may come along in the future and whole classes may be dropped.