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://ectropic.com. Jon has posted 3 posts at DZone. View Full User Profile

A Deep Dive into Flash Builder 4

03.15.2010
| 66968 views |
  • submit to reddit

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

 

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.


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);
Figure 3 - MySQL Setup Script


AttachmentSize
Figure1.png25.48 KB
Figure2.png278.1 KB
Figure3.png268.5 KB
Figure4.png123.78 KB
Figure5.png87.18 KB
Figure6.png92.34 KB
Figure7.png22.82 KB
Figure8.png42.73 KB
Figure9.png86.41 KB
Figure10.png75.77 KB
Figure11.png116.61 KB
Figure12.png85.23 KB
Figure13.png46.92 KB
Figure14.png53.57 KB
Figure15.png60.69 KB
Figure16.png71.06 KB
Figure17.png42.95 KB
Figure18.png53.58 KB
Figure19.png52.35 KB
Figure20.png31.61 KB
Published at DZone with permission of its author, Jon Rose.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Harlow Ward replied on Mon, 2010/04/05 - 5:28pm

The one thing that seems to be missing here (and all other Zend AMF tutorials) is how to have objects within objects. I.E. Person has a foreign key to Team. So in the datagrid it would be nice to be able to reference the persons team via {person.team.name}.

 This would also be helpful for the Combobox when picking a persons team in the entry form. This way you could use 'selectedItem' as {person.team} instead of having to loop through the choices and select {person.team_id} when it matches the options.

 Its straight forward with Java, and Hibernate makes it even easier. But i've yet to see anyone do it with PHP yet  OO style.

Dave Keen replied on Sun, 2010/04/11 - 4:07am

Hey Harlow (and all),

Unlike Java and Coldfusion, Flex and PHP have had the short straw for a long time when it comes to data-centric ORM style development.

I have been working on a project called 'Flextrine 2' designed to address this once and for all - a Flex interface onto the upcoming Doctrine 2 library for PHP 5.3+; the project is still under development, but so far it looks extremely promising, and both I and folks I have chatted to about the project think it has the potential to change the face of Flex/PHP data-centric development :)

Please feel free to follow the project at http://code.google.com/p/flextrine2/  I am aiming for a release date of 1st September, to coincide with the stable release of Doctrine 2.

Regards,

Dave Keen
http://www.actionscriptdeveloper.co.uk

Peter Hirt replied on Fri, 2010/11/12 - 2:29am

first, I am learning Flex4, so bare with me. I run the standard tutorial with no problems, but now would like to apply it to my specific case. So, I specifically would like to add more combo boxes and get the results back depending of what I do select with those combo boxes. I seem to have troubles with the inserted PHP code pasted below. I obviously changed the fields to my specific case, but it seems not to work. My questions are: i) variable $teamID is free to choose or linked to somewhere? ii) where can I find documentation of what is exactly interacting with this PHP file many thanks Roestigraben 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; }

Tony Zhao replied on Sat, 2012/06/09 - 3:15am

This would also be helpful for the Combobox when picking a persons team in the entry form. This way you could use 'selectedItem' as {person.team} instead of having to loop through the choices and select {person.team_id} when it matches the options. Its straight forward with Java, and Hibernate makes it even easier. But i've yet to see anyone do it with PHP yet OO style. http://www.china-casting.org

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.