MACROMEDIA FLEX-GETTING STARTED WITH FLEX User manual

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

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

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.

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.

This manual suits for next models

Table of contents

Other MACROMEDIA Software manuals

MACROMEDIA

MACROMEDIA FIREWORKS 2-USING FIREWORKS Mounting instructions

MACROMEDIA

MACROMEDIA COLDFUSION MX 61 - INSTALLING COLDFUSION MX FOR IBM WEBSPHERE APPLICATION... User manual

MACROMEDIA

MACROMEDIA DIRECTOR MX 2004-USING DIRECTOR Mounting instructions

MACROMEDIA

MACROMEDIA FLASH 8-DEVELOPING FLASH LITE 2.X User manual

MACROMEDIA

MACROMEDIA DIRECTOR MX-LINGO DICTIONARY User manual

MACROMEDIA

MACROMEDIA COLDFUSION STUDIO 5-USING COLDFUSION 5... Mounting instructions

MACROMEDIA

MACROMEDIA BREEZE-FOR MEETING PRESENTERS User manual

MACROMEDIA

MACROMEDIA DIRECTOR MX 2004-USING DIRECTOR Mounting instructions

MACROMEDIA

MACROMEDIA FLASH MX 2004-LEARNING FLASH User manual

MACROMEDIA

MACROMEDIA HOMESITE Installation and operating instructions

MACROMEDIA

MACROMEDIA DIRECTOR MX 2004-DIRECTOR SCRIPTING Service manual

MACROMEDIA

MACROMEDIA BREEZE-SECURITY User manual

MACROMEDIA

MACROMEDIA COLDFUSION 4.5-CFML LANGUAGE Service manual

MACROMEDIA

MACROMEDIA DREAMWEAVER 8-DREAMWEAVER API Service manual

MACROMEDIA

MACROMEDIA FLASH 8-FLASH Service manual

MACROMEDIA

MACROMEDIA FIREWORKS 8-EXTENDING FIREWORKS User manual

MACROMEDIA

MACROMEDIA DIRECTOR MX 2004-GETTING STARTED WITH... User manual

MACROMEDIA

MACROMEDIA DIRECTOR MX 2004-GETTING STARTED WITH... User manual

MACROMEDIA

MACROMEDIA DIRECTOR MX 2004-USING DIRECTOR Mounting instructions

MACROMEDIA

MACROMEDIA FLASH MX 2004-ACTIONSCRIPT LANGUAGE Service manual

MACROMEDIA

MACROMEDIA FLASH MX PROFESSIONAL 2004 - FLASH LITE 1.1... Instruction Manual

MACROMEDIA

MACROMEDIA CONTRIBUTE 3 - DEPLOYING AND PUBLISHING... User manual

MACROMEDIA

MACROMEDIA COLFUSION MX 7-CFML Service manual

MACROMEDIA

MACROMEDIA BREEZE Quick reference guide

Popular Software manuals by other brands

COMPRO

COMPRO COMPROFM manual

Muratec

Muratec OFFICEBRIDGE ONLINE user guide

Oracle

Oracle Contact Center Anywhere 8.1 installation guide

Adobe

Adobe 65007312 - Photoshop Lightroom Programmer's guide

Avaya

Avaya NULL One-X for RIM Blackberry user guide

HP ProLiant BL420c user guide

PS Audio

PS Audio PowerPlay Programming manual

Brady

Brady LOCKOUT PRO 3.0 Administrator's guide

Avaya

Avaya Interaction Center user guide

Texas Instruments

Texas Instruments TI-83 Plus Silver Edition Guide book

Novell

Novell GROUPWISE 8 - INTERNET AGENT manual

Oracle

Oracle Application 9i Configuration guide

Acer

Acer RDM user guide

Canon

Canon Vixia HF21 instruction manual

Canon

Canon ZR950 instruction manual

Samsung

Samsung Auto Backup user manual

Polycom

Polycom Vortex EF2201 Application note

Brocade Communications Systems

Brocade Communications Systems Brocade 8/12c user manual