Components let you modularize your application. This allows you to build and maintain components separately and hopefully re-use them in later endeavors. To allow this, they should be self contained and loosely coupled.
All Flex components are ActionScript classes. The base class for visual components is
UIComponent. Below this, there are general groupings of classes based on their behavior.
To build a component, create an MXML file with the name of your component. As it’s a class, it should follow convention and start with an upper case letter.
A component looks like an ordinary MXML file but instead of the root tag being mx:Application, you use the component type you wish to extend or group functionality under.
To use the new component in a different file, you must add an XML namespace to be able to access it (similar to the way you’d use an import statement to access a pure ActionScript class). Normally you would group similar components together in subdirectories so you’d end up with something like
charts/lineCharts/MySuperChart.mxml The namespace is declared alongside the mx namespace definition and for our example, would be
xmlns:c="charts.lineCharts.*" the component can then be instantiated in the body just like a regular mx component –
A custom component does not have to be a visual component. It could be a purely data related or computational class. In this case, we would use
UIComponent as our root tag as this is the base class, it’s the lightest weight component we can use.
Pop up windows
TitleWindow class can show a close button so it’s often used for pop ups. The close event is used to process this action. The
PopUpManager class has a static method
removePopUp() which can be called for the close event. The remove method requires a reference to the window to close which would normally be
this to indicate that you are telling the TitleWindow to close itself.
We can create a
TitleWindow custom component to define our pop up and then use
PopUpManager.createPopUp() to display it. The createPopUp method takes three parameters:
- parent – a reference to the window to pop over
- class – a reference to the class of object you want to create
- modal – a boolean that indicates if the window is modal (consumes all input) or not (defaults to false)
In the file where we’re using our custom TitleWindow class, it could look like:
If you need to pass data to your custom pop up, you would declare the popup variable to be the type of your custom class and then use a class cast to convert the output of the create function into your custom class.