MACROMEDIA FLEX-GETTING STARTED WITH FLEX Getting Started

Getting Started with Flex

Trademarks

ActiveEdit, ActiveTest, Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain,

Authorware, Authorware Star, Backstage, Blue Sky Software, Blue Sky, Breeze, Bright Tiger, Captivate, Clustercats, ColdFusion,

Contents Tab Composer, Contribute, Design In Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE,

EJIPT, Extreme 3D, Fireworks, Flash, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator,

Help To Source, HomeSite, Hotspot Studio, HTML Help Studio, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects,

Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia,

Macromedia Action!, Macromedia Central, Macromedia Flash, Macromedia M Logo and Design, Macromedia Spectra,

Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo and Design, MAGIC

Logo and Design, Mediamaker, Movie Critic, Open Sesame!, RoboDemo, RoboEngine JFusion, RoboHelp, RoboHelp Office,

RoboInfo, RoboInsight, RoboPDF, 1-Step RoboPDF, RoboFlash, RoboLinker, RoboScreenCapture, ReSize, Roundtrip,

Roundtrip HTML, Shockwave, Sitespring, Smart Publishing Wizard, Software Video Camera, SoundEdit, Titlemaker,

UltraDev, Web Design 101, what the web can be, WinHelp, WinHelp 2000, WinHelp BugHunter, WinHelp Find+, WinHelp

Graphics Locator, WinHelp Hyperviewer, WinHelp Inspector, and Xtra are either registered trademarks or trademarks of

Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product

names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade

names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally.

Third-Party Information

This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not

responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your

own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia

endorses or accepts any responsibility for the content on those third-party sites.

translated, or converted to any electronic or machine-readable form in whole or in part without prior written approval of

Macromedia, Inc. Part Number ZFE15M400

Acknowledgments

Project Management: Stephen M. Gilson

Writing: Matthew J. Horn, Mike Peterson

Editing: Linda Adler, Noreen Maher

Production Management: Patrice O’Neill

Media Design and Production: Adam Barnett, John Francis

First Edition: November 2004

Macromedia, Inc.

600 Townsend St.

San Francisco, CA 94103

3

CONTENTS

INTRODUCTION: About Flex Documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Using this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Accessing the Flex documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

CHAPTER 1: Introducing Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

About Flex. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Developing applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

The Flex programming model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Features of Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Where to next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

CHAPTER 2: Using MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

About MXML. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23

Basic MXML syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

How MXML relates to standards. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41

CHAPTER 3: Using ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

About ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43

Using ActionScript in Flex applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46

Creating ActionScript components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Techniques for separating ActionScript from MXML . . . . . . . . . . . . . . . . . . . . . . 54

CHAPTER 4: Architecting Flex Applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

About the Flex coding process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58

Working with a multitier application model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 62

Improving application start-up time and performance. . . . . . . . . . . . . . . . . . . . . . 67

Architecting an application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70

Summary of Flex application features . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

4 Contents

5

INTRODUCTION

About Flex Documentation

Getting Started with Flex provides an introduction to Macromedia Flex. This book is intended for

application developers who are new to Flex and require an overview of Flex features and

capabilities.

Contents

Using this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Accessing the Flex documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

Using this manual

This manual can help anyone get started with developing Flex applications. After reading this

manual, you should read Developing Flex Applications for detailed information about Flex features

and information about creating Flex applications.

Getting Started with Flex contains the following chapters:

Chapter Description

Chapter 1, “Introducing Flex” Introduces the Flex presentation server, a development

and runtime environment that lets you create rich

interfaces for your web applications.

Chapter 2, “Using MXML” Describes MXML, the XML language for writing

applications, and how developers use it to create

applications.

Chapter 3, “Using ActionScript” Introduces ActionScript and explains how to use

ActionScript in an MXML application. Developers can

use ActionScript to extend the functionality of their Flex

applications.

Chapter 4, “Architecting Flex Applications” Describes the Flex development process. It describes

coding practices, multitier applications, and application

architecture.

6 Introduction: About Flex Documentation

Accessing the Flex documentation

The Flex documentation is designed to provide support for the complete spectrum of

participants.

Documentation set

The Flex documentation set includes the following manuals:

Viewing online documentation

All Flex documentation is available online in HTML and Adobe Acrobat Portable Document

Format (PDF) files. Go to the documentation home page for Flex on the Macromedia website:

www.macromedia.com/go/flex15_documentation.

Book Description

Developing Flex Applications Describes how to develop your dynamic web

applications.

Getting Started with Flex Contains an overview of Flex features and application

development procedures.

Flex ActionScript and MXML API Reference Provides descriptions, syntax, usage, and code

examples for the Flex API.

7

CHAPTER 1

Introducing Flex

This chapter introduces you to the Macromedia Flex presentation server, a development and

runtime environment that lets you create rich interfaces for your web applications. Macromedia

Flex defines a standards-based programming methodology for building the presentation tier of

rich Internet applications. Rich Internet applications combine the responsiveness and richness of

desktop software with the broad reach of web applications to deliver a more effective user

experience.

This chapter describes the characteristics of a typical Flex application, provides an overview of the

Flex feature set, and defines the development process that you use to create Flex applications.

Contents

About Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7

Developing applications. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12

The Flex programming model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

Features of Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19

Where to next . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

About Flex

Flex defines a development and runtime environment that lets developers familiar with server-

side technologies build rich front ends for applications that take advantage of Macromedia Flash

Player. While executing in Flash Player, your application can interact with server-side

functionality, such as databases, web services, Java objects, and other server-side services.

Flex brings the power of Flash to developers who are familiar with traditional programming

languages and server-side development environments. In Flex, you use a standards-based

programming model to develop an application, describe the user interface, configure user-

interface controls, and define data bindings.

8 Chapter 1: Introducing Flex

Using Flex in an n-tier application model

By definition, enterprise applications are multitiered, where each tier brings specific benefits to

the application design. A tiered architecture provides natural access points for integration with

existing and future systems.

Each tier serves a specific purpose, and lets you divide the functionality of a business application

into discrete components that you can implement independently from each other. For example,

the following figure shows the tiers of a five-tier application model:

An n-tier architecture offers the following advantages:

• The tiers, or even components of the tiers, can be distributed across multiple hardware systems

to improve system scalability and performance.

• The client and presentation tiers shield clients from the complexities of accessing the enterprise

data store.

• You can distribute application development across your development group. For example, JSP

developers are typically concerned with information presentation rather than with

implementing business rules. Conversely, EJB developers are concerned with data access and

manipulation, but not with presentation.

In traditional n-tier applications, the presentation tier logic executes on the server, so every client

interaction requires a data transfer between the client and server.

Running on client

Running on server

Client Tier

Application clients, Flash, applets, and other GUIs

Presentation Tier

ASP, JSP, Servlets, and other UI elements

Business Tier

Connects to business objects

Integration Tier

Connects to data and legacy systems

Resource Tier

Databases, external systems, and legacy resources

About Flex 9

Flex adds new functionality and options to the n-tier model. The following figure shows the same

five tiers for a Flex application:

In Flex, Flash Player provides the platform for interface development so that both client and

presentation tier logic executes on the client computer. Flex applications that execute in Flash

Player process user interactions; perform data validation; issue HTTP, SOAP, AMF requests; and

perform other operations previously performed on the server. Because Flash Player runs

consistently across all major operating systems and browsers, you do not have to program your

applications for a specific browser or platform.

Note: You can still develop presentation-tier logic for the server as part of your application, and

connect to that logic from the client.

The Flex server executes on a J2EE platform or servlet container, and provides the integration

point for Flex applications to server-side functionality. The Flex server also includes the Flex

compiler, caching mechanism, and web service proxy.

You do not need to modify the business and integration tiers to integrate with Flex. This means

that you code the business and back-end functionality in the same way you did for your existing

applications. Flex lets you connect to your back-end systems and application logic using web

services, HTTP, EJBs, or other methods.

Benefits of using Flex

Historically, most Internet application interfaces are built in HTML. Because HTML

applications are page-based, they demand complete page refreshes when information is submitted

to a server, as well as when a client navigates from one page to another. Each page load uses

network bandwidth and server resources. In addition, application logic typically executes on the

server rather than on the client, which requires a server request and response to process any data.

Client and presentation tiers

running on the client

Business and integration tiers

Resource tier

Flash Player running

Flex applications

Flex server

Java BeansEJBs

Web services

J2EE server/servlet container

HTTP/SOAP/AMF

10 Chapter 1: Introducing Flex

Applications running in Flash Player behave like desktop applications, instead of a series of linked

pages. Flash Player manages the client interface as a single, uninterrupted flow and does not

require a page load from the server when the client moves from one section of the application

to another.

Flex offers the following additional benefits to your web applications:

Standards-based architecture Macromedia designed Flex, ActionScript, and MXML, the

Flex scripting language, to existing standards. MXML is XML-compliant, implements styles

based on the Cascading Style Sheets, level 1(CSS1) specification, and implements an event model

based on a subset of the W3C DOM Level 3 Events specification. ActionScript is an

ECMAScript-based language that provides support for object-oriented development. The Flex

server executes on standard J2EE platforms or servlet containers.

Reduction in server load and network bandwidth Some or all of the presentation tier of a Flex

application runs in Flash Player, which means that no application server processing resources are

spent on data formatting. By off loading presentation logic to the client, and eliminating the need

for frequent page refreshes, Flex applications minimize network traffic and server load.

Common deployment environment Flex applications deploy on a J2EE server and execute on

Flash Player, which is platform-independent, so customers do not need to install custom client

software. Also, Flash Player runs consistently in all browsers and platforms, so you do not have to

worry about inconsistent behavior in different client environments.

Developing applications for Macromedia Flash Player

The target of a Flex application is Flash Player. Flex developers do not need any Flash authoring

background. Rather, a typical Flex developer will have more experience developing applications

using a server-based model. Flex lets you use a familiar programming model to develop the client

tier and presentation tier.

Flex supports two versions of Flash Player. Flex application users install the standard Flash Player

to run Flex applications. Flex also supports the debug version of Flash Player, called Flash Debug

Player. Flex application developers use Flash Debug Player during the development process. Flash

Debug Player supports important features for developers, including the following:

Error reporting Lets you direct runtime error and warning messages to a log file. Flash Debug

Player can also capture the output of the

trace() function and write it to the log file. For more

information, see Chapter 36, “Debugging Flex Applications,” in Developing Flex Applications.

ActionScript profiling Helps to identify performance bottlenecks in your applications. The

Profiler records the time that Flash Player takes to perform tasks in ActionScript. For more

information, see Chapter 37, “Profiling ActionScript,” in Developing Flex Applications.

Debugging support Lets you debug ActionScript files used by your Flex applications. For more

information, see Chapter 36, “Debugging Flex Applications,” in Developing Flex Applications.

About Flex 11

Flex application characteristics

One of the most common applications using Flex lets users perform product selection and

configuration. The user works through a process to configure the features of a product, views or

inspects the configuration, and then proceed through the steps required to complete a purchase.

Many types of web applications are appropriate for development in Flex. Some of the

requirements of these applications, and how Flex supports these requirements, include

the following:

Cross-browser compatibility Web applications should run the same on all browsers and

platforms. By standardizing on Flash Player as the client environment, you are guaranteed a

consistent user experience on all platforms and browsers. For more information, see “Developing

applications for Macromedia Flash Player” on page 10.

Client data collecting Collecting user input is one of the most common uses for web

applications. Flex supports forms, and all common form elements, to let you create rich and

dynamic user experiences. Flex forms include hooks to the Flex data modeling and data validation

mechanism, and the ability to identify required input fields. For more information, see

Chapter 6, “Using Layout Containers,” in Developing Flex Applications.

Client-side processing of user input, including filtering and data validation Flex data

management, which includes data models, data validators, data binding, and data services, lets

you separate data representation from the way it is viewed by a user. Typically, this design pattern

is called Model-View-Controller, or MVC. Flex also provides a powerful way to validate data and

pass data between user interface controls and external data sources with little or no server

interaction. For more information, see Chapter 31, “Managing Data in Flex,” in Developing Flex

Applications.

Multistep processes Many applications present the user with a process that includes a

sequence of steps or decisions that require user input. For example, completing a registration form

or checkout form often requires multiple steps to complete.

Ideally, you want your users to be able to navigate through multiple steps on a single page without

losing the context of where they are in the process, and without losing any of the previous

information that they have already entered. Flex supports the development of these applications

by capturing state information, supporting browser Back and Forward buttons using the History

Manager, and providing a set of user-interface controls designed explicitly for handling

procedural data. For more information, see Chapter 7, “Using Navigator Containers” and

Chapter 26, “Using the History Manager,” in Developing Flex Applications.

Information management using master-detail lists A common design pattern for web

applications is to display a list of items, and to let the user explore an item in a detailed way, while

leaving the other items unopened. This pattern is referred to as a master-detail list. A master page

typically lists database records and corresponding links for each record. When the user clicks a

link, a detail page opens that displays more information about the record. Flex supports master/

detail lists through several different controls, including the DataGrid control. For more

information, see Chapter 2, “Using Controls,” in Developing Flex Applications.

12 Chapter 1: Introducing Flex

Direct user feedback Complex tasks must provide feedback to users when the user makes

input errors or enters invalid information. Support for a feedback mechanism should also require

a minimum of server-side interactions so as not to use network bandwidth. Because your

applications execute in Flash Player on the client, the Flex feedback mechanism requires little or

no server-side logic.

Developing applications

Flex supports a component-based development model. You can use the prebuilt components

included with Flex, you can extend the Flex component library by creating new components, or

you can combine prebuilt components to create composite components.

Application model

When you build an application using Flex, you describe its user interface using containers and

controls. A container is a rectangular region of the screen that contains controls and other

containers. Examples of containers are a Form container used for data entry, a Box, and a Grid.

A control is a form element, such as a Button or Text Input field.

For example, the following figure shows two different Box containers, each containing three

Button controls and a ComboBox control:

This figure shows the controls within a horizontal Box (HBox) container. An HBox container

arranges its controls horizontally across the Flash Player drawing surface. The figure also shows

the controls in a vertical Box (VBox) container. A VBox container arranges its controls vertically.

Containers and controls define the application’s user interface. In an MVC design pattern, those

pieces of the application model represent the view. The model is represented by the data model.

Flex data models let you separate your application’s data and business logic from the user

interface.

Box container with horizontal layout

Box container with vertical layout

Developing applications 13

You define your data models using MXML or ActionScript as part of a Flex application. The

following figure shows a form created in Flex that uses a data model:

Data binding is the process of tying the data in one object to another object. The data model

supports bidirectional data binding for writing data from Flex controls to the data model, or for

reading data into controls from the model. You can also bind server data to a data model or

directly to Flex controls. For example, you can bind the results returned from a web service to the

data model, and then have that data propagate to your form controls.

The data model supports automatic data validation. This means that you can use the Flex

ZipCode validator to make sure that the value in a model field is a valid ZIP code. If the data is

invalid, you can display a message to the user so that the user can correct the error.

How Flex fits the MVC models

The goal of the Model-View-Controller (MVC) architecture is that by creating components with

a well-defined and limited scope in your application, you increase the reusability of the

components and improve the maintainability of the overall system. Using the MVC architecture,

you can partition your system into three categories of components:

Model components Encapsulates data and behaviors related to the data.

View components Defines your application’s user interface.

Controller components Handles the data interconnectivity in your application.

For example, with the MVC design, you could implement a data-entry form that has three

distinct pieces:

• The model consists of XML data files or the remote data service calls to hold the form data.

• The view is the presentation of any data and display of all user interface elements.

• The controller holds the user interface logic.

Server

HTTP/SOAP/AMF

Data model

14 Chapter 1: Introducing Flex

Although you can consider a Flex application as part of the View in a distributed MVC

architecture, you can use Flex to implement the entire MVC architecture on the client. A Flex

application has its own view components that define the user interface, model components to

represent data, and controller components responsible for the communication with back-end

systems. This client-side separation of task is not available in HTML.

Typical application development steps

You typically develop a Flex application using the following steps:

1.

Within a text editor or integrated development environment (IDE), such as Macromedia Flex

Builder, Eclipse, or IntelliJ, insert the MXML root tags into an MXML file.

2.

Add one or more containers.

3.

Add controls to a container, such as input fields, buttons, and output fields.

4.

Define a data model.

5.

Add a web service, HTTP service, or request to a remote Java object.

6.

Add validation to input data.

7.

Add a script to extend a component.

Running Flex applications

Flex application files use the .mxml filename extension. You store these files under the web root

directory of your J2EE application.

A request to an MXML file has the following form:

http://hostname/path/filename.mxml

Upon receiving an HTTP request for an MXML file, Flex performs the following steps:

1.

Compiles the MXML file to produce a SWF file.

2.

Caches the compiled SWF file on the server.

3.

Returns the SWF file to the client.

The SWF file executes in Flash Player. While it is executing, the Flex application makes calls to

server-side services. For example, the application might issue a SOAP request to a web service, use

AMF to connect to a Java object, or make a request to an HTTP service.

Upon subsequent requests to the MXML file, the Flex server determines whether the MXML file

has been modified since the previous request. If not, it returns the same SWF file from the cache.

If the MXML file has been modified, the Flex server recompiles the file and returns an updated

SWF file to the client.

The Flex programming model 15

The Flex programming model

You deploy the Flex presentation server on a J2EE application server or servlet container. The Flex

presentation server includes the Flex application framework and the Flex runtime services, as the

following figure shows:

The Flex application framework consists of the MXML scripting language, the ActionScript

programming language, and the Flex class library. You write Flex applications using a

combination of MXML and ActionScript. Use MXML to declaratively define the application

user interface elements and use ActionScript to define client logic and procedural control.

The Flex class library contains Flex components, managers, and behaviors. With the Flex

component-based development model, developers can incorporate prebuilt components, create

new components, or combine prebuilt components into composite components.

The Flex runtime services include support for server-side data access, compilation and caching,

enterprise resource integration, and deployment runtime needs. All Flex services minimize

redundancy and fully exploit existing enterprise resources.

Relationship of the Flex class hierarchy to MXML and ActionScript

Macromedia implemented Flex as an ActionScript class library. That class library contains

components (containers and controls), manager classes, data-service classes, and classes for all

other features. You develop applications using the MXML and ActionScript languages with the

class library.

MXML tags correspond to ActionScript classes or properties of classes. Flex parses MXML tags

and compiles a SWF file that contains the corresponding ActionScript objects. For example, Flex

provides the ActionScript Button class that defines the Flex Button control. In MXML, you

create a Button control using the following MXML statement:

<mx:Button label="Submit" />

Flex Application Framework

Flex Presentation Server

Flex Runtime Services

ActionScript

MXML

Flex Class Library

J2EE

16 Chapter 1: Introducing Flex

When you declare a control using an MXML tag, you create an instance object of that class. This

MXML statement creates a Button object, and initializes the

label property of the Button object

to the string Submit.

An MXML tag that corresponds to an ActionScript class uses the same naming conventions as the

ActionScript class. Class names begin with an uppercase letter, and uppercase letters separate the

words in class names. Every MXML tag attribute corresponds to a property of the ActionScript

object, a style applied to the object, or an event handler for the object. For a complete description

of the Flex class library and MXML tag syntax, see the Flex ActionScript and MXML API

Reference.

Using MXML and ActionScript

You develop Flex applications using a combination of MXML and ActionScript. MXML is a

declarative language that you use to define the basic layout and contents of your application.

ActionScript is a procedural language that you use to perform runtime control and data

processing in your application.

Defining the user interface in MXML

Your application can consist of one or more MXML files. Using multiple MXML files promotes

code reuse, simplifies the process of building a complex application, and makes it easier for more

than one developer to contribute to a project.

The following example is an MXML application that uses a Button control to trigger a copy of

the text from a TextInput control to a TextArea control:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >

<mx:Panel title="My Application">

<mx:TextInput id="myInput" width="150" text="" />

<mx:Button id="myButton" label="Copy Text" />

<mx:TextArea id="myText" text="" width="150" />

</mx:Panel>

</mx:Application>

The first line of this application specifies the XML declaration and must start in line 1, column 1

of the MXML file.

The Flex programming model 17

The second line begins with the <mx:Application> tag, the root element of a Flex application.

This tag includes the Flex namespace declaration. The content between the beginning and end

<mx:Application> tags defines the Flex application.

As it is written, this example lays out the user interface, but does not yet contain the application

logic to copy the input text from the TextInput control to the TextArea control. The next section

adds that logic.

Adding ActionScript to a Flex Application

ActionScript follows the ECMA-262 Standard Edition 4 (the specification written by the

European Computer Manufacturers Association) unless otherwise noted. For more information

on ActionScript, see Chapter 3, “Using ActionScript,” on page 43.

You can use ActionScript for the following purposes:

Handling events The Flex user interface is event-driven. For example, when a user selects a

Button control, the Button generates an event. You handle events by defining functions in

ActionScript. Your event handler could open a window, play a SWF file, or perform whatever

action is necessary for your application.

Handling errors You handle runtime errors in ActionScript. You can detect data validation

errors and signal the error to the user, resubmit a request to the server, or perform some other

actions based on your application.

Binding data objects to a Flex control within an MXML statement You can use data binding

to populate a data model from a Flex control, or populate a control from a data model.

Defining custom components You can derive custom components from the Flex component

class hierarchy to create components specific to your application requirements.

The following example is a modification to the example in the previous section that adds an event

handler for the

click event of the Button control. An event handler is ActionScript code that is

executed in response to a user action. The event handler in this example copies the text from the

TextInput control to the TextArea control when the user selects the Button control:

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >

<mx:Panel title="My Application">

<mx:TextInput id="myInput" width="150" text="" />

<mx:Button id="myButton" label="Copy Text"

click="myText.text=myInput.text;" />

<mx:TextArea id="myText" text="" width="150" />

18 Chapter 1: Introducing Flex

</mx:Panel>

</mx:Application>

The previous example inserts the ActionScript code directly into the MXML code. Although this

technique works well for one or two lines of ActionScript code, for more complex logic you

typically define your ActionScript in an

<mx:Script> block, as the following example shows:

<?xml version="1.0"?>

<mx:Script>

<![CDATA[

function duplicate(){

myText.text=myInput.text;

}

]]>

</mx:Script>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" >

<mx:Panel title="My Application">

<mx:TextInput id="myInput" width="150" text="" />

<mx:Button id="myButton" label="Copy Text"

click="duplicate();" />

<mx:TextArea id="myText" text="" width="150" />

</mx:Panel>

</mx:Application>

In this example, you implement the event handler as an ActionScript function. Flex calls this

function in response to the user selecting the Button control. This techniques lets you separate

your MXML code from your ActionScript code. You can also choose to divide your application

into multiple files to increase its modularity. For more information, see Chapter 3, “Using

ActionScript,” on page 43.

Features of Flex 19

Features of Flex

The following table lists details about the Flex feature set. Subsequent chapters in this book

describes these features in detail.

Feature Description Details

Containers Defines a region of the

Flash Player drawing

surface and controls the

layout for everything in

the container, including

other containers and

controls.

Accordion

Box

Canvas

ControlBar

DividedBox

Form

Grid

Link Bar

Panel

TabBar

TabNavigator

Tile

TitleWindow

ViewStack

Controls Form-based controls

that handle user

interactions and display

data that can be directly

manipulated by the user.

Alert

Button

CheckBox

ComboBox

DataGrid

DateChooser

DateField

HorizontalList

HRule

HSlider

HScrollBar

Image

Label

Link

List

Loader

MediaController

MediaDisplay

MediaPlayback

Menu

MenuBar

NumericStepper

ProgressBar

RadioButton

ScrollBars

SimpleButton

Slider

Spacer

Text

TextArea

TextInput

TileList

ToolTip

Tree

VRule

VSlider

VScrollBar

Data modeling Defines the

representation of

application data on the

client.

• Data model for storing application data.

• Data binding for unidirectional or bidirectional binding.

to UI controls, and predefined and custom data

formatters.

• Data validation to validate data model.

Data

communication

services

Connects to server data

using a set of

communications

services.

• Web services for SOAP messages transmitted over

HTTP. Supports both RPC and document operations,

and concurrent web service requests.

• HTTP service for accessing XML over HTTP and

HTTPS.

• Remote Java objects let you call methods on local or

remote objects (Java objects, JavaBeans, EJBs,

JNDI objects) using SOAP or AMF protocols.

20 Chapter 1: Introducing Flex

Where to next

This book contains an introduction to Flex and an overview of developing Flex applications. The

Developing Flex Applications book contains detailed information about these topics. For more

information, see the following:

• For information on MXML and ActionScript, see Chapter 2, “Using MXML,” on page 23,

and Chapter 3, “Using ActionScript,” on page 43.

• For information on using Flex components, see Chapter 1, “Using Flex Components,” in

Developing Flex Applications.

• For information on developing custom components, see Chapter 15, “Building an Application

with Multiple MXML Files”, and Chapter 18, “Creating ActionScript Components,” in

Developing Flex Applications.

Behaviors Enhances the user

experience through

animation, motion,

sound, and effects.

A behavior is a trigger, typically a user action, paired with

an effect:

• Effects include: Dissolve, Fade, Move, Pause, Resize,

WipeDown, WipeLeft, WipeRight, WipeUp.

• Triggers include: focusIn, focusOut, hide, move, resize,

mouseDown, mouseOver, mouseOut, mouseUp,

show.

Event model Occurrences that require

a response from a Flex

application. User events

include a mouse click or

a key press. System

events include

application initialization.

dragBegin

dragComplete

dragDrop

dragEnter

dragExit

focusIn

focusOut

initialize

keyDown

keyUpresize

mouseDown

mouseUp

move

show

and more

Style sheets Standard mechanism for

declaring styles.

Used for controlling color, font, sizing, and other

attributes of Flex components.

Managers Provides support for

high-level application

tasks.

• Drag and Drop Manager lets you move data from one

place in an application to another.

• Cursor Manager lets you control the cursor image

within your Flex application.

• History Manager lets users navigate through a Flex

application using the web browser’s Back and

Forward navigation commands.

• ToolTipManager displays hints when the user moves

the mouse over a Flex control.

Development

tools

Used to develop Flex

applications.

Debugger

ActionScript Profiler

Flex Builder

Deployment

tools

Used to deploy your Flex

applications.

Player detection

Content caching

Deferred instantiation

Feature Description Details

Page is loading ...

MACROMEDIA FLEX-GETTING STARTED WITH FLEX Getting Started

This manual is also suitable for

MACROMEDIA FLEX-GETTING STARTED WITH FLEX Getting Started

Related papers

Other documents