Flex 4 in Action: Revised Edition of Flex 3 in Action

639 Pages·2010·33.87 MB·English

by  Dan Orlando

Revised edition of Flex3 in Action
LEX A
IN ACTION
Tariq Ahmed
Dan Orlando
John C. Bland II
WITH
AND Joel Hooks
ËÈ M A N N I NG
Flex 4 in Action
REVISED EDITION OF FLEX 3 INACTION
TARIQ AHMED
DAN ORLANDO
with JOHN C. BLAND II
and JOEL HOOKS
II
MANNING
Greenwich
(74ü w. long.)
For online information and ordering of this and other Manning books, please visit
www.manning.com. The publisher offers discounts on this book when ordered in quantity.
For more information, please contact
Special Sales Department
Manning Publications Co.
180 Broad St.
Suite 1323
Stamford, CT 06901
Email: [email protected]
©2011 by Manning Publications Co. All rights reserved.
No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in
any form or by means electronic, mechanical, photocopying, or otherwise, without prior written
permission of the publisher.
Many of the designations vised by manufacturers and sellers to distinguish their products are
claimed as trademarks. Where those designations appear in the book, and Manning
Publications was aware of a trademark claim, the designations have been printed in initial caps
or all caps.
@ Recognizing the importance of preserving what has been written, it is Manning's policy to have
the books we publish printed on acid-free paper, and we exert our best efforts to that end.
Recognizing also our responsibility to conserve the resources of our planet, Manning books
are printed on paper that is at least 15 percent recycled and processed without the vise of
elemental chlorine.
Manning Publications Co. Development editor: Cynthia Kane
Ü
180 Broad St. Copyeditor: Linda Recktenwald
Suite 1323 Proofreader: Maureen Spencer
Stamford, CT 06901 Typesetter: Dottie Marsico
Cover designer: Marija Tudor
ISBN 978-1-935182-42-9
Printed in the United States of America
1 2 3 4 5 6 7 89 10 - MAL - 15 14 13 12 11 10
brief contents
PART 1 APPLICATION BASICS 1
1 Making the case 3
2 Getting started 21
3 Working with ActionScript 44
4 Layout and containers 70
5 Displaying forms and capturing user input 96
6 Validating user input 117
7 Formatting data 138
8 MX DataGrids, Lists, and Trees 155
9 Using the Spark List controls 178
10 List customization 192
PART 2 APPLICATION FLOW AND STRUCTURE 219
11 • Events 221
12 • Application navigation 244
13 • Introduction to pop-ups 273
14 • Implementing view states 294
15 • Working with data services 316
vi BRIEF CONTENTS
16 • Objects and classes 341
17 • Custom components 358
18 • Creating reusable components 388
19 • Architectural design patterns 405
PART 3 THE FINISHING TOUCHES 441
20 • Customizing the experience 443
21 • Working with effects 469
22 • Drag-and-drop 502
23 • Exploring Flex charting 530
24 • Debugging and testing 557
25 • Wrapping up a project 579
contents
foreword to the first edition xx
preface xxii
acknowledgments xxv
about this book xxvii
about the title xxxii
about the cover illustration xxxiii
PART 1 APPLICATION BASICS 1
Making the case 3
1.1 Why are web applications so prolific? 3
1.2 The RIA solution 5
They all want it all 5 • RIAs to the rescue 5
How RIAs do it 6
1.3 The RIA contenders 7
Flex by Adobe 7 • Silverlight by Microsoft 8m JavaFXbySun
Microsystems 8 • AJAX—the last stand 9
1.4 Becoming acquainted with Flex 11
Taking advantage of Adobe Nash 11 • Flex and JavaScript can
play together 12 • The Flex ecosystem 12
vii
viii CONTENTS
1.5 How Flex works 14
The Flex languages 14 • Events, events, events 16
Limitations 17
1.6 What's new in Flex 4 18
1.7 Summaiy 19
Getting started 21
2.1 Flex on the cheap 21
Setting up the compile environment 22 • Setting up the editing
environment 24 • Next steps (ifyou're still interested) 24
2.2 Get serious with Flash Builder 25
Product and pricing ma trix 26 • Getting Flash Builder 26
2.3 Exploring Flash Builder 27
2.4 Views and perspectives 29
Out-ofthe-box'perspectives 29 • Switching perspectives 29
Customizing perspectives 30
2.5 Our first project—Hello World! 31
Create the project 31 • En tering code 33* Compile and
run 33 • Making it, real 33
2.6 Using design mode 34
2.7 Built-in reference and API documentation 35
Object-oriented languages and their APIs 35 • Accessing the API
Reference 36 • Perusing the API Reference 37
2.8 MXML and ActionScript in a nutshell 38
The stmcture of MXML 38 • How MXML and ActionScript
relate 39 • Events are handled by ActionScript 40
2.9 Summaiy 42
Working with ActionScript 44
3.1 Comments 45
Inline comments 45 • Block comments 45
3.2 Variables 45
Variable names 46 • Strict data typing 46 • Static versus
dynamic•typechecking 46 • Top-level classes 47
Special data types 48
CONTENTS ix
3.3 Loops 48
For (starting value; valid condition; increment) 48 • For (property
names in a tray/object) 49 • For each (item in array/object) 50
While (condition) 50 • Do while (condition) 50
3.4 Conditional statements (if statements and switches) 51
If., else 51 • Switch 53
3.5 Arrays 54
Indexed arrays 54 • Associative arrays 56
3.6 ActionScript tidbits 58
Braces 58 • Logical operators and shortcuts 59
3.7 Sneak peek at functions, classes, and packages 61
Your own functions 62 • Separating ActionScript to
individual files 65
3.8 Simple data binding 66
Life without binding 66 • Adding binding 61 • The binding
tag 67 * Making ActionScript variables bind able 68
3.9 Summary 69
Layout and containers 70
4.1 Spark versus Halo (MX) 71
4.2 Absolute layout 72
4.3 Constraint-based layout 74
Basic constraints 74 • Enhanced constraints 76
4.4 Automatic layout 80
Using the layout classes 81 • Getting spaced out 82
4.5 Variable and fixed sizing 83
Variable sizing 83 • Fixed sizing 83
4.6 Containers 84
Application container 84 • Canvas container 86
Group-based containers and SkinnableContainer 86
Panel container 88 • ApplicationControlBar container 89
DataGroup and SkinnableDataGontainer 90 • DividedBox,
HDividedBox, and VDividedBox containers 92 • Form
container 93 • Grid container 94
4.7 Summaiy 95
xi
CONTENTS
Displaying forms and capturing user input 96
5.1 The id attribute 97
5.2 Flex's catalog of controls 98
Text controls 98 • Date controls 101 • Numeric controls 102
Exploring Flex's buttons 105 • Picklist controls 109
5.3 Accessing the control's value 112
Passing values to a function 112 • Passing events to a
function 112 • Accessing properties directly 114 • Wh ich
approach to use 115
5.4 Summaiy 115
Validating user input 117
6.1 Overview of validation 118
6.2 Built-in validators 118
Validator 119 • StringVeilideitor 121
NumberValidator 122 • DateValidator 123
EmailValidator 124 • CreditCardValidator 125
Currency Validator 127 • PhoneNumberValidator 128
RegExpValidator 128 • SocicilSeciirityVcilidcitor 130
ZipCodeValidator 131
6.3 Real-time validation 132
6.4 Committed value validation 133
6.5 Pass-through validation 133
6.6 Scripted validation 134
6.7 Validation tidbits 135
Does a validator always check all criteria ? 135 • Validating what
was entered vs. criteria matching 135 • Controlling what triggers
validation 136
6.8 Summaiy 136
Formatting data 138
7.1 Built-in formatters 139
Formatter 139 • NumberFormatter 140
CurrencyFormatter 142 • DateFormatter 143
PhoneFormatter 146 • ZipCodeFormatter 147
SwitchSymbolFormatter 149
7.2 Real-time formatting 150
CONTENTS xi
7.3 Scripted formatting 150
Using a junction with a forma tter component 150
Using a function with a form atter class 151
7.4 Working with formatting errors 153
7.5 Summary 154
MX DataGrids, Lists, and Trees 155
8.1 MX List genealogy 156
ListBase and AdvancedListBase's properties 156
MX ListBase events 158
8.2 Understanding collections and the dataProvider 158
Feeding the da te/Provider 158 • Types of collections 159
Users of collections 159
8.3 Initializing collections 160
8.4 Populating collections 161
List 161 • HorizontalList 163 • TileList 164
DataGrid 166 • Tree 171
8.5 Interacting with MX List-based components 173
List events 173 • Passing the event to a junction 173
Passing data to a function 175 • Accessing the selected row
directly 176 • Binding to a selected row 176
8.6 Summary 177
Using the Spark List controls 178
9.1 Spark List genealogy 179
Identifying the proper component using namespaces 179
Item Tenderers with Spark List-based controls 179
9.2 Spark List-based controls 180
The ButtonBar control 180 • The Spark List control 181
The DropDownList control 183
9.3 Interacting with Spark List-based components 184
Default event dispatching on item selection 184
Th e In dexCh angedEven t object 185
9.4 Understanding Flex 4 List-based
component architecture 185
Class h ierarchy 185 • New Spark classes for List-based
components 185