Login | Register
Flex Builder 2 - Flashmagazine Review

Flex Builder 2 - Flashmagazine Review

We take a close look at Adobe's new application building software and highlight what's good and bad. Will this be the tool that convinces developers from other camps to finally take the Flash format seriously?

What is it? Application building tool
Platforms: Windows (Mac OSX version around the corner)
Manufacturer: Adobe
Website: http://www.adobe.com/flex/
Price: Full version $ 499.99, $749 with Charting

The Flash community has always been a mixed group, designers, coders, animators, UI Designers, hobbyists and people with other backgrounds as well use Flash. If a tool can be used by such a variety of people, it's kind of like a swiss army knife. Flash has become so versatile that you can use it for almost anything. That's both good and bad. It's been very good for the Flash community. Few other tools have communities with such a diverse background and that shows in what is being produced.

On the other hand - Flash has become difficult to learn for those not into graphic design. Flash can be used as a development tool, but it's really not suited. Ask any professional Flash developer if he uses the script window. 4 out of 5 would say that they prefer to use an external editor that is more powerful. Show Flash to a Java programmer and the most likely response would be "Huh? What's a timeline?". Flex Builder 2 comes to the rescue. Based on the widely used Eclipse editor, it's all of a sudden very approachable to programmers from other camps. Not only does the editor look great, but one can also build applications by just dragging and dropping components on to screens. Using the components in Flex, you can build advanced prototypes much, much faster than anything we've seen before.

Installing


Installing is just as easy as with any other software, just click the installer and follow the directions. One thing should be noted though - when asked to install the Flash Player 9 plugin, you should say Yes to this even if you have the latest version installed. The installer will install the debug version of the Flash Player and that may come in handy later.

The Flex Builder GUI


The Eclipse editor that Flex Builder is built on is highly customizable. The default setup has the project navigator to the left where all your files reside. Below it is the Outline panel that outlines all the visual components in your application. To the right is the context based help panel. Every time you highlight a word in your code, this panel will (most often) display relevant information. The middle part of the screen is also divided in two. The large area is for code and the smaller panel below is for highlighting code errors every time you save your document.

image

The first time you start Flex, the start page greets you as on other Adobe (and Macromedia) software, but this one is pure HTML rather than a SWF. Good move. Some users dismiss this page as unwanted and close it. I wouldn't do that as you will need two of the links on that page quite often to begin with, the Flex Component Explorer and the Flex Style Explorer. These are not linked anywhere in the documentation, so it's nice to have them easily available. If you have removed the start page already, you can always bring it back using the Help menu.

How Flex Builder works


To start off a new project, just choose "New -> Flex Project". This will set up an empty project with the required, empty MXML file. MXML is just XML with a certain structure. When you compile your application, the contents of this XML file is turned into Actionscript 3 classes but this is not something you ever need to think about. It's a beautiful piece of engineering that hides the complexity of building applications. Writing display code can easily take up a big chunk of your development time, but Flex changes this.

Next, you'll probably switch to design mode. This brings up the components panel from where you can drag and drop all the components you are used to from Flash plus several new ones. You have Buttons, Labels, Lists, Datagrid, Texarea, Colorpicker, Sliders, Stepper, Treeview, Media playback, Progress bar, a Rich Text Editor and more in the Controls folder. In the Layout folder you have Grids, Rulers, Split-boxes, Forms, Panels and more. Under Navigators you have Menus and Views such as the ViewStack and Accordion and if you opted for the extra Charts-package you have a nice selection of those as well.

These components are so well built that they will save you countless hours if you can use them rather than making your own. Speaking of that - making your own components is also really easy using Flex. There's a good tutorial that shows you how to do just that and once made, these become available with the other components in a Custom folder.

Once you have all your assets on stage, it's time to switch back to Source-mode again to tie them together. The data binding in Flex is awesome. Just assign every visual asset an ID and you can target them with data. The simplest way to add a data source is to use XML or a webservice. If what you are making supports one of these, you'll be up and running in no time. Make a new WebService, write a request with the required data and trigger the service either when a button is pressed or the application initializes. If you did everything correct, the next thing you'll do is tie the data to components. Getting it right can be a bit hard at times (see Working with external data) but we assume this gets easier the more you do it.

Tying data to your components is a snap. Let's say you pull down some data from a database of employees and want to show it in a datagrid that we gave the ID "myGrid". If the webservice was called "myWebService", you just set the grids dataprovider to be the "lastResult" from the webservice like this:

<mx:DataGrid id="myGrid" dataProvider="{myWebservice.getEmployees.lastResult.emloyee}" > 



If the data returned from the webservice is properly structured, the grid will now fill up with a list of employees. If we want to display details about the employee when a line in the datagrid is clicked on, we just tie the data of the grids "selectedItem" to a display component such as a textarea:

<mx:TextArea id="myDetails" htmlText="{myGrid.selectedItem.details}" >



This process is really streamlined and I can't think of many easier ways to do this. If the data structure needs adjustments, this is also fairly easy. The components come with many nice utility functions such as the labelFunction and custom cell renderers that allow you to change the appearance of data displayed.

image

One good example of this is the Treeview. In Flash 8, the V2 treeview component was rather limited. Several coders solved these shortcomings and some of them put the solutions out in either the public domain or sold them as components or extension classes. In Flex, these shortcomings have been adressed. As an example, all list controls now supports drag and drop operations by just setting flags for dragEnabled and dropEnabled. Using the Drag and Drop Manager, you can drag items from a treeview into a grid and catch this using events.

Building advanced GUIs in a Flash


Prototyping with the Flex components is a blast. Screens was introduced in Flash MX2004 but never took off. They were sluggish and non-intuitive to use. In Flex Builder 2, this is a completely different story. Designing big, multi-screen applications is fast and switching between screens is easy to implement with transitions and effects. Flex 2 brings massive possibilities to Flash application developers, especially when it comes to saving time.

Validation of input data is a great example. If you needed to validate user input in Flash, you had to write this yourself. Once made, you could probably re-use that class, but validation is often an afterthought for small projects. In Flex, it's super-easy to validate the contents of a input field. To validate the contents of the textField "myEmail", you just make a new validator using the built in email validation:

<mx:EmailValidator id="myEmailValidator" source="{myEmail}" property="text" >



If someone types a faulty address in this field, the field itself will show an error that can easily be customized as well.

image

Flex comes with validators for creditcards, currencies, dates, email, numbers, phone numbers and many more. Using these classes as examples, you can easily make your own validators as well. Another great timesaver is that all Flex Builder 2 projects gets a preloader automatically. It's just built in to ensure that nothing is executed untill all assets are available.

image

One of the bigger applications I've made is a full blown CMS done in Flash 8. I don't remember the exact time I spent on the GUI for this, but I'd guess that I used about 40 hours. As a test, I re-did this using Flex and I was finished after only 1,5 hours. That's fast prototyping! Another thing - the resulting MXML file was only 40 lines of code so Flex sure hides the complexity of UI design. Dragging and dropping components is easy to learn. To learn how to use all the possibilities they all offer is a bit harder.

Endless possibilities (and learning curve)


In Flash 8, you had about 40 options in the context sensitive help for a combobox component. In In Flex there is more than 200 properties and events for just that component alone. Having all these properties and events for a plain combobox is certainly great, but it can definetly intimidate a user that is new to Flex.

My first thought was "how am I gonna get my head around all those new possibilities?". I guess I'll just have to use more time with Flex to be able to fully learn what is possible. My only problem is that I have had so much to do the latest years that I still have a lot learning to do with Flash 8. If Adobe keeps pumping out new technology at this speed, they'll make us all feel like noobs unless we spend all our spare time learning the latest. In just 3-4 months, Adobe will publish yet another big app framework for us to get our head around: Apollo. Apollo can do everything Flex can plus PDF, HTML and OS interaction. By that time, I'll really feel that I'm lagging behind.

Working with external data


The single thing I've spent the most time on with Flex is working with data from XML or WebServices. The theory is simple and so are the examples provided. As soon as you go beyond the basics you're on your own. The Help files provided are good, but a little insufficient when you're building large applications. One of the first things I tried doing was connecting real data to our CMSs treeview. The CMS uses a XML structure that is formatted as nodes with labels and values so I thought I was ready to go. I was wrong. The Treeview refused to display anything but the first node.

Being a noob at Flex, I went looking for answers in all the wrong places. I thought it had to be something wrong with the XML since it wasn't displayed directly (it was after all formatted correctly) so I went through XMLList, XMLListCollection and even making a custom ITreeDataDescriptor. After a lot of fumbling I stumbled upon the resultFormat setting. For some reason, setting this to "e4x" would display something in the tree - it displayed the correct XML as the label for every node in the tree but it also included every child node. This looked mighty messy.

Here's the odd part: if you set resultFormat to e4x, you have to specify a "labelField"? This in mentioned at the very bottom of the ninth search result for "labelField" in the built-in help. It took me forever to find that information and this is just one example. In the time I've used Flex, I've had several problems like this one. The information is in the help files somewhere, but it can take a long time to find it. Until more people stumble upon similar issues, you won't find the answers on the web either.

Structuring code


Flex Builder 2 shines when it comes to separating display and logic. Every component you make can be made self contained with code and components in separate files. It really lends itself to building big, structured applications. If your application is complex or big, frameworks such as Cairngorm and ARP can help you make apps that are maintainable, easy to understand for others and based on best practices. Using a framework is often overkill, so the size of your application will tell if it is worth the investment.

What are these frameworks? According to the ARP site, "ARP is not a component or utility library. It is a structural framework and methodology. Using ARP will not guarantee that you will create usable user interfaces or even usable applications". Learning a framework can take some time for the uninitiated, but if you are about to embark on a big Flex project, you should probably check out both and see if they can help you. Odds are that they can.

Publish Application Source


Adobe want Flex to spread fast and what helped the Flash community expand was the sharing of code on sites such as Flashkit, Were-here and Ultrashock. In Flex, it's easy to share your code. Just select Project -> Publish Application Source to select the files you want to share and also build a ZIP file with all files. This will add an attribute in your application tag named "viewSourceURL" containing the path to the files. When users right-click your application with this tag present, they will now see a menu entry named "View source" in the right-click menu of your SWF. Clicking the menu will open a set of HTML files that will present your code in a professional way, with a Flash-based treeview with links to the files and the Flex download site.

The tutorials


The tutorials in Flex 2 are good and explain all the basic features, but some contain bugs or do not work unless you tweak them. The worst example is maybe the debugging example. It is supposed to fail so that you can learn how to use the debugger, but for some reason it does not. Another thing is that these tutorials only touch the icing of the cake, so you better head to sites such as Community Flex, Adobe's Devnet or Actionscript.org's Flex 2 forums if you want to learn more.

Brilliant resources such as the Flex 2 Components Explorer is not even linked in the documentation, only from the Flex Start page. The samples in the Flex 2 Components Explorer are sometimes better than what is in the documentation so why not link to it where it is needed? The same goes for the Flex 2 Style Explorer.

The negative things


There are some issues with the Flex documentation. In general, it's written in a too technical manner and assumes a rather high level of knowledge about a tool you have just started to use. The help files are organized as Javadocs so for users with a Flash background, it's important to know that every help page in the Flex 2 Language Reference has an examples section at the bottom. It's easy to miss the link to them at the top of each file. When you access the help files from the Help panel, only the related page is shown. There's no TOC telling you where in the help files you are so this can be a bit confusing. To see the TOC, you have to open the Help files from the main Help menu.

When I click through the tutorials, the TOC does not update as in Flash 8 and former Macromedia products. When following an inline link in the documentation, you never know how to find it again later using the TOC. You can read the path at the top navbar but it's inconvenient. This is not a big issue, but it would certainly be helpful.

- The search function will search and present the results with percentages telling what documents best matched your search. If you search for "lastResult", more than 30 results will be presented. It looks as the weighting of the results does not actually match how well these pages can solve your problem, but rather how often that word is mentioned. In many cases, this will lead you to a good result, but in many cases it will not. In most cases, you are likely to find the answer further down the list. I guess this is subjective, but I felt that I got better matches when searching in Flash 8. There I could easily just close all the mentions from Tutorials, Using Flash and the learning section and go straight to the class definition in the AS2 Language Reference. I guess I'll get used to automatically picking the correct entry in Flex as well, but it's taking a little more time than I expected.

- For a user that is new to Eclipse, several of the conventions in the UI are new and a quick intro to these would not have been a waste of money. Shortcuts for e.g. duplicating a line of code, commenting a code block or inserting premade code snippets are there, but not where I expected. Other IDE's that are less capable than Eclipse has menu entries showing every possible command and shortcut. The menus in Flex are really tidy, so to find the shortcuts that will make you more productive, you must choose Help -> Key Assist. this will open up an alphabetical list with all the shortcuts. Control + Shift + L is a good shortcut to learn right at once - it's the shortcut to show Key Assist so that you can look up the other shortcuts.

- Since the debugger tutorial contained no faults (as it should have), I wrote some errors into the sample myself to try out Flex debugging. Flex Builder then complained about not having the debug player installed. After some digging I found this technote where it says this only happens "under certain circumstances if you installed the standard Flash Player, version 9.0.16.0 or higher, from the Adobe download site and later installed Flex Builder 2, or you installed Flex Builder 2 and then updated the Flash Player to standard Flash Player 9.0.16.0 or higher from the Adobe download site". Let's hope (for Adobe's sake) that those who experience this issue dont' give up too easy and sooner or later stuble upon this technote?

- When I create a new WebService, I manually have to type everything in the details of each request. This shouldn't be required in 2006. Flex 1 had this feature. Some of the point about webservices is that they are self describing. You point your tool to the WDSL and it returns the complete description of how to call it with all the required fields. In Flash 8, the webservice connector downloads the description and all you do is fill in the values. In Flex, you have to type in both values and definition, a tedious process with a big potential for errors.

In my case, I picked the open API from Commission Junction, a popular affiliate network. Their docs are somewhat outdated and several of the required parameters had faulty names. The WSDL is however always updated so rather than me entering 15 parameter tags manually based on what's in the docs, I'd love to have Flex Builder pull down the list of these from the server and insert them in the MXML to make my life easier. Let's hope this is added in the first update.

- If I have Eclipse set up on my machine already for Java development, I probably would be hesitant to install Flex Builder 2. Unless Adobe has figured some smart way to keep all existing settings and plugins, this will need some work. I guess that one can always run two instances of Eclipse at the same time, but it would be great if one only needed one. My current Eclipse installation that I use for some lightweight Java/jBoss editing requires more than 400Mb of RAM so I'd rather run just one installation. Plenty of RAM is a must for using Eclipse.

I haven't exactly used Flex Builder every day, but it worries me a little that I found a bug in the treeview component after only one day of testing. For the treeview, the hScrollPolicy is defect. horizontalScrollPolicy is supposedly set to "auto" by default, but the only way to display it is to turn it on permanently? I hope not to run into too many component issues in the months to come. I feel that I've had my share of those with the V1 and V2 components in Flash.

Stability


Flex is based on Eclipse and on a fast machine with a decent amout of RAM, it runs smooth and the software is stable. I use a MacBook Pro at work and Flex Builder is slow, but workable under Parallels, so I look forward to testing the Mac version of Flex Builder 2.

While testing I had some issues that probably was caused by me not removing Flex Builder 2 Beta 3 before installing the retail version. I had Flex Builder running and had just downloaded a MXML sample file. I clicked the MXML file to view it in Flex, but for some reason the MXML file was not associated with Flex so I had to browse my way to the app manually. When I did this, Flex Builder crashed after trying to open up another instance of itself. I tried various ways of getting it up and running, but all I got was an error message that pointed me to a log file with 20kb of text that contained Java errors. This is probably understandable to Java wizards, but to me there was no other option than uninstalling both Flex installations and reinstalling.

image

After doing this, I redefined my Flex Project and thought I was ready to go. I was not. When I then tried recompiling I got an error I have not seen since Windows 95: "There is no disk in the drive. Please insert a disk into drive ." (notice the missing drive letter?) The dialogue had three buttons and no matter which I clicked, the same dialogue returned in a non-disruptable loop. The only way to exit was to restart Flex. This fixed itself and I do not know how. Since then, I've not had any problems.

Conclusion


I really like Flex and I'm quite sure that Adobe may reach their goal of one million Flex developers in the not so distant future. Eclipse is a good editor, so I have nothing against it other than the fact that it can feel a bit sluggish at times and that the OS integration could be better. What do I mean about OS integration? If you drop a FLA file on the Flash icon, it will be opened. You cannot open a MXML file by dropping it into Flex builder and if you double click a MXML file, it will try to open it using another instance of Flex Builder rather than opening it in the currently open instance. To open MXML files, you have to use the File -> Open command. This is however normal for any Java based tool and most developers learn to live with their tools and their downsides. In this case, the positive far outweighs the few negative sides.

Flex Builder 2 is a great application for building Web Applications. The components are heaps better than what Flash 8 offers and Design mode is brilliant for newcomers. Most developers will probably quit using Design mode once they learn the syntax, but it's a very rapid way to build complex application designs. My daily job is often to make games, mini-sites or banners so I'll keep using Flash for most of these smaller tasks. Flash Player 9 has been adopted faster than any other player, so I can already start using Flex for developing games. That way I can get the speed of the new Flash Player 9 and get to play with AS3. For any small project with a tight deadline, I'll stick to using Flash.

Another point is that if file size matters, use Flash. The Flex Builder 2 components shine in terms of capabilities, but the features come at the price of filesize. Using them will produce bigger files than if you did it from scratch using Flash. The UI for the CMS that I mentioned earlier in this article became almost 300Kb using Flex, but it's only 150Kb when done in Flash. For an application such as a CMS this really isn't much but for small online applications, size may matter. Adobe is aware of this difference and have just recently employed Grant Skinner to produce a lightweight component set for Flash 9 that is easily skinnable. That's definitely the right thing to do. Grant is also working on other things such as integrating Flex and Flash 9 to make it easier for designers and coders to work together.

When to use Flex and when to use Flash then? Jesse Warden has a great writeup on this. I dunno what it is, but I instantly got a good feeling once I started using Flex Builder 2. Every day has offered a new "wow"-experience about how much more time I'd have to spend in Flash 8 to do something similar. That said, I'll be learning Flex for a long time ahead. So much to learn, so little time, but I already look forward to creating my first big application using Flex Builder 2. It's a great tool!

Click here to download the Trial Version or read more about Flex
or click here to order Flex Builder 2

 

About Jens C Brynildsen

Jens has been working with Flash since version 3 came out. Since then, he's been an active member of the Flash community. He's created more than a hundred Flash games (thus the name of his blog) but he also creates web/standalone applications, does workshops and other consulting. He loves playing with new technology and he is convinced that the moment you stop learning you die (creatively speaking). Jens is also the Editor of this website.

Next review:
ToonBoom StoryBoard review

Previous review:
FlashDevelop 2.0

Get new stories first

Click to follow us on Twitter!

 

Comments

No comments for this page.

Submit a comment

Only registered members can comment. Click here to login or here to register