1 / 19

Moving from Flex 3 to Flex 4

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?

bern
Download Presentation

Moving from Flex 3 to Flex 4

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Moving from Flex 3 to Flex 4 The Good, the Bad, and the Ugly… Joan Lafferty Adobe Systems #adobemax103

  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. 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. “Paths of Glory” (Benefits of Flex 4) • Ease of Complex Skinning • Easier to create components that use different layouts • Improvements in Effects • Simpler States syntax • Faster Compiler • 2-way Binding • Advanced CSS Support • Taking advantage of Player 10 features such as pixel bender effects and the Flash Text Engine. Twitter: #adobemax103

  5. New Packages spark.layouts.* BasicLayout spark.effects.* spark.components.* HorizontalLayout AddAction TileLayout Application mx packages mx.controls.* mx.containers.* mx.effects.* mx.events.* mx.graphics.* mx.managers.* … Animate VerticalLayout Border spark.primitives.* … AnimateColor Button Fade BitmapImage ButtonBar Ellipse Move CheckBox Graphic Move3D DropDownList Line Resize Path Group Rect Rotate List RectangularDropShadow Rotate3D VideoElement SkinnableContainer … … Twitter: #adobemax103

  6. New Namespaces • MXML 2009 Language namespace • URI: http://ns.adobe.com/mxml/2009 • Spark Component namespace. Use with MXML 2009 Language namespace • URI: library://ns.adobe.com/flex/spark • 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. 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

  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

  9. Skinning in Flex 4 Button.as ButtonSkin.mxml • 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 • To customize a component use: • Styles • Custom Skin Twitter: #adobemax103

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

  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

  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. “If Looks Could Kill” (Theme Changes) Twitter: #adobemax103

  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. “There Will Be Blood” (Mixing Halo and Spark Components) • 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. addChildvsaddElement) • 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 Twitter: #adobemax103

  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. Q&A http://butterfliesandbugs.wordpress.com Twitter: #adobemax103

More Related