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

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Max 2010: Having Fun Flex4 Layouts

on

  • 7,059 views

Presentation from Xavi Beumala (http://www.rialvalue.com) and Enrique Duvos (http://www.duvos.com) at MAX 2010 around Flex4 Layouts

Presentation from Xavi Beumala (http://www.rialvalue.com) and Enrique Duvos (http://www.duvos.com) at MAX 2010 around Flex4 Layouts

Statistics

Views

Total Views
7,059
Views on SlideShare
3,976
Embed Views
3,083

Actions

Likes
4
Downloads
85
Comments
0

6 Embeds 3,083

http://www.rialvalue.com 3036
http://iuricmp.wordpress.com 42
http://www.zhuaxia.com 2
http://translate.googleusercontent.com 1
http://static.slidesharecdn.com 1
http://web.archive.org 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

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

    Max 2010: Having Fun Flex4 Layouts Max 2010: Having Fun Flex4 Layouts Presentation Transcript

    • Having fun with Flex 4 Layouts Enrique Duvos Xavi Beumala Thursday, 4 November 2010
    • Speaker and session intro Enrique Duvos @eduvos Group Manager, EMEA Flash Platform Evangelism http://www.duvos.com Xavi Beumala @xbeumala Technical Architect, TXI http://www.rialvalue.com ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Agenda ■ Speaker and Session intro ■ Reviewing Flex 3 Layouts ■ UIComponent lifecycle and the role of the LayoutManager class ■ Spark (Flex 4) layouts ■ What’s new ■ Assignable layouts ■ Virtualization ■ Pixel based scrolling ■ Transformations ■ Custom layouts ■ “Demotime” ■ Runtime layout control, scrolling, sizing, pre & post-layout transforms, virtualization arbitrary 2D/3D transformations (Coverflow, Accordion3D, Carrowflow, Flip effect, etc) ■ Summary ■ Q&A ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 3 Thursday, 4 November 2010
    • Flex 3 Layouts Thursday, 4 November 2010
    • Flex 3 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Flex 3 ‣ UIComponent lifecycle remains intact as in Flex3 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Flex 3 ‣ UIComponent lifecycle remains intact as in Flex3 ‣ UIComponent lifecycle has been extended to support pluggable layouts ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Flex 3 Construction Birth Addition Initialization Invalidation Growth & maturity Validation Update Death Removal ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Invalidation - Validation Cycle invalidate properties Invalidation invalidate size invalidate display list Layout Manager Render or EnterFrame event commit properties Validation measure layout chrome Update ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark Layouts Thursday, 4 November 2010
    • Important concepts ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Important concepts ‣ UIComponent lifecycle remains intact as in Flex3 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Important concepts ‣ UIComponent lifecycle remains intact as in Flex3 ‣ s:Group is the basis of the containment model in Spark ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Important concepts ‣ UIComponent lifecycle remains intact as in Flex3 ‣ s:Group is the basis of the containment model in Spark ‣ s:Group can be seen as an mx:Container but with all the rarely used functionality stripped away ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Important concepts ‣ UIComponent lifecycle remains intact as in Flex3 ‣ s:Group is the basis of the containment model in Spark ‣ s:Group can be seen as an mx:Container but with all the rarely used functionality stripped away ‣ Container components compute Layout through delegation ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Important concepts ‣ UIComponent lifecycle remains intact as in Flex3 ‣ s:Group is the basis of the containment model in Spark ‣ s:Group can be seen as an mx:Container but with all the rarely used functionality stripped away ‣ Container components compute Layout through delegation ‣ s:DataGroup is a data-driven Group with ItemRenderers. mx:Repeater done right ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts ‣ Layouts are assigned by composition and not inheritance ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts ‣ Layouts are assigned by composition and not inheritance vs. ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts ‣ Layouts are assigned by composition and not inheritance vs. Benefits ‣ Number of container components is reduced ‣ Layout logic is decoupled from container components promoting modularity and code reuse ‣ Interchangeable at runtime ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts Flex 3 Flex4 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts Flex 3 Flex4 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts Flex 3 Flex4 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Assignable Layouts ‣ The most used combinations have been packaged as components by themselves for commodity Flex 3 Flex4 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Virtualization ‣ Virtualization improves runtime performance by creating and recycling item renderers only as they come into the visible content area of a container (a.k.a Viewport). ‣ Built-in support on DataGroup or SkinnableDataContainer containers with VerticalLayout, HorizontalLayout and TileLayout. ‣ Spark Lists are virtualised out-of-the-box ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Virtualization ‣ Virtualization improves runtime performance by creating and recycling item renderers only as they come into the visible content area of a container (a.k.a Viewport). ‣ Built-in support on DataGroup or SkinnableDataContainer containers with VerticalLayout, HorizontalLayout and TileLayout. ‣ Spark Lists are virtualised out-of-the-box Benefits ‣ Improved performance ‣ Number of itemRenderers instances reduced to the minimum ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Virtualization Flex3 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Virtualization Flex4 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Transformations ‣ 2D & 3D Transformations The LayoutBase and ILayoutElement interfaces are designed with 3D support in mind ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Transformations ‣ Post-layout transforms Properties like x, y, rotate or scale on individual renderers can be modified without affecting the layout Layout reflows when changing the size Layout is not affected by the size transformation ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Transformations ‣ Post-layout transforms Properties like x, y, rotate or scale on individual renderers can be modified without affecting the layout 1. spark.effects.AnimateTransform.applyChangesPostLayout (value : Boolean ) 2. mx.core.UIComponent.postLayoutTransformOffsets( value : TransformOffsets) 3. mx.core.UIComponent.transformAround(...) ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Depth Order ‣ IVisualElement.depth ‣ Controls the order in which items inside containers are rendered ‣ Depth can be changed dynamically to overlap elements as needed ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Custom Layouts ‣ Quick and established way to create custom layouts extending LayoutBase and implementing ILayoutElement ‣ Knowledge reuse to instantiate and use the layouts. No new component APIs ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Demos Thursday, 4 November 2010
    • Demo I ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Demo I ‣ Changing the layout at runtime ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Demo I ‣ Changing the layout at runtime ‣ Adding animations when changing the layout ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Demo I ‣ Changing the layout at runtime ‣ Adding animations when changing the layout ‣ http://evtimmy.com/2010/04/two-examples-of-layout-animations/ ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Building a Custom Layout Thursday, 4 November 2010
    • Custom layout: The Basics ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: The Basics ‣ Layouts extend LayoutBase ‣ LayoutBase is not a UIComponent but it has some familiar methods ‣ measure () ‣ updateDisplayList() ‣ The invalidation - validation pattern is driven by the host component. To invalidate the layout we have to invalidate the target component ‣ The host component invokes these methods by delegation during its validation - invalidation cycle ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: The Basics ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: The Basics ‣ Extending LayoutBase ‣ Using ILayoutElement interface ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: ILayoutElement ‣ element.setLayoutBounds( width : Number, height : Number, postLayout : Boolean ) ‣ element.getLayoutBoundsHeight() ‣ element.getLayoutBoundsWidth() ‣ element.transformAround() ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: Scrolling ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: Scrolling ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: Scrolling ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: Sizing ‣ What happens if we don’t specify the width or height of the container ‣ Nothing will be displayed ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: 2D Layout transforms ‣ IVisualElement.setLayoutMatrix( ) ‣ IVisualElement.transformAround( ) ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: 2D Layout transforms ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: 3D Layout transforms ‣ IVisualElement.setLayoutMatrix3D( ) ‣ IVisualElement.transformAround( ) ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: 3D Layout transforms ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Custom layout: Virtualization ‣ LayoutBase.useVirtualLayout ‣ Instead of using target.getElementAt use target.getVirtualElementAt ‣ Using the scroll position IViewPort.horizontalScrollPosition and IViewPort.verticalScrollPosition find out the visual items within the ViewPort ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Spark layouts: Misc ‣ UIComponent.IncludeInLayout ‣ Elements with includeInLayout=false are not sized or positioned ‣ Useful to reduce the amount of nested containers and thus the performance under some situations ‣ GroupBase.autoLayout ‣ When true, measurement and layout are done when the position or size of a child is changed ‣ The new layout mechanism allows smooth pixel-perfect scrolling ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Demos More Layouts Thursday, 4 November 2010
    • WheelLayout by Evtim Georgiev http://evtimmy.com/2009/06/wheellayout-source-and-quick-mashup/ ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • TimeMachine Layout by Gilles Guillemin http://www.flexstuff.co.uk/2009/11/06/flex-4-animated-timemachine-layout/ ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Fan Layout by Miti Pricope http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/ ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Coverflow by Xavi Beumala http://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/ ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Accordion3DLayout by Xavi Beumala http:// ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Carroflow Layout by Xavi Beumala http://www.rialvalue.com/blog/2010/04/14/carroflow-another-3d-layout-for-flex4/ ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. Thursday, 4 November 2010
    • Summary ■ UIComponent lifecycle remains intact ■ Spark based layouts are decoupled from containers and assigned by composition ■ New containers and APIs enables richer and more creative layouts ( 2D/ 3D, Pixel based scrolling, Virtualization, pre and post-transforms ■ Links: ■ www.rialvalue.com ■ www.duvos.com ■ http://www.evtimmy.com/ ■ www.adobe.com/devnet/flex/articles/spark_layouts.html ■ www.oreilly.com/flex/excerpts/flex-4-cookbook/layout.html ■ http://www.ryancampbell.com/ ■ http://www.flexstuff.co.uk/ ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 45 Thursday, 4 November 2010
    • Summary ■ More Links: ■ http://opensource.adobe.com/wiki/display/flexsdk/Spark+Virtualization ■ Item Renderers: http://help.adobe.com/en_US/flex/using/ WS03d33b8076db57b9-23c04461124bbeca597-8000.html#WS5ED0A932- BA59-4a77-9A9D-3745FE21D1E9 ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 46 Thursday, 4 November 2010
    • Q&A Thursday, 4 November 2010
    • Thanks ■ Thanks to Evtim Georgiev Flex SDK Engineer for reviewing the presentation ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 48 Thursday, 4 November 2010
    • ©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con dential. Thursday, 4 November 2010