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

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

ENHANCEMENTS

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)

NEW CONCEPTS

SPARK COMPONENTS Spark Spark Component Skin Graphics Layout Graphics Animation Layout Parts States Animation Behavior Parts Logic Data States CSS Properties

HALO STYLES

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.

COMMON MIGRATION PITFALLS

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>

BONUS ROUND

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

QUESTIONS

CONTACT • Jonathan Campos • email: jonbcampos@gmail.com • twitter: @jonbcampos • blog: http://unitedmindset.com/jonbcampos

http://www.unitedmindset.com	308
http://unitedmindset.com	150
http://www.slideshare.net	16
http://static.slidesharecdn.com	2
http://feeds2.feedburner.com	1
http://webcache.googleusercontent.com	1

Migrating fx3tofx4

by Jonathan Campos on May 21, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

6 Embeds 478

Statistics

Migrating fx3tofx4 — Presentation Transcript