Macromedia Flex Tutorial: getting started with Flex

Create the first Flex Application

Author: Robert Crooks (Macromedia Training Team)
Translation: MoonFun. qhwa

Please refer to the ideal colors for custom colors.

In this tutorial, you can read a brief introduction to Flex and use MXML to create a simple classified shopping cart to learn the basic structure of the Macromedia Flex application. You will learn: Create an application, add a layout container, add a control, create a simple data model associated with the control, and process the event using ActionScript.

This is the first part of the four-step Flex getting started series written by Robert Crooks. Robert Crooks is currently working in Macromedia customer training

Flex entry (2): Create a Flex Calculator
Flex entry (3): Use a container
Introduction to Flex (4): Using Data Models

Click here to download the entire series of tutorials: Flex entry series (144KB)

If you need more detailed information, Macromedia customer training team provides a two-day online training course: using Flex to develop rich Internet applications, learn how to develop a Flex application quickly. Let's get started!

If you are a newbie to XML, remember the following basic rules:

Like all XML languages, labels and attributes are case-sensitive in MXML;
All attribute values must be enclosed in double quotation marks (") or single quotation marks (including

All labels must be closed. Tags without sub-tags can end directly with a slash, without additional end tags:

<Mx: Label text = "Hello"> </mx: Label>

Or

<Mx: Label text = "Hello"/>

If you are a newbie to ActionScript, you can find that its syntax is very similar to the syntax of the language you are familiar with, such as JavaScript or Java. Remember these basic rules:

ActionScript is case sensitive.
The statement must end with a semicolon (;).

This tutorial includes the following content:

1. Introduction to Flex
2. How to use the Application tag
3. How to Use Panel containers
4. How to use the Label Control
5. How to use the Text Control
6. How to Use the Button control
7. How to Use the ComboBox (drop-down list) Control
8. How to create an array object
9. How to bind data to a control object
10. How to process user events using ActionScript

Prerequisites:

The software and files required to complete this tutorial:

Macriomedia Flex

(You can install and run it on the platforms and servers supported by Flex.) The trial Flex version is only available on CD. Please purchase it from Macromedia sales for $8.99. for information about the trial version, visit: Flex FAQs.

Trial purchase

Dreamweaver MX 2004 or other text editors (such as NotePad) are used to edit XML and ActionScript code.

Trial purchase

Prerequisites:

Read about Flex
Will browse a Flex Application

Introduction to Flex

Macromedia Flex is a server component used to create internet applications with rich information. The built-in Flex interface can be displayed on the client system by Macromeida Flash Player. The essence of Flex is:

• An XML language (MXML) that describes the application interface)
• An ECMA standard scripting language (ActionScript) that processes user and system events and builds complex data models.
• A Class Library
• Instant service at runtime
• A compiler that generates SWF files from MXML files

MXML

MXML is an XML1.0 language used to describe Flex applications. Each MXML file should start with an XML Declaration: <? Xml version = "1.0"?>

Like other XML languages, MXML contains elements (TAGS) and attributes, which are case sensitive. The tag name must start with an uppercase/lowercase letter and contain the following ending tags:
<ComboBox> </ComboBox>

You can also end the tag with no content as follows:
<ComboBox/>

The attribute name must start with a lower-case letter and be case-insensitive. The attribute must be enclosed in quotation marks.
<ComboBox id = "myCombo"/>

All attributes except click or initialize are processed as text strings by the compiler. To bind data or force the compiler to execute an expression, enclose the variable in curly brackets:
<ComboBox dataProvider = "{myArray}"/>

Most attributes can be used as subtags:
<ComboBox dataProvider = "{myArray}"/>
It is equivalent:
<ComboBox> <dataProvider> {myArray} </dataProvider> </ComboBox>

The MXML file describing the Application must have an Application element other than the following:
<? Xml version = "1.0"?>
<Mx: Application xmlns: mx = "http://www.macromedia.com/2003/mxml">
[Other elements...]
</Mx: Application>

Pay attention to the xmlns attribute, which declares the XML namespace. Namespace allows you to use multiple XML languages in a single document to avoid obfuscation of the same element names in different languages. The ": mx" here is a prefix used in a specific namespace.

Note: The namespace defined here is a standard MXML class library. Please include it in each MXML file.

The declaration can be placed in any MXML tag; the declaration is valid for all tags nested with the tag. In this series of tutorials, mx is used as the prefix of the MXML class library.

For more information, see Flex Language Reference

ActionScript

ActionScript is an object-oriented scripting language similar to JavaScript and other ECMA specifications. If you have used JavaScript, Java, C #, and other object-oriented languages, you can find that their syntax is very similar. You can embed the ActionScript code in the MXML file or import the code from an independent external file.

Complete ActionScript reference: Action Language Reference

MXML class library

Flex includes visible components such as control and container, as well as invisible components such as remote service objects and data models. You can get detailed information in the subsequent introduction.

Runtime Service

Flex provides multiple runtime services, such as historical control and remote service connection objects. From the development perspective, these services are called to class libraries.

Compiler

The Flex compiler automatically compiles the corresponding SWF file after receiving a request to access the MXML file from a browser. The SWF file will be cached until you modify the source MXML file.

Create an application

In this simple shopping cart, we display a list of coffee brands (similar to the select in HTML ). Use the data binding function to display the description of the Selected Brand below, and add a button to the shopping cart. When the button is pressed, the brand's coffee is added to the shopping list.

Figure 1. Flex application created in the tutorial

The purpose of this tutorial is to learn and use:

Application (Application) Class
Panel container
Script Element
Array Element
Object element
Label element
Text (Text box) Element
Button Control
ComboBox (drop-down list) Control
List controls
An ActionScript Function

Create an Application Object

Any Flex program starts with an XML declaration and marks the Application. The Application tag contains the declaration of an MX class library namespace: xmlns: mx = "http://www.macromedia.com/2003/mxml ". All tags that reference this class library must be prefixed with mx.

1. Create a new file and save it as firstapp. mxml, which is located in the flex_tutorials directory.
2. Insert the XML declaration at the beginning of the file:
<? Xml version = "1.0"?>
3. After the XML declaration, add the Application tag with the namespace:
<Mx: Application xmlns: mx = "http://www.macromedia.com/2003/mxml">
</Mx: Application>

Application layout: Add a panel

Typically, you can place visible components in a Flex application in a container that provides elements that are bound to text, controls, images, and other media types. Here, you can use a container called Panel, which provides all the shells required by most applications. You can also use the title attribute of the Panel to modify the text that automatically contains the title line at the top of the Panel.

4. Add a Panel tag inside the Application tag. The title attribute is "my First Flex App"

<Mx: Panel title = "My First Flex App">
</Mx: Panel>

Add a Label element that displays the title

The Label element can be used to display a single line of text. It has some attributes. Here we use the text attribute to define the content displayed by the Label.

5. Insert a Label with text attributes in the Panel Label, as shown in the following figure: <mx: Label text = "Coffee Blends"/>

6. Save the file and preview the program.

Add an array object that defines the coffee brand

The data model of this program is a simple Array (the content is a series of objects), you can directly create with Array and Object elements in the program. Here, each array unit object has two attributes: label and data. You can write these two attributes as sub-labels of the object. These two attribute names are used for control elements such as ComboBox and List. We will introduce them later.

These control elements can use more complex data objects, but since we are creating a data model manually, we will use a simple form. The common syntax is:

<Mx: Array id = "identifier">
<Mx: Object>
<Label> literal string </label>
<Data> another literal string </data>
</Mx: Object>
</Mx: Array>

Pay attention to the ID attribute here. ID is an attribute of almost all Flex elements. It attaches a flag to the element to distinguish other elements. If you want to use this element in data binding or ActionScript, you 'd better specify an ID for it.

Invisible elements can be placed at will by you, but it is a good habit to put them in front of the program-that is, visible elements.

<Mx: Array id = "coffeeArray">
<Mx: Object>
<Label> Red Sea </label>
<Data> Smooth and fragrant </data>
</Mx: Object>
<Mx: Object>
<Label> Andes </label>
<Data> Rich and pungent </data>
</Mx: Object>
<Mx: Object>
<Label> Blue Mountain </label>
<Data> Delicate and refined </data>
</Mx: Object>
</Mx: Array>

Add a ComboBox that displays the coffee brand

Flex ComboBox is similar to the select function of HTML and is more powerful. The array to be displayed is specified by the dataProvider attribute. You can directly create an array in the dataProvider label, but the more common method is to create or import an array elsewhere, and then specify at dataProvider:

<Mx: ComboBox id = "myCombo" dataProvider = "{myArray}"/>

The braces tell the compiler that the variable is a variable or a variable used for calculation, rather than a string.

If the object contains the label and data attributes, they are automatically distinguished by the label and associated data. data can be a simple value, it can also be a complex type (such as an object ). If the object neither has the label attribute nor the data attribute, the entire object will be used as the data attribute, and the label attribute is the object attribute specified by the labelField attribute of ComboBox. For example, if the labelField value of ComboBox is "name", the label value is the name attribute of the object.

8. Add a ComboBox after the Label, and set the id to coffeeComb. Use the dataProvider attribute to bind the CombBox to the coffeeArray array created in the previous step:

<Mx: ComboBox id = "coffeeCombo" dataProvider = "{coffeeArray}"/>

Add a Text control for display instructions

The Text control is similar to the Label control. The difference is that it can display multiple rows of data. Here we use it to display the description of the selected coffee brand in ComboBox. The data attribute of the project selected in ComboBox is used here.

9. After ComboBox, add a text control with the text attribute, set the text attribute to "Description:", and add a binding to the data attribute of the project selected in ComboBox:

<Mx: Text text = "Description: {coffeeCombo. selectedItem. data}"/>

Add a coffee brand to the shopping bar

The Button control is simple. It has a label attribute to set the displayed text, and a click event to specify the processing action of the mouse click event.

Here, we add a button to add the project selected in ComboBox to the shopping bar by calling an addToCart function. We will create this function later.

10. Add a button that displays "Add to Cart". After being clicked, call the addToCart function:

<Mx: Button label = "Add to Cart" click = "addToCart ()"/>

Add a List control to the shopping cart.

The only difference between the List control and ComboBox is that it can display and select multiple projects at the same time. The List used here does not need to specify the dataProvider attribute, because it is empty before the user adds data.

11. After the button, add a List control and set the id to cart:

<Mx: List id = "cart"/>

Add a script for processing button click events

The last step of the tutorial is to add an ActionScript script to process button click events. In this simple application, we add scripts to the Script tag.

The Script tag contains the <! In [CDATA []>, the content in the mark is not parsed by the XML parser. This is a standard XML usage. Here we want to protect some characters (such as <) that may be mistakenly processed by the XML parser. In fact, this not only protects these characters, it also saves the XML Parser for parsing the ActionScript content.

The ActionScript syntax used here is very simple. The common syntax of a function is:

Function Name (parameter 1: Data Type...): return data type
{
[ActionScript statement]
}

In the addToCart function, use the addItem method of the List class to add a project. This method requires the label parameter and data parameter, which are the label attribute and data Attribute of the project selected in ComboBox.

12. Insert a Script tag with CDATA packaging after the Array Tag:

<Mx: Script>
<! [CDATA []>
</Mx: Script>

13. In CDATA, add a function named addToCart without returning any value:

Function addToCart (): Void
{
}

14. Inside the function body, use the addItem method of the List class to add the label and data attributes of the selected project in ComboBox to the List.

Cart. addItem (coffeeCombo. selectedItem. label, coffeeCombo. selectedItem. data );

15. Save the file and preview the application in the browser. (For details about how to view the MXML file, see the first page)

 

Complete firstapp. mxml code:

<? Xml version = "1.0"?>
<Mx: Application xmlns: mx = "http://www.macromedia.com/2003/mxml">
<! -- Data model -->
<Mx: Array id = "coffeeArray">
<Mx: Object>
<Label> Red Sea </label>
<Data> Smooth and fragrant </data>
</Mx: Object>
<Mx: Object>
<Label> Andes </label>
<Data> Rich and pungent </data>
</Mx: Object>
<Mx: Object>
<Label> Blue Mountain </label>
<Data> Delicate and refined </data>
</Mx: Object>
</Mx: Array>
<Mx: Script>
<! [CDATA [
Function addToCart (): Void
{
Cart. addItem (coffeeCombo. selectedItem. label, coffeeCombo. selectedItem. data );
}
]>
</Mx: Script>
<! -- View -->
<Mx: Panel title = "My First Flex App">
<Mx: Label text = "Coffee Blends"/>
<Mx: ComboBox id = "coffeeCombo" dataProvider = "{coffeeArray}"/>
<Mx: Text text = "Description: {coffeeCombo. selectedItem. data}"/>
<Mx: Button label = "Add to Cart" click = "addToCart ()"/>
<Mx: List id = "cart"/>
</Mx: Panel>
</Mx: Application>

Further study

In this simple example, we learned some core elements of Flex: Containers, controls, data models, data binding, and event processing. You can continue to read this series of tutorials:

Flex entry (2): Create a Flex Calculator
Flex entry (3): Use a container
Introduction to Flex (4): Using Data Models

You can also go to the next Tutorial: Flex getting started (1-4 ).