Flex 4 Component Development

Component Development in the Flex 4 Model
Michael Labriola
Digital Primates
Twitter: mlabriola

Who are you?
Michael Labriola
Senior Consultant at Digital Primates
Flex Geek
Team Mentor
Project 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 Types
Layout types built into flex
BasicLayout
HorizontalLayout
VerticalLayout
The important part about this is creating your own layouts
Circle Layout
Advanced 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

Skins
Skins are classes defined in MXML
They are based on the Skin class
They are applied to components using
The skinClass
Or 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?

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/

Resources
Labriola’sBlog
http://blogs.digitalprimates.net/codeSlinger/
Tapper’s Blog
http://blogs.digitalprimates.net/jefftapper/
Follow us on twitter
mlabriola and jefftapper

http://www.slideshare.net	43
http://fasanya.blogspot.com	15
http://donfasanya.posterous.com	1

Flex 4 Component Development

by michael.labriola on Mar 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

3 Embeds 59

Statistics

Flex 4 Component Development — Presentation Transcript