6. 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
7. Important things to understand In Flex 4 components are composed of two pieces The form The function
8. 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
9. 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?
10. Separation Separating these pieces favors composition over inheritance By separating form and function we gain and we lose.
11. 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
12. We Lose We lose a lot of dead weight We lose a lot of extra classes Example of layout objects embedded in a class
13. There are two types of UI Components in Flex Controls Interact with a user Present data Accept gestures Containers Hold other containers and controls Control positioning of children
14. 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
15. 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
16. Layout Types Layout types built into flex BasicLayout HorizontalLayout VerticalLayout The important part about this is creating your own layouts Circle Layout Advanced Circle Layout
18. Controls and Some Containers can be Skinned Controls can also have their visual appearance modified and quite easily by skinning
19. 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
20. 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
21. 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