• Save
Hello Gumbo
Upcoming SlideShare
Loading in...5
×
 

Hello Gumbo

on

  • 1,030 views

Presentation on gumbo

Presentation on gumbo

Statistics

Views

Total Views
1,030
Views on SlideShare
999
Embed Views
31

Actions

Likes
1
Downloads
0
Comments
0

3 Embeds 31

http://www.rialvalue.com 29
http://www.cleeki.com 1
http://www.slideshare.net 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Hello Gumbo Hello Gumbo Presentation Transcript

  • Hello Gumbo Xavi Beumala xbeumala@adobe.com http://www.rialvalue.com ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • Gumbo  Design in Mind  Developer Productivity  Framework Evolution ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • 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.
  • 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.
  • Gumbo walkthrough ® 7 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • Hello Gumbo!!!!!!  Tag s:Application  New namespaces ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • namespaces hell or heaven? ® 9 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • Mixing Halo and Spark ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • Where are my scrolls?!?! ® 13 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • 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.
  • Skinning a Button ® 16 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • More sophisticated skins ® 18 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • Skinning && Styling III  This was a boring a list!!  Let’s add some skinning Skinning ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • Migration guide ® Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • What gumbo is NOT ® 24 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.
  • Questions and maybe Answers ® 26 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • Links ® 27 Copyright 2008 Adobe Systems Incorporated. All rights reserved.
  • 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.