Max 2010: Having Fun Flex4 Layouts
description
Transcript of Max 2010: Having Fun Flex4 Layouts
![Page 1: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/1.jpg)
Having fun with Flex 4 LayoutsEnrique DuvosXavi Beumala
Thursday, 4 November 2010
![Page 2: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/2.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Speaker and session intro
Enrique Duvos@eduvosGroup Manager, EMEA Flash Platform Evangelismhttp://www.duvos.com
Xavi Beumala@xbeumalaTechnical Architect, TXIhttp://www.rialvalue.com
Thursday, 4 November 2010
![Page 3: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/3.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
3
Thursday, 4 November 2010
![Page 4: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/4.jpg)
Flex 3 Layouts
Thursday, 4 November 2010
![Page 5: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/5.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flex 3
Thursday, 4 November 2010
![Page 6: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/6.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flex 3
‣ UIComponent lifecycle remains intact as in Flex3
Thursday, 4 November 2010
![Page 7: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/7.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flex 3
‣ UIComponent lifecycle remains intact as in Flex3
‣ UIComponent lifecycle has been extended to support pluggable layouts
Thursday, 4 November 2010
![Page 8: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/8.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Flex 3
Construction
Addition
Initialization
Invalidation
Validation
Update
Removal
Birt
hG
row
th &
mat
urity
Dea
th
Thursday, 4 November 2010
![Page 9: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/9.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Invalidation - Validation Cycle
Inva
lidat
ion
Valid
atio
n
invalidate properties
invalidate size
invalidate display list
commit properties
measure
layout chrome
Update
Layout Manager Render or EnterFrame event
Thursday, 4 November 2010
![Page 10: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/10.jpg)
Spark Layouts
Thursday, 4 November 2010
![Page 11: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/11.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Important concepts
Thursday, 4 November 2010
![Page 12: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/12.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Important concepts
‣ UIComponent lifecycle remains intact as in Flex3
Thursday, 4 November 2010
![Page 13: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/13.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Important concepts
‣ UIComponent lifecycle remains intact as in Flex3
‣ s:Group is the basis of the containment model in Spark
Thursday, 4 November 2010
![Page 14: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/14.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 15: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/15.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 16: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/16.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 17: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/17.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Assignable Layouts
Thursday, 4 November 2010
![Page 18: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/18.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Assignable Layouts
‣ Layouts are assigned by composition and not inheritance
Thursday, 4 November 2010
![Page 19: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/19.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Assignable Layouts
‣ Layouts are assigned by composition and not inheritance
vs.
Thursday, 4 November 2010
![Page 20: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/20.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 21: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/21.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Assignable Layouts
Flex 3 Flex4
Thursday, 4 November 2010
![Page 22: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/22.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Assignable Layouts
Flex 3 Flex4
Thursday, 4 November 2010
![Page 23: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/23.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Assignable Layouts
Flex 3 Flex4Flex4
Thursday, 4 November 2010
![Page 24: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/24.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Assignable Layouts
Flex 3 Flex4Flex4
‣ The most used combinations have been packaged as components by themselves for commodity
Thursday, 4 November 2010
![Page 25: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/25.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 26: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/26.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 27: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/27.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Virtualization
Flex3
Thursday, 4 November 2010
![Page 28: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/28.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Virtualization
Flex4
Thursday, 4 November 2010
![Page 29: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/29.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Transformations
‣ 2D & 3D TransformationsThe LayoutBase and ILayoutElement interfaces are designed with 3D support in mind
Thursday, 4 November 2010
![Page 30: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/30.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Transformations
‣Post-layout transformsProperties 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
Thursday, 4 November 2010
![Page 31: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/31.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Spark layouts: Transformations
‣Post-layout transformsProperties 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(...)
Thursday, 4 November 2010
![Page 32: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/32.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 33: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/33.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 34: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/34.jpg)
Demos
Thursday, 4 November 2010
![Page 35: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/35.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo I
Thursday, 4 November 2010
![Page 36: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/36.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo I
‣ Changing the layout at runtime
Thursday, 4 November 2010
![Page 37: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/37.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo I
‣ Changing the layout at runtime
‣ Adding animations when changing the layout
Thursday, 4 November 2010
![Page 38: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/38.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Demo I
‣ Changing the layout at runtime
‣ Adding animations when changing the layout
‣ http://evtimmy.com/2010/04/two-examples-of-layout-animations/
Thursday, 4 November 2010
![Page 39: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/39.jpg)
Building a Custom Layout
Thursday, 4 November 2010
![Page 40: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/40.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: The Basics
Thursday, 4 November 2010
![Page 41: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/41.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 42: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/42.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: The Basics
Thursday, 4 November 2010
![Page 43: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/43.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: The Basics
‣ Extending LayoutBase
‣ Using ILayoutElement interface
Thursday, 4 November 2010
![Page 44: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/44.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: ILayoutElement
‣ element.setLayoutBounds( width : Number, height : Number, postLayout : Boolean )
‣ element.getLayoutBoundsHeight()
‣ element.getLayoutBoundsWidth()
‣ element.transformAround()
Thursday, 4 November 2010
![Page 45: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/45.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: Scrolling
Thursday, 4 November 2010
![Page 46: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/46.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: Scrolling
Thursday, 4 November 2010
![Page 47: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/47.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: Scrolling
Thursday, 4 November 2010
![Page 48: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/48.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: Sizing
‣ What happens if we don’t specify the width or height of the container‣ Nothing will be displayed
Thursday, 4 November 2010
![Page 49: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/49.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: 2D Layout transforms
‣ IVisualElement.setLayoutMatrix( )
‣ IVisualElement.transformAround( )
Thursday, 4 November 2010
![Page 50: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/50.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: 2D Layout transforms
Thursday, 4 November 2010
![Page 51: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/51.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: 3D Layout transforms
‣ IVisualElement.setLayoutMatrix3D( )
‣ IVisualElement.transformAround( )
Thursday, 4 November 2010
![Page 52: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/52.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Custom layout: 3D Layout transforms
Thursday, 4 November 2010
![Page 53: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/53.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 54: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/54.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
Thursday, 4 November 2010
![Page 55: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/55.jpg)
DemosMore Layouts
Thursday, 4 November 2010
![Page 56: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/56.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
WheelLayout
by Evtim Georgievhttp://evtimmy.com/2009/06/wheellayout-source-and-quick-mashup/
Thursday, 4 November 2010
![Page 57: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/57.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
TimeMachine Layout
by Gilles Guilleminhttp://www.flexstuff.co.uk/2009/11/06/flex-4-animated-timemachine-layout/
Thursday, 4 November 2010
![Page 58: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/58.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Fan Layout
by Miti Pricopehttp://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/
Thursday, 4 November 2010
![Page 59: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/59.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Coverflow
by Xavi Beumalahttp://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/
Thursday, 4 November 2010
![Page 60: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/60.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Accordion3DLayout
by Xavi Beumalahttp://
Thursday, 4 November 2010
![Page 61: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/61.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Carroflow Layout
by Xavi Beumalahttp://www.rialvalue.com/blog/2010/04/14/carroflow-another-3d-layout-for-flex4/
Thursday, 4 November 2010
![Page 62: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/62.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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/
45
Thursday, 4 November 2010
![Page 63: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/63.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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
46
Thursday, 4 November 2010
![Page 64: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/64.jpg)
Q&A
Thursday, 4 November 2010
![Page 65: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/65.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
Thanks
■ Thanks to Evtim Georgiev Flex SDK Engineer for reviewing the presentation
48
Thursday, 4 November 2010
![Page 66: Max 2010: Having Fun Flex4 Layouts](https://reader034.fdocuments.us/reader034/viewer/2022051611/54b48b3e4a7959d6068b458f/html5/thumbnails/66.jpg)
©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Con!dential.
Thursday, 4 November 2010