Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Component Development in the Flex 4 Model<br />Michael Labriola<br />Digital Primates<br />Twitter: mlabriola<br />
Who are you?<br />Michael Labriola<br />Senior Consultant at Digital Primates<br />Flex Geek<br />Team Mentor<br />Project...
What is this session about?<br />Component Development<br />Components are the root of everything in Flex. Know how to mak...
What are we doing?<br />Implement and create a layout class<br />Implement and create a skin<br />Create a custom componen...
What are Flex Components?<br />
Why do you care?<br />Flex is a component framework<br />Everything is a component in Flex<br />Understand components and ...
Important things to understand<br />In Flex 4 components are composed of two pieces<br />The form<br />The function<br />
The Function<br />What the component does<br />How it does it<br />When it does it<br />Defines what the component is<br /...
The Form<br />A list doesn’t have to be horizontal or vertical to be a list<br />Buttons don’t need to be rectangles<br />...
Separation<br />Separating these pieces favors composition over inheritance<br />By separating form and function we gain a...
We Gain<br />The capability of having one set of functionality look many different ways<br />Back to the list example, a l...
We Lose<br />We lose a lot of dead weight<br />We lose a lot of extra classes<br />Example of layout objects embedded in a...
There are two types of UI Components in Flex<br />Controls<br />Interact with a user<br />Present data<br />Accept gesture...
On the topic of losing weight<br />There are two types of things in the Flex world, those that can be skinned and those th...
Groups are the Base Type of Container<br />Groups don’t have a visual identity of their own<br />Groups can accept a layou...
Layout Types<br />Layout types built into flex<br />BasicLayout<br />HorizontalLayout<br />VerticalLayout<br />The importa...
Create a Circle Layout<br />
Controls and Some Containers can be Skinned<br />Controls can also have their visual appearance modified and quite easily ...
Skins<br />Skins are classes defined in MXML<br />They are based on the Skin class<br />They are applied to components usi...
Definitions<br />Think about the list class<br />No visual elements can exist inside the list or it reduces skin-ability<b...
Contracts<br />That means we must have some sort of contract between a skin and a component.<br />This contract defines th...
Components<br />Declare skin parts (required or not)<br />Declare skin states<br />HELP!<br />
Skins<br />Specify a HostComponent<br /><fx:Metadata><br />  [HostComponent("spark.components.Button")]<br /></fx:Metadata...
Visuals<br />What type of visuals?<br />
CODE<br />
Q & A<br />Seriously? You must have some questions by now?<br />
Play and Vote<br />Take a look at the latest beta bits:<br />http://labs.adobe.com/technologies/flashbuilder4/<br />
Resources<br />Labriola’sBlog<br />http://blogs.digitalprimates.net/codeSlinger/<br />Tapper’s Blog<br />http://blogs.digi...
Upcoming SlideShare
Loading in …5
×

Flex 4 Component Development

3,186 views

Published on

Presentation at Flash Camp Chicago regarding Flex 4 component changes

Published in: Technology
  • Be the first to comment

Flex 4 Component Development

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

×