Flex Components: Introduction

Why do we need to make components? Helps organize the code, make it modular. The aim most of the times will be to either add functionality to a pre-defined component or group numerous components together.

The general approach is
1. Plan what you want your component will be, what will it do and where it will lie in the hierarchy. Choose an appropriate name.
2. First line will be the XML DTD we are using with the main application. No application tags as one app can have only one.
3. As the first MXML tag we insert the root tag of our component
4. In tag body add the functionality
5. In the file where we want to use the component we add an XML namespace so as we can access the component
6. Instantiate the component as any predefined component.
eg: Lets say we want a component to extend a TitleWindow, skeleton may look like:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
</mx:TitleWindow>
Say we create it at location ui.popups by name DataPopup. We will add namespace in Application tag in the main file as: xmlns:p="ui.popups.*"
and then instantiate in the body at appropriate place as:
<p:DataPopup/>
All the properties that we put in the script element in component can be instantiated as properties in the instantiation like property of any other component

UIComponent is the lightest-weight component that you can use when creating an MXML component. It is ideal to use for root tag of non-visual data manager type of components.

You cannot assign id to root tag of a component

It is a good idea to bundle a few UI components in a canvas tag to control mouse events on all of them. Combine it with currentState to get appropriate changes in the ui, including mouse hovers.

The inheritance hierarchy of UIComponent class:
mx.core.UIComponent extends
flash.display.Sprite extends
flash.display.DisplayObjectContainer extends
flash.display.InteractiveObject extends
flash.events.EventDispatcher (superclass of all flex components)

Questions:

1. Why do we need components?
2. Explain in brief how you would go about making a component?
3. What base component would you use to make a non-visual component?
4. What is the inheritance hierarchy of UIComponent class?