Moving from Flex 3 to Flex 4

®

Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 1

Moving from Flex 3 to Flex 4The Good, the Bad, and the Ugly…

Joan LaffertyAdobe Systems

#adobemax103

®


Now Playing… (Agenda)

What is Flex 4 all about? What are the major changes in Flex 4 from Flex 3? Help Flex 3 developers understand new concepts in Flex 4 that are

different from Flex 3. What are the hiccups that people might run into when migrating

applications to Flex 4?

Twitter: #adobemax103

®


Do The Right Thing (Goals of Flex 4)

Give you the tools to make an AWESOME user interface.

Give you the features you always wanted in previous versions of Flex. Help you take advantage of the Flash Player’s latest and greatest.


®


“Paths of Glory” (Benefits of Flex 4)

• Ease of Complex Skinning

• Easier to create components that use different layouts

• Taking advantage of Player 10 features such as pixel bender effects and the Flash Text Engine.

• Improvements in Effects

• Faster Compiler

• Simpler States syntax

• 2-way Binding


• Advanced CSS Support

®


New Packages


mx packages

mx.controls.*mx.containers.*

mx.effects.*mx.events.*

mx.graphics.*mx.managers.*

…

spark.layouts.*BasicLayou

tHorizontalLayo

ut

TileLayoutVerticalLayo

ut… spark.primitives.*

BitmapImage

EllipseGraphic

PathLine

RectangularDropShadow

Rect

VideoElement

spark.components.*

ApplicationBorderButton

CheckBox

ButtonBar

Group

DropDownList

SkinnableContainer

…

List spark.effects.*AddActionAnimate

AnimateColor

MoveFade

ResizeMove3D

Rotate3D…

Rotate

®


New Namespaces

• Spark Component namespace. Use with MXML 2009 Language namespace

URI: library://ns.adobe.com/flex/spark

• MXML 2009 Language namespace

URI: http://ns.adobe.com/mxml/2009

• MX Component namespace. Use with MXML 2009 Language namespace

URI: library://ns.adobe.com/flex/halo

• Legacy namespace

URI: http://www.adobe.com/2006/mxml


®


MXML Graphics

Flex 4 has added graphic primitives enabling you to draw lines, ellipses, and curves.

Two types of graphics:

• Static / Optimized FXG (.fxg files)• Runtime FXG / MXML Graphics

<s:Rect width="200" height="120" > <s:fill> <s:SolidColor color="0xFF0000" /> </s:fill> <s:stroke> <s:SolidColorStroke weight="2" color="0x000000" /> </s:stroke></s:Rect>


®


“Lost in Translation” (Flex States)

States were confusing to use in the past. Removal of AddChild, RemoveChild

Replaced by includeIn and excludeFrom attributes that are specified inline. <s:Button label=“submit” includeIn=“completeState” /><s:Button label=“clear” excludeFrom=“resetState” />

Removal of SetStye and SetProperty New dot syntax<s:TextInput color.errorState=“0xFF0000” color.validState=“0x000000” /><s:Button click.submitState=“submit()” click.clearState=“resetForm()” />

States are used in Skin files.


®


Skinning in Flex 4

Components all have separate skin files (e.g. ButtonSkin.mxml)

These skin files use MXML Graphics to draw skin parts The skins also define states.

Spark Button

Button.as ButtonSkin.mxml

To customize a component use:

Styles

Custom Skin


®


Creating a Custom Skin

Copy a skin class from the Spark theme or Wireframe theme Rename that Skin. Make customizations to that skin. Every skin should have :

Host Component defined States MXML Graphics

Assign that skin to the skinClass of your component instance.


®


The Usual Suspects (Common Migration Issues)

Type selectors need namespaces Compile against player 10. Application.application -> FlexGlobals.topLevelApplication RSLs are on by default. Declarations Tag Unsupported styles in skins.


https://zerowing.corp.adobe.com/pages/createpage.action?spaceKey=flex&title=FlexGlobals&linkCreation=true&fromPageId=113086824

®


Problem Child (Declarations Tag)

Anything that is not a visual elements or default property must be within <fx:Declarations> tag.

Formatters, Effect, RPC declarations, Validators etc. <fx:Declarations>

<s:AnimateColor id=“colorEffect” targets=“{[examplePanel, targetLabel, detailText]}” colorFrom=“0x0000FF” colorTo=“0xFF0000” repeatCount=“2” />

<fx:Model id=“CheckModel”> <dateInfo> <DOB>{dob.text}</DOB> </dateInfo> </fx:Model>

<mx:DateValidator source=“{dob}” property=“text” allowedFormatChars=“/” trigger=“{myButton}” triggerEvent=“click” valid=“validated_handler(event);”/>

</fx:Declarations>


®


“If Looks Could Kill” (Theme Changes)

The default theme is the Spark theme in Flex 4. The default theme in Flex 3 was Halo. Many of the styles that were available in the Halo theme are not

available in the Spark theme.


®


“If Looks Could Kill” (Theme Changes)


®


“The Matrix” (Mixing MX and Spark Components)

• Use Spark Components wherever you can

• Spark Components should all play nicely with MX components

You can put any MX component in Spark containers

You cannot directly put graphic primitive objects like BitmapImage, Rect, Line, Path, and Ellipse inside a MX container without wrapping it in a Group.

MX effects do not work on Spark graphic primitives.

When using MX Navigators (e.g. Accordion,

ViewStack), use the NavigatorContent component.


®


The Spark components don’t support the Halo theme.

Cannot create spark component based itemRenderers for MX List based components (in this Beta)

APIs between MX and Spark components are different (e.g. addChild vs addElement)

When using MX and Spark components together, you may want to use TLFTextfield for all MX components (which isn’t the default). Add the compiler argument

-theme+=${flexlib}\projects\spark\TLFText.css

Disclaimer: TLFTextfield is not supported on MX TextArea, TextInput and RichTextEditor

“There Will Be Blood” (Mixing Halo and Spark Components)


®


Resources

Devnet articles: Differences Between Flex 3 and Flex 4 (Beta)http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

Flex 4 Effects by Chet Haase:http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html

Introducing Skinning in Flex 4 by Ryan Frishberghttp://www.adobe.com/devnet/flex/articles/flex4_skinning.html

Spark Layouts with Flex 4 by Evtim Georgievhttp://www.adobe.com/devnet/flex/articles/spark_layouts.html

Flex 4 Backwards Compatibility Doc:http://labs.adobe.com/wiki/index.php/Flex_4:Backward_Compatibility

Flex Examples by Peter DeHaan:http://blog.flexexamples.com/

Flex 4 Feature Specifications: http://opensource.adobe.com/wiki/display/flexsdk/Gumbo


http://www.adobe.com/devnet/flex/articles/flex3and4_differences.html

http://www.adobe.com/devnet/flex/articles/flex4_effects_pt1.html

http://www.adobe.com/devnet/flex/articles/flex4_skinning.html

http://www.adobe.com/devnet/flex/articles/spark_layouts.html

http://labs.adobe.com/wiki/index.php/Flex_4:Backward_Compatibility

http://blog.flexexamples.com/

http://opensource.adobe.com/wiki/display/flexsdk/Gumbo

®


Q&Ahttp://butterfliesandbugs.wordpress.comTwitter: #adobemax103

http://butterfliesandbugs.wordpress.com/

®


Documents

Moving from Flex 3 to Flex 4