Flash Builder 4.5 Software Review: Mobile Apps, New Spark Components, and Increased Coding Productivity

DZone 's Guide to

Flash Builder 4.5 Software Review: Mobile Apps, New Spark Components, and Increased Coding Productivity

· Web Dev Zone ·
Free Resource

In 2007 I was first introduced to Flex Builder 2.0. Now, 4 years later I'm testing out the newly released Adobe Flash Builder 4.5. There are numerous new features and improvements included in this release that I will discuss below. Probably the most exciting news is the support for developing applications for mobile and touch screen devices. So now Flash Builder allows us to develop applications for the web, for the desktop (AIR), and for smart phones and tablets! Along with the mobile application development there have also been significant improvements made in Flash Builder 4.5 to help increase coding productivity. This is great news since many of us earn a living developing software in Flex, so more productivity never hurts! Lastly there are quite a few new Spark components introduced in this release. Many of them you will be familiar with from the Flex 3 MX component set.

Developing Mobile Applications

There is a lot of hype around mobile apps these days. It seems like almost everyone has a smart phone or a tablet. And so it is no surprise that Flash Builder 4.5 comes loaded with tools to help developers make applications for mobile devices and tablets (touch screens).

In Flex 4.5 there is support for building mobile apps that run natively on Google Android.  With an update in June, Flex 4.5 will also support Flex projects for building apps on Apple iOS and the BlackBerry Tablet OS. To create mobile applications there are two new project types in Flash Builder - Flex Mobile Project and ActionScript Mobile Project (iOS, Android, and BB tablet are already supported as ActionScript projects). When creating a new mobile project you are asked to choose the target platform. Many of the existing Flex components like Button, Label, TextInput, and List have been optimized for mobile phones and touch screen devices. This is great because it means you can continue using the same Flex components that you're already familiar with. The only thing to keep in mind is that performance is much more important on smart phones. So as developers we have to be more aware of which components we can or should use, and which we should avoid. There are many good articles already written on the subject, so if mobile application development is something you're interested in I would recommend you do a little more reading.

Coding Productivity

Flash Builder 4.5 introduces a very handy new feature called Code Templates, something that many developers are eagerly anticipating. Code Templates have been around for a while in Eclipse Java development, but are probably new to Flex developers (unless you've used the SourceMate plug-in which provided a very similar service for Flash Builder 4.0). Templates are a great way to speed up development by letting you quickly insert frequently used snippets of code just by typing a few letters. Each template has an associated name which is what you type into the editor. Then the CTRL+Space content assist shortcut key is used to trigger the insertion of the template code.

Code templates can be configured in the Flash Builder preferences, under Flash Builder > Editors > Code Templates (see the screenshot).

The templates are divided into 3 types:

  • ActionScript
  • CSS
  • MXML

As the name suggests ActionScript templates contain ActionScript code snippets, and are inserted into .as files as well as inside <fx:Script> blocks. MXML templates contain mxml code (xml tags) and are inserted inside .mxml files. CSS templates contain snippets of CSS and are inserted in .css files or inside <fx:Style> tags.

There are many default templates that ship with Flash Builder 4.5, but you can also add your own custom ones. One of the simplest code template examples is the for loop, and it is also one of the most useful. Instead of having to type out the full syntax of a for loop or a for each loop, you can now just type "fori" or "fore" into the editor and press CTRL+Space (Command+Space on a Mac) and Flash Builder will insert the following code (the fore template):

Flash Builder is smart enough to detect that you most likely wanted to iterate through the items Array. You'll notice that i, type, and items are editable, press tab to cycle between the fields. You'll find this fore template listed in the ActionScript section of the code template preferences.

MXML code templates are very similar but they contain mxml code instead of ActionScript. For example if you wanted to add a Spark Button to your application you can now type "button" and then CTLR+Space and the following text will be inserted into the editor:

Here is a few of my favorite custom templates:

I highly recommend that you become familiar with code templates, they are very powerful and can save you a lot of time.

The next really useful feature in Flash Builder 4.5 is Quick Assists. Again this functionality might be new to Flex developers, but is something that has been in Eclipse Java development for a while.

The global hot key for using Quick Assists is CTRL+1 (or Command+1 on the Mac). Quick Assists let you perform many tasks such as generating the getter/setter functions for a variable, fixing errors, and automatically generating new functions, classes, and event handlers.

For example if you wanted to add an event listener for when the application has finished loading you could type in the following:

With your mouse cursor positioned inside the appCompleteEventHandler text as shown, press CTRL+1 and you should see a similar drop down menu. If you choose the "Generate event handler" option, Flash Builder will insert a new event handler function right below the current function:

protected function appCompleteHandler(event:FlexEvent):void {
    // TODO Auto-generated method stub 

There are many new code generation tools available in Flash Builder 4.5 that can save developers a ton of time. If you enjoy typing out every character then go for it! But if not then why not take advantage of these great new features and speed up development?

New Spark Components

Along with the usual performance improvements expected in most releases, there are some new Spark components in Flex 4.5. Pretty much all of the important Flex 3 MX components have now be redesigned and architected to fit the Spark model:

  • DataGrid
  • Form
  • Image (as well as improvements to BitmapImage)
  • Formatters & Validators

The DataGrid was one of the most used components in Flex 3, and I know many developers were disappointed that the Spark DataGrid didn't make it into the Flex 4.0 SDK. But it is also one of the most complicated controls so it is better to have it later and designed properly.

The Spark Form provides the same service that the old MX Form did, but also has many improvements to support different layouts and skinning.

The new Spark Image class is more heavy weight than the existing BitmapImage, but supports skinning. Both the Spark Image and the BitmapImage classes allow loading of remote images.
And finally, Flash Builder 4.5 contains new formatters (NumberFormatter, CurrencyFormatter, and DateTimeFormatter) and validators (NumberValidator and CurrencyValidator).

Flex + PHP Development

One final bit of news that I wanted to pass along is the new alternate edition of Flash Builder 4.5 that comes integrated with Eclipse PHP Development Tools (specifically Zend Studio 8). The combination of the Zend Studio and Flash Builder makes for a great way to develop PHP web apps that load Flex SWFs or Flex projects that use AMFPHP. More information about the Flash Builder PHP integration can be found here.

These enhancements, integrations, and new features in Flash Builder 4.5 make it a very powerful tool for developing all kinds of Flex Applications. It continues to evolve and improve over the years and is definitely worth checking out now that it has been released.



Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}