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