Robert Savage

Terry Ryan, Adobe Platform Evangelist

I just returned tonight from the Alamo Area Cold Fusion Users Group special event hosting Terry Ryan, Adobe platform evangelist.  Terry gave a great overview covering the new Flex 4 enhancements, Spark,  Flash Catalyst, Centaur, and Bolt.  Unfortunately we ran short on time and did not get very far into Flex Builder Flash Builder 4.0, but the group consisted mostly of Cold Fusion centric developers and Terry appropriately tailored the discussion to focus on their interests.  Personally, not being a CG guy, I would have preferred much more in depth discussion on Flex 4 and Flash Builder 4, but I did get to see some really cool demos on what capabilities are coming soon and the strategic direction and logic behind the Flex 4 changes.

Some of the key highlights for Flex that I noted are listed below …

Bidirectional (Two-way) data binding expressions

The data binding capabilities in Flex 3  are limited to one-way directional binding, Flex 4 will provide a new syntax for data binding expressions that you want to be bidirectional or two-way.  Simply adding the ‘@’ symbol at the beginning of the binding expression turns it into a two-way binding expression.

@{bindable_property}

In the example below we will define the text properties of two text input components with an in-line tw0-way binding expression that will keep the text value of these two components in sync.

  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:TextInput id="t1" text="@{t2.text}"/>
      <mx:TextInput id="t2"/>
  </mx:Application>

Additionally if you prefer using the binding  <mx:Binding> tag in your MXML, there is a new twoWay property that also allows you to define the two-way binding expression .

  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
      <mx:TextInput id="t1"/>
      <mx:TextInput id="t2"/>
      <mx:Binding source="t1.text" destination="t2.text" twoWay="true" />
  </mx:Application>

More information on the two-way binding expressions can be found here:
http://opensource.adobe.com/wiki/display/flexsdk/Two-way+Data+Binding

Advanced CSS

Adobe has significantly enhanced the CSS support for Flex 4 applications.  These enhancements include Multiple class selectors, ID selectors,  descendant selectors, pseudo (state) selectors.

For detailed information on these new additions, please see the Adobe specification:

CSS Advanced Selectors - Functional and Design Specification

Here is a great presentation overview video covering the new CSS enhancements.

FlashCamp San Francisco: Advanced CSS in Flex 4

Enhanced States Syntax / In-line State Syntax

A new way to more cleanly manage component changes across state changes.  In Flex 3 this could create quite ugly code because ever change to a state required a series of mx:SetProperty, mx:AddChild, and mx:RemoveChild tags for each component property in each state.   This could quickly get out of hand and in practice, it made the states mechanism less desirable to use and manage.

Here are Adobe’s code examples:

This is the the Flex 2/3 method of defining states and component changes in states:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:states>
        <mx:State name="newCheckbox">
            <mx:AddChild relativeTo="{vbox}">
                <mx:CheckBox id="checkbox" label="Checkbox" />
            </mx:AddChild>
        </mx:State>
        <mx:State name="newTextArea" basedOn="newCheckBox">
            <mx:AddChild relativeTo="{vbox}">
                <mx:TextArea id="textarea" />
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:VBox id="vbox">
            <mx:Button label="Click" click="currentState='newCheckbox'" />
            <mx:Button label="Click" click="currentState='newTextArea'" />
    </mx:VBox>
</mx:Application>

Now this exact same example refactored to use the new Flex 4 in-line state syntax:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:ns.adobe.com/flex/halo"
   xmlns:m="http://ns.adobe.com/mxml/2009" layout="absolute">
    <m:states>
        <m:State name="default"/>
        <m:State name="newCheckbox"/>
        <m:State name="newTextArea"/>
    </m:states>
    <mx:VBox>
        <mx:Button label="Click" click="currentState='newCheckbox'" />
        <mx:Button label="Click" click="currentState='newTextArea'" />
        <mx:CheckBox id="checkbox" label="Checkbox" includeIn="newCheckbox, newTextArea"/>
        <mx:TextArea id="textarea" includeIn="newTextArea"/>
    </mx:VBox>
</mx:Application>

Additionally you can define state specific properties and event handlers using this in-line syntax:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="library:ns.adobe.com/flex/halo"
   xmlns:m="http://ns.adobe.com/mxml/2009" layout="absolute">
    <m:states>
        <m:State name="disabledState"/>
        <m:State name="enabledState"/>
    </m:states>
    <mx:HBox>
        <mx:Button id="button" label="Enable" label.enabledState="Disable"
            click="currentState='enabled'"
            click.enabledState="currentState=''" />
        <mx:TextInput enabled="false" enabled.enabledState="true"
             text="example text" />
    </mx:HBox>
</mx:Application>

For more information on the new in line state syntax please see the
Enhanced States Syntax – Functional and Design Specification

Primitive Graphic Shape Components

The Flex 4 FXG, code named Gumbo, provides new primitive graphic components including rectangles, ellipses, lines, and Path.  This is primarily in support of the new Flash Catalyst tool-set that intended to better separate the designer goals from the programming implementation.  Nevertheless, these primitive graphic components are a welcome addition that will help make creating simple onscreen graphic and composite controls much easier.

More information here:
http://livedocs.adobe.com/flex/gumbo/html/WS145DAB0B-A958-423f-8A01-12B679BA0CC7.html

Text Engine (requires Flash Player 10)

Finally the major new feature I have been waiting for is the new FP10 text engine support.  Flex 4 text based components make use of the new text engine provided by Flash Payer v10.  I have not  had a chance yet to explore this new feature-set, so I will be digging into it soon and posting more info.

Terry demoed the New York Times Reader Adobe Air application and shows some of the new impressive capabilities of the new text engine.

I am more interested in the right-to-left (RTL) support added to properly support internationalized applications in RTL languages such as Hebrew and Arabic.

For those stuck in Flex 3, I know there is a Text Layout Framework provided to make use of the new Adove Flash Player 10 text engine.  Here are a couple of reference documents on this framework:

• Overview of the Text Layout Framework API Reference
• Overview for developers using the Text Layout Framework