max 2010: having fun flex4 layouts

Having fun with Flex 4 LayoutsEnrique DuvosXavi Beumala

Thursday, 4 November 2010

©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


http://www.duvos.com


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

Birt

hG

row

th &

mat

urity

Dea

th



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


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 TransformationsThe LayoutBase and ILayoutElement interfaces are designed with 3D support in mind




‣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




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



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/


http://evtimmy.com/2010/04/two-examples-of-layout-animations/

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


DemosMore Layouts



WheelLayout

by Evtim Georgievhttp://evtimmy.com/2009/06/wheellayout-source-and-quick-mashup/


http://evtimmy.com/2009/06/wheellayout-source-and-quick-mashup/

http://evtimmy.com/2009/06/wheellayout-source-and-quick-mashup/


TimeMachine Layout

by Gilles Guilleminhttp://www.flexstuff.co.uk/2009/11/06/flex-4-animated-timemachine-layout/


http://www.flexstuff.co.uk/2009/11/06/flex-4-animated-timemachine-layout/

http://www.flexstuff.co.uk/2009/11/06/flex-4-animated-timemachine-layout/


Fan Layout

by Miti Pricopehttp://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/


http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/

http://miti.pricope.com/2009/05/29/playing-with-custom-layout-in-flex-4/


Coverflow

by Xavi Beumalahttp://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/


http://www.rialvalue.com/blog/2010/03/30/flex4-coverflow-layout/



Accordion3DLayout

by Xavi Beumalahttp://





Carroflow Layout

by Xavi Beumalahttp://www.rialvalue.com/blog/2010/04/14/carroflow-another-3d-layout-for-flex4/


http://www.rialvalue.com/blog/2010/04/14/carroflow-another-3d-layout-for-flex4/

http://www.rialvalue.com/blog/2010/04/14/carroflow-another-3d-layout-for-flex4/


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






http://www.evtimmy.com

http://www.evtimmy.com

http://www.adobe.com/devnet/flex/articles/spark_layouts.html

http://www.adobe.com/devnet/flex/articles/spark_layouts.html

http://www.oreilly.com/flex/excerpts/flex-4-cookbook/layout.html







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


http://opensource.adobe.com/wiki/display/flexsdk/Spark+Virtualization

http://opensource.adobe.com/wiki/display/flexsdk/Spark+Virtualization

http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-23c04461124bbeca597-8000.html#WS5ED0A932-BA59-4a77-9A9D-3745FE21D1E9






Q&A



Thanks

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

48


max 2010: having fun flex4 layouts

Documents

adobe confidential

assignable layouts layouts

spark layouts

layouts uicomponent

spark s

flex3 uicomponent lifecycle

flex3 s

layoutmanager class