How it Works
Macromedia
Loading...
E
F
G
I
Loading...
Loading...
Flex Builder - 3.0
Instruction Manual
233 pgs4.9 Mb0
Table of contents
Loading...

Macromedia Flex Builder - 3.0 Instruction Manual

USING ADOBE FLEX BUILDER 3
© 2008 Adobe Systems Incorporated. All rights reserved.
Using Adobe® Flex® Builder™ 3
If this guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, is furnished under license and may be used or copied only in acc ordance with the terms of such license. Except as p ermitted by any such lic ense, no part of t his guide may be reproduced, stored in a retrieval system, or trans­mitted, in any form or by any means, electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end-user license agreement.
Please remember that existing artwork or images that you may want to include in your project may be protected under copyright law. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyright owner. Please be sure to obtain any permission required from the copyright owner.
Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to any actual or ganizati on.
Adobe, the Adobe logo, ActionScript, ColdFusion, Flash, and Flex are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.
Mac and Macintosh are trademarks of Apple Inc., registered in the United States and other countries. Java is a trademark or registered trademark of Sun Microsystems, Inc. in the United States and other countries. Microsoft is either a registered trademark or trademark of Microsoft Corporation in the United States and/or other countries. All other trademarks are th e property of their respective owners.
This product includes software developed by the Apache Software Foundation (http://www.apache.org/).
This product contains either BISAFE and/or TIPEM software by RSA Data Security, Inc.
The Flex Builder 3 software contains code provided by the Eclipse Foundation (“Eclipse Code”). The source code for the Eclipse Code as contained in Flex Builder 3 software (“Eclipse Source Code”) is made available under the terms of the Eclipse Public License v1.0 which is provided herein, and is also available at http://www.eclipse.org/legal/epl­v10.html.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA.
Notice to U.S. gover nment end users. The software and documentation are “Com mercial Items,” as that term is d efined at 48 C.F.R. §2.101, consisting of “Commercial Computer Software” and “Commercial Computer Software Documentation,” as such terms are used in 48 C .F.R. §12.212 or 48 C.F.R. §227.7202, as applicable. Consistent with 48 C.F.R.
§12.212 or 48 C.F.R. §§227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer Software Doc umentati on are being licensed to U.S. Government end users (a) only as Commercial items and (b) with only those rights as are granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyright laws of the United States. For U.S. Government End Users, Adobe agrees to comply with a ll applicable equa l opportunity laws including, if appropriate, the provisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of 1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1 through 60-60, 60-250 ,and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall be incorporated by reference.
Contents
Chapter 1: Learning Flex Builder
Using Flex and Flex Builder documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Getting the most from the Flex and Flex Builder learning resources . . . . . . . . . . . . . . . . . . . . . . . . . 2
Using the Flex Builder help system . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Chapter 2: About Flex Builder
What you can do with Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Flex Builder versi ons . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Flex Builder configurations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Activating Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
Chapter 3: Flex Builder Workbench Basics
About the workbench . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
About Flex Builder editors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
About Flex Builder perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Workbench menus, toolbars, and shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .23
Extending the Flex Builder workbench . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
iii
Chapter 4: Working with Projects
About Flex Builder projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Creating Flex projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
Managing projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35
Managing project resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
About ActionScript projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
About library projects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Chapter 5: Navigating and Customizing the Flex Builder Work bench
Working with perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
Working with editors and views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
Switching the workspace . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Customizing the workbench . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Searching in the workbench . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Working in the editor’s Source and Design modes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Accessing keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Setting workbench preferences . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
Chapter 6: Building a Flex User Interface
About the structure of Flex user interfaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
Adding and changing components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Working with components visually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
Applying styles and skins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78
Laying out your user interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84
Adding navigator containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 87
Adding data provider controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90
Adding charting components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Chapter 7: Adding View States and Tra ns it ion s
About view states and transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Creating a view state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
Creating a state based on an existing state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Setting a non-base state as the starting state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Setting the initial state of a component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Switching states at run time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Modifying the appearance of existing states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
Deleting a view state . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Creating a transition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
Chapter 8: Adding Interactivity with Behaviors
About Flex behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Creating a behavior for a component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
Chapter 9: Code Editing in Flex Builder
About code editing in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .102
About Flex Builder content assistance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .103
Navigating and orga nizing code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107
Formatting and editing code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .111
Finding references and refactoring code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .113
About markers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .114
About syntax error checking . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .116
Code editing keyboard shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .118
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
iv
Chapter 10: Building Projects
Understanding how projects are built and exported . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121
Build basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .122
Customizing project builds . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .124
Export Release Build . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .126
Advanced build options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .128
Publishing source code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .134
Chapter 11: Running and Debugging Applications
About running and debugging applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .136
Running your applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .138
Managing launch configurations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139
Debugging your applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141
Chapter 12: Creating Modules
Creating modules in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .147
Adding modules to your project . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Optimizing modules in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Debugging modules in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .153
Chapter 13: Profiling Flex applications
About profiling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155
How the Flex profiler works . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .156
Using the profiler . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .158
About the profiler views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .165
About garbage collection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178
Identifying problem areas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .178
About profiler filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .181
Chapter 14: Working with Data in Flex Builder
About working with data in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .183
Automatically generating database applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .186
Automatically generating web service proxies . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .190
Automatically generating Flex Ajax Bridge code . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .204
Managing Flash Player security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .208
Chapter 15: Flex Builder User Interface Reference
Setting project properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .210
Using Flex Builder views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .213
Creating project resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .220
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
v
Chapter 16: Creating Custom MXML Components
About custom components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227
Creating MXML components visually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .227
Designing components visually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
Editing and distributing custom MXML components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .229
1

Chapter 1: Learning Flex Builder

Adobe® Flex® Builder™ includes a variety of resources to help you learn the program quickly and become proficient in creating Flex applications. All the Flex and Flex Builder documentation is available in online help and Adobe PDF.
To p ic s
Using Flex and Flex Builder documentation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
Getting the most from the Flex and Flex Builder learning resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
Using the Flex Builder help system. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Using Flex and Flex Builder documentation

The Flex and Flex Builder documentation includes information for users who have a variety of backgrounds. This section helps you understand how to approach the documentation, depending on your background and what you want to accomplish with Flex and Flex Builder.
New users
• Start by going to the Flex Getting Started Experience site, which gives you an overview of essential Flex concepts
and provides a series of tutorial lessons.
• Flex Builder is built on Eclipse (an open source IDE), so you need to know specific terms and concepts to be
successful using it. For more information, see
workbench” on page 10.
Web application designers
• Start by going to the Flex Getting Started Experience site, which gives you an overview of essential Flex concepts
and provides a series of tutorial lessons.
• You can define a user interface entirely in code using the MXML editor in Source mode; however, in Design
mode, Flex Builder contains design and layout tools that make designing Flex applications much easier. For more information, see
on page 64.
Experienced web application developers
• Start by going to the Flex Getting Started Experience site, which gives you an overview of essential Flex concepts
and provides a series of tutorial lessons.
• For all the details of the Flex framework, including code samples, see the Adobe Flex 3 Developer Guide.
• For in-depth information about the steps involved in building and deploying a Flex application, see Building and
Deploying Adobe Flex
• If you are using Flex Builder as your IDE and want a quick overview of the capabilities and features of the Flex
Builder workbench, see the following topics:
• “What you can do with Flex Builder” on page 7
• “About Flex Builder projects” on page 27
• “About code editing in Flex Builder” on page 102
“Flex Development perspective in Design mode” on page 16 and “Building a Flex User Interface”
3 Applications.
“Flex Builder Workbench Basics” on page 10 and especially “A b ou t th e
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
• “Understanding how projects are built and exported” on page 121
• “About running and debugging applications” on page 136
• For all the API details, see Adobe Flex Language Reference. This reference is also available from Flex Dynamic
Help in the Flex Builder IDE.
Flash and ActionScript developers
• For all the API details, see Adobe Flex Language Reference. This reference is also available from Flex Dynamic
Help in the Flex Builder IDE.
• For an overview of the ways you use ActionScript to develop Flex framework and Flash API applications in Flex
Builder, see
“About ActionScript projects” on page 44.
• To understand how to design and lay out applications in Flex Builder, see “Building a Flex User Interface” on
page 64.
Eclipse users
• Experienced Eclipse users will find that Flex Builder uses familiar workbench conventions. For an overview of
the perspectives, editors, and views that are contained within the Flex Builder plug-ins, see
“Flex Builder Workbench
Basics” on page 10.
2

Getting the most from the Flex and Flex Builder learning resources

Flex Builder includes a variety of media to help you learn the program quickly and become proficient in creating Flex applications. The Flex Builder help system includes several topics that help you learn about Flex Builder, Flex, MXML, and ActionScript. (All documentation is available online in LiveDocs format and Adobe PDF.) You can also consult other online resources as you learn how to build Flex applications.
The following table summarizes additional online resources for learning Flex Builder:
Resource Description/Audience Where to Find It
Flex Support Center TechNotes, plus support and problem-solving information for Flex
Flex Developer Center Articles and tutorials to help you improve your skills and learn new
Documentation Resource Center
Adobe Online Forums Discussion and problem-solving information by Flex users, technical
Adobe Training Courses featuring hands-on tasks and real-world scenarios. www.adobe.com/go/flex_training
users.
ones.
Links to LiveDocs, product manuals in PDF format, and release notes. www.adobe.com/go/flex_documentation
suppor t representatives, and the Flex development team.
You can purchase printed versions of select titles. For more information, see www.adobe.com/go/buy_books.
www.adobe.com/go/flex_support
www.adobe.com/go/flex_devcenter
www.adobe.com/go/flex_newsgroup
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3

Using the Flex Builder help system

The online help system available in the Help menu provides detailed information on all tasks you can perform with Flex Builder.
Set Help preferences
You can control how Help is displayed in the workbench by setting Help preferences.
1 Open the Preferences dialog and select Help.
2 Set the following options as needed:
Use Extern al Browser (This option is only available if your platform supports an embedded browser. See
“Changing the default web browser” on page 140.) Lets you display help in the web browser of your choice. By
default, the embedded browser of the IDE displays help. Select the Use External Browser option and then select the Web Browser link to select your web browser. The Use External Browser option is only available
Open Window Context Help Determines how to display context-sensitive help links for an open window. By default, context-sensitive help links are displayed in the Dynamic Help view which, when opened, is docked into the current perspective like all other views. You can specify to display context-sensitive help links in an infopop (similar to a tooltip).
Open Dialog Context Help Determines how to display context-sensitive help links for an open dialog box. By default, help is displayed in the dialog box. You can specify to display context-sensitive Help links in an infopop (similar to a tooltip).
Open Help View Documents Determines where to display documents opened from links in Dynamic Help. By default, help documents open in the Flex Builder IDE editing area. Select in-place to open help documents in the Dynamic Help view window.
3
Open Help
You can access in-product help while you work in Flex Builder.
❖ Select Help > Help Contents.
Use dynamic help
Dynamic Help is docked to the current perspective and displays topics related to the currently selected MXML tag or ActionScript class.
❖ Select Help > Dynamic Help.
Use context-sensitive help
As you work in Flex Builder, you can display context-sensitive help for specific user interface elements of the workbench (views, dialog boxes, and so on) and language-reference help for code elements.
1 Select an editor, view, dialog box, or other user interface element in the workbench.
2 Press the keyboard shortcut for Dynamic Help: F1 (Windows) or Command+Shift+/ (Mac OS).
For quick access to the Adobe Flex Language Reference while writing code, see “Getting help while writing code” on
page 107.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3

Searching Help

There are a few ways you can do full text searches of Flex and Flex Builder Help.
Search in-product help
1 Select Help > Help Contents (a separate Help window will appear).
2 Enter a word or phrase in the text box, and click Go.
3 Click a topic in the list of results to display it.
To search for a specific phrase, enclose it in double quotes.
You can al so s earch di rectly from th e Help me nu by select ing He lp > Se arch. The Help panel i s opened i n th e IDE
with the search box selected.
Select the scope of the search
You can select the documentation set that you want to search. For example, if you have other Eclipse plug-ins installed, the list of available documentation in help can be quite long. To search only the Flex documentation, you can define the scope of the search to eliminate unwanted search results.
1 In the Help viewer (Help > Help Contents), click the Search scope link.
The Select Search scope dialog box appears.
2 To create a search scope, click New.
3 Enter a name for the search scope list.
4 Select the Help packages to include in the search.
5 Click OK to save the search scope list.
6 Click OK again to close the Select Search Scope dialog box.
When you perform a new search, the search is limited to the selected help packages. You can create other search scope lists or search all help topics.
4

Using Help bookmarks

As you browse documentation in the Help viewer, you can bookmark topics to reference later.
Add a Help bookmark
❖ In Flex Builder Help (Help > Help Contents), with a help topic selected and displayed, select the Bookmark
Document button in the Help viewer toolbar.
View your Help bookmarks
❖ In Flex Builder Help, select the Bookmarks tab.
All the bookmarks you set are listed. Click a bookmark to display the topic. You can also delete one or all of your bookmarks.

Changing the Help viewer font size

The Help viewer in Flex Builder does not support changing the font size used to display Help documentation. However, you can select to run Help in a web browser and control the font size using the browser’s font settings.
Display Help in an external browser
1 In Flex Builder, select Window > Preferences > Help.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
2 Select the Use External Browser option.
3 (Optional) Select the Web Browser link to select a specific web browser.
If you bypass this step, Help appears in the system default web browser.
4 Click OK.
5 Select Help > Help Contents.
Help appears in a web browser. You can control the size of the display font by using the browser’s font settings; for example, in Firefox, select Edit > Text Size.

Using the Flex Start page

The Flex Start page appears the first time you run Flex Builder. You can view the Flex Start page at any time by selecting Help > Flex Start Page.
The Flex Start page contains links to the Flex Getting Started Experience, which contains information about building Flex and ActionScript 3.0 applications in Flex Builder, sample applications, and other useful information. Use the Flex Start page much like a web page. Click any of the links to display information or work with sample applications.
5
Part 1: Getting Started with Flex Builder
To p ic s
About Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Flex Builder Workbench Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
6
7

Chapter 2: About Flex Builder

Adobe® Flex® Builder™ is an integrated development environment (IDE) for developing applications that use the Adobe® Flex® framework, MXML, Adobe® Flash® Player 9, ActionScript 3.0, Adobe® LiveCycle™ Data Services ES, and the Adobe® Flex® Charting components.
Flex Builder is built on top of Eclipse, an open-source IDE, and provides all the tools you need to develop Flex 2 and ActionScript 3.0 applications. It runs on Microsoft Windows, Apple Macintosh OS X, and Linux, and is available in several versions. Installation configuration options let you install Flex Builder as a set of plug-ins in an existing Eclipse workbench installation or to create an installation that includes the Eclipse workbench.
To p ic s
What you can do with Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
Flex Builder versions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Flex Builder configurations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
Activating Flex Builder. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9

What you can do with Flex Builder

Using Flex Builder, you can develop Flex and ActionScript 3.0 applications in a full-featured IDE that lets you do the following tasks:
• Create Flex projects with or without using the Flex server. For more information, see “Creating Flex projects” on
page 32.
• Create ActionScript projects that use the Flash API. For more information, see “About ActionScript projects” on
page 45.
• Write and edit your application source code using editors that provide features such as code refactoring, code
hinting, streamlined code navigation, and automatic syntax error checking. For more information, see
editing in Flex Builder” on page 102.
• Use the MXML editor in Design mode to simplify using view states and transitions, to design using absolute
layout options, to drag components onto the design canvas and then reposition and resize them as needed, and so on. For more information, see
• Create ActionScript functions within your MXML code or as separate files of ActionScript functions, classes,
and interfaces.
• Create custom components and then easily access them using the Components view. For more information, see
“Creating Custom MXML Components” on page 227.
• Manage your application projects by using the many features provided by the underlying Eclipse IDE. For
example, you can add and delete projects and resources, link to resources outside your project, and so on. For more information, see
• Build your applications using predefined builders or create custom builders using Apache Ant. For more infor-
mation, see “Building Projects” on page 121.
• Run your applications in a web browser or the stand-alone Flash Player. Create custom launch configurations to
control how your applications run. For more information, see
“Managing launch configurations” on page 139.
“Managing projects” on page 36 and “Creating folders and files in a project” on page 41.
“Building a Flex User Interface” on page 64.
“Running your applications” on page 138 and
“A b o ut c o d e
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
• Test and debug your applications using the integrated debugging tools in Flex Builder. For more information,
see
“Running and Debugging Applications” on page 136.
• Publish your application source code so it can be viewed by users and other developers. For more information,
see
“Publishing source code” on page 134.
• Create library projects that generate shared component library (SWC) and run-time shared library (RSL) files
for code reuse and distribution. For more information, see
“About library projects” on page 47.
• Customize the IDE. For example, you can arrange the interface to include your favorite tools in the specific
layout. For more information, see
“Navigating and Customizing the Flex Builder Workbench” on page 52.

Flex Builder versions

Flex Builder is available in two versions: Standard and Professional.
Flex Builder Standard This version provides a full-featured IDE which allows you to create Flex and Action­Script applications using the Flex framework and Flash API. Flex Builder Standard also includes MXML, Action­Script, and CSS editors, as well as debugging tools. Under a trial license, Flex Builder Standard can also provide the advanced charting and advanced data tools included in the Professional version described below.
Flex Builder Professional In addition to the Standard version features, this version includes a library of inter­active charts and graphs which enable you to create rich data dashboards, interactive data analysis, and data visualization components. It also includes memory and performance profiling and automated testing tools.
8

Flex Builder configurations

The Flex Builder installer provides the following two configuration options:
Plug-in configuration This configuration is for users who already use the Eclipse workbench, who want to add the Flex Builder plug-ins to their toolkit of Eclipse plug-ins (for example, someone who also uses Eclipse to develop Java applications). Because Eclipse is an open, extensible platform, hundreds of plug-ins are available for many different development purposes.
Stand-alone configuration This configuration is a c ustomized packaging of Eclipse and the Flex Builder plug­ins created specifically for developing Flex and ActionScript applications. The user interface of the stand-alone configuration is more tightly integrated than in the plug-in configuration, which eliminates much of the potential confusion that the open, multipurpose plug-in configuration might create. The stand-alone configu­ration is ideal for new users and users who intend to develop only Flex and ActionScript applications.
If you aren’t sure which configuration to use, follow these guidelines:
• If you already use and have Eclipse 3.11 (or later) installed, select the plug-in configuration. On Macintosh,
Eclipse 3.2 is the minimum version.
• If you don’t have Eclipse installed and your primary focus is on developing Flex and ActionScript applications,
select the stand-alone configuration. This configuration also allows you to install other Eclipse plug-ins, so you can expand the scope of your development work in the future.
Both configurations provide the same functionality and you select the configuration you want when installing Flex Builder.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3

Activating Flex Builder

If you’re a single-license user, you must activate your license within thirty days of installation. When you start Flex Builder, you will be prompted to enter the serial number. Likewise, if you installed the trial version of Flex Builder, you have 30 days to use it before the trial expires. Once expired, you need to purchase a license to continue using Flex Builder. Product activation does not require you to submit personal information, only your product serial number.

Managing Flex licenses

Each of the products within the Flex product family have separate licenses. For example, you need separate licenses for Flex Builder, Flex Charting, and Adobe LiveCycle Data Services ES. As noted above, when you purchase a Flex product, you have 30 days to activate it by entering the serial number. You can also install trial versions of these products and evaluate them for 30 days. When you acquire a license for a Flex product, you can activate the product from within Flex Builder.
Activate a Flex product in Flex Builder
1 Select Help > Manage Flex Licenses.
2 Select the Flex product you want to activate and enter the serial number.
3 Click Restart. Flex Builder restarts, properly activated with the serial number that you entered.
If you’re using the plug-in configuration of Flex Builder (see “Flex Builder configurations” on page 8) and the 30-day activation or trial has expired, the Eclipse workbench and all other plug-ins will continue to work properly. You will not, however, have access to the Flex Builder features (for example, opening an MXML file). When you acquire a serial number you can unlock Flex Builder (or other Flex products) by entering the serial number using the procedure described above.
For more information, visit the Adobe Product Activation Center at www.adobe.com/go/activation.
9
10

Chapter 3: Flex Builder Workbench Basics

Adobe® Flex® Builder™ is built on Eclipse, an open-source, integrated development environment (IDE). You use it to develop Flex and ActionScript 3.0 applications using powerful coding, visual layout and design, build, and debugging tools.
To p ic s
About the workbench . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
About Flex Builder editors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
About Flex Builder perspectives . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Workbench menus, toolbars, and shortcuts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Extending the Flex Builder workbench . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25

About the workbench

The Flex Builder workbench is a full-featured development environment that is tailored to assist you in developing Adobe Flex, AIR™, and ActionScript applications. Flex Builder is built on Eclipse, an open-source IDE. Flex Builder is a collection of Eclipse plug-ins that let you create Flex and ActionScript 3.0 applications. Much of the basic functionality of the Flex Builder IDE comes from Eclipse. For example, managing, searching, and navigating resources are core features. The Flex Builder plug-ins add the features and functionality needed to create Flex and ActionScript 3.0 applications, and they modify the IDE user interface and some core functionality to support those tasks.
The information you need to use Flex Builder is contained in the Flex Builder documentation. Unless you are using other Eclipse plug-ins (such as CVS or Java) with Flex Builder, or you want to extend the Flex Builder plug-ins (see
“Extending the Flex Builder workbench” on page 25), you do not need to be concerned with the underlying Eclipse
framework.
Wo rk b en ch The term workbench refers to the Flex Builder development environment. The workbench contains three primary elements: perspectives, editors, and views. You use all three in various combinations at various points in the application development process. The workbench is the container for all of the development tools you use to develop applications. You might equate it to Microsoft Visual Studio, which provides a framework and core functionality for a variety of development tools.
Persp ective A perspective is a group of views and editors in the workbench. Essentially it is a special work environment that helps you accomplish a specific type of task. For example, Flex Builder contains two perspec­tives. The Flex Development perspective is used for developing applications, and the Flex Debugging perspective is used when debugging your applications. Flex Builder Professional also contains the Flex Profiling perspective.
If you use the Flex Builder plug-in configuration (see “Flex Builder configurations” on page 8), your workbench might contain additional perspectives such as a Java perspective that contains editors and views used to develop Java applications.
For more information about perspectives, see “About Flex Builder perspectives” on page 13.
Editor An editor allows you to edit various file types. The editors available to you depend on the number and type of Eclipse plug-ins installed. Flex Builder contains editors for writing MXML, ActionScript 3.0, and Cascading Style Sheets (CSS) code. For more information about Flex Builder code editing, see “Ab o u t c o d e
editing in Flex Builder” on page 102.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
Views A view typically supports an editor. For example, when editing MXML, the Components and Flex Properties views are also displayed in the Flex Development perspective. These views support the development of Flex applications and are therefore displayed when a MXML file is opened for editing.
Some views support the core functionality of the workbench itself. For example, the Flex Navigator view allows you to manage files and folders within the workbench and the Tasks view displays all of the tasks that are either automatically generated by the workbench or added manually.
The term view is synonymous with the term panel as it is used in earlier versions of Flex Builder, Dreamweaver®, and other Adobe development tools.
Wo rk s pa c e Not to be confused with workbench, a workspace is a defined area of the file system that contains the resources (files and folders) that make up your application projects. You can work with only one workspace at a time; however, you can select a different workspace each time you start Flex Builder. For more information, see “Managing projects” on page 36.
Resource The term resource is used generically to refer to the files and folders within the projects in a workspace. For more information, see “Creating folders and files in a project” on page 41.
Project All of the resources that make up your applications are contained within projects. You cannot build an application in Flex Builder without first creating a project. You can create three types of projects in Flex Builder: Flex, ActionScript 3.0, and Library projects. For more information, see “Working with Projects” on page 27.
Launch configuration A launch configuration is created for each of your projects, and it defines project settings that are used when running and debugging your applications. For example, the names and locations of the compiled application SWF files are contained in the launch configuration, and you can modify these settings. For more information, see “Running your applications” on page 138.
11

About Flex Builder editors

Flex Builder contains editors that allow you to edit MXML, ActionScript 3.0, and CSS code. Editors are the essence of the workbench and views, and the perspectives in which they are contained support their functionality.
Editors are associated with resource types, and as you open resources in the workbench, the appropriate editor is opened. The workbench is a document-centric (and project-centric) environment for developing applications.
When you develop Flex applications in Flex Builder, you use the MXML, ActionScript 3.0, and CSS editors. Each editor provides the functionality needed to author the given resource type. Flex Builder contains the following editors:
MXML editor You use the MXML editor to edit MXML and to embed ActionScript and CSS code in
<mx:Script> and <mx:Style> tags. The MXML editor has two modes: Source and Design. Source mode is used
for editing code. Design mode is used for visually laying out and designing your applications. The two modes are synchronized and changes in one mode are immediately reflected in the other. For more information, see
“About code editing in Flex Builder” on page 102.
ActionScript editor You use the ActionScript editor to edit ActionScript class and interface files. Although you can embed ActionScript functions into an MXML file by using the to define classes in separate ActionScript files and then import the classes into MXML files. Using this method, you can define most of your Flex applications in ActionScript.
CSS editor You use the CSS editor to display and edit Cascading Style Sheets. You can then apply styles to the visual elements of your applications. For more information, see “Working with components visually” on page 69 and “Using Styles and Themes” on page 470 in the Adobe Flex 3 Developer Guide.
<mx:Script> tag , it is a c om mo n p ra ct ic e
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3

Code hinting

Editors contain many features that simplify and streamline code development. Foremost among these features is Content Assist, which displays code completion hints as you enter MXML, ActionScript, and CSS code.
Code hints appear automatically as you enter your code. (You can also display code hints by pressing Control+Space.) The following example shows code hints in the MXML editor:
Code hints appear whenever you begin typing a code expression that Flex or the language (MXML, ActionScript, and CSS) recognizes. For example, if you type the name of a Flex component, you are prompted with a list of all properties of that component.
ActionScript code hinting is also supported. ActionScript code hints are displayed within embedded tags in an MXML document and within stand-alone ActionScript files. Content Assist displays code hints for all ActionScript language elements: interfaces, classes, variables, functions, return types, and so on.
Content Assist also provides code hints for custom MXML components or ActionScript classes that you create yourself. For example, if you define a custom MXML component and add it to your project, code hints are displayed when you refer to the component in your MXML application file.
For more information, see “About Content Assist” on page 104.
<mx:Script>
12

Code navigation

Code navigation simplifies the burden of working with code, especially in large projects with many resources. Code navigation includes the ability to select a code element (a reference to a custom Flex component in an MXML appli­cation file, for example) and go to the source of the code definition, wherever it is located in the project, workspace, or path.
Other code navigation features include code folding, which allows you to collapse and expand multiline code state­ments. Another feature is the Outline view, which hierarchically presents, and allows you to navigate to, all user interface and code elements in a file. For more information, see “Navigating and organizing code” on page 107.

Code formatting

As you write code, Flex Builder automatically indents lines of code to improve readability, adds distinguishing color to code elements, and provides many commands for quickly formatting your code as you enter it (adding a block comment, for example). For more information, see “Formatting and editing code” on page 111.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3

Find references and code refactoring

Flex Bui lder l ets you fi nd a ll re feren ces and de claratio ns to ide ntifiers in a given f ile, projec t, or work space, in cluding references found in elements linked from SWC files and other entries on a library path (for example, classes, inter­faces, functions, variables, and some metadata). You use refactoring to rename identifiers in your code while updating all references to them in your entire code base. For more information, see “Finding references and refac-
toring code” on page 113.

About Flex Builder perspectives

To support a particular task or group of tasks, editors and supporting views are combined into a perspective. Flex Builder contains two perspectives: Flex Debugging and Flex Development. Flex Builder Professional contains an additional perspective, Flex Prof iling.
Perspectives change automatically to support the task at hand. For example, when you create a Flex project, the workbench switches to the Development perspective; when you start a debugging session, the Debugging perspective is displayed when the first breakpoint is encountered. You can also manually switch perspectives yourself by selecting Window > Perspective from the main menu (Window > Open Perspective in plugin version). Or, you can use the perspective bar, which is located in the main workbench tool bar.
13
If you use the plug-in configuration of Flex Builder and have other Eclipse plug-ins installed, you might have many additional perspectives. While predefined perspectives are delivered with each Eclipse plug-in, you can customize them to your liking or create your own. Customizing or creating a perspective is a matter of selecting, placing, and sizing the editors and views you need to accomplish your development tasks. For more information about working with and customizing perspectives, see “Working with perspectives” on page 52.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3

The Flex Development perspective

The Flex Development perspective includes the editors and views you need to create Flex and ActionScript 3.0 appli­cations. When you create a project, Flex Builder switches into the Development perspective so you can begin devel­oping your application. The following example shows the Flex Navigator, Outline, and Problems views:
14
The focal point of the perspective (and the workbench generally) is the editor area. The editor area contains all of the currently open documents in a multitab interface. The supporting views are placed around the editor area. Perspec­tives predefine the layout of all the elements within it, but you may rearrange them to your liking. For more infor­mation, see “Navigating and Customizing the Flex Builder Workbench” on page 52.
In Source (code editing) mode, the Development perspective contains the following elements:
Flex Builder editors
The editor area contains all of the open documents. When you create a Flex project, the main MXML application file is opened in the editor area. You can then open and switch between any of the MXML, ActionScript, and CSS documents you are working in.
The MXML and CSS editors operate in two modes (Source and Design) and the Development perspective is modified to accommodate each set of tasks as you toggle between the two modes. The ActionScript editor is a single­purpose editor that is used to create ActionScript files.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
For more information about using the MXML editor, see “About code editing in Flex Builder” on page 102 and
“Working with components visually” on page 69.
Flex Navigator view
The Flex Navigator view contains all of the projects and resources in the workspace and is therefore an essential element of the Flex Builder workbench. It is always displayed in the Development and Debugging perspectives.
15
For more information about the Flex Navigator view and working with projects, see “Working with Projects” on
page 27.
Outline view
In Source mode, the Outline view presents a hierarchical view of the code structure of the selected MXML or Action­Script document so that you can inspect and navigate the sections or lines of code in the document. The Outline view also displays syntax error alerts that the compiler generates. This view is also available when you use the Action­Script editor.
For more information about using the Outline view in Source mode, see “Using the Outline view to navigate and
inspect code” on page 108.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
Problems view
As you enter code, the Flex Builder compiler detects syntax and other compilation errors, and these are displayed in the Problems view. When you debug your applications, errors, warnings, and other information are displayed in the Problems view.
For more information, see “Running and Debugging Applications” on page 136.
Note: You can also optionally add the Tasks and Bookmarks views. These views provide additional shortcuts for managing and navigating your code. For more information about these views, see introduction to the optional views that are available in Flex Builder, see “Other useful workbench views” on page 22.
“About markers” on page 114. For an

Flex Development perspective in Design mode

You visually lay out and design your Flex applications in the MXML editor in MXML Design mode. Design mode is the visual representation of the code that you edit in Source mode. In Design mode, however, additional views are added to support design tasks. These are the Components, Flex Properties, and States views. In addition, when you are in Design mode, the Outline view displays the MXML structure of your Flex applications. You can also display and edit CSS in CSS Design mode. For more information about designing Flex applications in Flex Builder, see
“Building a Flex User Interface” on page 64.
Note: Design mode is not available when working with ActionScript projects. To preview the user interface of your ActionScript applications, you need to build and run them. For more information about working with ActionScript, see
“About ActionScript projects” on page 44 and “Running and Debugging Applications” on page 136.
In Design mode, the development perspective contains the MXML editor and the Components, States, and Flex Properties, and Outline views.
16
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
The MXML editor
In MXML Design mode, you interact with your Flex applications visually; dragging and dropping components on to the design area, selecting and resizing components, and so on. You can also expand the MXML editor in Design mode to clearly see and select individual components, and use pan and zoom to get a closer look at items; this is especially useful when you have embedded container components. For more information about working in Design mode, see “Building a Flex User Interface” on page 64.
17
Components view
The Components view contains all of the standard Flex components, which you can select and add to the design area. As you create your own custom components, they are also displayed in the Components view.
For more information, see “Adding and changing components” on page 66.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
States view
Flex allows you to create applications that change their appearance based on events that are triggered directly by the user or events that are generated programmatically. These user interface transformations are referred to as view states. You create and manage view states in the States view.
For more information about view states, see “Adding View States and Transitions” on page 93.
Flex Properties view
When a Flex component is selected, its properties are displayed in the Flex Properties view. You can set and edit properties as appropriate. You can view a component’s properties graphically (as shown in the following example) and as a categorized or alphabetical list.
18
For more information, see “Setting component properties” on page 74.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
Outline view
In Design mode, the Outline view presents a hierarchical view of the MXML structure of your Flex applications. You can easily navigate the structure of your application by selecting individual MXML tag statements and components. When you select an item in the Outline view, it is highlighted in Design mode.
19
For more information about working with the Outline view in Design mode, see “Inspecting the structure of your
MXML” on page 77.

The Flex Debugging perspective

The Flex Debugging perspective contains the tools you need to debug your Flex and ActionScript applications. Like the Development perspective, the primary tool within the debugging perspective is the editor. In the context of debugging your applications, the editor works with the debugging tools to locate and highlight lines of code that need attention so that you can fix them and continue testing your application.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
For example, you can set breakpoints in your script to stop the execution of the script so that you can inspect the values of variables and other information up to that point. You can also move to the next breakpoint or step in to a function call to see the variable values change.
20
The Debugging perspective appears automatically when the first breakpoint is reached. You can also switch to the Debugging perspective manually by selecting it from the Perspective bar, which is located at the right edge of the main workbench toolbar.
The Debugging perspective contains Debug, Breakpoints, Console, Variables, and Expressions views.
Debug view
The Debug view (in other debuggers this is sometimes referred to as the callstack) displays the stack frame of the suspended thread of the Flex application you are debugging. You use the Debug view to manage the debugging process. For example, the Debug view allows you to resume or suspend the thread, step into and over code state­ments, and so on.
For more information about working with the Debug view, see “Managing the debugging session in the Debug view”
on page 143.
Flex applications are single-threaded (not multithreaded like Java, for example) and you can debug only one Flex application at a time. Therefore, when you debug a Flex application, you see only the processes and Debug view for a single thread of execution.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
The Debug view shows a list of all the functions called to that point, in the order called. For example, the first function called is at the bottom of the list. You can double-click a function to move to it in the script; Flex Builder updates the information in the Variables view to reflect the new location in the script.
Breakpoints view
The Breakpoints view lists all of the breakpoints you set in your project. You can double-click a breakpoint and display its location in the editor. You can also disable, skip, and remove breakpoints.
For more information, see “Managing breakpoints in the Breakpoints view” on page 143.
Console view
The Console view displays the output from trace statements placed in your ActionScript code and also feedback from the debugger itself (status, warnings, and errors).
21
For more information, see “Using the Console view” on page 144.
Variables view
The Variables view displays information about the variables in a selected stack frame. You can select variables to monitor (in the Expressions view) and also change variable values during the debugging session. During the debug session you can see the changes in the currently running SWF file and experiment with fixes for the problem you need to resolve.
For more information, see “Managing variables in the Variables view” on page 144.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
Expressions view
The Expressions view is used to monitor a set of critical variables. You can choose the variables you consider critical in the Variables view and add them to the Expressions view for monitoring.
When you debug your application, you can then monitor and, if needed, modify the values. You can also add and remove variables in the Expressions view. For more information, see “Using the Expressions view” on page 145.
For more information about debugging Flex and ActionScript applications, see “Running and Debugging Applica-
tions” on page 136.

The Flex Profiling perspective

Flex Builder Professional contains an additional perspective. The Adobe Flex profiler helps you identify performance bottlenecks and memory leaks in your applications. The Profiling perspective displays several panels (or views) that present profiling data in different ways. As you interact with your application, the profiler records data about the state of the application, including the number of objects, the size of those objects, the number of method calls, and the time spent in those method calls. For more information about the profiler, see “About profiling” on page 155.
22

Other useful workbench views

In addition to the editors and views associated with Flex Builder’s default development, debugging, and profiling perspectives, the workbench contains other views that help you streamline the application development process.
You can access views that are not already displayed with a perspective and add them to the workbench by selecting Window > Other Views > General (Window > Show View Other in plugin version). These optional views are catego­rized by type and are associated with distinct workbench functionality or with specific Eclipse plug-ins. For more information about working with views, see “Working with editors and views” on page 54.
You will find that several workbench views in particular are valuable aids as you develop your applications in Flex Builder. These include the Tasks, Bookmarks, and Search views.
Bookmarks view
The Bookmarks view is used to manage the bookmarks that you add to specific lines of code or to resources. As in a web browser, bookmarks are used as a convenience for keeping track of noteworthy items. Selecting a bookmark locates and displays it in the workbench.
For more information about the Bookmarks view, see “About markers” on page 114.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
Search view
The Search view is displayed automatically when you search the resources in the workspace. You can use it to define and recall previous searches and to filter the list of search results.
For more information about the Search view, see “Searching in the workbench” on page 60.

Workbench menus, toolbars, and shortcuts

All of the workbench commands are contained in the menu system, in right-click context menus, from toolbars, and through keyboard shortcuts.

The workbench toolbar

The workbench toolbar contains buttons for important and frequently used commands. These commands are also available from various Flex Builder menus.
23
The following buttons appear in the workbench toolbar (shown left to right):
New Displays a pop-up menu that displays all the types of projects and documents you can create.
Save Saves the document that is open in the editor and currently selected.
Print Source Prints the document that is open in the editor and currently selected.
Build All Appears when “Build automatically” is deselected from the Project menu.
Run Opens the main application SWF file in your default web browser or directly in stand-alone Flash Player.
You can also select other application files in the project from the attached pop-up menu. For more information, see “Running your applications” on page 138.
Debug Uses the current project’s main application file to begin a debugging session. You can also select other application files in the project from the attached pop-up menu. For more information, see “Starting a debugging
session” on page 141.
Profile Creates, manages, and runs configurations. For more information, see “About profiling” on page 155.
Export Release Build Launches a wizard that helps you choose the application for which you want to export
an optimized release-quality version.
External Tools Selects a custom launch configuration.
Mark Occurrences Allows you to select and mark code occurrences in Source mode.
Next Annotation Allows you to select and move forward to code annotations in Source mode.
Previous Annotation Allows you to select and move backward to code annotations in Source mode.
Last Edit Location Returns you to the location of the last edit you made to a resource (for example, the exact
line of code or, in Design mode, the user interface element in which you added a control or set a property).
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
Back and Next Go backward or forward to previously selected documents. You can also select from the list of currently open documents from the attached pop-up menu.

The MXML editor toolbar

The MXML editor toolbar contains several buttons that allow you to control the editor in Source and Design modes. To see the toolbar, open an MXML file in Design mode.
The following buttons appear in the MXML editor toolbar (shown left to right):
Source Displays the editor in Source mode, which is where you edit code.
Design D ispl ays the ed itor in De sig n mode, which i s where you vi sually lay out a nd design you r Fl ex appl i-
cations.
Refresh Reloads the visual elements (images, SWF files, or class files containing drawing API methods) that define the visual design of your application. Collectively, these elements are referred to as a skin. For more information, see “Creating Skins” on page 550 in the Adobe Flex 3 Developer Guide.
Show Surrounding Containers Expands the Design mode view so that you can see and select individual components. For more information, see “Laying out your user interface” on page 85.
State Pop-up menu displays all the defined views states. Selecting view states updates the display of the visual design. For more information, see “Adding View States and Transitions” on page 93.
Design Area Displays and allows you to select predefined design area sizes (1024 x 768 pixels and 800 x 600 pixels, for example). You can also set a custom size. For more information, see “Using the MXML editor
in Design mode” on page 69.
Select Mode Engaged by default when a file is opened; it allows you to select, move, and resize items.
Pan Mode Allows you to pan and scroll around in design area; items cannot be selected or moved in Pan
mode.
Zoom Mode Defaults to zoom-in preset magnification values. To zoom out press Alt+Click (Opt+Click on Macintosh). You can double click the Zoom Mode button to return the design view to 100%.
Magnification Pop-up menu displays specific zoom percentages, which can also be selected from the Design > Magnification menu. The default setting is 100%.
24

The CSS editor toolbar

The CSS editor contains several buttons that allow you to control the editor in Source and Design modes. To see the CSS editor toolbar, open a CSS file in Design mode.
The following buttons appear in the CSS toolbar (shown left to right):
Source Displays the editor in Source mode, which is where you edit code.
Design Displays the editor in Design mode, which is where you visually lay out and design your Flex appli-
cations.
ADOBE FLEX BUILDER 3
Using Adobe Flex Builder 3
Refresh Reloads the visual elements (images, SWF files, or class files containing drawing API methods) that define the visual design of your application. Collectively, these elements are referred to as a skin. For more information, see “Creating Skins” on page 550 in the Adobe Flex 3 Developer Guide.
Style Pop-up menu lists the styles contained in your CSS file.
New Style Launches the New Style dialog box which allows you to choose the selector types and compo-
nents to apply the new style.
Delete Style Deletes the selected style for your CSS file.
Select Mode Engaged by default when a file is opened. It allows you to select, move, and resize items.
Pan Mode Allows you to pan and scroll around in design area. Items cannot be selected or moved in Pan
mode.
Zoom Mode Defaults to zoom-in preset magnification values. To zoom out press Alt+Click (Opt+Click on Macintosh). Double click the Zoom Mode button to return the design view to 100%.
Magnification Pop-up menu displays specific zoom percentages which can also be selected from the Design > Magnification menu. The default setting is 100%.
Background Launches a color picker where you can select a background color for the preview area. Changing this color does not change the CSS file nor does it affect your Flex application when you run it.
Preview as (If applicable) Shown when the style rule is not tied to one specific MXML component.
Edit scale grids (not shown) (If applicable) Shown when the style rule uses image file skins.
25

Using keyboard shortcuts

Many operations that are available from the menu system in Flex Builder are also available as keyboard shortcuts.
Display the list of all keyboard shortcuts in Flex Builder
❖ Select Help > Key Assist, or enter Control+Shift+L (Command+Shift+L on Macintosh).
You can use Key Assist as a reference to all the Flex Builder keyboard shortcuts, or you can run these commands directly from the Key Assist panel by double-clicking the commands. You can also modify keyboard shortcuts or create your own. For more information, see “Changing keyboard shortcuts” on page 58.

Extending the Flex Builder workbench

Flex Builder is a collection of Eclipse plug-ins that provide the tools you need to create Flex and ActionScript 3.0 applications. The Eclipse plug-in framework allows plug-ins to expose extension points, which can be used to extend the features and capabilities of the tool. For more information, see Adobe Flex Builder 3 Extensibility API Reference in Help.
Loading...
+ 203 hidden pages
Buy Points How it Works FAQ Contact Us Questions and Suggestions Privacy Policy Cookie Policy Terms of Use