moving from flex 3 to flex 4
DESCRIPTION
Moving from Flex 3 to Flex 4. The Good, the Bad, and the Ugly… Joan Lafferty Adobe Systems. #adobemax103. Now Playing… (Agenda). What is Flex 4 all about? What are the major changes in Flex 4 from Flex 3? - PowerPoint PPT PresentationTRANSCRIPT
®
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 2
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 3
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.
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 4
“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
Twitter: #adobemax103
• Advanced CSS Support
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 5
New Packages
Twitter: #adobemax103
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
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 6
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
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 7
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>
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 8
“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.
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 9
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
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 10
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.
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 11
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.
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 12
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>
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 13
“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.
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 14
“If Looks Could Kill” (Theme Changes)
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 15
“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.
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 16
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)
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 17
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
Twitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 18
Q&Ahttp://butterfliesandbugs.wordpress.comTwitter: #adobemax103
®
Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential. 19