Migrating fx3tofx4

MIGRATING FROM
FLEX 3 TO FLEX 4
It’s easy, trust me.

JONATHAN CAMPOS
UGM - ACP - ACE - Dedo Employee
twitter: @jonbcampos | blog: http:unitedmindset.com/jonbcampos

FLEX 4 REQUIREMENTS

• Flash Player 10

FLEX 4 REQUIREMENTS
Worldwide Ubiquity of Adobe Flash Player
by Version - March 2010

FP 8 &
FP 9 FP 10
Below

Mature
Markets 99.3% 99.1% 97.0%
US /
Canada 99.3% 99.2% 97.2%
• Flash Player 10
Europe 98.6% 98.3% 96.1%

Japan 99.3% 99.0% 97.3%
Australia /
New Zealand 98.0% 97.9% 94.6%

Pixel Bender Spark &
Integration Skinning

Enhanced:
Halo Services Effects Fx3
States RSLs Charting Text (TLF)
States FXG
Styles SWCs OSMF
Effects Modules Compiler
RSLs Virtualization
Validators AIR Scrollbars
Utilities Charting AsDocs
Item Renderers Fx4
2-way Data Advanced
Binding CSS

FX4 EXTENDS FX3

• Core Concepts

• Spark vs Halo

• Core Concepts

• Spark vs Halo

• Enhancements

• States, Effects,
Compiler, RSLs

• Core Concepts

• Spark vs Halo
• Common Migration
• Enhancements Pitfalls
• States, Effects, • Bonus!
Compiler, RSLs
• Flex 4 Component
• New Concepts Lifecycle
• TLF, OSMF, FXG,
Advanced CSS

SPARK VS HALO
MXML Spark Spark
Component Component Skin

Graphics
Layout Graphics
Animation Layout
Parts
States Animation
Behavior Parts
Logic
Data
States

CSS Properties

SPARK VS HALO
MXML Spark Spark
Component Component Skin

Graphics
Layout Graphics
Behavior Animation Layout
Parts
Logic States Animation
Data Behavior Parts
Logic
Data
States

CSS Properties

NEW NAMESPACES

• fx="http://ns.adobe.com/mxml/2009"

• s="library://ns.adobe.com/ﬂex/spark"

• mx="library://ns.adobe.com/ﬂex/mx”

CSS NAMESPACES

• @namespace "library://ns.adobe.com/ﬂex/spark";

• @namespace mx "library://ns.adobe.com/ﬂex/mx";
<Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace unitedmindset "library://ns.unitedmindset.com";

s|Button { color: #990000; }
unitedmindset|MyFancyButton { color: #000099; }

</Style>

EFFECTS
• Fx3 Effects still work off anything build from UIComponent

• Fx4 Effects rebuilt to work off of Spark Primatives

• Fx4 Effects are based off the Animate Class

• Reworked Classes:

• Move, Rotate, Resize, Fade

• Brand New Classes:

• Scale, AnimateColor

STATES (IN FLEX 3)
<mx:states>

<mx:State name="submitState" basedOn="">

<mx:SetProperty target="{submitButton}" name="label" value="submit" />

<mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>

<mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>

</mx:State>

<mx:State name="clearState" basedOn="">

<mx:SetProperty target="{submitButton}" name="label" value="clear" />

<mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />

</mx:State>

</mx:states>

...

<mx:Button id="submitButton" />

STATES (IN FLEX 4)

<s:states>
<s:State name="submitState" />
<s:State name="clearState" />
</s:states>

<s:Button label.submitState="submit"
textDecoration.submitState="underline"
click.submitState="trace('done')" click.clearState="emptyDocument()"
label.clearState="clear" textDecoration.clearState="none"/>

CHARTING
• FilterFunctions for chart types

• Can specify custom ﬁlter functions against the data set

• Inverted axis support

• Axes can be drawn right-to-left and top-to-bottom (in addition to left-to-right,
bottom-to-top)

• RendererDirection in PieSeries

• PieSeries can be renderer in clockwise direction (in addition to default, counter-
clockwise direction)

• Performance related bug ﬁxes

COMPILER
• Incremental Compilation

• Large apps are 50-80% better then in Flex 3

• Small apps are similar to Flex 3

• Full Compilation

• Large apps are 30-40% better then Flex 3

• Small apps are 10% better then Flex 3

• Compiler Memory Usage

• Large apps are 30% better then Flex 3

• Large multi-project apps are 70% better then
Flex 3

• Small apps are similar to Flex 3

RSLS

• RSLs are linked by default in Flex 4

• Default linkage changed from static (Flex 3) to RSL (Flex 4)

• Default-linked HelloWorld is 78% smaller

ASDOCS

• Flex 4 Improvements

• ASDoc now supports
comments in MXML

• ASDoc supports DITA creation

• Allows FlashBuilder to show
ASDoc inline in tooltips

• Works on all platforms (Mac,
Win, Linux)

SPARK COMPONENTS
Spark Spark
Component Skin

Graphics
Layout Graphics
Animation Layout
Parts
States Animation
Behavior Parts
Logic
Data
States

CSS Properties

SPARK SKINNING

• DeclarativeMXML
based visual styling.

For More Information: http://unitedmindset.com/
jonbcampos/2009/07/02/ﬂex-4-spark-skinning/

SPARK LAYOUTS

• Previously baked in the updateDisplayList() code

• Now virtualized in it's own class!

• Examples stem from <s:List />

• default layout is a vertical layout

• Bonus!

• Bidirectional layouts and reﬂection based on Flash Player

SPARK LAYOUTS

<s:List>

<s:layout>

<s:HorizontalLayout />

</s:layout>

</s:List>

SPARK LAYOUTS

<s:List>

<s:layout>

<s:TileLayout />

</s:layout>

</s:List>

SPARK LAYOUTS
Coverﬂow Layout with Image Item Renderer

ADVANCED CSS
• Multiple Class Selectors

• styleName=“fontStyle headerStyle”
styleName=”fontStyle headerStyle”

• ID Selectors

• #submitButton { {baseColor: #000000; color: #FFFFFF;}
#submitButton baseColor:#000000; color:#FFFFFF;}

• Descendant Selectors

• Panel Button {color: #9900000;} }
Panel Button { color: #990000;

• Pseudo/State Selectors

• Button:up { baseColor: #000000; color: #FFFFFF;} }
Button:up { baseColor: #000000; color: #FFFFFF;

TEXT (TLF & FTE)

• FTE: Flash Text Engine in Flash Player 10

• TLF: Text Layout Framework, set of ActionScript classes built
atop FTE

• TLF is XML-based markup

TEXT (TLF & FTE)
• TLF 1.0 major goals & features

• Bi-directional text & vertical text

• Selection, editing and ﬂowing text across multiple columns and containers

• Rich typographical controls (kerning, ligatures, typographic cases, etc)

• Cut, copy, paste, undo and standard keyboard and mouse gestures for editing

• Rich developer APIs to manipulate text content, layout, markup and create
custom text components

• ActionScript-based object-oriented model for rich text layout

TEXT (TLF & FTE)

• TLF text exposed by default into Spark components

• Label: Simple, single-line text

• RichText: Rich, non-editable, non-scrollable text

• RichEditableText: Rich, editable, scrollable text

2-WAY DATA BINDING
• What is bi-directional data-binding?

• Two components acting as the source object for the destination properties of each
other

• Wasn’t this possible in Flex 3?

• Yes, thru a combination of {}, <mx:Binding> statements, and calls to
mx.binding.utils.BindingUtils.bindProperty()

• Flex Implementation Details

• Inline declaration using the syntax, @{bindable_property}
@{bindable_property}

• With MXML
<mx:Binding source=”a.property” destination=”b.property” twoWay=”true”/>

FXG & MXML GRAPHICS

• Graphic Primitives

• Rectangles, Ellipses, Paths

• Deﬁned By FXG

• FXG is an interchange format used by Adobe Creative Suite
Tools including:

• Flash Catalyst, Illustrator, and Photoshop.

OSMF

• Generic framework for managing media in Flash applications

• Offers
playback functionality, plugin-ability and extensibility for
custom media types

• Playback functionality exposed in the Spark video component

• Replaces FLVPlayback

MX ITEM RENDERERS
• Spark ItemRenderers for use with MX List-based components

• Renderer baseclasses for MX DataGrid, AdvancedDataGrid, Tree

• MXItemRenderer extends Spark ItemRenderer and handles the contractual
differences

• Intercepts lifecycle events to work in the MX model

• Overrides setting of Spark ItemRenderer properties (currentState, etc)

• Tells Spark to not draw the item renderer backgrounds

• Handles editability, column sorting, dragging, etc.

COMPONENT POLARITY

MX Components FX Components
Button Button
CheckBox CheckBox
Canvas Group (with Basic Layout)
HBox Group (with Horizontal Layout)
VBox Group (with VerticalLayout)
Tile Group (with TileLayout)
List List (with VerticalLayout)
TileList List (with TileLayout)

ACCESSING THE APPLICATION

• In Fx3:

• var application:Object = mx.core.Application.application;
var application:Object = mx.core.Application.application;

• In Fx4:

• var application:Object = FlexGlobals.topLevelApplication;
var application:Object = FlexGlobals.topLevelApplication;

MIXING SPARK AND HALO
CONTAINERS

• NavigatorContent

• toinclude Spark components in Halo Container based
components - like the ViewStack component, wrap the
Spark components in Navigator Content.

• Thereis a second Creation Complete to listen to, the
“Content Creation Complete”.

DECLARATIONS TAG

• Tag to insert non-visual components, such as:

• validators

• services

• mediators / presenter models / controllers

<fx:Declarations>

</fx:Declarations>

FLEX 3 COMPATIBILITY MODE

• Checkout: http://opensource.adobe.com/wiki/display/ﬂexsdk/
Flex+4+Backwards+Compatability

EMBEDDING FONTS: CFF?

• Important when importing fonts

• Setting to “true” deﬁnes font that supports the advanced text
layout features used by Flash Text Engine

• May cause your MX component’s text to disappear
@font-face {

src:url("../assets/MyriadWebPro.ttf");

fontFamily: myCFFFont;

embedAsCFF: true;

}

WHERE DID MY
SCROLLERS GO?
• Wrap your Groups in a
Scroller!

<s:Scroller hasFocusableChildren="true"
tabEnabled="false">
<s:VGroup paddingLeft="2"
paddingRight="2" paddingTop="2" paddingBottom="2"
width="100" height="100"
horizontalScrollPosition="20"
verticalScrollPosition="30">
<s:BitmapImage
source="@Embed(source='backpack.jpg')"/>
</s:VGroup>
</s:Scroller>

FLEX 3 COMPONENT
LIFECYCLE
• 3 Main Phases

• Birth

• Construction, Conﬁguration, Attachment, Initialization

• Life

• Invalidation, Validation, Interaction

• Death

• Detachment, Garbage Collection

FLEX 3 COMPONENT
LIFECYCLE FUNCTIONS

• Invalidation • Validation

• invalidationProperties • commitProperties

• invalidationSize • measure

• invalidationDisplayList • updateDisplayList

• layoutChrome

FLEX 4 COMPONENT
LIFECYCLE
• 3 Main Phases

• Birth

• Construction, Conﬁguration, Attachment, Initialization

• Life

• Invalidation, Validation, Interaction

• Death

• Detachment, Garbage Collection

FLEX 4 COMPONENT
LIFECYCLE FUNCTIONS

• Invalidation • Validation

• invalidationProperties • commitProperties

• invalidationSize • measure

• invalidationDisplayList • updateDisplayList

• invalidateSkinState • layoutChrome

• validateSkinChange

FLEX 4 SKIN FUNCTIONS

• attachSkin

• ﬁndSkinPart

• clearSkinParts

• detachSkin

• partAdded

• partRemoved

CONTACT

• Jonathan Campos

• email: jonbcampos@gmail.com

• twitter: @jonbcampos

• blog: http://unitedmindset.com/jonbcampos

Migrating fx3tofx4

More Related Content

Similar to Migrating fx3tofx4 (20)

Recently uploaded (20)

Migrating fx3tofx4

Editor's Notes