by Tim Buntel
The entire Adobe Flex team is delighted to introduce you to Adobe Flash Builder 4 beta, formerly known as Adobe Flex Builder. While the name has changed, this is still the evolution of Flex Builder 3 — a professional-grade, Eclipse-based development tool designed to help you rapidly build rich Internet applications (RIAs) and content using the open-source Flex framework — but with an incredible collection of powerful new features.
In this article, I will introduce you to a few of these new features, so be sure to check out all of the other content on Adobe Labs for more details. We've posted many videos, articles, and samples to get you started with the beta.
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 inspires the three main feature themes you will find in this release:
Video 1. Senior Engineering Manager Heidi Williams highlights the new design-centric, data-centric,
and developer productivity features of Flash Builder 4.
When an application begins with a very specific design as its inspiration, ensuring that the details of the design are realized in the final application is critical. How does content move from Adobe's leading creative tools through the process of adding interactivity and finishing with complete integration with the application logic and the application's servers and/or services — all while still remaining true to the original designer's intent? That question is answered with our designer/developer workflow theme. It's all about empowering better collaboration between developers using Flash Builder and users of Adobe's creative tools, with emphasis on two key products in the Flash platform: Adobe Flash Professional, and Adobe Flash Catalyst beta.
For Flash Professional, Flash Builder 4 beta features a new workflow for adding Flash content to a Flex application: simply drag out 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 beta with the FLA and SWC files exported to the Flex project.
Adobe Flash Catalyst beta is a new product that makes it easy for designers to create RIA UIs from artwork imported from Adobe Creative Suite tools. The applications created in Flash Catalyst are Flex applications, and Flash Builder 4 beta provides a simple workflow for importing these projects, thus allowing designers to collaborate with developers more easily than ever before. (Be sure to check out the Adobe Flash Catalyst beta also available on Labs.)
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 be relying 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 theme in Flash Builder 4 beta. Whether you are an experienced Flex developer or a web application developer new to the technology, these features will dramatically speed up your work and enable you to develop data-oriented experiences that are extremely difficult or impossible to deliver just with HTML in the browser.
Data-centric development with Flash Builder 4 beta comprises three main stages:
The data/service model is an approach to representing all of your server or service operations and the data that they return in the Flash Builder 4 beta environment. You begin by letting Flash Builder introspect your existing logic — ColdFusion components, PHP classes, Java, or web services. 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 (like 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.
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, allowing on-demand fetching of data for easy and efficient scrolling through large collections of data; change tracking, allowing users to undo actions, and automating 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 is possible with ordinary HTML front ends.
Whether you've gotten your application started through the workflow by using Adobe Flash Catalyst beta 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 beta delivers a long list of new and improved features to make your data-to-day coding and testing more productive:
Video 2. Computer Scientist David Zuckerman demonstrates conditional breakpoints
and unit testing and how to debug and test code in Flash Builder 4.
For new IDE productivity features, try:
Builder also supports creating custom file templates for MXML, ActionScript, and CSS.
Beyond coding productivity, Adobe Flash Builder 4 beta 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 Builder makes it easy with integrated Flex Unit support. This will allow test setup, test file creation, test running and test result analysis in Builder.
Video 3. Adobe Senior Product Manager Tim Buntel demonstrates how to handle large record-sets automatically between Flash Builder and ColdFusion, while using the new network monitor feature in Flash Builder to monitor traffic.
When you're ready to build and deploy your application, Flash Builder now includes support for command line builds. This will make 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 available from the new Start page that you will 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 to data to coding and testing, we think you'll find Adobe Flash Builder 4 beta an incredible tool for RIA development. We're very pleased to bring you this early look at the product, but there's still some final work to be done. So be sure to give us your feedback on the Labs forums and watch for the launch of the final product later this year.
Until then, enjoy the beta!
Tim Buntel is the Senior Product Manager for Flash Builder (formerly Flex Builder). Prior to joining the Flex team in 2007, he served for many years as the Senior Product Manager for Adobe ColdFusion.