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

For this project I had to create the following files and folders:

• The file named Namespace01.mxml
• The folder named customComps
• The file named Button.mxml
• The file named Label.mxml

Create a graphical user interface (GUI)

If you continue in your study of Flex programming, you will learn that one of the most important uses of Flex is to create a graphical user interface (GUI) toprovide the user interface for programs that are written in the ActionScript programming language.

While you may not be familiar with the jargon term GUI, I know that you are familiar with the use of a GUI. The GUI is generally considered to consist ofthe buttons, menus, text fields, etc. that you interact with when you run a program on a modern desktop or laptop computer.

Two buttons, three labels, etc.

This project creates a GUI with two buttons and three labels in a VBox container with a red background as shown in Figure 2.

Figure

Program output at startup.

The buttons are not active

Nothing happens if you click the buttons in the GUI. The program isn't very interesting from an operational viewpoint. The thing that is interesting is thatI purposely created name conflicts and resolved them through the use of XML namespaces. I will explain how I did that.

Two standard components

The size of the red VBox container was set to exactly match the size needed to contain the four components. The yellow label with the text Standard Label and the button labeled Standard Button are standard Flex components. As you will see shortly, they are created bycreating instances of the standard Flex components named Label and Button .

A conflict with the name Label

The yellow label with the text Custom Label and the cyan rectangle containing a label and a button are both custom components. The yellowlabel in the middle was created by combining the XML file named Namespace01.mxml shown in Figure 1 with the file named Label.mxml , which is also shown in Figure 1. This created a name conflict because the name of the file, Label , is the same as the name of the yellow label at the top of the red VBox .

A conflict with the name Button

The cyan component containing the button and the label was created by combining the XML file named Namespace01.mxml shown in Figure 1 with the file named Button.mxml , which is also shown in Figure 1. This also created a name conflict because the name of the file, Button , is the same as the name of the standard button.

Start with a simple project

Now that you have the big picture in mind, it's time to drill down a little deeper and take a look at the three XML files used in this project. However, I'mgoing to start out with a very simple project and work my way up to the project that created the output shown in Figure 2.

Discussion and sample code

Two ways to create Flex projects

Flex projects can be created using nothing more than a text editor and a Flex software development kit (SDK)that is freely available from the Adobe website. However, to make the development of Flex projects a little easier, Adobe sells a product named FlexBuilder 3 that includes the SDK along with a visual project editor. The project that I will explain in this lesson was created using Flex Builder 3.