| << Chapter < Page | Chapter >> Page > |
An mx:VBox element
From what you already know about XML, you can see that an element named mx:VBox is part of the content of the Application element. Very briefly, in Flex, an mx:VBox element is a container element that can contain other elements. Couched in visual terms such as Figure 1, an mx:VBox object can contain other components such as labels and buttons.
Note that the mx:VBox element name has an mx prefix, meaning that it represents a component from the Flex 3 library asexplained earlier.
The backgroundColor attribute of the mx:VBox element
Also note that the mx:VBox element has an attribute named backgroundColor with a value of "#FF0000" . In a future lesson, I willexplain that this is a hexadecimal value that represents the color red at maximum intensity. This attribute produces the red background color that you see in the upper portion of Figure 1.
The backgroundColor attribute for the Application element
While we are discussing background colors, it is also worth mentioning that the application element has an attribute named backgroundColor with a value of "#FFFF00" . This is the hexadecimal value for yellow and causes the background color of the entire Flash Player window to be yellow.
Contents of the mx:VBox element
The mx:VBox element contains the following four elements:
In the earlier lesson, I explained that the first two of these four elements represent components from the standard Flex 3 library. (Hence the "mx:" prefix.) The last two represent custom components that were constructed using components from the standard Flex3 library.
The MyComps:Button element
If you go back to the earlier lesson and examine the code for the custom component named MyComps:Button , you will see that it has an mx:Label and an mx:Button in an mx:VBox container with a backgroundColor value of "#00FFFF" (cyan) . This produces the cyan rectangle containing the label and the button in thebottom portion of Figure 1.
The main mxml file for Namespace02
The main mxml file for the Flex 4 project named Namespace02 is shown in Listing 4.
<?xml version="1.0" encoding="utf-8"?><!--File: Namespace02.mxml
This is a Flex 4 version of the Flex 3 programnamed Namespace01--><!--Declare a namespace as the folder named customComps,
which contains a custom label component and a secondcustom component consisting of a Spark Label and a
Spark Button. Then declare the three namespaces requiredby Flex 4. Finally cause the background to be yellow.--><s:Application xmlns:MyComps="customComps.*"
xmlns:fx="http://ns.adobe.com/mxml/2009"xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"backgroundColor="0xFFFF00"><!--Put a Spark Label and a Spark Button along with two
custom components in a Spark Group with a red backgroundcolor.--><s:Group horizontalCenter="0" verticalCenter="0"><!--Create a red rectangle to serve as the background
color for the Group--><s:Rect width="100%" height="100%"><s:fill><s:SolidColor color="0xFF0000" /></s:fill></s:Rect><!--Add a Spark VGroup to contain the components and
cause them to be laid out vertically.--><s:VGroup><!--Add two Spark components to the VGroup--><s:Label text="Spark Label"
color="#FFFF00"fontSize="12"
fontWeight="bold"/><s:Button label="Spark Button" /><!--Add two custom components to the VGroup--><MyComps:Label id="customLabel"/><MyComps:Button id="customButton"/></s:VGroup></s:Group></s:Application> 
Notification Switch
Would you like to follow the 'Introduction to xml' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|