17 October 2011
Extensive knowledge of Flex 3 or Flex 4.5. But if you intend to incorporate aspects of the Flex Dashboard application into your own projects, then having a good understanding of Flex 3, and at least a basic understanding of what’s new in Flex 4.5, is essential.
This article is Part 1 of a four-part series in which you import the Flex 3 Dashboard demonstration application available on the Flex Developer Center into Flash Builder 4.5, the latest version of Adobe's IDE for developing applications for the Flash platform, and then migrate the application to Flex 4.5 to take advantage of the Flex 4.5 Spark architecture and components.
Although a key feature of Flex 4.5 is its support for creating mobile applications in Flex, this article series does not convert the Dashboard application to a mobile application. A future article series will cover creating a mobile Dashboard application.
I really love the Flex 3 Dashboard application. It's a great showcase for some compelling uses of Flex, including presenting data in charts, grids, and forms, as well as in pods that can be dragged around the UI. It's also a great starting point for incorporating some engaging Flex functionality into your own applications.
Flash Builder 4.5 ships with both the Flex 3.x SDK and the Flex 4.x SDK. While you could continue developing Flex 3 applications in Flash Builder, there are clear advantages to moving to Flex 4.x. First, the compiler is faster. Second, the new Spark component architecture, together with the new skinning and states model, is a significant improvement. When you consider the other new features available as well, using the Flex 4.x SDK is the clear choice.
Part 1 of the series (this article) describes how to import the Flex 3 Dashboard into Flash Builder 4.5 while changing as little as possible. The Flex 4.x SDK ships with a new compiler, so importing the Dashboard requires a few additional steps.
This article series does not attempt to improve the overall quality of the Dashboard application architecture. The goal is simply to provide an example of modifying an application created in Flex 3 to use Flex 4.5—and provide enough information to help you migrate your own Flex 3 applications to Flex 4.5.
Here are some of the Flex 4.5 and general Flex topics that are covered in this series:
To try out the Dashboard application, visit the Flex 3 Dashboard page and click the Experience The Application link.
To complete this article series you need Flash Builder 4.5 installed. You can buy Flash Builder 4.5, or download the trial version.
To download the Dashboard source file ZIP archive:
When you import the Dashboard project, you must also select the Flex SDK version for the project. This section describes these two steps.
There are two ways import the Dashboard application project in Flash Builder. You can import the project after extracting the contents of the ZIP file to a directory, or you can import directly from the Dashboard.zip archive file (see Figure 1). You may use either method.
Follow these steps to import from the ZIP file:
You will be prompted to choose which Flex SDK will be used to compile the project (see Figure 3). You can select the Flex SDK 4.5 that ships with Flash Builder 4.5, or you can select a more recent version of the Flex SDK if one is available.
Note: The steps in this article were tested using Flex SDK 4.5 and Flex SDK 4.5.1. When using a more recent SDK version you may encounter problems as you follow this four-part article series if there are API differences between Flex SDK 4.5.1 and the SDK you are using.
Note: After you have imported the Flex 3 Dashboard application into Flash Builder you may want to save the imported but unchanged project files to another location for reference.
Following a successful import of the project, you will need to make several code changes to correct for differences between the Flex 3 SDK and Flex 4.5 SDK.
Note: Some errors mentioned later in this article will not be displayed until the first few errors have been addressed, so you may not see them yet.
If you try to build the project (by choosing Project > Build All) the first error you'll see notes that the libs folder is missing (see Figure 5).
The libs folder is created automatically by Flash Builder for new projects, but for imported projects that do not contain a libs folder, the folder must be created manually:
The folder can remain empty (see Figure 6) but it must exist to remove the error.
After adding the libs folder, build the project again. The error for the missing folder will be gone, but you will have a new error and several warnings (see Figure 7). The next few steps eliminate this new error and new errors as they occur. After you reach a point when all errors have been fixed you will address the multiple warnings.
To fix the error:
backgroundSizestyle property from the
You will now see two new errors (see Figure 8), which you will fix before you address the warnings.
The two new errors for incorrect number of arguments are due to API changes introduced in Flex 3.5 SDK (the Dashboard application was originally created using an earlier version of the Flex 3 SDK, before the Flex 3.5 SDK was released). The changes involve the IStroke and IFill interfaces. The problem is that the number of arguments passed to two methods defined in these interfaces has changed.
To fix the errors follow these steps:
This first error occurs because the IStroke interface method
apply() , which prior to Flex 3.5 took a single argument, now takes three arguments.
Flex 3.4 and earlier:
Flex 3.5 and Flex 4.5:
apply(graphics:Graphics, targetBounds:Rectangle, targetOrigin:Point):void
stroke.apply(g, rc, new Point(rc.left,rc.top));.
importstatements if it is not already present:
This error occurs because the IFill interface method
begin() , which prior to Flex 3.5 took two arguments, now takes three arguments.
Flex 3.4 and earlier:
Flex 3.5 and Flex 4.5:
begin(target:Graphics, targetBounds:Rectangle, targetOrigin:Point):void
f.begin(g,rc, new Point(rc.left,rc.top));to resolve the error.
themeColor style was removed in the Spark skins, so you'll need to remove it as you migrate to Spark and Flex 4.5.
themeColorstyle property from the
This next error to fix indicates that Flash Builder cannot create the HTML wrapper. The error occurs because the HTML templates were updated in Flex 4.5 to take advantage of SWFObject, which provides a more reliable way to do Flash Player detection.
This error is simple to fix:
To eliminate most of the warnings, follow these steps:
<mx:Style>tag (near line 14):
<mx:Style source="/assets/styles.css" />
The styles handled by this tag will be implemented in various custom skins in the later parts of this series. Do not delete the styles.css file as you will refer to it while creating the custom skins.
The two remaining warnings occur because in the Flex 4.x SDK you reference top-level application objects and methods differently than with the Flex 3 SDK. Instead of using the mx.core.Application class (for example,
Application.application.MY_TOP_VAR_OR_METHOD ) as you would in Flex 3, in Flex 4.5 you use the mx.core.FlexGlobals class (for example,
FlexGlobals, replace the following line at the top of PodLayoutManager.as near the other import statements:
After making these changes and rebuilding you should have no errors or warnings.
Note: After you have resolved all the errors with the imported Flex 3 Dashboard application into Flash Builder you may want to save the project files to another location for reference.
Now that you've resolved all the build errors, you can launch the Dashboard application in Flash Builder 4 by choosing Run > Run or by pressing Ctrl+F11 (see Figure 11).
Note: If the application does not launch, you may need to install Flash Player 10.2. You can download Flash Player 10.2 here. If you have problems installing Flash Player 10.2, because you are told a newer version of the Flash Player is available, use the uninstall_flash_player.exe available here.
This article illustrated how to import the Flex Developer Center Dashboard demonstration application, which was written using the Flex 3 SDK, into Flash Builder 4.5, as the first step to migrating the application to Flex 4.5.
Now that you have imported the Dashboard project and resolved the initial errors that cropped up when switching to the Flex 4.5 SDK, you can proceed to Part 2 of this series and begin migrating the application to Flex 4.5.
For more information on Flex 4.5—and in particular features relevant to the Dashboard application—see the following resources:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
Note: You may use the sample code in your products, commercial or not.