|
|
Published: October 13, 2009
Updated: December 13, 2009
Validated with Amaya
by Richard G. Baldwin
Flex Programming Notes # 0106
This tutorial lesson is part of a continuing series dedicated to programming with Adobe Flex.
An earlier lesson titled The Default Application Container provided information on how to get started programming with Adobe's Flex Builder 3.
I recommend that you open another copy of this document in a separate browser window and use the following links to easily find and view the figures and listings while you are reading about them.
I recommend that you also study the other lessons in my extensive collection of online programming tutorials. You will find a consolidated index at www.DickBaldwin.com.
A container is a special kind of component that is capable of containing other components, including other containers. Not every component is a container. For example, if you attempt to write XML code to place another component inside of a Button element, you will get an error at compile time.
Categories of components
The Components tab, which I explained in an earlier lesson, shows the following categories of components:
I don't believe that the word container appears anywhere on the Components tab. Thus, a container is a component that falls within one or more of the broad categories listed above.
Where are the containers?
Most, if not all of the components in the Layout category are containers. Some of the components in the Navigators category are probably containers as well.
I doubt that there are containers in the Controls category but I can't be sure, and I don't know about the Charts category.
The only way to know for sure if a component is also a container is to examine the documentation (see Resources) for the component.
The most commonly used containers
My guess would be that in addition to the default Application container, the most commonly used containers are named HBox, VBox, and Panel.
The HBox container
According to the Adobe Flex 3.4 Language Reference, "The HBox container lays out its children in a single horizontal row"
The VBox container
Similarly, "The VBox container lays out its children in a single vertical column."
The Panel container
The Panel is fancier than the other two. For example, it has a border and a pane at the top for a title.
Not visible by default
By default, neither the HBox container nor the VBox container has a visible border. However, it is possible to cause either container to have a visible border by setting the borderStyle, borderThickness, and borderColor properties (attributes) to non-default values.
Also, by default, the background of each of these containers is completely transparent. (The default backgroundColor is shown as undefined in the documentation while the default backgroundAlpha is shown to be 1.0.) Therefore, by default, neither container is visible in its own right. However, you can set the backgroundColor and backgroundAlpha properties to cause either container to become visible.
The program that I will explain in this lesson is named NestedContainers01. I recommend that you run the online version of this program before continuing with the lesson.
Browser image at startup
The application starts running in Flash Player 9 with the image shown in Figure 1 appearing in the browser.
Figure 1. Browser image at startup.
Two containers are involved
As you will see in the discussion of the XML code later in this lesson, this Flex application involves two containers:
The Application container
The Flex 3.4 documentation has this to say about the Application container:
"Flex defines a default, or Application, container that lets you start adding content to your application without explicitly defining another container. Flex creates this container from the <mx:Application> tag, the first tag in an MXML application file. While you might find it convenient to use the Application container as the only container in your application, in most cases you explicitly define at least one more container before you add any controls to your application."
Vertical layout by default
From Getting Started with Flex 3, an online O'Reilly book by Jack Herrington and Emily Kim, we learn:
"At the root of a Flex application is a single container, called the Application container, which holds all other containers and components. The Application container lays out all its children vertically by default (when the layout property is not specifically defined). There are three possible values for the Application component’s layout property:
- vertical - Lays out each child component vertically from the top of the application to the bottom in the specified order
- horizontal - Lays out each child component horizontally from the left of the application to the right in the specified order
- absolute - Does no automatic layout, and requires you to explicitly define the location of each child component"
Set the layout to horizontal
As you will see later (and referring back to Figure 1), the Layout property of the Application container is set to horizontal. This causes the Application container to behave like an HBox container insofar as layout is concerned.
Set the backgroundGradientColors
As you will also see later, the backgroundGradientColors property of the Application container is set to range from pure green at the top to pure blue at the bottom as shown in Figure 1. (You learned about the backgroundGradientColors property in an earlier lesson.)
Add components to the Application container
Referring again to Figure 1, the following components are added to the Application container:
These components are arranged in a single horizontal row as shown in Figure 1.
The VBox container
The backgroundColor property of the VBox container is set to yellow and the following components are added to the VBox container:
As described earlier, these components are arranged in a single vertical column inside the VBox container as shown in Figure 1.
I will explain this Flex application in fragments. A complete listing of the XML code is provided in Listing 4 near the end of the lesson.
Beginning of the XML code
The XML code for the application begins in Listing 1.
Listing 1. Beginning of the XML code for
NestedContainers01.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
backgroundGradientColors="[#00FF00,#0000FF]">
|
As mentioned earlier, the layout attribute is set to horizontal causing the components to be arranged in a single row as shown in Figure 1.
Also as mentioned earlier, the backgroundGradientColors attribute is set to range from pure green at the top to pure blue at the bottom as shown in Figure 1.
Add the VBox container
Listing 2 shows the addition of the VBox container to the Application container.
Listing 2. Add the VBox container.
<mx:VBox height="100%" backgroundColor="#FFFF00">
<mx:Label text="Label A"/>
<mx:Button label="Button A"/>
<mx:CheckBox label="Checkbox A"/>
</mx:VBox>
|
Listing 2 also shows the backgroundColor of the VBox container being set to yellow and three controls being added to the VBox container.
This produces the yellow rectangle containing the three controls shown on the left side of Figure 1.
Add the remaining controls
Listing 3 shows the addition of the remaining three controls to the Application container.
Listing 3. Add the remaining controls.
<mx:Label text="Label B"/>
<mx:Button label="Button B"/>
<mx:CheckBox label="Checkbox B"/>
</mx:Application>
|
This results in the three controls shown to the right of the yellow rectangle in Figure 1.
The end of the application
Listing 3 also shows the end tag for the Application element in the XML code.
I encourage you to run the online version of the program. Then copy the code from Listing 4. Use that code to create a Flex project. Compile and run the project. Experiment with the code, making changes, and observing the results of your changes. Make certain that you can explain why your changes behave as they do.
You learned how to nest containers inside of other containers and how to put controls in those nested containers.
A complete listing of the program discussed in this lesson is shown in Listing 4 below.
Listing 4. XML code for
NestedContainers01.
<?xml version="1.0" encoding="utf-8"?>
<!--
//Be sure to preserve < and > in html version
NestedContainers01
Illustrates nested containers.
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal"
backgroundGradientColors="[#00FF00,#0000FF]">
<mx:VBox height="100%" backgroundColor="#FFFF00">
<mx:Label text="Label A"/>
<mx:Button label="Button A"/>
<mx:CheckBox label="Checkbox A"/>
</mx:VBox>
<mx:Label text="Label B"/>
<mx:Button label="Button B"/>
<mx:CheckBox label="Checkbox B"/>
</mx:Application>
|
Copyright 2009, Richard G. Baldwin. Reproduction in whole or in part in any form or medium without express written permission from Richard Baldwin is prohibited.
Richard has participated in numerous consulting projects and he frequently provides onsite training at the high-tech companies located in and around Austin, Texas. He is the author of Baldwin's Programming Tutorials, which have gained a worldwide following among experienced and aspiring programmers. He has also published articles in JavaPro magazine.
In addition to his programming expertise, Richard has many years of practical experience in Digital Signal Processing (DSP). His first job after he earned his Bachelor's degree was doing DSP in the Seismic Research Department of Texas Instruments. (TI is still a world leader in DSP.) In the following years, he applied his programming and DSP expertise to other interesting areas including sonar and underwater acoustics.
Richard holds an MSEE degree from Southern Methodist University and has many years of experience in the application of computer technology to real-world problems.
-end-