Creating Custom Spark Components in Flex 4

Creating Scalable Custom Components in Flex 4 using Spark

Dan Orlando

Who is Dan Orlando?• Universal Mind Consultant• Adobe Community Professional• Preacher of best practices with Flex• Author (latest: Flex 4 in Action)• Blog-banger (danorlando.com)• Master DJ• Entrepreneur• Flex Jedi

Flex 4 is coming!

Welcome to Spark!

• Not a death sentence for Flex 3 apps• Builds on Flex 3 component architecture

(UIComponent)• More Stable & Scalable• Structurally and organizationally superior• Design patterns• Separation of concerns• Code reusability (for real this time!)

Will the real MVC please stand up?

Tight Coupling + dependecies

= “domino effect”

Controversy in the Community

micro-architectures

design patterns

best practices

Anatomy of a Flex 4 Application

Spark Component Anatomy

"The general rule is any code that is used by multiple skins belongs in the component class, and any code that is specific to a particular skin implementation lives in the skin."

Spark Architecture

Ely’s Reveal (MAX ’09)

Dan’s Reveal (Ely’s Reveal, simplified for Flex 4 in Action, ‘10)

“Drop down and reveal”

“Slide out and reveal”

“Pop a wheelie and reveal”

Reveal Structure

Skin States and Skin PartsCOMPONENT

States and Parts

States: defined in the component, controlled by the skin

Parts: defined in the skin, controlled by the component

Skin States

SKIN

Skin PartsSKIN

Declaring the [HostComponent]

This tells the skin what component to apply itself to.

This is a composite component!

STOP STOP

Hammer Time

Simple vs. Composite

Composite: derived from composition; composed of more than one simple component

Simple: Basic control or container; example: Canvas, Label, Button, ComboBox

Simple Component SkinningSKIN

Declaring the [HostComponent]

Example: the “openButton” skin:

Binding skins with CSSAPPLICATION

Properties COMPONENT

Method OverridesCOMPONENT

Animation & EffectsSKIN

Summing it up…

The component class must: 1. Define the skin(s) that correspond to it2. Identify skin parts with the [SkinPart] metadata tag3. Identify view states that are supported by the component

using the [SkinState] tag

The skin class must:4. Use the [HostComponent] metadata tag to specify the

corresponding component5. Declare view states and define their appearance 6. Define display information of skin parts

Custom Flex 4 Component Resources

• Ryan Stewart:http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/

• Dan Orlando:http://danorlando.com/?p=379

• Pete DeHaan:http://blog.flexexamples.com/

• Chet Haase:http://graphics-geek.blogspot.com/

• Flex 4 in Action (ch. 17)Orlando, Ahmed, Bland, Hooks (coming soon)

Flex 4 is not as scary as Ozzy trying to be scary after all, so have fun Flexing!!!