Three reasons to try Flex 3

by Tom Ortega II

Adobe recently released Flex 3. As a developer and Flex 3 beta tester, I've been using Flex 3 for quite a while now. In this article, I discuss three features that I believe will be of particular interest to developers — especially those who haven't tried Flex. Believe me, with the growing demand for rich Internet applications (RIA) , there's no better time to make the move.

On the same day Flex 3 became available, Adobe released the first official version of Adobe AIR. Flex, Adobe AIR, and Adobe Flash Player are the foundation of the Adobe technology platform for RIAs. Before I jump into Flex 3, here's a brief explanation of the products that make up the platform:

New features in Flex 3

Three new features in Flex 3 should be of particular interest to developers:

These are not by any means all the new features in Flex 3. There are countless others. If you want to learn more about all the new features, visit the Flex product page.

Open source: What's the big deal?

Until this release, the Ajax community (along with a few other RIA technologies) had the open source pedestal to stand on. What that means is if you chose one of those open source technologies, you had complete access to the code behind the technology. Why is this important? There are two reasons: a business reason and a technical reason. Let's tackle the business reason first.

If your business is based on a technology, you need to be sure that you can always deliver your product. For example, upper management wants to know that even if the software company that made the technology fails or stops supporting it, you still have the information (and code) you need to continue your development efforts.

Flex bugbase screenshot

Figure 1. Flex's public bug base system

Then there's the technical reason. In the future, you may become so advanced with a technology that you are as skilled, or more skilled, than the people who developed it. You may find a bug or a performance degradation that you need to fix to proceed. In a non–open source (or proprietary) model, you must file a complaint with the company that developed the technology and hope it gets fixed quickly. With open source products, you not only have access to the source code behind the product, but you also have the ability to file bug reports (or feature requests) in a public bug base and will be able to track all bugs submitted by the public as well as Adobe employees.

Flex is now an open source framework for building and maintaining web applications. It provides a modern, standards-based language known as ActionScript 3.0. The Flex framework was written using common design patterns and thus easily supports them in your applications. MXML, a declarative XML-based language, is the markup language that Flex then compiles into ActionScript 3.0. The benefit of MXML over ActionScript 3.0 is that it provides a simpler way to lay out and build your applications.

Finally, Adobe has posted the roadmap for Flex on the Adobe Open Source website so that developers can gain more visibility into future plans for Flex.

Adobe Open Source website screenshot

Figure 2. Adobe's Open Source site

As you can see, making Flex 3 open source is big news. Adobe has released Flex as an open source technology under the Mozilla Public License (MPL). This includes not only the source to the ActionScript components from the Flex SDK, which have been available in source code form with the SDK since Flex 2 was released, but also the Java source code for the ActionScript and MXML compilers, the ActionScript debugger, and the core ActionScript libraries from the SDK.

Adobe isn't stopping with Flex 3, though. If you visit the new Adobe open source website, you can track all of Adobe's open source efforts — from the products its releasing as open source to the open source products it participates in. BlazeDS is another Adobe open source product that launched at the same time as Flex 3. It enables your Java back ends to talk to Flex and AIR applications using the native binary protocol in Flash. (Translation: You get lightning-fast response times between your clients and your servers.)

Framework cache: No more download penalty for using Flex vs. Flash

The long-time bane of many Flash programmers is that Flex bloats their applications. What they mean by that is that Flex is a framework, and a framework is a collection of classes. Therefore, the benefit of Flex is using the framework to build the application.

The framework enables you to use simple MXML tags, such as <mx:Button/> to create an application with a button. There are countless classes in the framework to make application building easy. However, what if you use only one class and nothing else? In Flash, a compiled SWF application with one button would be 16K. In Flex 2, that same one-button application would be 124K. The 108K difference is the framework classes that are tied to the button class and thus get compiled into your application.

Framework cache screenshot

Figure 3. A peek at the various framework libraries

To give you an idea of how big a hit we're talking about, let's review the sizes of the three primary libraries in Flex:

Remember, all these libraries were downloaded each and every time a Flex application loaded, even though the framework never changed. Adobe listened to its customers and found a way to cache the framework libraries in Flash Player. This means that Flash Player on the client's machine now keeps track of its Flex usage. If it goes to one website and that site uses Flex, it downloads the framework libraries as well as that application's code. Flash Player will realize that the framework is now a signed, runtime-shared library (in other words, a new file format with a .swz extension). The next time Flash Player visits that site or any other Flex site, it automatically tells the server that it already has the framework cached and requests the application SWF minus the framework. Therefore, your Flex application download size can now match the size of the same application created in Flash.

I'm sure some of you are already wondering if you can create your own signed libraries. To quote the online documentation, "Only Adobe can create signed Runtime Shared Libraries, and only signed RSLs can be stored in the Flash Player cache. If you create an RSL that contains a custom library, it will be unsigned. You cannot sign it." My only addition to that would be, "…yet." Knowing Adobe, if you ask loudly enough, the company finds a way.

Creative Suite 3 integration: Not just a Flash in the pan

Flex 2 saw the early beginnings of CS3 integration, primarily with Flash. This makes sense since Flash and Flex are closely related. But let's be honest, how many designers work in Flash exclusively? Now, with Flex 3, Adobe is making use of more products in its family.

If you check out Flex Skin Design Extensions & Flex Component Kit for Flash CS3 downloads in the Adobe Developer Connection, you see that you can now use four applications to create custom Flex skins. A skin is the graphical representation of the particular class you're skinning. For example, in the case of the button class, there would be at least four required states: normal, mouseOver, mouseDown, and disabled. While Flex Builder is great for coding these classes, it's terrible at creating precise and elegant graphics. But with the depth of Adobe products, why should you use Flex for graphics design?

Flash to Flex skin template image

Figure 4. Flash's new skinning templates for Flex 3

Flash CS3 Professional, Illustrator CS3, Photoshop CS3, and Fireworks CS3 are four distinct tools you can use to create skins for your Flex applications. Why four? Why not? Everyone has varying skill sets and comfort levels with these tools. Therefore, Flex 3 gives you the ability to use the tool you feel most comfortable with. What's the difference? Photoshop and Fireworks let you create bitmap skins, while Flash and Illustrator let you create vector-based skins.

One last thing: In Flex 2, Adobe introduced the Flex Component Kit for Flash. This enables you to create a component in Flash that you can use directly inside of Flex. With Flex 3, the kit has expanded. In addition to components, you can now export Flash containers to Flex. What does this mean for you? Now, instead of just creating a button in Flash, you can create the button and the dialog box that contains it. This means your Flash whiz can now create your application's containers and then hand them off to your Flex developer to be put in the application. Check out the new version of the kit.

Where to go from here

As you can see, the Flex team put a lot of hard work into Flex 3. And these are just three of the numerous features in this great release. Flex product manager Matt Chotin covered these features during the 360Flex keynote. He also gave us an entertaining glimpse of the Flex 3 development team, which can be found on his blog.

With the Adobe and Macromedia merger, many wondered if the promised synergies would come about. Would Adobe stifle Macromedia? Would Macromedia get lost in Adobe's giant shadow? This release (and, in particular, the development video) shows that Adobe didn't become an overbearing, stifling partner. In fact, it has become quite the opposite. It has modified its tools to help support the designer–developer workflow with products such as Creative Suite 3 and Flex 3.

Adobe AIR is another release that shows the potential of this fully integrated merger. Here is a runtime that lets you run Flash, Flex, and HTML applications on your desktop. It allows full integration with your file system as well as online and offline support. Not to mention, it also supports ubiquitous PDF. You can expect great things to come with Adobe AIR.

If you haven't looked at Flex 3 or Adobe AIR, now is the time. While RIA technologies were interesting in the past, they're quickly becoming a necessity in the next phase of the web. With so many tie-ins with tools you know and love, you will find yourself building next-generation RIAs in no time.

Tom Ortega II is a Principal at 360Conferences, where he coordinates low-cost, developer-friendly conferences such as 360Flex and 360|iDev. In addition, he keeps up his coding skills with projects at RapidNinja under the alias of "Ninja Debu".