Skip to content Skip to navigation

OpenStax_CNX

You are here: Home » Content » XML - Namespaces - Flex 3

Navigation

Recently Viewed

This feature requires Javascript to be enabled.
 

XML - Namespaces - Flex 3

Module by: R.G. (Dick) Baldwin. E-mail the author

Summary: Learn enough about XML namespaces to be able to handle the namespace requirements of simple Flex projects. Also get your first taste of creating MXML files for Flex projects.

Note:

Click Namespace01 to run this Flex program. (Click the "Back" button in your browser to return to this page.)

Preface

General

This tutorial lesson is part of a series dedicated to programming with Adobe Flex.

Flex is a programming language based on XML. Therefore, in order to program with Flex, you must first understand XML. The lessons in this XML series provide a brief introduction to XML.

Viewing tip

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.

Figures

  • Figure 1 . The directory tree for the project named Namespace01.
  • Figure 2 . Program output at startup.
  • Figure 3 . Screen output for upgraded Flex project.

Listings

Supplemental material

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 .

General background information

XML namespaces make it possible to combine two or more XML documents into a single XML document and to deal with problems that arise when the same name is used for an element in two or more of the XML documents.

Preview

The XML namespace topic is very broad. I won't attempt to cover the topic of namespaces in this lesson. Instead, I will illustrate and explain a somewhat restricted use of namespaces by explaining a Flex project that combines three XML documents with conflicting element names.

Before getting into the detailed code, I will show you a couple of images that I will be referring back to later.

The project file structure

When you create a Flex project, you create a directory tree on the disk to contain the files and folders that make up the project. The tree is rooted in a folder that has the same name as the name that you give to the project. In this lesson, I will explain a Flex project named Namespace01.

Figure 1 shows the directory tree for this project. Figure 1 is a snapshot of the Flex Builder 3 Navigator panel.

Figure 1: The directory tree for the project named Namespace01.
The directory tree for the project named Namespace01.
Missing image.

Lots of folders and files

The directory tree contains a relatively large number of folders and files. Fortunately, most of the folders and files are generated automatically by Flex Builder 3. As Flex programmers, we are primarily interested in the folders and files that are children of the folder named src .

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) to provide 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 of the 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 2: Program output at startup.
Program output at startup.
Missing image.

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 that I 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 by creating 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 yellow label 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'm going 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 Flex Builder 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.

(Note that as of June 2010, the product named Flex Builder 3 has been replaced by a product named Flash Builder 4 to accommodate the release of version 4 of Flex. I will be covering both Flex 3 and Flex 4 in this series of lessons.)

Skeleton MXML code for a new Flex project

When you create a new Flex project in Flex Builder 3, a skeleton of the required MXML file is created for you. Listing 1 shows the contents of such a skeleton MXML file.

Listing 1: Skeleton MXML code for a new Flex project.

<?xml version="1.0" encoding="utf-8"?>

<mx:Application 
  xmlns:mx="http://www.adobe.com/2006/mxml" 
  layout="absolute">

</mx:Application>
(Listing 1 shows the skeleton code for a Flex 3 project. The skeleton code for a Flex 4 project is somewhat more complicated.)

The XML declaration

The line of code that begins with the left angle bracket followed by ?xml is called the XML declaration . It tells what version of XML is being used and also specifies the encoding scheme for the characters in the file. An XML declaration should be included at the beginning of every XML document.

The root element

The line of text that begins with a left angle bracket and mx:Application is the start tag for the root element in the XML document. (The root element is always named Application in a Flex project.) At this point in the course, you should be able to identify the end tag for the Application element.

All XML documents have a root element. All other elements must be nested in the root element.

Attributes of the root element

The start tag for the root element in Listing 1 includes two attributes:

  • xmlns:mx
  • layout

The layout attribute

The layout attribute specifies that components will be positioned on the computer screen using absolute coordinates. As you will see later, this is not what I want for my project so I will delete this attribute.

The namespace (xmlns) attribute

The more interesting attribute is the one named xmlns . The term xmlns is the required name for a namespace attribute. While it isn't necessary in general to include a namespace attribute in the root element, when a namespace attribute is included in the root element, it becomes the default namespace for the entire document.

Namespace is always required for a Flex project

It is always necessary to include the namespace attribute shown in Listing 1 in the main MXML document for a Flex 3 project. That is why Flex Builder 3 includes it in the skeleton code for the project.

(Flash Builder 4 includes different namespace attributes in the skeleton code for a Flex 4 project.)

To make a long story short, the inclusion of the default namespace attribute shown in Listing 1 means that all elements with names that refer to components from the standard Flex 3 library of components must be prefixed with mx .

A viable Flex project

The code shown in Listing 1 is a viable Flex 3 project. You can compile it and run it. However, when you do, you won't see any output other than a blank area with a default gray background in your browser window. So far, the project doesn't contain any Flex components such as labels and buttons.

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 3: Screen output for upgraded Flex project.
Screen output for upgraded Flex project.
Missing image.

The modified MXML code

The modified MXML code is shown in Listing 2.

Listing 2: Upgraded Flex project code.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml">
  
  <!--Add a VBox container to the Application-->
  <mx:VBox backgroundColor="#FF0000">
    
    <!--Add a label and a button to the VBox-->
    <mx:Label text="Label"/>
    <mx:Button label="Button"/>
    
  </mx:VBox>
  
</mx:Application>

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 beginning to 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 are ignored 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 3 where 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.

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 character immediately 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 custom button 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.

Listing 3: Contents of the file named Label.mxml.

<?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 at this 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 of 12 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.

Listing 4: Contents of the file named Button.mxml.

<?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 with black 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.

Listing 5: Contents of the file named NameSpace01.mxml.

<?xml version="1.0"?>
<!--
Namespace01
Illustrates 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 are part 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. Attributes are 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.

Resources

I will publish a list containing links to Flex resources as a separate document. Search for Flex Resources in the Connexions search box.

Miscellaneous

This section contains a variety of miscellaneous materials.

Note:

Housekeeping material
  • Module name: XML - Namespaces - Flex 3
  • Files:
    • Flex0086\Flex0086.htm
    • Flex0086\Connexions\FlexXhtml0086.htm

Note:

PDF disclaimer: Although the Connexions site makes it possible for you to download a PDF file for this module at no charge, and also makes it possible for you to purchase a pre-printed version of the PDF file, you should be aware that some of the HTML elements in this module may not translate well into PDF.

-end-

Content actions

Download module as:

PDF | EPUB (?)

What is an EPUB file?

EPUB is an electronic book format that can be read on a variety of mobile devices.

Downloading to a reading device

For detailed instructions on how to download this content's EPUB to your specific device, click the "(?)" link.

| More downloads ...

Add module to:

My Favorites (?)

'My Favorites' is a special kind of lens which you can use to bookmark modules and collections. 'My Favorites' can only be seen by you, and collections saved in 'My Favorites' can remember the last module you were on. You need an account to use 'My Favorites'.

| A lens I own (?)

Definition of a lens

Lenses

A lens is a custom view of the content in the repository. You can think of it as a fancy kind of list that will let you see content through the eyes of organizations and people you trust.

What is in a lens?

Lens makers point to materials (modules and collections), creating a guide that includes their own comments and descriptive tags about the content.

Who can create a lens?

Any individual member, a community, or a respected organization.

What are tags? tag icon

Tags are descriptors added by lens makers to help label content, attaching a vocabulary that is meaningful in the context of the lens.

| External bookmarks