Max 2010: Having Fun Flex4 Layouts

Having fun with Flex 4 Layouts
Enrique Duvos
Xavi Beumala
Thursday, 4 November 2010

©2010 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.
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

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

Flex 3 Layouts

Flex 3

Flex 3
‣ UIComponent lifecycle remains intact as in Flex3

Flex 3
‣ UIComponent lifecycle has been extended to support pluggable layouts

Flex 3
Construction
Addition
Initialization
Invalidation
Validation
Update
Removal
BirthGrowth&
maturity
Death

Invalidation - Validation Cycle
InvalidationValidation
invalidate properties
invalidate size
invalidate display list
commit properties
measure
layout chrome
Update
Layout Manager Render or EnterFrame event

Spark Layouts

Important concepts

Important concepts
‣ s:Group is the basis of the containment model in Spark

Important concepts
‣ s:Group can be seen as an mx:Container but with all the rarely used
functionality stripped away

Important concepts
‣ Container components compute Layout through delegation

Important concepts
‣ Container components compute Layout through delegation
‣ s:DataGroup is a data-driven Group with ItemRenderers. mx:Repeater
done right

Spark layouts: Assignable Layouts

‣ Layouts are assigned by composition and not inheritance

vs.

vs.
Benefits
‣ Number of container components is reduced
‣ Layout logic is decoupled from container components promoting
modularity and code reuse
‣ Interchangeable at runtime

Flex 3 Flex4

Flex 3 Flex4Flex4

Flex 3 Flex4Flex4
‣ The most used combinations have been packaged as components by
themselves for commodity

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

‣ 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

Flex3

Flex4

Spark layouts: Transformations
‣ 2D & 3D Transformations
The LayoutBase and ILayoutElement interfaces are designed with 3D support in mind

‣ Post-layout transforms
Properties like x, y, rotate or scale on individual renderers can be modified without
affecting the layout
Layout reﬂows when changing the size
Layout is not affected by the size transformation

‣ 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(...)

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

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

Demos

Demo I

Demo I
‣ Changing the layout at runtime

Demo I
‣ Adding animations when changing the layout

Demo I
‣ Adding animations when changing the layout
‣ http://evtimmy.com/2010/04/two-examples-of-layout-animations/

Building a
Custom Layout

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

‣ Extending LayoutBase
‣ Using ILayoutElement interface

Custom layout: ILayoutElement
‣ element.setLayoutBounds( width : Number, height : Number,
postLayout : Boolean )
‣ element.getLayoutBoundsHeight()
‣ element.getLayoutBoundsWidth()
‣ element.transformAround()

Custom layout: Scrolling

Custom layout: Sizing
‣ What happens if we don’t specify the width or height of the container
‣ Nothing will be displayed

Custom layout: 2D Layout transforms
‣ IVisualElement.setLayoutMatrix( )
‣ IVisualElement.transformAround( )

‣ IVisualElement.setLayoutMatrix3D( )
‣ IVisualElement.transformAround( )

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

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

Demos
More Layouts

WheelLayout
by Evtim Georgiev
http://evtimmy.com/2009/06/wheellayout-source-and-quick-mashup/

TimeMachine Layout
by Gilles Guillemin
http://www.ﬂexstuff.co.uk/2009/11/06/ﬂex-4-animated-timemachine-layout/

Fan Layout
by Miti Pricope
http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-ﬂex-4/

Coverflow
by Xavi Beumala
http://www.rialvalue.com/blog/2010/03/30/ﬂex4-coverﬂow-layout/

Accordion3DLayout
by Xavi Beumala
http://

Carroflow Layout
by Xavi Beumala
http://www.rialvalue.com/blog/2010/04/14/carroﬂow-another-3d-layout-for-ﬂex4/

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

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

Thanks
■
Thanks to Evtim Georgiev Flex SDK Engineer for reviewing the
presentation
48

Max 2010: Having Fun Flex4 Layouts

More Related Content

What's hot (15)

Similar to Max 2010: Having Fun Flex4 Layouts (20)

Max 2010: Having Fun Flex4 Layouts