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.

screenshot.jpg 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.

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.

In the meantime, have fun!

17 Responses to Day 6: Finished Product

  1. stef says:

    thank you so much for this. great work to learn from 🙂 STEF

  2. Awesome! Thanks you for putting this together, your detailed write-ups and analysis and making the source available for everyone!

    I believe I have found a minor bug. When you try to add an image to your favorite list by clicking the “add to favorites” button you will get an error if the Favorites list has not been previously initialized by first dragging a picture into it. It works fine if you drag a picture, delete it, and then use the button.

  3. Peter Ent says:

    Thanks Adam. I should have pointed out in the article that one of the issues when doing a “port” where you re-write some or all of the code is that it is prone to introducing new bugs. I’ll look into this.

  4. Jose Lora says:

    Hi Peter, I’m using the latest engineering build and I got this error:

    can’t be resolved to a component implementation. SearchPanel.mxml Flickr/ui line 130

    any ideas on how to fixit? I couldn’t find anything on the Docs

    Thanks

  5. Tim says:

    Hi Peter,

    I am looking for a framework to use for Flex2. Would the existing Cairngorm or Ariaware work for Flex2. If not, what type of architecture would you recommend.

    Cheers,

    Tim

  6. Peter Ent says:

    I can’t recommend a framework at this time because none, as far as I know, exist for Flex 2 yet – it is still pretty early. You should probably post your question to the Flex 2 forum(s) or Flexcoders.

  7. orant says:

    Hi Peter

    Could I ask you a question?
    I want to implement these function: when main.mxml initialize,it create children(mainpanel,childpanel),if I click the mainpanel’s Button ,it produce a String,then the String are sent to childpanel,how can I implement?

    Thank you very much.

    main.mxml

    HistoryPanel:

    NewPanel

  8. paolo says:

    I have a question that has nothing to do with your example but Im sure that you can help me.

    Im working on a project with flex 2 using 3 frames.
    On one frame I have a data grid that gets the data from a query. Now on the second frame I would like to get the same information from the same query.
    How can I do this???

    Thank you for your help

    Paolo

  9. Seb says:

    Hi Peter,

    Hi do not find the link to get the ZIP file to import this sample to the flex workspace…

    Thanks

    Seb

  10. Tim Abbott says:

    Hello Peter,

    Awesome work!!! Where’s the source for the post. I really want to take a look at it.

    Thanks

  11. James says:

    Peter — I am getting seemingly endless Actionscript errors when I try to launch the application above. I didn’t capture all of them, but here’s the first nine:

    “VerifyError: Error #1042: Not an ABC file. major_version=46 minor_version=14

    ReferenceError: Error #1065: Variable _Main_mx_managers_SystemManager is not defined

    VerifyError: Error #1042: Not an ABC file. major_version=46 minor_version=14

    ReferenceError: Error #1065: Variable Main__embed_css_Assets_swf_mx_skins_cursor_DragCopy_1291318819 is not defined

    ReferenceError: Error #1065: Variable ImageViewer__embed_mxml_assets_favorites_icon_gif_343972444 is not defined

    ReferenceError: Error #1065: Variable Main__embed_css_Assets_swf_cursorStretch_1265171636 is not defined

    ReferenceError: Error #1065: Variable Main__embed_css_Assets_swf_mx_skins_cursor_VBoxDivider_1558936548 is not defined

    ReferenceError: Error #1065: Variable Main__embed_css_Assets_swf_mx_skins_cursor_HBoxDivider_1436201562 is not defined

    ReferenceError: Error #1065: Variable Main__embed_css_Assets_swf_CloseButtonOver_1711855227 is not defined”

    I’m running the Beta 1 of Flex 2. Would running Beta 2 make any difference here? RSVP — and thanks.

    James

  12. Chris says:

    I get the same errors, Flex B2 on IE and FFox… and it’s a month later then the previous post… this *used* to work for me…?

  13. Peter Ent says:

    The code as posted will not for Flex 2 Beta 2.

    This same application is available on the labs.adobe.com showcase site, but re-worked for Flex 2.

    I will add details to the article itself.

  14. Tom Schober says:

    Peter,

    I can’t find a blog post about your most recent functional version of PhotoSearch, so I’ll post here:

    PhotoSearch is at http://www.keaura.com/photosearch/index.html

    I discovered a bug while using it and drilled down to the exact problem.

    In the handleSearchComplete function of FlickrMain.mxml, the problem with casting data.photo as an ArrayCollection is that when only one photo is returned from the Flickr service, its type is actually mx.utils.ObjectProxy. So (data.photo as ArrayCollection) evaluates to null and the .toArray() method will throw a “Error #1009: Cannot access a property or method of a null object reference”.

    Thins ONLY happens when ONE photo is returned from a search.

    At first glance a possible fix would be something like:

    if (data.photo is ArrayCollection){
    gallery.photos = (data.photo as ArrayCollection).toArray();
    }
    else{
    var tempArrayCollection : ArrayCollection;
    tempArrayCollection.addItem(photo);
    gallery.photos = tempArrayCollection.toArray();
    }

    Sincerely,
    Tom Schober

  15. Peter Ent says:

    Thanks, Tom. There is a quicker solution:

    gallery.photos = mx.utils.ArrayUtil.toArray(data.photo);

    I have to look at the source to be certain, but using ArrayUtil can get you out of a jam like this.

  16. ReferenceError: Error #1065 is usually caused by not declaring a class public. Here is more info.

  17. Bhavini Parmar says:

    I just wanted to say thank you very much for making this project available. I am a student in my final year, and am developing a website for my dissertation in which I wanted almost exactly the same function as that of the photosharing app, except I would like to add the function of allowing users to tag photos….do you think that is possible?

    So thank you very much!
    ——————–
    Peter: The ability to tag photos is something Flickr can do. You will have to add code this project to make that possible. Consult the Flickr API for details.