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.
Copyright © 2004 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced,
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.