1. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.1 Moving from Flex 3 to Flex 4 The Good, the Bad, and the Ugly… Joan Lafferty Adobe Systems #adobemax103

2. ® 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

3. ® 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

4. ® 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

5. ® 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.* BasicLayout HorizontalLayout TileLayout VerticalLayou t … spark.primitives.* BitmapImage Ellipse Graphic Path Line RectangularDropShadow Rect VideoElement spark.components.* Application Border Button CheckBox ButtonBar Group DropDownList SkinnableContainer … List spark.effects.* AddAction Animate AnimateColor Move Fade Resize Move3D Rotate3D … Rotate

6. ® 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

7. ® 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:SolidColorStroke weight="2" color="0x000000" /> Twitter: #adobemax103

8. ® 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.  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

9. ® 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

10. ® 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

11. ® 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.topLevelApplicationFlexGlobals  RSLs are on by default.  Declarations Tag  Unsupported styles in skins. Twitter: #adobemax103

12. ® 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 tag.  Formatters, Effect, RPC declarations, Validators etc. <s:AnimateColor id=“colorEffect” targets=“{[examplePanel, targetLabel, detailText]}” colorFrom=“0x0000FF” colorTo=“0xFF0000” repeatCount=“2” /> {dob.text} <mx:DateValidator source=“{dob}” property=“text” allowedFormatChars=“/” trigger=“{myButton}” triggerEvent=“click” valid=“validated_handler(event);”/> Twitter: #adobemax103

13. ® 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

14. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.14 “If Looks Could Kill” (Theme Changes) Twitter: #adobemax103

15. ® 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

16. ® 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

17. ® 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 Frishberg http://www.adobe.com/devnet/flex/articles/flex4_skinning.html Spark Layouts with Flex 4 by Evtim Georgiev http://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

18. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.18 Q&A http://butterfliesandbugs.wordpress.com Twitter: #adobemax103

19. ® Copyright 2009 Adobe Systems Incorporated. All rights reserved. Adobe confidential.19