• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Migrating fx3tofx4
 

Migrating fx3tofx4

on

  • 3,681 views

TechWed presentation to help Flex Developers move between Flex 3 to Flex 4.

TechWed presentation to help Flex Developers move between Flex 3 to Flex 4.

Statistics

Views

Total Views
3,681
Views on SlideShare
3,118
Embed Views
563

Actions

Likes
3
Downloads
95
Comments
0

6 Embeds 563

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

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Today we&#x2019;re talking about migrating from Flex 3 to Flex 4. <br /> <br /> While there are MANY details that we could focus on, I&#x2019;ve picked specific points that I feel most Flex developers would hit right from the get-go. <br /> <br /> As you can see from my subtitle, the main point I&#x2019;m going to keep reiterating is how easy it is to make the change from Flex 3 to Flex 4. You&#x2019;re not going to lose lots of development time making the switch, instead you&#x2019;ll just add the your own list of capabilities. <br />
  • Let me start by introducing myself. <br />
  • I know this is a really long list and all, but this is all it takes to ensure your application will run on your client&#x2019;s machine. <br />
  • I know this is a really long list and all, but this is all it takes to ensure your application will run on your client&#x2019;s machine. <br />
  • The big thing to remember is that Flex 4 EXTENDS Flex 3. <br /> <br /> Lots of care was taken on the part of the Flex Development team to make sure that the movement from Flex 3 to Flex 4 would be as seamless as possible. <br /> <br /> As you can see from the graphic Flex 4 contains everything that ever was or is Flex 3 and adds to it. What does this mean? You can start making &#x201C;Flex 4&#x201D; apps while still just using everything you&#x2019;ve known and built with Flex 3. And there are some Flex 4 benefits you will still be receiving by making this shift, but ultimately it isn&#x2019;t a &#x201C;true&#x201D; Flex 4 app, so let&#x2019;s continue by looking at how exactly Flex 4 extends Flex 3. <br />
  • 1. Core Concepts <br /> 2. Enhancements <br /> 3. New Concepts <br /> 4. Common Migration Pitfalls <br /> 5. Bonus, Flex 4 Component Lifecycle <br />
  • 1. Core Concepts <br /> 2. Enhancements <br /> 3. New Concepts <br /> 4. Common Migration Pitfalls <br /> 5. Bonus, Flex 4 Component Lifecycle <br />
  • 1. Core Concepts <br /> 2. Enhancements <br /> 3. New Concepts <br /> 4. Common Migration Pitfalls <br /> 5. Bonus, Flex 4 Component Lifecycle <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • Because of FTE you can fade on text without having to embed <br />
  • Most requested feature <br />
  • Bonus: each primitive isn&#x2019;t it&#x2019;s own display object, so if you have lots of primitives you don&#x2019;t have a huge set of display objects on screen. Instead primitives are collapsed into one display object, exceptions: primitives that are rotated or filter (I believe). <br />
  • <br />
  • Implements the IListItemRenderer, IDropInListItemRenderer, IDataRenderer, based off of Group <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • attachSkin: creates the skin, typically you DON&#x2019;T override this function. Called via the createChildren and/or commitProperties <br /> <br /> findSkinPart: used in attach skin, don&#x2019;t use directly <br /> <br /> clearSkinParts: used in detachSkin <br /> <br /> detachSkin: destroys and removes a skin part <br /> <br /> partAdded: called when a skin part is being attached. Don&#x2019;t call this directly. Do override it. <br /> <br /> partRemoved: called when a skin part is being removed. Don&#x2019;t call this directly. Do override it. <br /> <br />
  • 1.&#xA0;&#xA0;Where layouts are meant to be used <br /> <br /> - everywhere? <br /> <br /> 2.&#xA0;Is Flex 4 compiler faster for apps written in Flex 3&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; <br /> <br /> - yes, as discussed earlier. Many compiler improvements are provided for you when using the Flex 4 SDK. You don&#x2019;t need to do anything to receive these benefits <br /> &#xA0;&#xA0;&#xA0;&#xA0;&#xA0; <br /> 3.&#xA0;Why is Flash Builder not available on Linux? It&apos;s the most voted-for feature request in the Adobe JIRA. <br /> <br /> The issue is with the design view working with Linux. <br /> <br /> 4.&#xA0;What are some use cases for Flex that might be good for instructional design projects, project management teams, community building, etc.? <br /> <br /> At Dedo: <br /> Scrum management software <br /> project management software <br /> Hudson reporting <br /> <br /> 5.&#xA0;&#xA0;If you could summarize in 3 steps the process of becoming as cool as Jonathan Campos, what would they be? <br /> <br /> Um... what? <br /> <br /> 6. What happened to the Import Web Service code generator in Flex 4? The new code it generates is not as strongly typed as the code from Flex 3. It went from ArrayOfDataType to just a plain Array.. <br /> <br /> File a feature request. <br /> <br /> 7. Do I have to learn Eclipse to some degree before I tackle Flex? <br /> <br /> Yes and no. Understanding the basic layout can take about 5 minutes and that would be all you need. To get into adding plug-ins etc, that would require more understanding of the eclipse IDE, though not extremely difficult. <br /> <br /> 8. Where is the best place to go for training on Flex 4? <br /> <br /> New to Flex? Flex in a Week http://www.adobe.com/devnet/flex/videotraining/ <br /> Not new to Flex? Pick a topic and go to the web. <br /> <br /> 9. What are the issues with mixed IDE environments? e.g. some developers on Flex Builder 3 and others on Flash Builder. Just want to verify&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; <br /> <br /> There is a compiler change, so you would want you compiling standardized. Also Flex 4 specifically targets FP10. Yes you can set this up in Fx3, but if you haven&#x2019;t you may get errors without expecting it. Also, Fx3 and Flash Builder can&#x2019;t live in the same install of Eclipse, I&#x2019;ve had issues with that. <br /> <br /> 10.&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0; Status of completing the migration of the remaining MX components to Spark. This really needs to be a priority. Also, an update on the issues in JIRA related to enabling additional compiler hooks to allow for compiler extensions to support custom metadata would be extremely useful.&#xA0; <br /> <br /> I &#x201C;believe&#x201D; they are shooting for full polarity in 2011, don&#x2019;t quote me on that, I don&#x2019;t think it&#x2019;s official. I think it is meant for the Flex 4.5 release is what was said in the past. <br /> <br /> Update on JIRA, additional compiler hooks, conditional compiling, etc. They know of these issues, and no official plan has been laid out but it has been remarked as very important. <br /> <br />
  • <br />

Migrating fx3tofx4 Migrating fx3tofx4 Presentation Transcript

  • 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/flex/spark" • mx="library://ns.adobe.com/flex/mx”
  • CSS NAMESPACES • @namespace "library://ns.adobe.com/flex/spark"; • @namespace mx "library://ns.adobe.com/flex/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 filter 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 fixes
  • 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
  • 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/flex-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 reflection 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 Coverflow 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 flowing 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 • Defined 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> <!-- place non-visual components here --> </fx:Declarations>
  • FLEX 3 COMPATIBILITY MODE • Checkout: http://opensource.adobe.com/wiki/display/flexsdk/ Flex+4+Backwards+Compatability
  • EMBEDDING FONTS: CFF? • Important when importing fonts • Setting to “true” defines 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, Configuration, 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, Configuration, 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 • findSkinPart • clearSkinParts • detachSkin • partAdded • partRemoved
  • QUESTIONS
  • CONTACT • Jonathan Campos • email: jonbcampos@gmail.com • twitter: @jonbcampos • blog: http://unitedmindset.com/jonbcampos