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

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!!!