| << Chapter < Page | Chapter >> Page > |
Grouping components in containers
The Flex VBox component is a container . Its purpose is to serve as a container for other components. Flex 3 provides several other container components in addition to the VBox component. They are used to group components in the GUI in a way that helps the user navigate the GUI.
The Label and Button elements are empty
The Label and Button components are not containers. Therefore, they cannot contain other components in the GUI.
As a result, the Label and Button elements in Listing 2 are empty . They don't contain any other elements. However, even empty elements can and often do have attributes.
No end tags for Label and Button elements
Because the Label and Button elements are empty elements, they don't have end tags. Instead they have a slash characterimmediately to the left of the closing angle bracket on the start tag.
The final upgrade
Now I'm going to upgrade the project once again to produce the output GUI shown in Figure 2. In this upgrade, I will add a custom label and a custombutton that create name conflicts. I will resolve the name conflict using namespaces.
Two custom components
The custom components are defined in the files named Label.mxml and Button.mxml shown in Figure 1. I will begin by discussing the MXML code for each of these custom components.
Listing 3 shows the MXML code for the custom label.
<?xml version="1.0" encoding="utf-8"?><mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Label
text="Custom Label"color="#FFFF00"
fontSize="12"fontWeight="bold"/></mx:VBox> Won't discuss in detail
Since this lesson is mainly about using namespaces to resolve name conflicts, and is not about creating custom components, I'm not going to go into detail atthis time about how to create custom components. Briefly, Listing 3 creates a custom component consisting of a label with yellow bold text and a font size of12 points inside of a VBox container.
This custom component is shown as the label with the yellow text in the middle of Figure 2. (I will cover the details of designing and creating custom components in a future lesson.)
Contents of the file named Button.mxml
Listing 4 shows the MXML code for the custom button.
<?xml version="1.0" encoding="utf-8"?><mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"
backgroundColor="#00FFFF"><mx:Label
text="Custom Component."color="#000000"
fontSize="12" fontWeight="bold"/><mx:Button
label="Button"/></mx:VBox> This custom component can also be viewed in Figure 2. Briefly it consists of a button and a label withblack text in a small VBox container with a cyan background.
Contents of the file named NameSpace01.mxml
Listing 5 shows the contents of the file named NameSpace01 , which is the main driver for the entire application.
<?xml version="1.0"?><!--
Namespace01Illustrates the use of namespaces to avoid name conflicts.
--><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComps="customComps.*"backgroundColor="#FFFF00"><!--Add a standard VBox container--><mx:VBox backgroundColor="#FF0000"><mx:Label text="Standard Label"
color="#FFFF00"fontSize="12"
fontWeight="bold"/><mx:Button label="Standard Button" /><MyComps:Label id="customLabel"/><MyComps:Button id="customButton"/></mx:VBox></mx:Application> Resolving name conflicts using namespaces
This code adds two standard components named Label and Button and two custom components named Label and Button to a VBox container.
Because the custom components have the same names as the standard components, a name conflict arises. Listing 5 resolves the name conflict using namespaces.
The folder named customComps
As you may recall from Figure 1, the two files that represent the custom components are in a folder named customComps , which is a child of the folder named src . Thus, the folder named customComps is a sibling of the file named NameSpace01.mxml .
A new namespace attribute
The code that begins with xmlns:MyComps in Listing 5 is a new attribute for the Application element. This attribute establishes a new namespace with the prefix MyComps . The namespace prefix points to all of the files in the folder named customComps .
The name customComps identifies the folder and the period and asterisk following the name mean that all of the files in the folder arepart of the new namespace.
Must use the new prefix
In order to include the custom components defined by these files in the MXML document, elements named after these components must be prefixed with MyComps .
Using the mx prefix for standard Flex components
The code that begins with mx in Listing 5 uses the standard mx namespace prefix to add a standard Label component and a standard Button component to the VBox container with a red background. You should have no difficulty identifying the start and end tags for the VBox element. Attributesare applied to the mx:Label element to set the color, size, and weight of the text in the label.
Using the MyComps prefix for custom components
The two lines of code that begin with a left angle bracket and the word MyComps use the new MyComps namespace prefix to add a custom Label component and a custom Button component to the same VBox container.
Resolving the name conflict
Because the elements for standard components are prefixed with mx and the elements for custom components are prefixed with MyComps , the compiler is able to distinguish between them and to resolve the name conflicts.
The final result is the GUI shown in Figure 2.
I will publish a list containing links to Flex resources as a separate document. Search for Flex Resources in theConnexions search box.
This section contains a variety of miscellaneous materials.
-end-
Notification Switch
Would you like to follow the 'Introduction to xml' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|