Xml - namespaces - flex 3  (Page 4/5)

Screen output for upgraded Flex project

Now I am going to upgrade the project to add a VBox container with a red background to the Application element, and then add a Label and a Button to the VBox container element. I will also delete the layout attribute shown in Listing 1.

If you compile and run this project, you should see the output shown in Figure 3.

Figure

Screen output for upgraded flex project.

The modified MXML code

The modified MXML code is shown in Listing 2.

Comments

The lines of text in Listing 2 that begin with the left angle bracket followed by !-- are comments. The comment includes everything from the beginningto the -- followed by a right angle bracket. (You cannot include -- in a comment.)

You can include comments in an XML document to help explain the code, record the date, or for whatever purpose a comment may be appropriate. Comments areignored by the Flex compiler and have no effect on the behavior of the program.

The Application element

The start and end tags for the Application element are the same as in Listing 1 except that I deleted the layout attribute.

The VBox element

At this point, you should have no difficulty identifying the start and end tags for the VBox element. Note that I included an attribute for the VBox element to cause the backgroundColor for the VBox to be red. (I will leave it as an exercise for the student to research and determine how"#FF0000" represents the color red.)

The VBox element

You should also note that the name of the VBox element is prefixed with mx , which is the default namespace for all Flex 3 components.

Finally, you should note that the VBox element is nested inside the Application element. We say that in this case, VBox is a child of Application .

The physical output on the screen

Physically, the Application element represents the browser window with the gray background shown in Figure 3. The VBox component with the red background is inside of or contained within the Application container in Figure 3.

The nesting structure that you give to the MXML code carries through to the physical arrangement of the corresponding components in the resulting GUI.

The Label and Button elements

The two lines of code that begin with a left angle bracket followed by mx:Label and mx:Button nest a Label element and a Button element inside the VBox element. Once again, this carries through to the output GUI shown in Figure 3where the label and the button are contained in the red VBox component.

Note that as is the case with all standard Flex 3 components, the names of the Label and Button elements are prefixed with mx . (A different prefix is used in Flex 4.)

Properties of the Label and Button element

The Label element has an attribute that sets the text property to the text that you see in the label in Figure 3. Similarly, the Button element has an attribute that sets the button's label property to the text that you see on the face of the button in Figure 3.