by Andrew Shorten
Adobe recently released Adobe Flash Builder 4, a new version of the tool formerly known as Flex Builder. This next-generation development tool provides significant improvements over Flex Builder 3 and will help accelerate the development of applications built using the new Flex 4 framework, as well as the existing Flex 3 framework, and apps that were written using ActionScript only.
In fact, in addition to fully supporting all the latest capabilities in the Flex 4 SDK, Flash Builder 4 supports improved code editing, enhanced refactoring, a new network monitor and unit testing tools (more than 50 new features) that are of benefit to developers working with either Flex 4 or Flex 3 framework.
As a developer and product manager for Flash Builder, I know firsthand that most Flex applications begin with a focus on either design or data, and then move through a process of coding and testing before being deployed. This process inspired the three types of feature sets you will find in this release:
In this article, I introduce you to a few of these new features. If you want information on every new feature included in this version of the product, I encourage you to visit my blog, where I've published a list with links to documentation.
Developers at Flash Camp in Boston speak out about the new features in Flash Builder 4.
When an application is inspired by a very specific design, it's critical to ensure that the details of the design don't get lost during development. How does content move from Adobe creative tools through the process of adding interactivity, integrating the application logic, and connecting the application's servers or services while remaining true to the original designer's intent?
It's all about empowering better collaboration between developers and designers. And thanks to tight integration with Adobe Flash Professional and Adobe Flash Catalyst, collaboration has never been easier.
Flash Builder 4 features a new workflow for adding content created in Flash Professional to a Flex application. Simply drag the New Flash Component or New Flash Container item from the Components panel and place it anywhere on the design canvas. You can launch Flash Professional and create or edit the content, and then click Done to return to Flash Builder 4 with the FLA and SWC files exported to the Flex project.
In this release, we've also worked to improve interoperability between Flash Builder and Flash Professional. From within Flash Professional CS5, you can select Flash Builder 4 as your default code editing environment for ActionScript, rather than using the built-in Actions panel. Alternatively, you can choose to create a new Flash Professional project within Flash Builder 4. Simply designate an FLA file to work with and code the necessary ActionScript classes. Then you can initiate publishing, testing, and debugging in Flash Professional right from within Flash Builder 4.
Adobe Flash Catalyst is a new product that makes it easy for designers to create RIA user interfaces based on the Flex framework from artwork imported from Adobe Creative Suite tools. Flash Builder 4 provides a simple workflow for importing either an entire project or a set of component skins from an upcoming version of Flash Catalyst, thus allowing designers to collaborate with developers more easily than ever before.
While many applications begin with comprehensive design, many more start instead with data. You may be creating a dashboard to provide insight into a corporate database, or perhaps your application will provide a new front end to an existing ColdFusion or PHP application. Or you might need to rely heavily on third-party services based on REST or SOAP, for example. While the server or service details may change, the basics are the same: you need an easy way to connect to all of those services and bind them to Flex components. That is the essence of the data-centric development features in Flash Builder 4. Whether you are an experienced Flex developer or a web application developer who is new to the technology, these features will dramatically speed up your workflow and enable you to develop data-oriented experiences that are extremely difficult or impossible to deliver with HTML in the browser.
Data-centric development with Flash Builder 4 comprises three main stages:
The data/service model is an approach to representing all of your server or service operations and the data they return in the Flash Builder 4 environment. You begin by letting Flash Builder introspect your existing logic — ColdFusion components, PHP classes, Java classes, web services, HTTP-based services, or even local XML data files. Flash Builder then represents those services in a tree view on the new Data/Services panel. You can have many different services based on different back-end technologies, all represented within one model. And binding the result of any of your server-side operations to a Flex component (such as a datagrid or list) is as easy as dragging and dropping the operation's name onto the component. You can easily use services to generate forms for master/detail functionality and create charts, too (see Figure 1).
Figure 1. Quickly introspect existing services, making it fast and easy to connect to existing infrastructure.
If you haven't already created your existing logic, Flash Builder 4 can create sample services for you, either for PHP or ColdFusion environments. You can identify a table in your database, and Flash Builder 4 will generate a ColdFusion component or PHP class with all of the common data access operations fully implemented. It's a great way to get up to speed quickly with real running server-side logic to help you understand how services can be implemented.
Of course, data-centric applications are about more than just binding operations to components. Flash Builder lets you enable client-side data management for your services, enabling on-demand fetching of data for easy and efficient scrolling through large collections of data; change tracking that allows users to undo actions; and automation of the common CRUD (create, read, update, and delete) functions that usually need to be hand-coded. The results are applications that deliver users a richer experience than ordinary HTML front ends can provide.
Whether you've gotten your application started by using Adobe Flash Catalyst or by building on services using the data-centric features, at the end of the day, much of application development is about writing and testing code. Adobe Flash Builder 4 delivers a long list of new and improved features to make your day-to-day coding and testing more productive:
For new IDE productivity features, try:
Flash Builder also supports creating custom file templates for MXML, ActionScript, and CSS. It's worth noting that you don't need to move your projects to Flex 4 or use the Spark component set to benefit from the developer productivity features outlined in this article. Flash Builder 4 supports the use of the Flex 3 SDK and MX-only Flex 4 projects, which exclude the Spark components from your project.
Beyond coding productivity, Adobe Flash Builder 4 adds two important new features for testing applications: a network monitor and Flex Unit support.
The network monitor allows you to see the network traffic between the Flash client and your back-end server from within Flash Builder itself. This enables you to more easily debug data access portions of the Flex application and to diagnose any performance issues that might exist between the client and server.
Unit testing is another important part of the application development process, and Flash Builder makes unit testing easy with integrated Flex Unit support, which allows test setup, test file creation, test running, and test result analysis in Flash Builder (see Figure 2).
Figure 2. Network Monitor speeds up testing of your Flash Builder applications.
When you're ready to build and deploy your application, Flash Builder now includes support for command-line builds. This makes it easier to fit Flex into corporate automated build systems.
If you're new to Flex, you'll find a wealth of information to help you get started on the new Start page that you see when you first launch the application. We've provided tutorials, feature videos, and sample code to help you become productive right away.
From design and data to coding and testing, we think you'll find that Adobe Flash Builder 4 is an incredible tool for RIA development. The entire product team looks forward to seeing what you build with it.
Andrew Shorten is a senior product manager for Flash Builder. He is passionate about improving the quality, richness, and value of computer-based experiences. Before joining Adobe, Shorten developed web, kiosk, and mobile user interfaces for government and enterprise customers at Fujitsu. He also worked for Macromedia and Microsoft.