Presentation on gumbo

1. Hello Gumbo
Xavi Beumala
xbeumala@adobe.com
http://www.rialvalue.com
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

2. Agenda
 What’s Flex 4 about ?
 What is it not about ?
 Skinning examples
 How to migrate a Flex 3 project to Flex 4
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

3. Gumbo
 Design in Mind
 Developer Productivity
 Framework Evolution
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

4. Design in Mind
 Adjust the MXML language to support more toolability and make it easier to
describe experience-oriented features such as states and transitions (MXML
2009)
 Create a format that promotes the features available in the Flash Player and is
usable by tools to describe various graphic assets, including skins (FXG)
 Provide a component and skinning architecture that invites easy tool
participation (code name Gumbo)
 Improve existing experience-oriented features such as states, effects, and
layout
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

5. Design in Mind Approach
 Integrate new functionality (Gumbo) into existing component model (Halo)
 Create new design-friendly components
 Size of resulting applications within same order of magnitude as Flex 3
 Low-hanging size and performance improvements
 Wrap new FlashPlayer features like TextPrimitives or 3D
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

6. Developer Productivity
 Compiler Performance
 2-way binding
 CSS Improvements
 New state syntax
 Tool maturity
 Refactors
 Inline help
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

7. Gumbo
walkthrough
®
7
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

8. Hello Gumbo!!!!!!
 Tag s:Application
 New namespaces
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

9. namespaces
hell or heaven?
®
9
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

10. Namespaces
 Language namespace:
 xmlns:fx=”http://ns.adobe.com/mxml/2009”
 Spark namespace:
 xmlns:s=”library://ns.adobe.com/flex/spark”
 Halo namespace:
 xmlns:mx=”library://ns.adobe.com/flex/halo”
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

11. Mixing Halo and Spark
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

12. Layout
 Layouts now are external implementations
 Composition vs Inheritance
 They’re exchangeable
 You can implement custom layouts extending LayoutBase
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

13. Where are
my scrolls?!?!
®
13
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

14. Where are my scrolls ?!?!
 Container skins don’t have scrolls by default anymore
 Flex 4 architecture is set up to provide developers with building blocks to pick
and choose what functionality they need
 We have to add them
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

15. FXG
 Graphics interchange format based in XML
 Enables and encourages toolability
 Key feature to define skins
 http://opensource.adobe.com/wiki/display/flexsdk/FXG+1.0+Specification
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

16. Skinning a
Button
®
16
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

17. Skinning && Styling I
 In Flex 3 we couldn’t do basic things like:
 Transitions between states
 Play effects and transition
 Add more than one icon / image to a button
 Each state had to be pretty much the same
 Basic things in Flash were completely impossible to accomplish
up over
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

18. More
sophisticated
skins
®
18
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

19. Skinning && Styling II
 Let’s try to skin a more sophisticated component: a List
 Data Model
 Now the List Component itseltf
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

20. Skinning && Styling III
 This was a boring a list!!
 Let’s add some skinning
Skinning
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

21. Skinning && Styling VII
 This was a boring list. Let’s add some art to it
 With states
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

22. Migration
guide
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

23. Migration I
 CSS. Type selectors require a namespace
 Theme. Default Halo theme has changed to visually match default Spark theme
 Preloader
 Namespaces
 Declarations tag
 Changes in states syntax
 Embed fonts on both namespaces if needed
 -compatibility-version=3.0.0.
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

24. What gumbo
is NOT
®
24
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

25. Mind the gap
 Gumbo is not going to be a lighter framework
 There’s no a 1:1 relationship between Halo and Spark components
 Spark accessibility
 Spark automation
 Complexity and needed effort to migrating to Flex4 will depend on the
practices followed in your application
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

26. Questions
and
maybe Answers
®
26
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

27. Links
®
27
Copyright 2008 Adobe Systems Incorporated. All rights reserved.

28. Further information
 hquot;p://www.adobe.com/devnet/flex/ar5cles/flex4sdk_whatsnew.html
 hquot;p://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Component+Architecture
 hquot;p://www.adobe.com/devnet/flex/ar5cles/flex3and4_differences_01.html
 hquot;p://labs.adobe.com/wiki/index.php/Flex_4:Backward_Compa5bility
 hquot;p://opensource.adobe.com/wiki/display/flexsdk/Spark+Basic+Layout
 hquot;p://opensource.adobe.com/wiki/display/flexsdk/Spark+Horizontal+and+Ver5cal+Layout
 hquot;p://opensource.adobe.com/wiki/display/flexsdk/CSS+Advanced+Selectors
 hquot;p://opensource.adobe.com/wiki/display/flexsdk/Gumbo+Skinning
 hquot;p://www.adobe.com/devnet/flex/tourdeflex/
 hquot;p://mi5.pricope.com/2009/05/29/playing‐with‐custom‐layout‐in‐flex‐4/
®
Copyright 2008 Adobe Systems Incorporated. All rights reserved.