InfoQ: Top 10 Changes in Flex 4This week, Adobe released their first official beta of Flex 4, codenamed Gumbo. The release includes a number of major changes. This list gives a high level overview of the items that have changed in the latest version of the popular RIA framework.
1. Integration with Adobe Catalyst
The primary focus of the Flex 4 development effort is providing support and integration with Adobe Catalyst - Adobe's new designer tool for creating rich Internet application assets without writing code. Catalyst promises to change the way that developers and designers are able to collaborate in their efforts, as it recognizes that application developers and designers work differently. Thus, it allows each to concentrate on what they are good at, as it enables each to work in the traditional ways they are accustomed to. The majority of the changes on this list have been made in order to facilitate integration between Flex and Catalyst.
Learn more about Adobe Catalyst here.
2. Spark Component Architecture
Each version of Flex includes a full component library with all of the common items needed to build an application, including data grids, buttons, layout containers, etc. In Flex 4, the underlying architecture of the components is known as Spark, where it was known as Halo in Flex 3. A major part of the effort to support Catalyst is in revamping the component model to adhere to a much higher level of separation of concerns.
In the new Spark component model, core logic, skinning, and layout have been broken out so that they are handled independently of one another. The Spark component model is built on top of the Halo component model. Basically, that means that it extends from Halo's core base class UIComponent, allowing Flex4 to be adopted incrementally and Flex 3 components to be used in Flex 4 applications.
In addition to the other changes, effects have been updated in Flex 4. Effects can now animate arbitrary objects and types, allowing for much greater flexibility in their use. Flex 4 effects have been implemented in the new "spark.effects" package. Just like the new component library, the Flex 4 effects have been re-implemented, leaving the Flex 3 effects in place for backwards compatibility. For more information on Gumbo Effects see Chet Haase's article on Flex 4 Effects or his blog.
Read the following white paper to learn more about the Spark architecture
3. MXML 2009
MXML is an XML-based abstraction, built on top of ActionScript 3 - the Flash Player programming language. MXML is used for laying out the view portions of the user interface and supporting tooling, such as the IDE, and now Catalyst. MXML 2009 includes a number of updates to support the decoupling of different behaviors (core, skinning, and layout) and the new component library. The Flex 4 components have been implemented in their own package (spark.components), leaving the Flex 3 components in place. MXML 2009 includes a new namespace to support this.
The following example of an application declaration shows using the namespace and defining both the Spark and Halo component namespace:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
Thus, one can use a Flex 4 Button by doing the following:
<s:Button label="My Flex 4 Button" />
And, the following for a Flex 3 Button:
<mx:Button label="My Flex 3 Button" />
Check out the MXML 2009 specification for additional detail on the changes.
4. Improvements to View States
Flex 2 introduced the notion of states to the Flex framework, where changes to a view component can be managed through a simple state change. In Flex 4, view states have been revamped to simplify the syntax and make them easier to use. An example of the simplified syntaxes are the new language attributes includeIn and excludeFrom, which can be set on a component to direct them how to behave on a state change (See below).
<!-- Given the states A,B,C -->
<m:states>
<m:State name="A"/>
<m:State name="B"/>
<m:State name="C"/>
</m:states>
<!-- This button will appear in only states A and B -->
<Button label="Click Me" includeIn="A, B"/>
<!-- This button will appear in states A and B -->
<Button label="Button C" excludeFrom="C"/>
Look here for more information on the changes to View States.
5. FXG Support
At its core, the Flash Player is a drawing engine. Adobe has leveraged this with the introduction of FXG in Flash Player version 10, and now its introduction to Flex. FXG is a declarative graphics format, which enables portability of assets between tools. That means that designers will be able to create assets in Catalyst or CS4 Illustrator, and the Flex application developer will be able to import them and use them without having to modify them.
Check out the FXG Specification for more details.
6. Skinning Enhancements
The biggest change in the Spark component model was overhauling skins so that they now control all visual aspects of the components and encapsulate their logic outside of the components core. Thus, this allows the visual parts of a component to be modified independently of the underlying core logic.
Let's look at the PanelSkin.mxml skin file, the default skin for the Panel container, for an example:
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">
<fx:Metadata>
<![CDATA[
/**
* @copy spark.skins.default.ApplicationSkin#hostComponent
*/
[HostComponent("spark.components.Panel")]
]]>
</fx:Metadata>
<fx:Script>
/* Define the skin elements that should not be colorized.
For panel, border and title backround are skinned, but the content area and title text are not. */
static private const exclusions:Array = ["background", "titleField", "contentGroup"];
/**
* @copy spark.skins.SparkSkin#colorizeExclusions
*/
override public function get colorizeExclusions():Array {return exclusions;}
/* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
static private const contentFill:Array = ["bgFill"];
/**
* @inheritDoc
*/
override public function get contentItems():Array {return contentFill};
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
</s:states>
. . . . .
<s:Rect left="1" right="1" top="31" height="1">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>
<!-- layer 5: text -->
<!-- Defines the appearance of the PanelSkin class's title bar. -->
<s:SimpleText id="titleField" lineBreak="explicit"
left="10" right="4" top="2" height="30"
verticalAlign="middle" fontWeight="bold">
</s:SimpleText>
<s:Group id="contentGroup" left="1" right="1" top="32" bottom="1">
</s:Group>
</s:SparkSkin>
Since the only job of this skin file is to control the visual appearance of the Panel container, it makes it possible for a designer to modify how the component appears without ever editing the component source code or understanding the internal behavior of the component. More importantly, it allows designers to use Catalyst in a way that is natural to them.
Look here for more information on skinning Gumbo components.
7. Updated Layout Model
Those familiar with Flex development will notice that the majority of the containers used in the Flex 3 developer are not a part of the Gumbo component library. This is because layout has been decoupled and is now handled through delegation. Since most of the Flex 3 containers existed simply to provide different forms of layout (e.g. HBox for horizontal layout, VBox for vertical layout), they are no longer needed.
The following example shows one way that a Flex developer can now define layout. This example uses the Group class to manage the buttons, which is a new Spark class for management content items. The result is the two buttons displayed side-by-side, like it would have with an HBox in Flex 3.
<s:Group width="400" height="400">
<s:layout>
<s:HorizontalLayout paddingLeft="5" paddingTop="5" />
</s:layout>
<s:Button label="Button 1" />
<s:Button label="Button 2" />
</s:Group>
Adobe's Ryan Stewart hosts the following tech talk reviewing the new layout mechanisms: http://blog.digitalbackcountry.com/2009/05/flex-4-layouts-on-tech-talk-with-ryan-stewart/
8. Flash Builder 4
Flash Builder 4, formerly known as Flex Builder, is the latest version of the Eclipse based IDE for application developers. The new version comes with a handful of updates including: conditional debug break points, more refactoring tools, and FlexUnit 4 support. As always, it includes MXML, ActionScript 3, CSS editors, a visual designer, and the Flex performance and memory profiler (profiler only in the Professional version).
In addition, the latest version includes advanced data management features to simplify the development of data-centric applications. This includes client side data management features that handle CRUD operations and scrolling through large collections on your services.
Get more information on the IDE here.
9. Compiler Performance
A major pain point most everyone developing Flex 3 applications has encountered is poor compiler performance. Thus, one of the published goals for Gumbo was to improve compiler performance in Flex 4. At this point, there are not any official benchmarks published from this work. However, Adobe's Peter Donovan did publish some notes on his early efforts, stating that he believed a 25% improvement would be reached without significant restructuring. He also said that to achieve a 3-4 times improvement, a redesign will be required. Certainly everyone developing enterprise Flex applications hopes that this is addressed by the time Flex 4 ships at the end of 2009.
See Peter Donovan's notes for more information.
10. New Text Capabilities
A major knock on Flash based applications (both Flex and non-Flex based) has been the ability to effectively deal with text. In Flash Player 10, Adobe introduced a new text engine to support the demands of rich Internet applications (multi-lingual, print, keyboard short-cuts, etc). Gumbo includes a handful of new text classes (RichText, SimpleText, etc) for more robust text support within the Flex framework. In addition, Adobe is working on their new Text Layout Framework to give all ActionScript 3 developers the ability to harness the power of the Flash Player's text engine. Learn more about the Text Layout Framework at: http://labs.adobe.com/technologies/textlayout/
As you can see with the wide range of changes, Flex 4 represents another step forward for the popular RIA platform. For additional information on the Flex 4 SDK changes, see Matt Chotin's article, What's new in Flex 4 SDK beta.
Author's Bio
Jon Rose is an enterprise software consultant and Flex Practice Director at Gorilla Logic, Inc. located in Boulder, Colorado. He is an editor and contributor to InfoQ.com, an enterprise software community. He is the co-host of DrunkOnSoftware.com, a videocast for those who like booze and bits. He has worked with clients large and small in both the private sector and government. His love of solving problems drives him to build quality software. You can read his blog at: http://ectropic.com.
This week, Adobe announced the beta release of the Text Layout Framework, an extensible library, built on the new text engine in Adobe Flash Player 10. This will allow developers and designers to use more sophisticated typography layouts in Web applications. The framework is intended for use with Adobe Flash CS4 Professional or Adobe Flex, and is included in the next version of Flex, code named Gumbo.
Use packages to organize and structure your projects codebase.
