Table Of ContentLearning Flex 4
Getting Up to Speed with Rich Internet Application Design and Development
Alaric Cole and Elijah Robison
Beijing • Cambridge • Farnham • Köln • Sebastopol • Tokyo
Learning Flex 4
by Alaric Cole and Elijah Robison
Copyright © 2011 Alaric Cole and Elijah Robison. All rights reserved.
Printed in Quebec, Canada.
Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472.
O’Reilly Media books may be purchased for educational, business, or sales promotional use. Online editions are also
available for most titles (http://my.safaribooksonline.com). For more information, contact our corporate/institutional
sales department:
800-998-9938 or corporate@oreilly.com.
Editor: Mary Treseler
Production Editor: Kristen Borg
Copyeditor: Genevieve d’Entremont
Technical Reviewers: Jodie O’Rourke and Russ Ferguson
Proofreader: Sada Preisch
Interior Designer: Ron Bilodeau
Cover Designer: Matthew Woodruff and Karen Montgomery, based on a series design by Mark Paglietti
Indexer: Lucie Haskins
Print History:
November 2010: First edition.
The O’Reilly logo is a registered trademark of O’Reilly Media, Inc. This book’s trade dress is a trademark of O’Reilly
Media, Inc. Many of the designations used by manufacturers and sellers to distinguish their products are claimed as
trademarks. Where those designations appear in this book, and O’Reilly Media, Inc., was aware of a trademark claim,
the designations have been printed in caps or initial caps.
While every precaution has been taken in the preparation of this book, the publisher and authors assume no responsibil-
ity for errors or omissions, or for damages resulting from the use of the information contained herein.
ISBN: 978-0-596-80563-0
[TI]
Adobe Developer Library, a copublishing partnership between O’Reilly Media Inc.
and Adobe Systems, Inc., is the authoritative resource for developers using Adobe
technologies. These comprehensive resources offer learning solutions to help devel-
opers create cutting-edge interactive web applications that can reach virtually any-
one on any platform.
With top-quality books and innovative online resources covering the latest tools for
rich-Internet application development, the Adobe Developer Library delivers expert
training,straightfromthesource.TopicsincludeActionScript,AdobeFlex®,Adobe
Flash®, and Adobe Acrobat® software.
Get the latest news about books, online resources, and more at adobedeveloper-
library.com.
Contents
Preface .... .......... ... .. .. . .. . .. ... ... ... ... .. ... ... .. .. xi
Chapter 1
Getting Up to Speed ... ..... ......... ... ... .. .. ... ... ... 1
What Is Flex? ................................................................. 1
What About AIR? ............................................................. 4
Where Flex Fits ............................................................... 5
Why Use Flex? ................................................................ 6
How Flex Compares to Other Technologies ................................. 8
When Not to Use Flex .......................................................11
Summary ...................................................................11
Chapter 2
Setting Up Your Environment ... .. ............ .. ... .. 13
Using Alternatives to Flash Builder ..........................................14
Introducing Flash Builder and Eclipse .......................................16
Running Your First Application ..............................................20
Creating a New Flex Project .................................................27
Summary ...................................................................29
Chapter 3
Using Design Mode ... ..... ......... ... ... .. .. ... ... .. 31
A Blank Slate: Your First Project ..............................................31
Adding Components to the Application ...................................36
Exploring Common Components ..........................................39
Modifying Properties Directly ...............................................44
Summary ...................................................................50
v
Chapter 4
Using Source Mode .... ............. ... ... .. .. ... ... ... 51
What Design Mode Does ...................................................51
Anatomy of a Flex Application ..............................................52
Adding Components in Source Mode ......................................54
Code Completion ...........................................................55
MXML in Depth .............................................................56
S, FX, and MX: Namespaces Explained ......................................60
Summary ...................................................................62
Chapter 5
ActionScript Basics for Flex Applications ..... ...... 63
Getting Ready ...............................................................63
Dot Notation ................................................................64
Inline ActionScript ..........................................................65
Assignment and Concatenation ............................................66
Functions ...................................................................66
Variables ....................................................................74
Data Types ..................................................................75
Objects ......................................................................78
Classes ......................................................................79
ActionScript’s Relationship with MXML .....................................85
Comments? .................................................................87
Summary ...................................................................88
Chapter 6
Debugging Flex Applications ..... ............ .. ... .. 89
Outputting Values to the Console Using trace() ............................90
Inspecting Event Properties with trace() ....................................93
Using Breakpoints ..........................................................95
Summary ................................................................. 101
Chapter 7
Adding Interaction with ActionScript .... ......... 103
Understanding Events .................................................... 104
Common Events .......................................................... 104
Researching Events ....................................................... 105
Listening for and Responding to Events .................................. 109
Collision! A Whirlwind of Events .......................................... 120
Summary ................................................................. 136
vi Contents
Chapter 8
Using Data Binding ... ..... ......... ... ... .. .. ... ... .. 137
What Is Data Binding? .................................................... 137
Applying Data Binding .................................................... 138
Two-Way Bindings ........................................................ 146
Handling Complex Data with Data Models ............................... 147
When Data Binding Isn’t Appropriate ..................................... 150
Summary ................................................................. 150
Chapter 9
Designing Application Layouts .... ............. ... . 151
Types of Layouts .......................................................... 152
The Display List ........................................................... 155
Sizing ..................................................................... 160
Controlling Whitespace in the Layout .................................... 162
Advanced Containers ..................................................... 165
Spacers and Lines ......................................................... 168
Alignment ................................................................ 171
Constraints-Based Layout ................................................. 173
Summary ................................................................. 176
Chapter 10
Creating Rich Forms ... ..... ......... ... ... .. .. ... ... . 177
Preparing a Form-Based Application ..................................... 177
Validating Data ............................................................ 184
Restricting Input .......................................................... 196
Formatting Input ......................................................... 197
Combining Restrictions and Formatters .................................. 199
Linking Formatters to Functions .......................................... 200
Summary ................................................................. 207
Chapter 11
Gathering and Displaying Data .... ............. ... . 209
Using List-Based Controls ................................................. 209
Using XML Data ........................................................... 217
Implementing List Selection .............................................. 229
Connecting to Search Results............................................. 231
Dragging and Dropping in Lists .......................................... 234
Creating Custom Item Renderers ......................................... 236
Working with External Data Services ..................................... 240
Summary ................................................................. 241
Contents vii
Chapter 12
Controlling Visibility and Navigation ..... ......... 243
Controlling Visibility ....................................................... 244
Navigation Components .................................................. 244
Creating a Photo Gallery Application ..................................... 256
Summary ................................................................. 268
Chapter 13
Working with View States .... ............. ... ... .. .. 269
Scenarios for States ....................................................... 269
Managing States in Design Mode ........................................ 271
Making a Login/Registration Form ........................................ 275
Applying States to the Search Application ............................... 279
Summary ................................................................. 284
Chapter 14
Applying Effects, Transitions, and Filters ..... ..... 285
Effects ..................................................................... 286
Transitions ................................................................ 297
Filters ...................................................................... 306
Summary ................................................................. 312
Chapter 15
Styling and Skinning .... ............. ... ... .. .. ... ... 313
Inline Style Assignments .................................................. 314
Style Blocks and CSS ...................................................... 316
External CSS ............................................................... 320
Skinning .................................................................. 326
Summary ................................................................. 343
Chapter 16
Making Data Dynamic: Linking Flex to the Server ... 345
Some Background Information ........................................... 345
The ContactManager Application ........................................ 347
Linking ContactManager to the Server Using the HTTPService Class .... 356
Summary ................................................................. 364
viii Contents