• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Creating Custom Spark Components in Flex 4
 

Creating Custom Spark Components in Flex 4

on

  • 21,538 views

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.

Statistics

Views

Total Views
21,538
Views on SlideShare
18,569
Embed Views
2,969

Actions

Likes
6
Downloads
219
Comments
0

8 Embeds 2,969

http://danorlando.com 2770
http://www.slideshare.net 167
http://laurentuntereiner.posterous.com 20
http://translate.googleusercontent.com 6
http://www.linkedin.com 3
http://saty 1
http://www.docshut.com 1
http://c7dcce65cbeb592b 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Response A
  • Response A

Creating Custom Spark Components in Flex 4 Creating Custom Spark Components in Flex 4 Presentation Transcript

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