Your SlideShare is downloading. ×
Hello Gumbo


Xavi Beumala
xbeumala@adobe.com
http://www.rialvalue.com
                                                   ...
Agenda
   What’s Flex 4 about ?
   What is it not about ?
   Skinning examples
   How to migrate a Flex 3 project to F...
Gumbo
   Design in Mind
   Developer Productivity
   Framework Evolution




                                          ...
Design in Mind
   Adjust the MXML language to support more toolability and make it easier to
    describe experience-orie...
Design in Mind Approach
   Integrate new functionality (Gumbo) into existing component model (Halo)
   Create new design...
Developer Productivity
   Compiler Performance
   2-way binding
   CSS Improvements
   New state syntax
   Tool matur...
Gumbo
  walkthrough



                                                                      ®




                       ...
Hello Gumbo!!!!!!
   Tag s:Application
   New namespaces




                                                           ...
namespaces
        hell or heaven?




                                                                      ®




       ...
Namespaces
   Language namespace:
          xmlns:fx=”http://ns.adobe.com/mxml/2009”

   Spark namespace:
          xm...
Mixing Halo and Spark




                                                                  ®




Copyright 2008 Adobe Sys...
Layout
   Layouts now are external implementations
   Composition vs Inheritance
   They’re exchangeable
   You can im...
Where are
my scrolls?!?!



                                                                       ®




                 ...
Where are my scrolls ?!?!
   Container skins don’t have scrolls by default anymore
   Flex 4 architecture is set up to p...
FXG
   Graphics interchange format based in XML
   Enables and encourages toolability
   Key feature to define skins
  ...
Skinning a
                         Button



                                                                       ®



...
Skinning && Styling I
    In Flex 3 we couldn’t do basic things like:
           Transitions between states
           ...
More
sophisticated
        skins


                                                                       ®




          ...
Skinning && Styling II
    Let’s try to skin a more sophisticated component: a List
    Data Model




    Now the List...
Skinning && Styling III
    This was a boring a list!!
    Let’s add some skinning




                                 ...
Skinning && Styling VII
    This was a boring list. Let’s add some art to it




    With states




                   ...
Migration
                              guide



                                                                  ®




C...
Migration I
    CSS. Type selectors require a namespace
    Theme. Default Halo theme has changed to visually match defa...
What gumbo
        is NOT



                                                                       ®




                ...
Mind the gap
    Gumbo is not going to be a lighter framework
    There’s no a 1:1 relationship between Halo and Spark c...
Questions
              and
    maybe Answers




                                                                       ®...
Links



                                                                               ®




                            ...
Further information
    hquot;p://www.adobe.com/devnet/flex/ar5cles/flex4sdk_whatsnew.html
    hquot;p://opensource.adobe....
Upcoming SlideShare
Loading in...5
×

Hello Gumbo

695

Published on

Presentation on gumbo

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
695
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Hello Gumbo"

  1. 1. Hello Gumbo Xavi Beumala xbeumala@adobe.com http://www.rialvalue.com ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  2. 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. 3. Gumbo  Design in Mind  Developer Productivity  Framework Evolution ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  4. 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. 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. 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. 7. Gumbo walkthrough ® 7 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  8. 8. Hello Gumbo!!!!!!  Tag s:Application  New namespaces ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  9. 9. namespaces hell or heaven? ® 9 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  10. 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. 11. Mixing Halo and Spark ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  12. 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. 13. Where are my scrolls?!?! ® 13 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  14. 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. 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. 16. Skinning a Button ® 16 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  17. 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. 18. More sophisticated skins ® 18 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  19. 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. 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. 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. 22. Migration guide ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  23. 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. 24. What gumbo is NOT ® 24 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  25. 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. 26. Questions and maybe Answers ® 26 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  27. 27. Links ® 27 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  28. 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.

×