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.
Listing 1 - Namespace Example
In most cases, Flash Builder will guide you in which components to use when. Later, in the how-to example, components from both namespaces will be used without any effort on the developer’s part.
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.
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.
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.
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` (Figure 3 - MySQL Setup Script
`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);