Flex 4 Component Development
Download as PPTX, PDF4 likes771 views
This document discusses component development in Flex 4. It explains that components are composed of form and function, with function defining what a component does and form defining its appearance. Separating form and function allows one set of functionality to have multiple appearances. It also discusses different types of components like controls and containers, and how to create custom components using layouts and skins. Components provide functionality through skinning contracts that define required skin parts and states.
![SkinsSpecify a HostComponent<fx:Metadata> [HostComponent("spark.components.Button")]</fx:Metadata>Declare states<s:states> <s:State name="up" /> <s:State name="over" /></s:states>Establish visuals](https://image.slidesharecdn.com/flex4componentdevelopment-100312173914-phpapp01/85/Flex-4-Component-Development-23-320.jpg)
Flex 4 Component Development
- 1. Component Development in the Flex 4 ModelMichael LabriolaDigital PrimatesTwitter: mlabriola
- 2. Who are you?Michael LabriolaSenior Consultant at Digital PrimatesFlex GeekTeam MentorProject Lead for FlexUnit 4
- 3. What is this session about?Component DevelopmentComponents are the root of everything in Flex. Know how to make them work and know Flex
- 4. What are we doing?Implement and create a layout classImplement and create a skinCreate a custom component using the Flex 4 component framework
- 5. What are Flex Components?
- 6. Why do you care?Flex is a component frameworkEverything is a component in FlexUnderstand components and understand FlexWhen you want something new, that does something different, you want to create a component
- 7. Important things to understandIn Flex 4 components are composed of two piecesThe formThe function
- 8. The FunctionWhat the component doesHow it does itWhen it does itDefines what the component isButtons are about being clickedList is about selection and virtualization
- 9. The FormA list doesn’t have to be horizontal or vertical to be a listButtons don’t need to be rectanglesWhat makes a list a list? What makes a button a button?
- 10. SeparationSeparating these pieces favors composition over inheritanceBy separating form and function we gain and we lose.
- 11. We GainThe capability of having one set of functionality look many different waysBack 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 LoseWe lose a lot of dead weightWe lose a lot of extra classesExample of layout objects embedded in a class
- 13. There are two types of UI Components in FlexControlsInteract with a userPresent dataAccept gesturesContainersHold other containers and controlsControl positioning of children
- 14. On the topic of losing weightThere are two types of things in the Flex world, those that can be skinned and those that cannotRoughly corresponding to those that have their own visual appearance and those that simply influence the visualization of othersWhy? Because we don’t want to burden everything in the world with functionality it doesn’t need
- 15. Groups are the Base Type of ContainerGroups don’t have a visual identity of their ownGroups can accept a layout object to handle the layout of children
- 16. Layout TypesLayout types built into flexBasicLayoutHorizontalLayoutVerticalLayoutThe important part about this is creating your own layouts Circle Layout Advanced Circle Layout
- 17. Create a Circle Layout
- 18. Controls and Some Containers can be SkinnedControls can also have their visual appearance modified and quite easily by skinning
- 19. SkinsSkins are classes defined in MXMLThey are based on the Skin classThey are applied to components using The skinClass Or by CSS
- 20. DefinitionsThink about the list classNo visual elements can exist inside the list or it reduces skin-abilityAll visuals exist in the skinThat means the component provides the functionality and controls aspects of the skinThat could get ugly
- 21. ContractsThat 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 validThis contract is fulfilled in two ways
- 22. ComponentsDeclare skin parts (required or not)Declare skin statesHELP!
- 23. SkinsSpecify a HostComponent<fx:Metadata> [HostComponent("spark.components.Button")]</fx:Metadata>Declare states<s:states> <s:State name="up" /> <s:State name="over" /></s:states>Establish visuals
- 24. VisualsWhat type of visuals?
- 25. CODE
- 26. Q & ASeriously? You must have some questions by now?
- 27. Play and VoteTake a look at the latest beta bits:http://labs.adobe.com/technologies/flashbuilder4/