Vivisecting Media

Adobe MAX 2008: The Future of Flex Builder (Part One)

December 8th, 2008 Posted in Flex Development, MAX 2008, Rich Internet Applications, web 2.0, web integration

One of the more interesting sessions at MAX this year was the Future of Flex Builder. The session was presented by Rob Brambley III, Tim Buntel, Tom Lane, David Zuckerman of the Flex Builder team. Tim Buntel, product manager for Flex Builder, started the session by first talking about how most users approach Flex Builder and how the development team is focusing on new features to make these user approaches easier. From Adobe’s research, most Flex Builder users approach using Flex Builder from two main entry points:

• Design Fidelity / UI Creation
• Data / Service Management

Design Fidelity / UI creation is focused around a Flex developer that is responsible for bringing in the initial design for that application and making it a reality. This process includes layout, skinning, styling, animation and effects creation with the core goal of meeting the required design fidelity for the final product. The second entry point is for the developer that is responsible for the Data / Services management aspect of the application. This process includes creating data services, data model creation and loading management. To be clear, these two separate approaches do not mean they are handled by different developers, this is just a way at looking at how developers approach their Flex development duties.

Because there are the two main entry points for most developers, the Flex Builder team is first working on new and improved features that focus on these two areas. There is also a general initiative to work on improving general day-to-day use in Flex Builder, re-factoring management and debugging of Flex applications (they called this process “Test & Tune”). This general initiative covers both the design and the data aspect of application development.

I am going to be breaking this article into three separate posts. This first post will cover the workflow and new features added to Flex Builder for the Design Fidelity aspect of development. Post two will cover the overall day-to-day use features that are being updated/added and how the Flex Builder team is improving the “Test & Tune” workflow. The third post will look at the data services features that are being added to the Flex Builder 4 (Gumbo). One thing to note is that this session was a mini sneak-peek of Flex Builder, and there is a chance (albeit very small) that some of the features discussed in the post may not see the light of day (or change drastically). Also, all the screen caps in the posts are from the MAX Preview release, so there is always a chance that the UI and functionality shown will change. Okay, let’s get to it!

Design Fidelity Features

Theme Management The first new feature they examined is Flex Theme management and installation. Themes are not a new concept, they have been around since at least Flex 2 (I can’t recall if Flex 1/1.5 supported them, I think they did). A Theme contains style and skins assets for every Flex SDK component and is applied to your application during the compile process. The idea behind a theme is that you can apply a unified style across your application without having to go in and skin each component yourself. If you are familiar with WordPress, its the same concept as their themes; all the functionality stays the same but the look and feel can be drastically different.

The Theme market for Flex appears to be growing, but adding a theme to an app requires making compiler argument changes to make sure the theme’s assets are loaded and compiled into the generated SWF or AIR application. This means that the Flex Builder developer has to configure the project properties in the tool to make sure the Theme is applied. I have personally not used Themes in my applications due to the fact that all of the projects I have worked on have design teams and/or unique design requirements, but I have played around with themes in the past.

The Flex Builder team has seen the growing popularity of Themes and they want to make Theme installation a much easier process. Themes are packaged as SWC files that contain all the CSS and style assets. When a user downloads the SWC file to their machine they can then choose to install the theme into Flex Builder. To install a Theme, the user chooses the Import Theme… option which allows the user to point to the Theme file. The theme is then imported into Flex Builder and it can be selected from the new Theme management dialog.

You can access the theme management dialog by clicking on the “Manage Themes” link above the UI component panel in Design View. This dialog shows all the currently installed themes and a thumbnail of what the theme looks like. You then select what theme you want to apply and this updates the complier options for you and rebuilds Design view using the new theme. It also sounds like they are working on streamlining theme creation and how they are distributed to make theme use easier and more popular.

Catalyst and FXP Support

The next Design Fidelity workflow feature is the ability to handle importing and exporting of Flash Catalyst project files. Flash Catalyst is a new design/development tool by Adobe that is centered around creating and styling Flex applications. One of the most challenging processes of Flex development is applying complex custom UIs into your final application. The goal of Catalyst is to allow a designer or developer to import assorted creative asset formats, such as Photoshop files, Illustrator files and Fireworks files and then quickly build Flex UIs using the creative assets’ contents (layers, symbols, etc.). Once the layout / styling is done the Catalyst user can save their Catalyst built application as an FXP file and pass this on to a Flex developer to wire it up to data services and functionality. The FXP file created by Catalyst is a zipped version of a Flex Builder project which means that a Catalyst user can share their work with a Flex Builder developer or visa versa. This gets us into the new FXP feature and workflow being added to Flex Builder 4.

Flex Builder 4 has the ability to import an FXP file and then create a project within Flex Builder from the FXP file. This imported project has all the structure and content that was created inside Catalyst. From there the Flex Builder user can begin adding functionality to the Catalyst generated project, such as data binding and data service management. As the project moves along there will come a time where the UI will need to be modified. At this point the Flex Builder user can export the Flex Project back into the FXP file format and pass this to the Catalyst user. The Catalyst user can then open the FXP file, make the UI additions and then hand the FXP back to the Flex Builder user.

At this point, when the Flex Builder user imports the updated FXP it recognizes that the project already exists and provides the option to allow the user to merge the Catalyst changes into the existing project. When the user selects merge, the project conflicts are then highlighted in red within the project view and the user can then right click on the conflicted files to show a merge tool view that enables the user to determine what changes to bring into the project. This current workflow is in its very early stages and I assume that it will be both improved and changed as development/testing/feedback is provided.

The focus of the FXP support within Flex Builder is to help create a better streamlined workflow between the design and development aspect of Flex. My example above assumes that your Catalyst and Flex Builder user are different people, but this workflow can be used by a single person going between Flex Builder and Flash Catalyst. As both of these products move forward in development I expect to see a lot of discussions around integration, workflow and best practices for planning and structuring your Flex projects.

That’s all for now… The next post for this article will cover the new Test and Tune features that are being added to Flex Builder.