Flex 4 Component Development


Published on

Presentation at Flash Camp Chicago regarding Flex 4 component changes

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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