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