A Deep Dive into Flash Builder 4

In this article we are going to take a look at Adobe’s Flash Builder tool. Flash Builder 4 is part of the Adobe Flash Platform, and the latest release of Adobe's commercially available integrated development environment (IDE) for building Flex and AIR applications. The popular Eclipse-based developer tool was previously known as Flex Builder 3.

Our tour of Flash Builder 4 will begin with a review of the Flex Framework and then a look at the latest and greatest updates in the IDE, including Adobe Flash Catalyst, Flex Unit 4 Integration, debugger updates, and others.  Then, it will be time for a hands-on walk through of using the new data centric features to create a basic Flex application with a PHP and MySQL backend.

What is Adobe Flex?

First, let’s begin with a quick review of the pieces of a Flex application.  Adobe Flex is an open source user interface framework, used within the Flash Builder IDE to build Rich Internet Applications (RIAs).  The Flex framework generates SWF files that run inside the Adobe Flash Player or Adobe Integrated Runtime (AIR).  Flex was built for use by developers and follows traditional application development paradigms, rather than the timeline-based development found in the Flash Professional authoring tools.  The Flex framework is written in the Flash Player programming language, ActionScript 3.  The typical Flex developer will use ActionScript to access data and build user interface components.  MXML is also part of the Flex Framework, a declarative XML abstraction that is built on ActionScript used to simplify Flex development and layout.

Flex Framework Updates

The Flash Builder 4 release is part of a significant update for the entire Flex development platform.  The Flex 4 SDK is essentially a rewrite of the framework architecture and user interface components.  The updated SDK includes both the new Flex 4 components and the now legacy Flex 3 components.  Applications can use components from both, with Flex 4 components accessed through the ‘s’ namespace and the Flex 3 components accessed through the ‘mx’ namespace.   Listing 1 shows an example of an application tag using both namespaces.  You may also hear Flex 4 components referred to as  “Spark,” as this is the name for the new component architecture, where the Flex 3 component architecture is known as “Halo.”  Thus, the use of the ‘s’ namespace for using the new components.

<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">

 Listing 1 - Namespace Example

Adobe Flash Catalyst

One of the major motivations for the overhaul of the Flex framework was the desire to support better integration with the Adobe design tools and improve developer-designer workflow in the development of Flex applications.  The primary focus in the tools integration is Adobe’s new tool for designers, called Flash Catalyst, which aims to allow designers to create Flex user interfaces and assets without writing code.

A key to Flash Catalyst and Flex 4’s potential success is that it recognizes that application developers and designers work differently.  So, it allows each to focus on what they are good at and work in ways they are accustomed to, as they are able to pass visual assets between Flash Catalyst and Flash Builder – keeping each in an environment they are comfortable with.

Flex Unit 4

In the theme of greater tools integration, Flash Builder now has support built in for unit testing with the inclusion of Flex Unit 4.  For those already familiar with Flex development, you will recognize Flex Unit 4 as the next version of the popular Fluint testing framework, developed by Digital Primates to provide better support for common Flex needs, like testing asynchronous operations. 

With the new Flex Unit 4 support, you can now create test suites and cases from the File menu, then run them from inside Flash Builder.  Thus, simplifying the process of adding unit tests to a project and bringing Flash Builder closer to meeting the expectations of an enterprise developer. 

Debugger / Profiler

There have been some minor, but useful, improvements made to the debugger and profiler.  The debugger now includes conditional breakpoints, watchpoints, run-to-line, and an expression evaluator, while the Profiler boasts of improved “object references” reporting to make the information more useful when investigating a performance or memory issue.

Network Monitor

The network monitor is another exciting new feature in the IDE, as seen in Listing 2.  It allows you to see HTTP traffic directly within the IDE.  Previously, a developer would need to use an external tool like Firebug to view network traffic between their Flex application and the services it uses. 

Compiler Performance

One improvement you will not see in the menu, but will notice quickly if you are an existing Flex developer, is the compiler improvements.  Adobe has not published a final benchmark of exactly how much better the reworked compiler is than the previous version, but they did publish Peter Donovan’s notes on the early portions of the compiler work.  Please see his notes for an in depth view of the changes and some early benchmarks on the work.

Refactoring / Code Generation

In addition to the headline updates, a few new features have been added to make working with ActionScript code a bit simpler, including code generation for the following:

• Getters and Setters
• Event Handlers
• Service Calls

And, for refactoring, move support has been added, to allow for easily moving existing code. 

Data-Centric Development

One of the main focuses of the Flex 4 development effort was to provide developers with better tools for working with data and services, as this is the heart of the majority of applications being built with Adobe Flex.  The focus on data-centric features led to a number of new enhancements:

• Data / Service Models: Client side representation of available data and services.
• Data Binding: Simplified workflows for binding data to components.  For example, you can now drag a service operation like getAllEmployees directly onto a DataGrid, and allow Flash Builder to do all the work. 
• Client Side Data Management: Allows for client side operations like on-demand fetching and efficient paging and scrolling of large data sets.
• Form Generation: Generates basic input forms for defined services.

The new data-centric features work no matter what server-side technologies you are using (Java/BlazeDS, ColdFusion, PHP, REST, SOAP, etc).  Most of the work happens by allowing Flash Builder to introspect your existing services and create models and wrappers on the client for accessing them.  Now that you have a high level understanding of the data-centric features, it is time to move on to some hands on work so you can see some of the new data-centric features in action.

How-To: Creating a Data-Centric Flex Application

You should now have a feel for the latest enhancements of Flash Builder.  So, let’s get our hands dirty to get a better feel for the new data centric features of the IDE.  In our example, we are going to use Flash Builder to create a Flex application that accesses data in MySQL using PHP.  We, however, are going to let the tool do most of the work for us, including generating the majority of our PHP code based on the database schema. 

Before we jump into Flash Builder, let’s look at a simple wire frame mockup of what we are going to build.   As you can see in Figure 1, we have a simple user interface that allows for selecting teams and viewing the players for the selected team.

Figure 2 is the database schema for the data the users will be able to view with our user interface.

Now that we have reviewed the team and player viewer application we are going to build, let’s get everything ready for going through the tutorial. 

Prerequisite setup:  Before you can walk through the tutorial steps, you will need to download Flash Builder 4. You will also need to have a PHP server and a MySQL database.  For OSX, I use MAMP for a local MySQL and PHP development server (http://www.mamp.info).  Please use your preferred development setup for these server side tools.  With them setup, you simply need to setup a database for the project by running the database script in Figure 3.

CREATE TABLE IF NOT EXISTS `teams` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

CREATE TABLE IF NOT EXISTS `players` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `first_name` varchar(255) NOT NULL,
  `last_name` varchar(255) NOT NULL,
  `jersey_number` int(11) NOT NULL,
  `team_id` int(11) NOT NULL,
  PRIMARY KEY (`id`),
  KEY `team_id` (`team_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;

INSERT INTO `teams` VALUES(1, 'Broncos');
INSERT INTO `teams` VALUES(2, 'Avs');
INSERT INTO `teams` VALUES(3, 'Nuggets');

INSERT INTO `players` VALUES(1, 'John', 'Elway', 7, 1);
INSERT INTO `players` VALUES(2, 'Shannon', 'Sharpe', 84, 1);
INSERT INTO `players` VALUES(3, 'Steve', 'Atwater', 27, 1);
INSERT INTO `players` VALUES(4, 'Patrick', 'Roy', 33, 2);
INSERT INTO `players` VALUES(5, 'Joe', 'Sakic', 19, 2);
INSERT INTO `players` VALUES(6, 'Peter', 'Forsberg', 21, 2);
INSERT INTO `players` VALUES(7, 'Alex', 'English', 2, 3);
INSERT INTO `players` VALUES(8, 'Michael', 'Adams',  14, 3);
INSERT INTO `players` VALUES(9, 'Carmelo', 'Anthony', 15, 3);

Flash Builder Project Setup

With a local/development PHP and MySQL servers running, you are ready to open Flash Builder and get started.

First, you will create a new Flex Project.  You do this by going to “File > New > Flex Project” in the Flash Builder navigation.  This will return a new project wizard.  In the initial screen, you will give the project a name of ‘flashbuilder’ and select the ‘Application server type’ of PHP, as seen in Figure 4.  Once you have completed the details, click “Next” to continue.

After clicking “Next,” Flash Builder will return a screen for configuring the PHP server (see Figure 5).  You will need to enter the Web root and Root URL for your local server configuration.  Then, click “Finish” to create the project. 

Layout Interface Components

Now, you are ready to layout the components for the user interface.   The user interface will be comprised of three Flex components:

• Combo Box: This will display the team names in the drop down, allowing the user to select which team they would like to view.
• Panel: This will hold the DataGrid Component, and allow us to display a heading label of “Players.”
• DataGrid: This will display the list of players, including their first name, last name, and jersey number.
  

To begin laying out the user interface, you will need to make sure you are in the design view for the ‘flashbuilder.mxml’ source file of the application.  This is the default application class that the Flash Builder created for you when the project was created.  You simply need to drag the three components highlighted above from the Component View, shown in Figure 6, on to the design canvas.  In the default layout, the Component View will be in the lower left hand corner. 

Figure 7 shows the application after the components have been laid out in the design view of Flash Builder. I have edited the Panel title to be “Players,” and made sure to put the DataGrid component inside of the Panel. 

Connecting to the Data

Now that you have the user interface components laid out in Flash Builder, it is finally time for the fun part!

We can now integrate the application with the teams and players data in the MySQL database.  First, you will need to locate the “Data/Services” panel, as seen in Figure 8.  This is where we will configure our services for the application.  In the default Flash Builder layout, the panel will be located in the bottom center panel. 

To add services to our project, click on the “Connect to Data/Service…” link in the panel.  This will open a wizard for setting up the service.  Figure 9 is the initial screen of the wizard, select the PHP option and click “Next.”

After selecting the PHP option, Flash Builder displays a step for selecting the “PHP Class.”  Instead of providing an existing class, we are going to use the generation option hiding below the class name.  Select “click here to generate a sample” link in the wizard to open this option.

Once you have selected the generation option, a dialog will be opened for connecting to the MySQL database and generating the new PHP class.  Please enter your database credentials and submit the “Connect to Database” button.  Once you have successfully connected, the “Table” drop down will be populated with our tables (‘teams’ & ‘players’).  Right now, we want to access the list of teams in our Combo Box drop down, so select the ‘teams’ table and click “Ok.”

After finishing with the MySQL generation wizard, Flash Builder will return you to the default wizard for connecting to a PHP class, with everything configured for your newly created PHP class, as seen in Figure 12.  Click “Finish” to generate the client side service wrappers and continue. 

Now that you have successfully finished adding the Teams service to your project, you should see the new service and operations in the Data/Service panel, like in Figure 13.  

Now that the Teams service is setup in the Flex project, we can add real data to our application.  This part is pretty exciting, and is done the same way regardless of the type of service or how you created it.  To get the list of teams to be displayed in the Combo Box at runtime, you simply drag the “getAllTeams()” operation onto the Combo Box in the design view and the dialog in Figure 14 will be displayed.  All you need to do is configure the “Label Field” to use the “name” property and click “Ok.” Now, run the application and you will see the list of teams in the drop-down – Amazing!

Let’s take a minute to review what we have done.  We have used Flash Builder to create our application, which integrated Flex components with data in the MySQL database.  We have allowed Flash Builder to do all the work and have not had to write any code to this point. 

Next, we want to access player data.  So, you will need to repeat the steps we followed to create a Teams service, only this time use the players table to create the Players service.  On the generation dialog, seen in Figure 11, you will need to pay attention to the location of the PHP class, as we will be modifying it to allow us to lookup players by the selected team.

Once you have created the Players service (just like the Teams service), open the PlayersService.php source file with a text editor and add the function from Figure 15.  This function will lookup the players for a given team when provided the team id. 

public function getPlayersByTeam($teamID) {

                $stmt = mysqli_prepare($this->connection, "SELECT * FROM $this->tablename where team_id=?");
                $this->throwExceptionOnError();

                mysqli_stmt_bind_param($stmt, 'i', $teamID);
                $this->throwExceptionOnError();

                mysqli_stmt_execute($stmt);
                $this->throwExceptionOnError();

                $rows = array();

                mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id);

            while (mysqli_stmt_fetch($stmt)) {
              $rows[] = $row;
              $row = new stdClass();
              mysqli_stmt_bind_result($stmt, $row->id, $row->first_name, $row->last_name, $row->jersey_number, $row->team_id);
            }

             mysqli_stmt_free_result($stmt);
            mysqli_close($this->connection);

            return $rows;
        }

Figure 15 PHP Function for looking up players by team

Now, back in Flash Builder, you should see the new operation for the PlayerService in the “Data/Services” panel.  If you do not, you probably just need to do a refresh by right-clicking in the panel and selecting the “Refresh” option.  Once you see the operation, you might notice that it has a return type of “Object,” while the other operations have concrete return types.  So, next we will tell Flash Builder the return type by right-clicking on the operation and selecting the “Configure Return Type” option.  Since Flash Builder already knows about Players from our table generation, we will use the “Use an existing data type” option and select “Players[]”, as seen in Figure 16. 

We now have the service configured and need to hook up our players lookup to happen when the user selects a new row in the teams ComboBox.  Let’s go back to the Flash Builder design view and click on the ComboBox, which should bring up the configuration in the Properties panel, which is along the right side in the default layout.  We are going to select the “Generate Service Call” option for the “On change” event in the panel, as seen in Figure 17.

As you can see in Figure 18, Flash Builder will return a simple dialog to select which service call should be used.  We want to use the “getPlayersByTeam” operation on our PlayersService, and click “Ok” to continue.

After finishing with the Generate Service Call dialog, Flash Builder will take you directly into the event handler code.   We need to update the service call to pass the team id for the selected item, see Figure 19 for the proper code.  This will give us the right list of players whenever the teams drop down is changed by the user. 

protected function comboBox_changeHandler( 
event:IndexChangeEvent ):void
{
	getPlayersByTeamResult.token = 
playersService.getPlayersByTeam(
(event.currentTarget.selectedItem as Teams).id);					
}

Figure 19 Players Service Call Event Handler

Now that we have our event handler setup, our application will load the players for a given team whenever the drop down changes.  If you run the application now, you won’t see any changes happen in the user interface, as we have not told the list of players to be displayed anywhere.  So, next we want to click on the DataGrid component, and then find the properties panel to do the data binding.  We will do this by selecting the “Bind to Data” drop down on the “Data provider” field. 

That’s it!  We are ready to run the application again.  When you do, your running application should look simliar to Figure 22, with the list of players changing anytime you select a different team. 

On the server side code generation front, it may not be realistic to generate service side code (with no security) for a production application, but the PHP generation can still serve a purpose.  It can offer a nice way to jump start your server-side coding process, or help user interface developers remove the dependency of those working on creating the production services, as they can use this option to begin work without waiting for the final services. 

Regardless of the services you are accessing, or how they are created, the new client side data-centric features are a powerful new development option for Flex developers, as it is now quick and easy to add services to a Flex project and bind them to user interface components.  While there is not time to do a hands on review of all of the new data-centric features here, hopefully what we covered gives you a sense of the power that has been added in the latest release of Flash Builder. 

Conclusion

In this article, we reviewed the latest and greatest features of Flash Builder, and walked through a hands on example of using the tool’s new data-centric features to create a Flex application.  From what we have covered, it is clear that Flash Builder 4 is a worthwhile tool for creating Flex applications, with quite a few interesting new features.

Jon Rose is an enterprise software consultant and Flex Practice Director at Gorilla Logic, Inc. (www.gorillalogic.com) located in Boulder, Colorado. He is an editor and contributor to InfoQ.com, an enterprise software community. He is the co-host of DrunkOnSoftware.com, a videocast for those who like booze and bits. He has worked with clients large and small in both the private sector and government. His love of solving problems drives him to build quality software. You can read his blog at: http://gorillajawn.com.