Flex 4 Component Development
Upcoming SlideShare
Loading in...5

Flex 4 Component Development



Presentation at Flash Camp Chicago regarding Flex 4 component changes

Presentation at Flash Camp Chicago regarding Flex 4 component changes



Total Views
Views on SlideShare
Embed Views



10 Embeds 72

http://www.slideshare.net 43
http://fasanya.blogspot.com 19
http://fasanya.blogspot.jp 2
http://fasanya.blogspot.in 2
http://fasanya.blogspot.co.at 1
http://donfasanya.posterous.com 1
http://fasanya.blogspot.com.br 1
http://webcache.googleusercontent.com 1
http://fasanya.blogspot.tw 1
http://fasanya.blogspot.cz 1



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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Flex 4 Component Development Flex 4 Component Development Presentation Transcript

  • Component Development in the Flex 4 Model
    Michael Labriola
    Digital Primates
    Twitter: mlabriola
  • Who are you?
    Michael Labriola
    Senior Consultant at Digital Primates
    Flex Geek
    Team Mentor
    Project Lead for FlexUnit 4
  • What is this session about?
    Component Development
    Components are the root of everything in Flex. Know how to make them work and know Flex
  • What are we doing?
    Implement and create a layout class
    Implement and create a skin
    Create a custom component using the Flex 4 component framework
  • What are Flex Components?
  • Why do you care?
    Flex is a component framework
    Everything is a component in Flex
    Understand components and understand Flex
    When you want something new, that does something different, you want to create a component
  • Important things to understand
    In Flex 4 components are composed of two pieces
    The form
    The function
  • The Function
    What the component does
    How it does it
    When it does it
    Defines what the component is
    Buttons are about being clicked
    List is about selection and virtualization
  • The Form
    A list doesn’t have to be horizontal or vertical to be a list
    Buttons don’t need to be rectangles
    What makes a list a list? What makes a button a button?
  • Separation
    Separating these pieces favors composition over inheritance
    By separating form and function we gain and we lose.
  • We Gain
    The capability of having one set of functionality look many different ways
    Back to the list example, a list can be horizontal, vertical, circular, etc. but we only have to maintain the code in one list class
  • We Lose
    We lose a lot of dead weight
    We lose a lot of extra classes
    Example of layout objects embedded in a class
  • There are two types of UI Components in Flex
    Interact with a user
    Present data
    Accept gestures
    Hold other containers and controls
    Control positioning of children
  • On the topic of losing weight
    There are two types of things in the Flex world, those that can be skinned and those that cannot
    Roughly corresponding to those that have their own visual appearance and those that simply influence the visualization of others
    Why? Because we don’t want to burden everything in the world with functionality it doesn’t need
  • Groups are the Base Type of Container
    Groups don’t have a visual identity of their own
    Groups can accept a layout object to handle the layout of children
  • Layout Types
    Layout types built into flex
    The important part about this is creating your own layouts
    Circle Layout
    Advanced Circle Layout
  • Create a Circle Layout
  • Controls and Some Containers can be Skinned
    Controls can also have their visual appearance modified and quite easily by skinning
  • Skins
    Skins are classes defined in MXML
    They are based on the Skin class
    They are applied to components using
    The skinClass
    Or by CSS
  • Definitions
    Think about the list class
    No visual elements can exist inside the list or it reduces skin-ability
    All visuals exist in the skin
    That means the component provides the functionality and controls aspects of the skin
    That could get ugly
  • Contracts
    That means we must have some sort of contract between a skin and a component.
    This contract defines the minimum things that must be present inside of the skin to be considered valid
    This contract is fulfilled in two ways
  • Components
    Declare skin parts (required or not)
    Declare skin states
  • Skins
    Specify a HostComponent
    Declare states
    <s:State name="up" />
    <s:State name="over" />
    Establish visuals
  • Visuals
    What type of visuals?
  • CODE
  • Q & A
    Seriously? You must have some questions by now?
  • Play and Vote
    Take a look at the latest beta bits:
  • Resources
    Tapper’s Blog
    Follow us on twitter
    mlabriola and jefftapper