• Like
Creating Custom Spark Components in Flex 4
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Creating Custom Spark Components in Flex 4

  • 17,521 views
Published

Presentation from Dan Orlando on building scalable custom components using Spark architecture in Flex 4 at Flash Camp Phoenix on 1/29/10.

Presentation from Dan Orlando on building scalable custom components using Spark architecture in Flex 4 at Flash Camp Phoenix on 1/29/10.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
17,521
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
220
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Response A
  • Response A

Transcript

  • 1. Creating ScalableCustom Components in Flex 4 using Spark
    Dan Orlando
  • 2. 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
  • 3. Flex 4 is coming!
  • 4. 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!)
  • 5. Will the real MVC please stand up?
    Tight Coupling + dependecies
    = “domino effect”
  • 6. design patterns
    micro-architectures
    best practices
    Controversy in the Community
  • 7. Anatomy of a Flex 4 Application
  • 8. 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."
  • 9. Spark Architecture
  • 10. Ely’s Reveal (MAX ’09)
    Dan’s Reveal
    (Ely’s Reveal, simplified for Flex 4 in Action, ‘10)
  • 11. “Drop down and reveal”
  • 12. “Slide out and reveal”
  • 13. “Pop a wheelie and reveal”
  • 14. Reveal Structure
  • 15. COMPONENT
    Skin States and Skin Parts
  • 16. States and Parts
    States: defined in the component, controlled by the skin
    Parts: defined in the skin, controlled by the component
  • 17. SKIN
    Skin States
  • 18. SKIN
    Skin Parts
  • 19. Declaring the [HostComponent]
    This tells the skin what component to apply itself to.
  • 20. Hammer Time
    STOP
    STOP
    This is a composite component!
  • 21. Simple vs. Composite
    Composite: derived from composition; composed of more than one simple component
    Simple: Basic control or container; example: Canvas, Label, Button, ComboBox
  • 22. SKIN
    Simple Component Skinning
  • 23. Declaring the [HostComponent]
    Example: the “openButton” skin:
  • 24. APPLICATION
    Binding skins with CSS
  • 25. COMPONENT
    Properties
  • 26. COMPONENT
    Method Overrides
  • 27. SKIN
    Animation & Effects
  • 28. 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
  • 29. 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)
  • 30. Flex 4 is not as scary as Ozzytrying to be scary after all, so have fun Flexing!!!