# Connexions

You are here: Home » Content » The Default Application Container - Flex 3

### Recently Viewed

This feature requires Javascript to be enabled.

# The Default Application Container - Flex 3

Module by: Richard Baldwin. E-mail the author

Summary: Learn how to write a Flex application that controls the color, color gradient, and transparency of the background of the main window when a Flex 3 application is played in Flash Player.

Note: You are viewing an old version of this document. The latest version is available here.

## Preface

### General

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

The previous lessons in this series have primarily dealt with XML issues and have nibbled around the edges of Flex. At this point, it is time to get really serious about Flex and start understanding what Flex, (as an XML programming language) , is all about.

According to one of the pages on the Adobe website,

"Flex is a highly productive, free open source framework for building and maintaining expressive web applications that deploy consistently on all major browsers, desktops, and operating systems. While Flex applications can be built using only the free open source framework, developers can use Adobe Flex Builder software to dramatically accelerate development."

Download links for both the free Flex 3.4 framework and the (currently free for students) Flex Builder 3 IDE are provided in Resources .

#### Note:

Subsequent to the original publication of this lesson, Adobe has released Flex version 4 (in addition to Flex version 3) and has replaced the Flex Builder 3 IDE with a new IDE named Flash Builder 4.

Flash Builder 4 supports both Flex 3 and Flex 4. Flash Builder 4 is also very similar to Flex Builder 3 from a user perspective.

As of June 2010, Flex Builder 3 is no longer available, but Flash Builder 4 is available for downloading and is free for educational use .

I have made a few editorial updates to this lesson to accommodate the availability of Flex 4 and Flash Builder 4. However, since Flex 3 is still supported by Flash Builder 4, the material in this lesson continues to be relevant so I still consider it to be a useful part of the series and have not scrapped it.

I will provide technical information regarding the differences between Flex 3 and Flex 4 in future lessons.

Powerful but more complicated

Flex 4 is more powerful, but also significantly more complicated than Flex 3. Therefore, it isn't clear to me that developers will want to make an immediate switch to Flex 4.

Anything that can be programmed in Flex can also be programmed directly in ActionScript, but the reverse is not true. It seems to me that at some point, as Flex becomes more complicated, developers will simply switch to ActionScript instead of expending the effort necessary to learn about new more-complicated aspects of Flex.

This lesson deals with Flex 3. Future lessons will deal with Flex 4 and some of the differences between Flex 3 and Flex 4.

One of several ways to create applications for Flash Player (version 10 or later)

Flex 3 and Flex 4 (combined with ActionScript 3) simply provide one of several ways that developers can produce downloadable applications that will run in Adobe's Flash Player (version 10 or later) or Adobe Air (see Resources ) .

Running Flash Player

Very briefly, Adobe Flash Player normally runs applications in a web browser while Adobe Air runs applications in a stand alone mode from the desktop. However, if you have installed Flex Builder 3 or Flash Builder 4, it is usually possible to cause Flash Player to start and run in a stand alone mode by double clicking on an swf file. (See Figure 1.) If double clicking doesn't work, you can locate and run the file named FlashPlayer.exe. Once it is running, you can open and run other swf files.

Why do I care about Flex and Flash Player?

One of the fastest growing segments of the game programming industry is the area of social games that typically run in Flash Player. I currently teach a course titled "Game Development using C++" and another course titled "Game and Simulation Programming I : C#" based on Microsoft's XNA Game Studio. I have a long-term interest in possibly also teaching a course in "Game Development using Flex and ActionScript."

Flex and ActionScript

However, my more immediate interest is related to two other courses that I teach. One of those courses is an introduction to XML. The other course is Object-Oriented Programming using ActionScript 3.

Flex is an XML-based language that produces mxml files. (In fact, Flex is simply a shorthand way of writing ActionScript program files. When you compile a Flex MXML file, it is actually converted to an ActionScript file and compiled as an ActionScript file.)

The resulting ActionScript files, along with other resources, are compiled into swf files that can be executed in Flash Player (version 10 or later) or Adobe Air. Most of the lab projects in my XML course require the students to create Flex projects.

Most of the lab projects in my more advanced ActionScript programming course require the students to use Flex as a launch pad for their ActionScript programs.

Flex SDK versus Flex Builder

Although it is possible to create Flex applications using nothing more than the free open source Flex SDK (see Resources ) and a text editor, that can be tedious. Flex Builder 3 (and now Flash Builder 4) , which is currently free for educational use, helps you to write mxml files containing layout and controls and makes the process somewhat more enjoyable. It will probably also help you to be more productive.

A complete Flex application

A complete Flex application consists of

• One or more mxml files that may or may not embed ActionScript 3 code.
• None, one or more ActionScript 3 files.
• Various resource files such as image files, sound files, etc.

As mentioned earlier, these are compiled into a Flash swf file, which can be executed in either a Flash player or (in some cases) Adobe Air.

Division of responsibility

Flex provides the layout and control structure for the application in an XML format while ActionScript provides the program logic. (Of course, the whole thing can be written in ActionScript if you choose to do so.)

ActionScript is an issue for my XML students

While earlier versions of ActionScript may have been simple and easy to learn, ActionScript 3 is a fully object-oriented programming language with a complexity level on a par with C++.

Students in my XML class aren't required to have any programming knowledge, and aren't expected to have the prerequisite knowledge that would qualify them to learn ActionScript 3 while learning XML at the same time. Therefore, the early lessons in this series concentrate on the use of mxml for layout and control and forego any requirement to understand ActionScript 3.

### 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 . Flash Player output for a new Flex project.
• Figure 2 . Browser output for a new Flex project.
• Figure 3 . Application window background for alpha values of 0.0, 0.33, 0.66, and 1.0.

### 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

I have provided download links in Resources for both the free open source Flex 3.4 SDK and Flex Builder 3. (Flash Builder 4 has replaced Flex Builder 3 but as of June 2010 is still free for educational use.)

Flex Builder 3 (now Flash Builder 4) includes the SDK along with an IDE that is useful for creating Flex applications. Both downloads include a debug version of the Adobe Flash Player (version 10 or later) .

Install Flex 3

Installation of the free open source Flex 3.4 SDK (without Flex Builder 3) is a little complicated. I have provided a link in Resources for Installation and Release Notes.

Installation of Flex Builder 3 (Flash Builder 4) is straightforward, at least that is true for Windows. The download is an exe file. Just execute the downloaded file and follow the installation instructions.

Getting started with the free SDK

If you are using the free stand-alone SDK, I can't help you much insofar as getting started developing Flex applications is concerned. As I understand it, that version includes a command-line compiler. You will need to create your mxml files using a text editor and compile them using the command-line compiler.

Getting started with Flex Builder 3

If you are using Flex Builder 3, I have provided several links in Resources that will help you get started using the IDE. Perhaps the quickest way to get started is to view some of the videos at the link titled Flex in a Week video training .

Create a new project

Once you have Flex Builder 3 running, pull down the File menu and select New/Flex Project . Enter the name of your new project into the dialog box, make certain that the radio button for Web application is selected, and click the Finish button. If you wish, you can specify a disk location for your project other than the default location.

### Note:

The main difference in creating a new project in Flash Builder 4 is that you must select a radio button to specify whether you want to create a Flex 3 project or a Flex 4 project.

The project tree

A directory tree for your new project will be created having at least the following folders:

• .settings
• bin-debug
• html-template
• libs
• src

Flash Player output for a new Flex project

The bin-debug folder will contain several files including one with an swf extension and one with an html extension . As I mentioned earlier , if you double-click the file with the swf extension, it should open in Adobe Flash Player (version 10 or later) looking something like Figure 1 (except that Figure 1 is a screen shot of the earlier version 9 of Flash player).

Browser output for a new Flex project

When you installed Flex Builder 3, you should have been given an opportunity to update one or more browsers to include a special version of the Flash Player (version 10 or later) that supports debugging. If you open the html file mentioned above in one of those browsers, the output should look something like Figure 2.

The bin-release output

After you are satisfied with your program, you can create an output folder named bin-release by selecting Export Release Build... in the Project menu. The files in this folder are similar to the files in the bin-debug folder, but they tend to be smaller and there are fewer of them. This folder has been purged of debug information, and is the folder that is intended to be deployed on your web site.

Boring!

Granted, these outputs aren't all that exciting. However, they should help to confirm that you have Flex Builder 3 (Flash Builder 4) and Flash Player (version 10 or later) properly installed and linked to your browser.

The src folder

The folder in the directory tree mentioned earlier that will probably command most of your attention is the folder named src. When you create a new Flex project, this folder will contain a file with an extension of mxml. If you double click on that file name in the upper-left IDE window, the mxml file will open in the text editor window of the IDE and will look something like Listing 1.

A skeleton mxml file

Listing 1 shows the skeleton mxml code for a new Flex 3 project. This is the XML code that you will modify and supplement as you add features to your project.

### Listing 1: Skeleton mxml code for new Flex 3 project.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
layout="absolute">
</mx:Application>

Compile and run the project

You can compile and run the new project by selecting either Run or Debug on the Run menu. The new project should open in your browser looking pretty much like Figure 2. If you selected Debug , some debug text information should be displayed in the Console tab at the bottom of the IDE.

## Preview

In this lesson, I will explain how to create a very simple Flex project named AppBackground01 . To create this Flex project, you will add attributes to the Application element shown in Listing 1, producing the XML code shown in Listing 2.

In general, to create a more complex Flex application, you will also add child elements, which may or may not include attributes, to the Application element.

To incorporate logic in your program, you will need to learn how to write some ActionScript code and embed ActionScript code in your Flex code.

Layout versus behavior

As I mentioned earlier, you will develop your Flex application using the XML-based Flex language to establish the layout for your application.

Although it is possible to use Flex alone to provide simple behavior for your applications (simple event handling for example) , you will probably need to use ActionScript 3 to produce more complex behavior for your application. (Even the simple behavior requires some ActionScript, but it's not so obvious where the Flex ends and the ActionScript begins.)

The layout capability in Flex 3 consists of containers (that may contain other containers) with names like Canvas , HBox , VBox , etc. The containers can also contain controls with names like Button , CheckBox , ComboBox , etc.

The text editor

The upper-middle pane in the IDE has two tabs labeled Source and Design . If you select the Source tab, this upper-middle pane becomes a text editor in which you can edit XML and ActionScript code. In addition, the lower-left pane becomes an outline showing the hierarchical structure of your XML or ActionScript code.

The visual design editor

If you select the Design tab, the upper-middle pane becomes a visual design editor and the lower-left pane becomes a toolbox containing a variety of components including Controls, Layouts, Navigators, and Charts. (Note that there are differences in the component sets for Flex 3 and Flex 4.) In this mode, you can drag components from the lower-left pane into the design pane and make physical adjustments to their location, length, width, etc.

In addition, in this mode, the lower-right pane becomes a property window. You can select a component in the design pane and then set various properties such as font, color, etc., in the properties window.

XML code is automatically updated

When you drag a component into the design pane and set properties on that component, the XML code is automatically updated to reflect the addition of that component with the specified properties. Therefore, when using Flex Builder 3 (Flash Builder 4) in design mode, you can largely avoid having to write raw XML code.

Flex Builder 3 versus the free open-source SDK

This visual design capability is probably the most important feature of Flex Builder 3 that separates it from the free open-source Flex SDK. Flex Builder 3 lets you design your layout visually and it writes much of the XML code for you.

Documentation

The Adobe site provides extensive online documentation for Flex, Flash Builder, and ActionScript. You will find numerous links to documentation resources in Resources . This is where you go to learn how to use the Flex language in detail.

Documentation format

In its default form, much of the documentation is divided into three frames, two stacked vertically on the left and one on the right. If you select All Packages and Frames at the top of the rightmost frame, you will see Flex XML elements (classes) listed in the lower-left frame.

Select No Frames

If you select No Frames at the top, the two frames on the left will disappear. This is useful if you want to use the Find capability of your browser to search for a word in the right frame. You can restore the three-frame format by selecting Frames at the top of the page.

Select a class

If you select a class, such as Application , in the lower-left frame, information about that class appears in the rightmost frame.

Styles

Every component (in Flex 3) has a variety of styles that can be applied to the component either through the specification of attributes in the XML element or the use of a Style element that resembles a style sheet. The example that I will explain in the next section will illustrate the relationship among the following styles for the Application element:

• backgroundColor
• backgroundAlpha

## Discussion and sample code

The Application element is a container into which you can place other components including other containers. Future lessons will be concerned with the containment properties of the Application element. In this lesson, I will concentrate on the three styles listed above that can be applied to that element.

Run the program

Before continuing, I suggest that you run the program to familiarize yourself with the screen output.

The mxml file

An XML listing for the Flex application named AppBackground01 is shown in Listing 2.

### Listing 2: Flex application namedAppBackground01.

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

backgroundColor="#FF0000"
backgroundAlpha="1.0">
</mx:Application>

Background color, color gradient, and transparency

The output for this application is similar to that shown in Figure 2 except that in this case, the color, color gradient, and transparency for the background is being controlled through the use of the following attributes:

• backgroundColor
• backgroundAlpha

The code in Listing 2 sets the backgroundColor attribute value to pure red using the hexadecimal notation #FF0000.

For those who may not be familiar with this concept, the overall background color is controlled by a mixture of different contributions of the red, green, and blue primary colors. For example, pure red plus pure blue produces a color commonly known as magenta . Pure green plus pure blue produces cyan . Pure red plus pure green produces yellow . Pure red plus pure green plus pure blue produces white . The absence of all three colors produces black.

Three eight-bit bytes

The values for red, green, and blue respectively are specified by the values of three eight-bit bytes. The value of each byte can range from 0 to 255 decimal (00 to FF in hexadecimal) . A value of 0 (00 in hexadecimal) means that the primary color is not included in the mixture and a value of 255 (FF in hexadecimal) means that the primary color is included full strength in the mixture.

Using this scheme, it is possible to generate more than sixteen million different colors.

The order of the red, green, and blue contributions to the overall color in hexadecimal notation is RRGGBB.

The application shown in Listing 2 sets the he backgroundGradientColors to range from pure green (#00FF00) at the top of the output window to pure blue (#0000FF) at the bottom. As mentioned earlier, the application sets the backgroundColor to pure red using the hexadecimal notation #FF0000.

Alpha

The appearance of the resulting mix of colors can be controlled by changing the value of backgroundAlpha , with allowable values ranging between 0.0 and 1.0. (In other programming systems, alpha is often allowed to vary between 0 and 255 decimal, or between 00 and FF hexadecimal.)

Transparency or opacity

Once again, for those not familiar with this concept, the value of alpha specifies a transparency or opacity level. When an attempt is made to draw two pixels with different colors at the same location on the screen, the color of the last pixel drawn will be completely opaque and will dominate if it has an alpha value of 1.0. In that case, the first pixel drawn will no longer be visible.

If the last pixel drawn has an alpha value of 0, it will be totally transparent and the first pixel drawn will be totally visible.

For values in between 0.0 and 1.0, the first pixel drawn will show through to some extent and the final color of the pixel will be a mix of the colors of the two pixels.

Four runs with different alpha values

For this example, the application was modified, compiled, and run four times in succession by substituting four different values of backgroundAlpha into the code in Listing 2. The results are shown in Figure 3.

Four output images

The four images shown in Figure 3, going from left to right, top to bottom, represent alpha values of 0.0, 0.33, 0.66, and 1.0 respectively.

An alpha value of 0.0

For an alpha value of 0.0, the output color is pure red as shown by the top-left image in Figure 3. In this case, the gradient color scheme is totally transparent.

An alpha value of 1.0

For an alpha value of 1.0, the output colors range from pure green at the top to pure blue at the bottom as shown in the bottom-right image in Figure 3. In this case, the gradient color scheme is totally opaque and the red background color doesn't show through at all.

Alpha values of 0.33 and 0.66

For alpha values of 0.33 and 0.66, the output is a mix of the red background and the green/blue gradient as shown by the top-right and bottom-left images in Figure 3.

(The image in the bottom-left corner of Figure 3 corresponds to what you should see if you run the online version of this application.)

Conclusion

These results suggest that the alpha value specified by backgroundAlpha applies to the colors specified by backgroundGradientColors and does not apply to the color specified by backgroundColor . (The terminology here seems to be a little confusing to me.)

In other words, the gradient colors can be made more or less transparent by changing the value of backgroundAlpha allowing the red backgroundColor to show through the gradient colors. However, the value of alpha doesn't appear to affect the background color.

If you modify the code in Listing 2 by removing the backgroundColor attribute, and then compile and run it for different values of alpha, you will see a similar result. In that case, however, the resulting colors will be a mixture of the default gray background color shown in Figure 1 and the green/blue gradient shown in the bottom right corner of Figure 3.

## Run the program

I encourage you to run the online version of the program. Then copy the code from Listing 2. 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.

## 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

### Note:

Housekeeping material
• Module name: The Default Application Container - Flex 3
• Files:
• Flex0102\Flex0102.htm
• Flex0102\Connexions\FlexXhtml0102.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

### Give feedback:

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?

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