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.
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.