Flex 3 and AIR Pre-Release Tour Notes
We put the wraps on the Flex 3 and AIR 1.0 pre-release user group tour last week. I had the privilege of visiting eight different user groups over two weeks. There’s a lot of new stories to tell, not the least of which is the snow storm that slammed into Milwaukee, WI and Lansing, MI. The real story to developers however is the code, so here’s a walkthrough of the presentation to include a few snippets.
Note: I want to be perfectly clear that this is not an all encompassing list. These are snapshot descriptions of the demonstrations I gave during my stops on the tour. Others may have demoed different content. Additionally, these are just the features I felt best fit into the two hours it took to cover the material (best bang for the buck, as it were).
About Adobe
Before getting into features, it is important to level-set with an overview of Adobe, and specifically our RIA technology stack. The brand “Adobe” means different things to different people. At a developer-oriented user group, Adobe means Flash and Flex. To the business traveler on a plane, Adobe means Acrobat Reader and PDF. To my dad, who doesn’t know how to turn on a computer, Adobe means content that gets “photoshopped“. Adobe’s mission is:
“Adobe revolutionizes how the world engages with ideas and information.”
Adobe’s overall RIA technology stack includes everything from tools, to frameworks, to server infrastructure, to services. On the tools side, Flex Builder 3 gets some amazing new features. On the frameworks side, obviously Flex 3 is continuing to evolve to assist developers in building cutting-edge experiences. On the servers side there’s BlazeDS which offers approachable remoting and messaging. On the services side there’s ongoing development with projects like Adobe Kuler and Adobe Share.
Flex 3 is Open Source
Being open source isn’t really a feature per se, but it is fundamentally critical to the Flex 3 release. As an open source project, developers can expect access to an open bug-base, nightly builds and more transparency from the product team as to what’s planned in future releases. BlazeDS is also an open source project. In 2007, Adobe’s donation of Tamarin was the single largest open source donation Mozilla has ever received. Spry is an open source Ajax framework. The bottom line is that Adobe is quickly becoming a major player in the open source community.
Skin Artwork
If you’ve ever developed an RIA, then you’ve no doubt encountered integration problems between designers and developers. There’s a variety of new features in Flex 3 to make sure that the fidelity of a design stays intact, but is as functional and feature-rich as possible. With Flex 3, there are now design extensions available for Flash, Photoshop, Fireworks and Illustrator CS3 for skinning Flex components. Designers can choose a component, customize it using familiar tools, and then publish that for consumption in Flex Builder 3.
Importing Flash CS3 Components
In a similar vein, you might be the type inclined to build a component not with the Flex framework, but with good old ActionScript 3 and Flash CS3. With the new Flex Component Kit for Flash CS3 integration, getting from Flash CS3 to Flex Builder couldn’t be easier. After selecting a symbol from the library, select Convert Symbol to a Flex Component from the Command menu, and then publish. If you want to expose additional properties to Flex Builder, you’ll want to create an AS3 subclass of UIMovieClip and set the linkage. Within Flex Builder, add the resulting SWC to the build path, and you’ll be on your way.
package {
import mx.flash.UIMovieClip;
import flash.text.TextField;
import flash.events.Event;
public dynamic class TheaterDisplay extends UIMovieClip
{
public function TheaterDisplay()
{
super();
}
public function set title( value:String ):void
{
displayTxt.text = value;
}
}
}
CSS Design View
Once you’ve got assets into Flex Builder, you want to continue to maintain the fidelity of that design. Flex Builder now sports several new “design view” tools, but also a new design view for CSS. You can start with a blank CSS and visually assign styles to any number of components through a properties inspector. You can also open an existing style sheet file and view and manipulate properties (i.e. the YUI Flex skin). My favorite feature is the visual scale grid view that lets you zoom in and easily apply graphical skins.
If you enjoy making complex layouts, you should definitely check out the new constraints model. If you like programmatic skins, you’ll want to see the new “skin” style in the documentation. If you’ve always wanted to see your embedded fonts while working in design view, that too is now supported. These are just some of the additional features I covered only as bullet points, but that are certainly well worth your time.
Web Services Introspection
Now that you’ve maintained the design, how has Flex 3 grown to support richer data connectivity? Have you ever worked with the WebService class? You know that stack was largely rebuilt for Flex 2.0.1, right? The problem with using the WebSevice class is that you don’t get any code intelligence against the provided WSDL. If you head to the “Data” menu you’ll now find “Import Web Service” which will generate a complete AS3 class structure for you - this in turn gives you excellent code intelligence.
Data Wizards
It was common to hear developers coming from a “page refresh” mentality that struggled with the Flex SOA approach. Following up on that was the common request for examples about how to update data that has been modified in a Flex user interface. If you have a data source, then the good news is that you can generate all the server-side code (ASP.NET, Java, PHP and ColdFusion), and all the client-side Flex code (MXML and ActionScript 3) for a complete example. The generated example is thoroughly documented and includes all the common CRUD functionality and more.
Advanced Data Grid
I really enjoyed walking through the AdvancedDataGrid component during my demonstrations on the user group tour. You can get a lot of great new functionality simply by adding the word “Advanced” to your existing “DataGrid”. Sorting by multiple columns, and then using a selection mode to work with individual cells is a quick win. Move from DataGridColumn to AdvancedDataGridColumn and “columns” to “groupedColumns” to get grouped columns.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
creationComplete="svcPlanets.send()"
xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:XMLListCollection id="planets" source="{svcPlanets.lastResult..planet}" />
<mx:HTTPService
id="svcPlanets"
url="data/planets.xml"
resultFormat="e4x"
result="gc.refresh()" />
<mx:GroupingCollection id="gc" source="{planets}">
<mx:Grouping>
<mx:GroupingField name="@category" />
</mx:Grouping>
</mx:GroupingCollection>
<mx:AdvancedDataGrid
dataProvider="{gc}"
width="100%"
height="100%">
<mx:groupedColumns>
<mx:AdvancedDataGridColumn
dataField="@name"
headerText="Planet" />
<mx:AdvancedDataGridColumnGroup
id="details"
headerText="Details"
textAlign="center">
<mx:AdvancedDataGridColumn
dataField="@category"
headerText="Kind" />
<mx:AdvancedDataGridColumn
dataField="@year"
headerText="Year" />
<mx:AdvancedDataGridColumn
dataField="@moons"
headerText="Moons" />
</mx:AdvancedDataGridColumnGroup>
<mx:AdvancedDataGridColumn
dataField="@cost"
headerText="Cost" />
</mx:groupedColumns>
</mx:AdvancedDataGrid>
</mx:Application>
There is really far too much to just stop there however, and I put together a little sampler application you can explore some of the options. This includes working with hierarchical data, making hierarchical data from flat data and summary rows to name a few features. I didn’t get as far on the code for the sampler as I had hoped, but it should get you oriented pretty quickly. The option to view source is included, but you can also download the source directly.
Charting Enhancements
There are so many new things you can do with the data-oriented charts in Flex 3, that it’s just downright silly. I think the per-item fills and labels, as well as the support for an arbitrary number of axes are instant crowd pleasers. My personal favorites are chart interaction (i.e. highlighting, selection mode) when used in conjunction with drag and drop support.
(The chart above is interactive - you can select individual plot points or drag and drop to select a group of plot points. The source code is available for viewing and download.)
The sampler I mentioned above includes many charting examples as well so be sure to check it out. As if that wasn’t enough, when it comes to charting, ILOG now also offers a wide array of charts for Flex. These charts are developed by ILOG, but sold through Adobe only. My favorite of their charts is the organizational chart, which I hear asked for all the time.
Memory and Performance Profiling
This is easily among the more challenging demonstrations to show. How do you present a real-world, complex application being analyzed by these new tools, but still keep the conversation at a level that doesn’t totally lose everybody? I decided to take a page from Matt Chotin’s book and go with the somewhat humorous problem of a class called MemoryHog that was doing exactly that - hogging memory. The reality here is that you really need to spend some time with this feature on your own project to really get a taste for the power.
Code Refactoring
This feature really falls into a larger group called “Framework Evolution” but I demonstrated it back in the “Working with Data” section alongside the new web services wizards. The generation process for a WSDL would always create a static property that wasn’t inline with the event name offered by code intelligence. The result was an error that was fixed with relative ease by drilling into the class and renaming the property. You get the chance to view the before and after snapshots of all the changes with a preview option. You can even select/deselect the various changes you want to make.
Reduced Application Size
The Flex framework is big. There’s a vast amount of sophistication offered by the framework and supporting classes. Under the most cases, the classes that your application needs are compiled directly into the resulting [SWF] file. With Flex 2 we introduced the ability to use modules to allow developers to extract portions of their application [additional SWF files], and then load and unload them as needed. With Flex 3 you now have the ability to have the Flash Player cache the entire framework on the client. In all my relatively simple demonstrations, this cut the size of the main file by fifty percent (50%) or more.
I really enjoy dispelling myths about Flash and Flex, so I also took time to talk about the JavaScript wrappers that Flex Builder can create for your Flex applications. This is a natural evolution of the Flex-Ajax Bridge, but is now integrated with Flex Builder. I think that Flash/Flex and Ajax working together really is the killer combination.
Bookmarking and support for the back button is also another common myth. The HistoryManager in class has supported the back button in the browser for a while, but now with Flex 3, there’s also support for deep linking (i.e. bookmarking).
Other
Did I mention that the compiler is faster? In the eight user group presentations I gave, I never waited for a compilation. During the entire presentation I was swapping out code samples, and then saving (i.e. compiling) very rapidly and never waited for a compile. Did I mention that the design view is now extensible? Did I mention that you can now load localization resource bundles at runtime? Did I mention that there’s new ANT tasks as well as a web tier compiler for IIS and Apache? Whew!
BlazeDS
This was one of my biggest surprises during the user group tour - virtually nobody had heard of BlazeDS, which I think represents a pretty significant milestone. To appreciate that milestone, you kind of need to understand some history of data connectivity and Flash. You see, Adobe, previously Macromedia has been at this RIA bit for about five years now. We coined the term and made the market. Through a position of leadership, we know the pains that RIA developers will encounter.
The most common first pain is that of efficient data exchange. You see, XML and by extension SOAP, are very verbose formats. They work great for the few hundred records here or there, but they don’t scale well at enterprise levels. They also take more development effort to expose your existing logic in that format. It is for these reasons that we introduced Flash Remoting.
Flash Remoting takes existing logic on the server and allows you to connect to it directly without additional development. Flash Remoting itself acts as a server proxy to that logic. It also serializes the data structure into a binary format (still over HTTP/S) which affords a substantially greater degree of performance for the purposes of data transfer. To see this in action, see James Ward’s benchmark application, which will show significant gains over most other formats.
Long story short, Flash Remoting is now a core part of LiveCycle Data Services (indeed LiveCycle ES itself). It tends to be a pretty big step for developers to go from XML to LiveCycle, and BlazeDS provides that intermediary step. BlazeDS provides developers an open source implementation of “remoting” and also includes the messaging infrastructure of LiveCycle Data Services (via HTTP Keep-Alive and HTTP polling). This creates a basis by which developers can deliver high-efficiency, data-connected and collaborative applications to include data push.
As an open source project, BlazeDS also provides reference implementation for providing remoting and messaging for various other technologies that integrate well with Flash. We’ve also released the specification for that serialization format, called AMF. This means that technologies that have already been implementing AMF by inspecting the HTTP transmissions, can now provide reliable and accurate versions for their respective technologies.
Experience Economy
I made the decision a couple of times during the user group tour to give a break between Flex 3 and AIR. It turned out to be a poor choice, as a lot of people assumed that AIR didn’t apply for them, and left the presentation. I think AIR is actually far more broadly compelling than Flex 3. That’s not to belittle the engineering that has gone into Flex 3, but AIR appeals to a broader audience, and often times for different reasons than Flex 3.
I’ll spare you the long version and instead suggest that you read the Experience Economy (Pine, Gilmore). As applied to RIA, the summation is that consumers are carrying an expectation for experiences into the digital world. The problem is that delivering on that expectation often means extending a brand to the desktop. Developing for the desktop requires a completely different skill set and likely different infrastructure than the web-based version (i.e. MFC, Objective C, Tk/Tcl, etc.).
“Adobe AIR allows web developers to use existing technologies to build and deploy desktop applications.”
Adobe AIR
The most popular demonstration for web technologies leveraged on the desktop with Adobe AIR is the eBay Desktop. I also like to show Finetune, Kuler, Adobe Media Player and even my own Ajax version of Christian Cantrell’s MapCache. Traditionally, the textbook version for continuing the experience to the desktop is actually Apple and Apple iTunes (specifically the iTunes Music Store). Going to the desktop isn’t enough, there needs to be integration (where the iPod consistently beats competitors).
When it comes to Adobe AIR, you can develop your application entirely using an HTML-oriented workflow (via embedded WebKit), or a Flash-oriented workflow. What’s better is that these two technologies are tightly integrated. This allows JavaScript developers to directly invoke any Flash class, and lets Flash developers interactive directly with the HTML DOM. For the purposes of AIR 1.0 there’s also integration with Acrobat Reader, but only for the purposes of inline viewing.
Regardless of the technology stack you choose, you get access to a number of desktop APIs. This means local file IO, the detection of network availability, system tray notifications, running as a background process and native menus, an update mechanism for both the AIR runtime and your application, native drag and drop to include text, files, bitmaps and URLs, and even an embedded relational data store using SQLite.
This complete stack is available cross operating system giving developers a consistent means for deployment.
For the purposes of AIR 1.0 we’ve had to make some sacrifices as well. There are certainly features that AIR does not have, and that don’t make for good AIR use-cases in this initial release. The most notable missing features include limited hardware acceleration (video only), no access to native libraries, no USB or serial support, limited accessibility and printing, as well as limited localization. Don’t let that list fool you however, as there’s still plenty there to build very compelling desktop applications out of web technologies.
As a proof to that, for my finishing demonstration, I build a simple browser. The purpose of this isn’t to build yet another browser, but rather just to show the completeness and ease of developing using web technologies. Not satisfied with that, I then add native integration by capturing a screen shot of the web browser pane, encoding that as PNG and writing the image to a file on disk. The entire application comes in at about thirty (30) lines of code, which follow for your enjoyment.
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication layout="absolute" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.graphics.codec.PNGEncoder;
public function doSave( event:Event ):void
{
var bmp:BitmapData = new BitmapData( web.width, web.height );
var png:ByteArray = null;
var file:File = File.desktopDirectory.resolvePath( "screen.png" );
var stream:FileStream = new FileStream();
var encoder:PNGEncoder = new PNGEncoder();
bmp.draw( web );
png = encoder.encode( bmp );
stream.open( file, FileMode.WRITE );
stream.writeBytes( png, 0, 0 );
stream.close();
}
]]>
</mx:Script>
<mx:Label x="10" y="12" text="Address:"/>
<mx:TextInput id="address" right="121" left="72" top="10"/>
<mx:Button label="Go" right="72" top="10" click="web.location = address.text"/>
<mx:Button label="Save" right="10" top="10" click="doSave( event )"/>
<mx:HTML id="web" bottom="10" left="10" right="10" top="40"/>
</mx:WindowedApplication>
Conclusion
I had a great time touring eight top notch user groups across the nation for this pre-release tour. I’ve had many requests for the slides, which are available in a couple versions (mine and marketing). I crammed as much Flex and AIR as I possibly could in a two hour block. This is generally longer than most user group presentations, but almost universally, the audiences not only stayed, but remained attentive throughout all the features. I even had a few folks tell me that they hadn’t realized that two hours had elapsed (hard core)! While I’ve tried to provide a recap here, I’ve really only scraped the tip of the iceberg. I encourage you to dig further, go deeper and let us know what you think about Flex 3 and AIR 1.0.