Creating Custom Spark Components in Flex 4

Creating ScalableCustom 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”

design patterns
micro-architectures
best practices
Controversy in the Community

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

COMPONENT
Skin States and Skin Parts

States and Parts
States: defined in the component, controlled by the skin
Parts: defined in the skin, controlled by the component

SKIN
Skin States

SKIN
Skin Parts

Declaring the [HostComponent]
This tells the skin what component to apply itself to.

Hammer Time
STOP
STOP
This is a composite component!

Simple vs. Composite
Composite: derived from composition; composed of more than one simple component
Simple: Basic control or container; example: Canvas, Label, Button, ComboBox

SKIN
Simple Component Skinning

Declaring the [HostComponent]
Example: the “openButton” skin:

APPLICATION
Binding skins with CSS

COMPONENT
Properties

COMPONENT
Method Overrides

SKIN
Animation & Effects

Summing it up…
The component class must:
Define the skin(s) that correspond to it
Identify skin parts with the [SkinPart] metadata tag
Identify view states that are supported by the component using the [SkinState] tag
The skin class must:
Use the [HostComponent] metadata tag to specify the corresponding component
Declare view states and define their appearance
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 Ozzytrying to be scary after all, so have fun Flexing!!!

http://danorlando.com	2660
http://www.slideshare.net	167
http://laurentuntereiner.posterous.com	20
http://translate.googleusercontent.com	6
http://www.linkedin.com	2
http://saty	1

Creating Custom Spark Components in Flex 4

by Dan Orlando

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 2,856

Statistics

Creating Custom Spark Components in Flex 4 Presentation Transcript