Creating ScalableCustom Components in Flex 4 using Spark<br />Dan Orlando<br />
Who is Dan Orlando?<br />Universal Mind Consultant<br />Adobe Community Professional<br />Preacher of best practices with ...
Flex 4 is coming!<br />
Welcome to Spark!<br />Not a death sentence for Flex 3 apps<br />Builds on Flex 3 component architecture (UIComponent)<br ...
Will the real MVC please stand up?<br />Tight Coupling + dependecies<br />= “domino effect”<br />
design patterns<br />micro-architectures<br />best practices<br />Controversy in the Community<br />
Anatomy of a Flex 4 Application <br />
Spark Component Anatomy<br />&quot;The general rule is any code that is used by multiple skins belongs in the component cl...
Spark Architecture<br />
Ely’s Reveal (MAX ’09)<br />Dan’s Reveal<br />(Ely’s Reveal, simplified for Flex 4 in Action, ‘10)<br />
“Drop down and reveal”<br />
“Slide out and reveal”<br />
“Pop a wheelie and reveal”<br />
Reveal Structure<br />
COMPONENT<br />Skin States and Skin Parts<br />
States and Parts<br />States: defined in the component, controlled by the skin<br />Parts: defined in the skin, controlled...
SKIN<br />Skin States<br />
SKIN<br />Skin Parts<br />
Declaring the [HostComponent]<br />This tells the skin what component to apply itself to.<br />
Hammer Time<br />STOP<br />STOP<br />This is a composite component!<br />
Simple vs. Composite<br />Composite: derived from composition; composed of more than one simple component<br />Simple: Bas...
SKIN<br />Simple Component Skinning<br />
Declaring the [HostComponent]<br />Example: the “openButton” skin:<br />
APPLICATION<br />Binding skins with CSS<br />
COMPONENT<br />Properties <br />
COMPONENT<br />Method Overrides<br />
SKIN<br />Animation & Effects<br />
Summing it up…<br />The component class must: <br />Define the skin(s) that correspond to it<br />Identify skin parts with...
Custom Flex 4 Component Resources<br />Ryan Stewart:http://blog.digitalbackcountry.com/2009/07/building-custom-components-...
Flex 4 is not as scary as Ozzytrying to be scary after all, so have fun Flexing!!!<br />
Upcoming SlideShare
Loading in...5
×

Creating Custom Spark Components in Flex 4

17,717

Published on

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

0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
17,717
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
225
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Response A
  • Response A
  • Creating Custom Spark Components in Flex 4

    1. 1. Creating ScalableCustom Components in Flex 4 using Spark<br />Dan Orlando<br />
    2. 2. Who is Dan Orlando?<br />Universal Mind Consultant<br />Adobe Community Professional<br />Preacher of best practices with Flex<br />Author (latest: Flex 4 in Action)<br />Blog-banger (danorlando.com)<br />Master DJ<br />Entrepreneur<br />Flex Jedi<br />
    3. 3. Flex 4 is coming!<br />
    4. 4. Welcome to Spark!<br />Not a death sentence for Flex 3 apps<br />Builds on Flex 3 component architecture (UIComponent)<br />More Stable & Scalable<br />Structurally and organizationally superior<br />Design patterns<br />Separation of concerns<br />Code reusability (for real this time!)<br />
    5. 5. Will the real MVC please stand up?<br />Tight Coupling + dependecies<br />= “domino effect”<br />
    6. 6. design patterns<br />micro-architectures<br />best practices<br />Controversy in the Community<br />
    7. 7. Anatomy of a Flex 4 Application <br />
    8. 8. Spark Component Anatomy<br />&quot;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.&quot;<br />
    9. 9. Spark Architecture<br />
    10. 10. Ely’s Reveal (MAX ’09)<br />Dan’s Reveal<br />(Ely’s Reveal, simplified for Flex 4 in Action, ‘10)<br />
    11. 11. “Drop down and reveal”<br />
    12. 12. “Slide out and reveal”<br />
    13. 13. “Pop a wheelie and reveal”<br />
    14. 14. Reveal Structure<br />
    15. 15. COMPONENT<br />Skin States and Skin Parts<br />
    16. 16. States and Parts<br />States: defined in the component, controlled by the skin<br />Parts: defined in the skin, controlled by the component<br />
    17. 17. SKIN<br />Skin States<br />
    18. 18. SKIN<br />Skin Parts<br />
    19. 19. Declaring the [HostComponent]<br />This tells the skin what component to apply itself to.<br />
    20. 20. Hammer Time<br />STOP<br />STOP<br />This is a composite component!<br />
    21. 21. Simple vs. Composite<br />Composite: derived from composition; composed of more than one simple component<br />Simple: Basic control or container; example: Canvas, Label, Button, ComboBox<br />
    22. 22. SKIN<br />Simple Component Skinning<br />
    23. 23. Declaring the [HostComponent]<br />Example: the “openButton” skin:<br />
    24. 24. APPLICATION<br />Binding skins with CSS<br />
    25. 25. COMPONENT<br />Properties <br />
    26. 26. COMPONENT<br />Method Overrides<br />
    27. 27. SKIN<br />Animation & Effects<br />
    28. 28. Summing it up…<br />The component class must: <br />Define the skin(s) that correspond to it<br />Identify skin parts with the [SkinPart] metadata tag<br />Identify view states that are supported by the component using the [SkinState] tag<br />The skin class must:<br />Use the [HostComponent] metadata tag to specify the corresponding component<br />Declare view states and define their appearance <br />Define display information of skin parts<br />
    29. 29. Custom Flex 4 Component Resources<br />Ryan Stewart:http://blog.digitalbackcountry.com/2009/07/building-custom-components-in-flex-4-skinparts/<br />Dan Orlando:http://danorlando.com/?p=379<br />Pete DeHaan:http://blog.flexexamples.com/<br />Chet Haase:http://graphics-geek.blogspot.com/<br />Flex 4 in Action (ch. 17)Orlando, Ahmed, Bland, Hooks(coming soon)<br />
    30. 30. Flex 4 is not as scary as Ozzytrying to be scary after all, so have fun Flexing!!!<br />
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×