Custom Logo Design Sydney | Unique Logo for Business | Spark Interact
Creating Custom Spark Components in Flex 4
-
Upload
dan-orlando -
Category
Technology
-
view
21.911 -
download
2
description
Transcript of 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!!!