Upload
michaellabriola
View
2.674
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Presentation at Flash Camp Chicago regarding Flex 4 component changes
Citation preview
Component Development in the Flex 4 Model
Michael LabriolaDigital Primates
Twitter: mlabriola
Who are you?Michael LabriolaSenior Consultant at Digital Primates
Flex GeekTeam MentorProject Lead for FlexUnit 4
What is this session about?
Component Development
Components are the root of everything in Flex. Know how to make them work and know Flex
What are we doing?
• Implement and create a layout class• Implement and create a skin• Create a custom component using the Flex
4 component framework
What are Flex Components?
Why do you care?
• Flex is a component framework• Everything is a component in Flex• Understand components and understand
Flex• When you want something new, that does
something different, you want to create a component
Important things to understand
• In Flex 4 components are composed of two pieces– The form– The function
The Function
• What the component does• How it does it• When it does it• Defines what the component is– Buttons are about being clicked– List is about selection and virtualization
The Form
A list doesn’t have to be horizontal or vertical to be a list
Buttons don’t need to be rectangles
What makes a list a list? What makes a button a button?
Separation
Separating these pieces favors composition over inheritance
By separating form and function we gain and we lose.
We Gain
The capability of having one set of functionality look many different ways
Back to the list example, a list can be horizontal, vertical, circular, etc. but we only have to maintain the code in one list class
We Lose
We lose a lot of dead weight
We lose a lot of extra classes
Example of layout objects embedded in a class
There are two types of UI Components in Flex
• Controls– Interact with a user– Present data– Accept gestures
• Containers– Hold other containers and controls– Control positioning of children
On the topic of losing weight
• There are two types of things in the Flex world, those that can be skinned and those that cannot– Roughly corresponding to those that have their
own visual appearance and those that simply influence the visualization of others
• Why? Because we don’t want to burden everything in the world with functionality it doesn’t need
Groups are the Base Type of Container
• Groups don’t have a visual identity of their own
• Groups can accept a layout object to handle the layout of children
Layout TypesLayout types built into flex
BasicLayoutHorizontalLayoutVerticalLayout
The important part about this is creating your own layouts
Circle LayoutAdvanced Circle Layout
Create a Circle Layout
Controls and Some Containers can be Skinned
Controls can also have their visual appearance modified and quite easily by skinning
SkinsSkins are classes defined in MXML
They are based on the Skin class
They are applied to components usingThe skinClassOr by CSS
Definitions• Think about the list class• No visual elements can exist inside the list
or it reduces skin-ability• All visuals exist in the skin• That means the component provides the
functionality and controls aspects of the skin
• That could get ugly
Contracts• That means we must have some sort of
contract between a skin and a component.• This contract defines the minimum things
that must be present inside of the skin to be considered valid
• This contract is fulfilled in two ways
Components• Declare skin parts (required or not)• Declare skin states• HELP!
Skins• Specify a HostComponent
<fx:Metadata> [HostComponent("spark.components.Button")]</fx:Metadata>
• Declare states<s:states> <s:State name="up" /> <s:State name="over" /></s:states>
• Establish visuals
Visuals
• What type of visuals?
CODE
Q & A
Seriously? You must have some questions by now?
Play and Vote
Take a look at the latest beta bits:
http://labs.adobe.com/technologies/flashbuilder4/
ResourcesLabriola’s Bloghttp://blogs.digitalprimates.net/codeSlinger/
Tapper’s Bloghttp://blogs.digitalprimates.net/jefftapper/
Follow us on twittermlabriola and jefftapper