MACROMEDIA FLEX BUILDER-USING FLEX BUILDER Instructions de montage

Using Flex Builder

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, FlashCast, 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 written approval from

Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which

this manual was provided may print out one copy of this manual from an electronic version of this manual provided with

the software for the sole purpose of learning to use such software by such owner or authorized user; provided, that no part

of this manual may be printed out, reproduced, distributed, resold or transmitted for any other purposes, including

without limitation, commercial purposes, such as selling copies of this documentation or for providing paid for support

services

Acknowledgments

Senior Management: Sheila McGinn

Project Management: Charles Nadeau

Writing: Charles Nadeau

Editing: Lisa Stanziano, Mary Ferguson, Rosana Francescato, Linda Adler

Production Management: Patrice O’Neill

Media Design and Production: John Francis, Adam Barnett, Aaron Begley

Special thanks to Heidi Bauer-Williams, Gabe Chua, Larry McLister, Paul Gubbay, Brad Becker, David Lenoe, Lucian Beebe,

Lori Hylan-Cho, Mark Shepherd, Tanya Dimalsky, Matthew Hoffberg, Jon Varese, Dave George, Brandon Purcell, Stephen

Gilson and the Flex IMD team, the beta testers, and the entire Flex Builder engineering and QA teams.

Second Edition: December 2004

Macromedia, Inc.

600 Townsend St.

San Francisco, CA 94103

CONTENTS

CHAPTER 1: Getting Started with Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Exploring the authoring environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Starting a new application in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

Defining a site for the Flex Sample Apps application . . . . . . . . . . . . . . . . . . . . . . . 12

Getting help in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17

What you need to build Flex applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Typographical conventions of this guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

CHAPTER 2: Flex Builder Tutorials. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21

Tutorial: Setting up a development environment. . . . . . . . . . . . . . . . . . . . . . . . . . 21

Tutorial: Creating a layout with Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

Tutorial: Building custom components with Flex Builder . . . . . . . . . . . . . . . . . . . 34

Tutorial: Binding components to data with Flex Builder . . . . . . . . . . . . . . . . . . . . 58

Next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74

CHAPTER 3: Creating, Coding, and Debugging Flex Files . . . . . . . . . . . . . . . . . . 75

Creating MXML or ActionScript files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75

Working with the code in Flex files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76

Testing and debugging Flex files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

CHAPTER 4: Building a Flex User Interface Visually . . . . . . . . . . . . . . . . . . . . . . 95

Customizing the Document window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96

Laying out your user interface with MXML containers . . . . . . . . . . . . . . . . . . . . . 97

Adding Flex components to the user interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98

Repositioning Flex components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99

Resizing Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100

Cutting, copying, and pasting Flex components . . . . . . . . . . . . . . . . . . . . . . . . . 100

Editing Flex component properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101

Applying CSS styles to Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Applying effects to Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109

Assigning event handlers to components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

4 Contents

CHAPTER 5: Working with Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117

Inserting controls and containers in an MXML file . . . . . . . . . . . . . . . . . . . . . . . 117

Creating MXML component files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121

Synchronizing with custom components on the server . . . . . . . . . . . . . . . . . . . . 125

CHAPTER 6: Working with Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Binding a control or container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127

Editing a binding visually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Working with Flex data models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129

Working with Flex data services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136

APPENDIX A: Basic Flex Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

About the Flex application model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145

Typical application development steps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

About Flex files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146

About Flex containers, components, and controls . . . . . . . . . . . . . . . . . . . . . . . . 148

About Flex data bindings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150

INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155

CHAPTER 1

Getting Started with Flex Builder

This chapter provides an overview of Macromedia Flex Builder and steps to get started developing

Flex applications.

Flex Builder is an integrated development environment (IDE) for Flex developers. Because it’s

tightly integrated with the Macromedia Flex server, the Flex application model, and the Flex

programming languages, Flex Builder can improve the productivity of all members of your

development team.

This guide focuses on Flex Builder. If you’re new to Flex, you may want to review Appendix A,

“Basic Flex Concepts,” on page 145. For in-depth information about Flex (as opposed to Flex

Builder), see Developing Flex Applications Help and the Flex ActionScript and MXML API

Reference Help.

The following topics are covered in this chapter:

•“Exploring the authoring environment” on page 5

•“Starting a new application in Flex Builder” on page 9

•“Defining a site for the Flex Sample Apps application” on page 12

•“Getting help in Flex Builder” on page 17

•“What you need to build Flex applications” on page 18

•“Typographical conventions of this guide” on page 20

Exploring the authoring environment

The Flex Builder IDE lets you write, edit, debug, and preview MXML and ActionScript files, and

includes the following features:

The Start page provides links to quickly define a site, create and open files, and access useful

information about Flex Builder. For example, you can take a quick tour, explore Flex samples,

take tutorials, and learn about debugging in Flex Builder.

6 Chapter 1: Getting Started with Flex Builder

Design view (View > Design) lets you lay out and edit an MXML user interface visually. Design

view has two modes: Expanded and Standard. In Expanded mode, you can easily insert, edit,

position, or resize MXML components because Flex Builder adds temporary borders and padding

around objects. In Standard mode, Flex Builder removes the borders and padding to give you a

more accurate picture of how the MXML file will look in Macromedia Flash Player.

Code view (View > Code) lets you work with code. MXML and ActionScript syntax is color-

coded and code hints assist you as you type. Design view tools such as the Insert bar, Tag

inspector, and Data panel are also fully functional in Code view.

The ActionScript debugging panels help you debug your code after setting breakpoints and

switching to debug mode. The debugging panels include the Variables panel, the Watch panel,

the Output panel, and the Call Stack panel. For more information, see “Debugging ActionScript”

on page 87.

The Network Monitor panel helps you monitor network traffic and data going back and forth

between the client and the Flex server. For more information, see “Debugging applications by

monitoring interactions with the server” on page 91.

The Insert bar lets you rapidly insert Flex containers and components in Design view by clicking

or dragging. The Insert bar also lets you rapidly insert their tags in Code view.

Note: The Favorites tab found in Macromedia Dreamweaver is not supported in Flex Builder.

Exploring the authoring environment 7

The Tag inspector lets you set the properties of containers and components in the file. You can

also use it to apply effects, specify event handlers, modify CSS styles, and create data bindings.

The Tag inspector replaces the traditional Property inspector in Dreamweaver. While you can still

use the Property inspector for editing HTML and other document types in Flex Builder, it is

disabled when you work on MXML or ActionScript files.

The Bindings panel in the Tag inspector lets you visually bind components, Flex data models,

and Flex data services to other components, data models, and data services. After creating the

binding, data can pass between the objects at runtime.

8 Chapter 1: Getting Started with Flex Builder

The Data panel lets you inspect the data services (such as web services) and data models in the

current MXML file, as well as insert or delete services in the file.

You can work in Design view, Code view, or both.

To switch between Design and Code views:

Open any MXML file in Flex Builder by double-clicking the file in the Files panel

(Window > Files).

If you’re in Code view and you want to work in Design view, do one of the following:

■Click the Design button on the Document toolbar.

■Select View > Design.

■Press Control+’ (the slanted quotation mark that usually shares the tilde (~) key).

Note: You can’t work on ActionScript files in Design view. Because ActionScript files don’t render

in Flash Player, they would appear blank in Design view. As a result, Flex Builder always displays

ActionScript files in Code view.

If you’re in Design view and you want to work in Code view, do one of the following:

■Click the Code button on the Document toolbar.

■Select View > Code.

■Press Control+’ (the slanted quotation mark that usually shares the tilde (~) key).

To split the view to see both Design and Code views, do one of the following:

■Click the Split button on the Document toolbar.

■Select View > Code and Design.

To place Code view on a separate monitor, open the Code inspector (Window > Code Inspector

or F10) and position it on the second monitor.

For more information on the coding environment, see “Working with the code in Flex files”

on page 76. For more information on the visual environment, see Chapter 4, “Building a Flex

User Interface Visually,” on page 95.

Starting a new application in Flex Builder 9

Starting a new application in Flex Builder

The first step in creating any new Flex application in Flex Builder is to define a Flex Builder site.

A Flex Builder site is analogous to a project in other development environments: it lets you

manage files and transfer them to the computer running the Flex server. A Flex Builder site also

lets you visually design, preview, and debug MXML and ActionScript files without leaving Flex

Builder.

You need access to a Flex server before you can define a site. The server allows you to run and

debug MXML and ActionScript files without leaving Flex Builder (see “What you need to build

Flex applications” on page 18). You can install the Flex server or consult your system

administrator. For information on installing the server, see Installing Flex on the Macromedia

website at www.macromedia.com/go/flex_install/. For information on installing the server on the

same computer as Flex Builder, see “Install the Flex server on your computer” on page 22.

This section covers the following topics:

•“Defining a Flex Builder site” on page 9

•“Identifying a Flex application root folder” on page 11

Defining a Flex Builder site

You can define a Flex Builder site quickly or with more advanced options, as follows.

To quickly define a Flex Builder site:

In Flex Builder, select Site > Manage Sites, click the New button on the Manage Sites dialog

box, and select Flex Site from the context menu.

Tip: You can also click Flex Site on the Start page.

The Flex Server Site Setup dialog box appears.

Enter new values or accept the default values for your site.

Accept the default values only if you installed the Flex server on the same computer as Flex

Builder using the integrated JRun/Flex install option.

For a list of possible settings for this dialog box, see “Examples of site settings” on page 15.

For more information, click the Help button.

10 Chapter 1: Getting Started with Flex Builder

To define a Flex Builder site with advanced options:

In Flex Builder, select Site > Manage Sites, click the New button on the Manage Sites dialog

box, and select Site from the context menu.

The Site Definition dialog box appears. If the Basic tab is selected, click the Advanced tab and

select Local Info from the Category list (it should be the default).

For possible settings for this dialog box, see “Examples of site settings” on page 15.

In the Local Info category, specify where you want to store your application files.

If the Flex server is installed on the same computer as Flex Builder, specify a Flex application

root folder as the Local Root Folder. For more information, see “Identifying a Flex application

root folder” on page 11.

For more information on setting the Local Info category options, click the Help button on the

dialog box.

(Optional) In the Remote Info category, specify where you want to upload or download files

from a remote server.

Complete this category if the Flex server is running on a different computer than Flex Builder.

This folder must be an application root folder on the server. For more information, see

“Identifying a Flex application root folder” on page 11.

If you are using FTP access, enter the Flex application root folder as the Host Directory value.

If you are using network access, enter the Flex application root folder in the Remote Folder text

box.

For more information on setting the Remote Info category options, click the Help button on

the dialog box.

In the Testing Server category, select MXML for JSP from the Server Model pop-up menu.

In the Testing Server category, specify where Flex Builder can “test” your files—that is, how and

where it sends the files to be compiled at design time.

Flex Builder sends MXML and ActionScript files to the server for compilation at design time

so that you can preview Flex files, get debugging information, and connect to back-end

systems.

Specify how and where to send the files as follows:

■In the Access pop-up menu, select the method Flex Builder should use to send the files to

the server. Select Local/Network if you want to transfer the files to a local folder or to a

remote folder with network access. Select FTP if you want to transfer the files to a remote

folder using FTP.

■In the Testing Server Folder text box, specify a folder where MXML and ActionScript files

can be compiled by the Flex server. This folder must be a Flex application root folder as

specified in steps 2 or 3 above. For more information, see “Identifying a Flex application

root folder” on page 11.

Ce manuel convient aux modèles suivants

Table des matières

Autres manuels MACROMEDIA Logiciel

MACROMEDIA

MACROMEDIA BREEZE-CLUSTERING BREEZE PRESENTATION... Manuel utilisateur

MACROMEDIA

MACROMEDIA CONTRIBUTE 3-CONTRIBUTE PUBLISHING SERVER Manuel utilisateur

MACROMEDIA

MACROMEDIA DIRECTOR MX 2004-USING DIRECTOR Instructions de montage

MACROMEDIA

MACROMEDIA FLASH 8-LEARNING FLASH LITE 1.X ACTIONSCRIPT Manuel utilisateur

MACROMEDIA

MACROMEDIA DREAMWEAVER 8-EXTENDING DREAMWEAVER Manuel utilisateur

MACROMEDIA

MACROMEDIA BREEZE PRESENTER Manuel utilisateur

MACROMEDIA

MACROMEDIA CONTRIBUTE 3-DEPLOYING CONTRIBUTE Manuel utilisateur

MACROMEDIA

MACROMEDIA FLASHLITE2 ACTIONSCRIPT-LANGUAGE Manuel de service

MACROMEDIA

MACROMEDIA FLASH 8-FLASH Manuel de service

MACROMEDIA

MACROMEDIA DREAMWEAVER MX 2004-EXTENDING DREAMWEAVER Manuel utilisateur

MACROMEDIA

MACROMEDIA COLFUSION MX 7-MIGRATING APPLICATIONS TO COLDFUSION MX... Manuel utilisateur

MACROMEDIA

MACROMEDIA COLDFUSION MX 61-CFML Manuel utilisateur

MACROMEDIA

MACROMEDIA BREEZE-CLUSTERING BREEZE LIVE Manuel utilisateur

MACROMEDIA

MACROMEDIA FLASH REMOTING MX-USING FLASH REMOTING FOR FLASH MX 2004 ACTIONSCRIPT... Instructions de montage

MACROMEDIA

MACROMEDIA FLASH MEDIA SERVER 2-SERVER-SIDE ACTIONSCRIPT... Manuel de service

MACROMEDIA

MACROMEDIA COLDFUSION 5-CFML Manuel utilisateur

MACROMEDIA

MACROMEDIA 38000382 - Macromedia JRun - Mac Manuel utilisateur

MACROMEDIA

MACROMEDIA FLASH MX PROFESSIONAL 2004 - FLASH LITE 1.1... Mode d’emploi

MACROMEDIA

MACROMEDIA FLASH MEDIA SERVER 2-DEVELOPING MEDIA Manuel utilisateur

MACROMEDIA

MACROMEDIA DREAMWEAVER MX 2004-EXTENDING DREAMWEAVER Manuel utilisateur

MACROMEDIA

MACROMEDIA BREEZE-USING THE BREEZE XML WEB SERVICES Instructions de montage

MACROMEDIA

MACROMEDIA COLDFUSION 4.5-CFML LANGUAGE Manuel de service

MACROMEDIA

MACROMEDIA FLASH 8-DEVELOPING FLASH LITE 2.X Manuel utilisateur

MACROMEDIA

MACROMEDIA FIREWORKS 8-EXTENDING FIREWORKS Manuel utilisateur

Manuels Logiciel populaires d'autres marques

COMPRO

COMPRO COMPROFM Manuel utilisateur

Muratec

Muratec OFFICEBRIDGE ONLINE Manuel utilisateur

Oracle

Oracle Contact Center Anywhere 8.1 Manuel utilisateur

Adobe

Adobe 65007312 - Photoshop Lightroom Manuel

Avaya

Avaya NULL One-X for RIM Blackberry Manuel utilisateur

HP ProLiant BL420c Manuel utilisateur

PS Audio

PS Audio PowerPlay Manuel du propriétaire

Brady

Brady LOCKOUT PRO 3.0 Manuel de service

Avaya

Avaya Interaction Center Manuel utilisateur

Texas Instruments

Texas Instruments TI-83 Plus Silver Edition Manuel

Novell

Novell GROUPWISE 8 - INTERNET AGENT Manuel utilisateur

Oracle

Oracle Application 9i Manuel utilisateur

Acer

Acer RDM Manuel utilisateur

Canon

Canon Vixia HF21 Manuel utilisateur

Canon

Canon ZR950 Manuel utilisateur

Samsung

Samsung Auto Backup Manuel utilisateur

Polycom

Polycom Vortex EF2201 Instructions d'installation et d'utilisation

Brocade Communications Systems

Brocade Communications Systems Brocade 8/12c Manuel utilisateur