Prerequisite Knowledge
A working knowledge of the Flex 3 SDK and Flex Builder 3 will help you make the most of this article.
 
User level
Intermediate
Required products
Flash Builder (Download trial)
 
Much has changed since Flex 3 and Flex Builder 3 were released in February 2008. Adobe has renamed Flex Builder to Flash Builder—in part to highlight that it's not only useful as a development tool for Flex, it's also the most advanced ActionScript development environment. Additionally, there have been huge advances made in the Flash Player and AIR runtimes, as well as the debut of new frameworks, including Text Layout Framework (TLF) and Open Source Media Framework (OSMF). With all of these additions, developers can now easily create many different types of applications including mobile applications. With Flex 4.5 SDK and Flash Builder 4.5, developers can create standalone, cross-platform AIR applications that look and act like native applications on Android phones and tablets, the RIM Blackberry PlayBook, and yes, even Apple iPhone and iPad devices.
 
If you've been coding heads-down with flavors of the Flex 3 SDK, it can be a bit overwhelming to try to catch up with everything that has changed in the Flex SDK as well as in the development environment. In this article, I'll help bridge that gap by providing an overview of what is new in both the SDK and Flash Builder. I've included code examples and provided links to additional resources for each topic. If you're a Flex 3 developer, this article will help you understand what has changed between Flex 3 and Flex 4.5 and what you need to learn to develop mobile applications with Flex 4.5 SDK.

 
Developing mobile applications with Flex

The new functionality that is grabbing headlines, hearts, and minds is the ability to write mobile applications using the Flex SDK. The ability to write native applications for mobile devices like smartphones and tablets once per form-factor and publish across vendors and devices is a significant advantage for developers who are targeting multiple mobile platforms. To write mobile Flex applications, you need to use Flex SDK 4.5 or later, which has been optimized for mobile devices and includes new touch-friendly controls.
 
Spark
The first thing you need to learn for Flex 4 and 4.5 is the Spark component model.
 
Spark was introduced in Flex 4 SDK as a way to enable Flex developers to write more robust and intuitive code, while separating visual properties—written with MXML—from functionality—written with ActionScript—through the Spark skinning model. I think you'll find that the code you write using Spark is more succinct and declarative, and actually easier to maintain. In Flex 4.5 SDK, Spark was improved upon with the addition of touch-friendly components, mobile specific optimizations, and more. In doing so, Adobe has created the premier framework for developing multiscreen applications.
 
If you create a new Flex 4.5 MXML application in Flash Builder, the main application file will include the following:
 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">
As a Flex 3 developer, the first difference you might notice is the namespace s instead of mx for the Application tag; this is the namespace that contains Spark components. You'll also notice the addition of the MXML 2009 namespace, referenced as fx . Starting with Flex 4, Flex components are separated from special language tags. New components have been put into the Spark namespace, older components remain in the MX namespace, and the special language tags that do not fit into either category go into the fx namespace.
 
Note: For an in depth explanation of Spark, detailed descriptions of the component architecture, and more read Deepa Subramaniam's article A brief overview of the Spark architecture and component set.
 
Spark States and Transitions
Both Spark and MX components are based on the mx.core.UIComponent class, providing the ability to intermingle them in almost any way you see fit. You can use MX components in Spark containers, Spark components in MX containers, and both of them side-by-side in the same application as if they were in the same component set.
 
One of the biggest differences, however, between Spark and the MX component model is the way in which you define and manipulate application states.
 
In an MX-based Flex application, if you used several states or there were many significant differences between states, the state definition portion of your code would get unwieldy quickly. With Spark, managing states is much simpler.
 
Using the new Spark states syntax, your states block will be much more terse because it only needs to list all possible states; it does not need to define how they differ. For example:
 
<s:states> <s:State name="stageOne" /> <s:State name="stageTwo" /> <s:State name="stageThree" /> </s:states>
With Spark components, addition, removal, and repositioning between states is handled on each UI component itself. Consider the following button:
 
<s:Button id="panic" label="Don't click me!" x="20" y="20" />
This code defines a button labeled "Don't click me!" and displayed at 20, 20. To include it in the states stageOne and stageThree, but not in the state stageTwo add the includeIn property:
 
<s:Button id="panic" label="Don't click me!" x="20" y="20" includeIn="stageOne,stageThree" />
The includeIn property lists all states for which the component is present. If the state changes to one not in this list, then the component is removed. If the property is not set—as in the original button code—then the control is included in all states.
 
To reposition the button, you can use dot notation to set state-specific property values. Consider this example:
 
<s:Button id="panic" label="Don't click me!" x="20" y="20" x.stageThree="50" y.stageThree="100" />
Here, the x and y properties are still both 20 at startup, but when the state is changed to stageThree , they will be modified to 50 and 100 , respectively. The plain x and y properties without dot notation specify the value for all states not explicitly specified. Flash Builder 4 and later supports this syntax and will also make these code modifications if you reposition an element in Design View with a specific state active.
 
Going hand in hand with the new States syntax, Transitions are now much easier to define and to read. Flex has also gotten smarter about transitions: where transition properties can be inferred, you may now imply them. For example, if you want a component to fade in to display, you can use the includeIn property described above to add it to the display in the second state, and simply specify the component as the target of a fade transition; for example:
 
<s:transitions> <s:Transition fromState="stageTwo" toState="stageThree"> <s:Sequence> <s:AddAction target="{panic}" /> <s:Fade target="{panic}" /> </s:Sequence> </s:Transition> </s:transitions> <s:Button id="panic" label="Don't click me!" x="20" y="20" x.stageThree="50" y.stageThree="100" />
With the above code, Flex recognizes that the "panic" button doesn't exist in the previous state ( stageTwo ) and it's being added, so it will fade in from an alpha of 0 to 1.0 without you specifying those values. The same type of intelligence is implied for fading out, moving, and other transitions.
 
You may also have noticed my use of the new <s:Sequence> tag—added in Flex 4.0 SDK. This tag's children will all be executed in sequence, enabling precision control of transition effects. Similarly, you can use the <s:Parallel> tag to execute several transitions at the same time.
 
There are many more options in addition to Fade; you can learn all about Spark effects and filters in the Spark Effects (PDF) documentation
 
Spark skinning and FXG
In Spark, the separation of functionality (written with ActionScript) from display code (written with MXML) makes code more maintainable and makes skinning easier. In addition, Skinning has also been improved with the introduction of FXG, a declarative syntax for creating vector graphics that takes full advantage of Flash Player capabilities.
 
Borrowing some example code from Ryan Frishberg's excellent article Introducing skinning in Flex 4, creating shapes with FXG is simple:
 
<s:Rect id="rect" width="200" height="30"> <s:fill> <s:SolidColor color="0x77CC22" /> </s:fill> <s:stroke> <s:SolidColorStroke color="0x131313" weight="2"/> </s:stroke> </s:Rect>
Here, a rectangle is created with a specific width and height, a solid fill color, and a solid stroke color. Of course, it's also easy to create gradients, add rounded corners, borders, and pretty much anything you can think of with vector graphics.
 
To simplify the skinning process, Flex 4 introduced a skinning contract, which enables the component data, states, and skin parts work together in a seamless and straightforward manner. When skinning existing components, the contract is predefined; and when creating your own components, you define aspects of the contract yourself.
 
For more information on FXG, writing and understanding skinning contracts, and writing skinnable components, see Introducing Skinning in Flex 4. And if you're designing components and skins for mobile applications, you should also read Jason San Jose's series on optimizing skins that begins with Flex mobile skins – Part 1: Optimized skinning basics.
 
New components for mobile development
Not every component in Flex translates to the mobile device paradigm well out-of-the-box, so Adobe has created some new components that are mobile optimized and touch friendly, bringing the rapid development you're familiar with in Flex to the mobile space.
 
Users have come to expect a certain experience with mobile applications: A header and/or footer area with navigation buttons or tabs, and a list of information in some form in the middle. For applications that follow this style, the various forms of the new ViewNavigator component make life much easier by managing—as the name suggests—navigation between views.
 
In addition, the New Flex Mobile Project wizards added to Flash Builder 4.5 offer different templates that use variations of ViewNavigator to help you jumpstart your development (see Figure 1).
 
Figure 1: Creating a Flex Mobile AIR project in Flash Builder 4.5
Figure 1: Creating a Flex Mobile AIR project in Flash Builder 4.5.
In the Application Template tab you can select one of three options:
 
  • The Blank template creates a basic, empty mobile application and the necessary XML configuration to enable compiling to various platforms.
  • The View-Based Application template creates a simple base view using ViewNavigatorApplication and a starter view. View-based applications follow design principles that users tend to expect on Android devices. Navigation is often controlled by hardware buttons on the device, as opposed to visual elements on the screen.
  • The Tabbed Application template creates and configures a tabbed base view using TabbedViewNavigatorApplication, creates empty ViewNavigator views for each tab you specify in the wizard, and wires them all together for you. Tabbed applications follow design principles that users tend to expect on Apple iOS devices. Navigation is accomplished entirely with controls on the screen.
The above templates are only available for Flex (MXML) projects. If you choose to write an ActionScript-only project, you will need to write just about everything from scratch.
 
Many Flex components are optimized for mobile, enabling you to build all sorts of applications for mobile smartphones and tablets. They are too numerous to explore in the scope of this article, but if you're developing mobile applications you should look through the Flex 4.5 documentation and familiarize yourself with them. In particular, explore the documentation on Spark containers, item renderers, list-based controls, data-grid and grid controls, and text controls.

 
More than just mobile

In addition to its new mobile features, Flex 4.5 SDK also includes a host of new and updated components for everyday use, as well as support for bidirectional binding, new frameworks for text and media, and more.
 
There are far too many new and updated components to list them all here, but some highlights include:
 
  • New - Containers, Layouts, VideoDisplay, VideoPlayer, SkinnablePopupContainer, and Module
  • Updated - DataGrid, Form, Image, Formatters, and Validators
 
Bidirectional binding
Bidirectional binding is simple to explain and unbelievably powerful. Just add an @ symbol before your brackets in the binding, and changes will be propagated in both directions.
 
The following example will help to illustrate why I'm so excited about this feature.
 
In the code below, there is a string variable, a TextInput that is bidirectionally bound to the string, and a label bound the old fashion way to the same string. When the TextInput is changed, the string is updated because of the bidirectional relationship, which also causes the label to be updated.
 
<fx:Declarations> <fx:String id="foo" /> </fx:Declarations> <s:TextInput id="ex" text="@{foo}" /> <s:Label id="disp" text="{foo}" />
 
TLF and OSMF
Flex 4.5 makes the most of the new Text Layout Framework (TLF) and Open Source Media Framework (OSMF). The new VideoDisplay and VideoPlayer components rely on the OSMF to enable HTTP streaming of videos. You can see a terrific example of this functionality in the new Adobe TV interface, which only buffers a portion of the video ahead of the current position. Somewhat like the infinite scroll system found in some websites, it recognizes when the position is nearing the end of the buffer and it retrieves more of the stream. The TLF is used to enable extended features like right-to-left text, vertical text, and more than 30 writing scripts—extremely useful for displaying content in foreign languages in the way that they were intended to be read. It also provides a powerful API that enables text columns, rich controls—including kerning and ligatures— and so much more. You can play with many of these TLF features at the rich text editor demo on Adobe Labs.
 
Runtime Shared Libraries
Flex 4.5 SDK makes use of more standard Runtime Shared Libraries (RSLs) than Flex 3 did for bandwidth, load time, and performance improvements. RSLs are a way to reduce the size of your applications' SWF files by externalizing shared assets into stand-alone files that can be separately downloaded and cached on the client. These shared assets can be loaded and used by any number of applications at run time, but are transferred only once to the client, much in the same way an HTML web application externalizes and caches JavaScript files and images.
 
Flex compiler improvements
The Flex 4.5 compiler has been further optimized as well. It now uses less memory for full builds, has a shorter compilation time for both full and incremental builds, and has improved RSL linking logic. On midsize to large Flex projects, you could see as much as a 20% improvement in compile time, as well as up to 20% memory consumption reduction during full builds.

 
Migrating a Flex 3 project to Flex 4

You may think that upgrading your Flex 3 application to Flex 4 will be challenging and time consuming, but it's really quite easy. As the framework continues to mature, syntactical changes become fewer and farther between. For more on this topic, see Differences between Flex 3 and Flex 4 by Joan Lafferty. You may also want to read Greg Lafrance's series, which begins with Migrating Flex 3 applications to Flex 4 – Part 1: Importing the Flex 3 Dashboard application into Flash Builder 4.

 
Additional Flash Builder improvements

In addition to the new mobile workflow, Flash Builder 4.5 also introduced several new editor and productivity enhancements. Quick Assist is an amazing productivity feature that enables you to write code as if the dependencies—variables, classes, methods, and so on—already exist. Flash Builder recognizes the dependencies and helps you automatically generate them. Instead of a red error indicator, you will now see a gold Quick Assist indicator on any variables, methods, and so on that don't already exist. To generate the object in question, position the cursor inside the highlighted word or words and press Command+1 (Mac) or Ctrl+1 (PC).
 
Quick Assist is smart, too. It will generate class variables inside the appropriate class, local methods in the current file, and so on. When generating functions (see Figure 2), it inspects the type of any arguments passed to it to generate argument stubs of the correct type (see Figure 3), and if the return value is being saved anywhere it sets the function's return type appropriately.
 
Figure 2: Quick Assist recognizes a function it could generate.
Figure 2: Quick Assist recognizes a function it could generate.
Figure 3: The result of Quick Assist code generation.
Figure 3: The result of Quick Assist code generation.
Flash Builder 4.5 comes preconfigured with dozens of code templates, which are similar to what Eclipse users might be familiar with as Snippets. They make it quick and easy to insert frequently used bits of code, and can optionally prompt you for portions of that code. You can also modify the hundreds of existing templates or add your own.
 
Workflow for teams with user experience designers or interaction designers has gotten some attention as well. Within Flash Builder, you can now create a new Flash Catalyst Compatible Project, which enables round-tripping between Flash Builder and Flash Catalyst.
 
For more information on Quick Assist, code templates, and Flash Catalyst compatible projects, see Serge Jespers' Adobe TV video on What's New in Flash Builder 4.5.

 
Where to go from here

At this point you should feel pretty comfortable playing with Flex 4.5 and you may even be contemplating writing a mobile application. For more detailed information on the topics covered in this article, visit the links referenced in the sections above. Flex has a bright future in multiscreen and mobile application development, and I am happy to break free of the days of developing separate native applications for multiple platforms and live in the future, where I can develop applications based on screen size, not manufacturer.