no text exists for this slide

Introductions
Introductions
What’s new in flex 4
Namespaces
Layout
States
Styling/Skinning
Whats not in Flex 4
Summary

Jeff Tapper (jtapper@digitalprimates.net)
Jeff Tapper (jtapper@digitalprimates.net)
Senior Consultant – Digital Primates
Building Internet Applications since 1995
Authored 11 books on internet technologies
Adobe Certified Instructor for all Flex, AIR, Flash, and ColdFusion courses
http://blogs.digitalprimates.net/jefftapper
Twitter: jefftapper

Developers who:
Developers who:
Have some experience with Flex 3
Want to know more about Flex 4
Have a sense of humor
If this isnt you, you should just leave

Namespaces
Namespaces
New Philosophy about components
New States Model
New Styling/Skinning
New Layouts

Flex 4 works with 3 default namespaces
Flex 4 works with 3 default namespaces
MXML 2009    xmlns:fx="http://ns.adobe.com/mxml/2009"
Spark          xmlns:s="library://ns.adobe.com/flex/spark"
Halo        xmlns:mx="library://ns.adobe.com/flex/halo“

Composition over inheritance
Composition over inheritance
MVC within components
The days of bloated containers are gone!
s:Group – lightweight container
Contains, doesn’t style
Layout determined by layout property
To allow scrolling, wrap in a Scroller
For a styled container use SkinnableGroup

Provided by layout classes.
Provided by layout classes.
Flex 4 includes:
BasicLayout (Canvas)
VerticalLayout
HorizontalLayout
TileLayout
You can subclass LayoutBase and build your own

All the fun of a repeater with none of the hassle.
All the fun of a repeater with none of the hassle.
Supply a dataprovider
Use an itemRenderer for children (like Lists!)
Uses a layout object

No longer a need for separate List, HorizontalList and TileList
No longer a need for separate List, HorizontalList and TileList
Provide a layout to the list, and it can be any of these.
More on lists later today from Ben.

Less Verbose
Less Verbose
Easy to read
Apply inline
Declare states in states property
Define changes where they occur

Multiple Class Selectors:
<s:Button id=“myButton” styleName=“standard large” />
Multiple Class Selectors:
<s:Button id=“myButton” styleName=“standard large” />
ID Selectors:
#myButton { fontSize: 14 }
Descendant Selectors:
s|Scrollbar #myButton { baseColor: #FF0000 }
Pseudo Selectors:
s|Scrollbar #myButton:over { baseColor: #0000FF }
Use namespaces in CSS for Type selectors

More on this from Mike later today.
More on this from Mike later today.

Look of a component separated from its functionality
Look of a component separated from its functionality
Functionality in component
Look in Skin class
Allows for easy and rapid customization of components look and feel

FXG
FXG
TLF
New IDE
Catalyst
AIR 2
CSS Improvements
And much much more

DataGrid
DataGrid
Tree
AdvancedDataGrid
ViewStack/TabNavigator/Accordion
Don’t worry, you can still use them all

Flex 4 is a whole new approach to Flex Development
Flex 4 is a whole new approach to Flex Development
New Philosophy makes for smaller / more responsive applications
New layout improves flexibility
Easier to use states
Improved Styling/Skinning
Flex 3 components still available
Flex 4 is better than ever.

?
?