Learning 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
[email protected].
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 responsibility 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 developers create cutting-edge interactive web applications that can reach virtually anyone 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, straight from the source. Topics include ActionScript, Adobe Flex®, Adobe Flash®, and Adobe Acrobat® software. Get the latest news about books, online resources, and more at adobedeveloperlibrary.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. . . . . . . . . . . . . . Understanding Events.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Common Events.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Researching Events.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Listening for and Responding to Events.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Collision! A Whirlwind of Events.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
vi
Contents
103 104 104 105 109 120 136
Chapter 8 Using Data Binding.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . What Is Data Binding?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Applying Data Binding.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Two-Way Bindings.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Handling Complex Data with Data Models.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . When Data Binding Isn’t Appropriate.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 9 Designing Application Layouts.. . . . . . . . . . . . . . . . . . . . . Types of Layouts.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The Display List.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Sizing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Controlling Whitespace in the Layout.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Advanced Containers.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Spacers and Lines.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Alignment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Constraints-Based Layout.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 10 Creating Rich Forms.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Preparing a Form-Based Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Validating Data.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Restricting Input.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Formatting Input. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Combining Restrictions and Formatters.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Linking Formatters to Functions.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 11 Gathering and Displaying Data. . . . . . . . . . . . . . . . . . . . . Using List-Based Controls.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using XML Data.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Implementing List Selection.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Connecting to Search Results. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Dragging and Dropping in Lists.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating Custom Item Renderers.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Working with External Data Services .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
137 137 138 146 147 150 150
151 152 155 160 162 165 168 171 173 176
177 177 184 196 197 199 200 207
209 209 217 229 231 234 236 240 241 Contents
vii
Chapter 12 Controlling Visibility and Navigation. . . . . . . . . . . . . . . Controlling Visibility.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Navigation Components.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating a Photo Gallery Application.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 13 Working with View States. . . . . . . . . . . . . . . . . . . . . . . . . . . . Scenarios for States.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Managing States in Design Mode. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Making a Login/Registration Form.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Applying States to the Search Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 14 Applying Effects, Transitions, and Filters. . . . . . . . . . . Effects.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Transitions.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Filters.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 15 Styling and Skinning.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Inline Style Assignments.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Style Blocks and CSS.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . External CSS.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Skinning. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 16 Making Data Dynamic: Linking Flex to the Server.. . . Some Background Information.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . The ContactManager Application.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Linking ContactManager to the Server Using the HTTPService Class. . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
viii
Contents
243 244 244 256 268
269 269 271 275 279 284
285 286 297 306 312
313 314 316 320 326 343
345 345 347 356 364
Chapter 17 Deploying Flex Applications.. . . . . . . . . . . . . . . . . . . . . . . .
365
Deploying to the Web.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365 Deploying to the Desktop.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 386
Chapter 18 What Comes Next?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Third-Party APIs.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Print Resources. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Online Resources.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Certification.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Enfin.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Appendix A Creating a Development Environment.. . . . . . . . . . . .
387 388 390 391 393 394
395
Use WAMP (Windows) or MAMP (Mac OS).. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395 Add PHP Development Tools (PDT) to a Flash Builder Installation.. . . . . . . . 398 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Appendix B MySQL Basics.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Language Elements and Syntax.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . MySQL Statements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating a Database with phpMyAdmin.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Appendix C PHP Basics. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
409 410 411 414 419
421
Language Elements and Syntax.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 The PHP Scripts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424 Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429
Contents
ix
Appendix D Compiling Flex Applications on Linux Using the Command Line. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Install Flash Player 10. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Install Java. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Download the Flex 4 SDK.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create a Project Folder Structure. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Add an MXML File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Add Environment Variables.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Tweak the Project Configuration File. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Create a Reusable Compiler Script in Bash.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Compile and Test.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Index. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
x
Contents
431 431 433 434 435 436 436 437 439 440 440
441
Preface “Gentlemen, I am tormented by questions; answer them for me.”
—Fyodor Dostoyevsky
Something motivated you to pick up this book. Perhaps you want to start programming, but you’re not sure where to begin. If so, you’re in the right place, because Adobe Flex allows you to develop programs that run on the Web as well as the desktop. Or maybe you know a little about web development, but you’d like to start creating Web 2.0 applications? Because Flex applications run in Flash Player, Flex is a great framework for creating graphically rich websites, media players, mapping applications, and the like. Or better yet, maybe you already have some basic programming experience and you just want to learn a new language. If you fall into any of these categories, this book should meet your expectations.
Web 2.0 and the Rich Internet Application (RIA) Web 2.0 refers to a modernizing trend observed in web design in recent years. Websites characterized as Web 2.0 engage their visitors with interactive content. Wikipedia identifies Web 2.0 sites as “social-networking sites, blogs, wikis, videosharing sites, hosted services, web applications, mashups, and folksonomies.” The potential for user-driven content is another significant trait of Web 2.0. Whether or not you’ve encountered the term before, it stands to reason that you’re acquainted with the Web 2.0 interface. The Rich Internet Application (RIA) is a reaction to opportunities created by advanced web development technologies. Quick site responsiveness to user interaction is the defining trait of a RIA—in essence, it's user interaction without a full-page refresh. While RIAs refer to Internet applications that emulate traditional desktop applications, this interpretation can be somewhat misleading, as nothing says RIAs have to occupy the full screen. A RIA may be a simple widget, sized to fit a small content area within a larger page.
xi
N ot e
Middleware and database combinations could include ASP.NET and Microsoft’s SQL Server, PHP and MySQL, ColdFusion and Oracle, and many others. Plus, these combinations aren’t inseparable from one another. Many mixtures work quite well.
Perhaps you’re thinking, “What can I do with Flex, and where can it take me?” The short answer is this: “You can do a lot with Flex, and you’d be surprised where it might take you.” At the very least you can make simple widgets for websites or for your desktop computer. But if you’re willing to pursue the next level, which means learning a middleware and database combination, you can develop applications to handle a variety of Internet applications and software needs (Figure P-1). Also, Adobe Flex is seeing increasing demand as a framework for enterprise applications, so if you’re inclined to stay the course, Flex development could become a career (Figure P-2). The authors of this book didn’t learn to program exclusively in college or by following a direct path. Indeed, our own beginnings inspired this text and its objective of helping new developers learn the craft. As undergraduates, one of us studied anthropology; the other studied history. We first met in middle school, but we started programming for entirely separate reasons. Curiously, almost a dozen years elapsed before we realized how seriously we each pursued programming and software development. Pure curiosity motivated Alaric to learn to program; to him, computers were just one more thing to master and bend to his will. His first scripts were written as practical jokes to tease his friends. Discovering he had a knack for programming, he eventually dove into advanced projects that helped pay his way through school. Having mastered ActionScript early in his career, Alaric continues to consult on the newest projects using Flash and Flex. Elijah’s path to Flex followed a much different approach. He initially learned basic web design while working in tech support for Internet providers Arkansas.Net and Socket Internet. Later, in graduate school, he focused on geographic information systems (GIS) programming and ultimately created a hydrology analysis toolkit for Missouri State University’s Ozarks Environmental and Water Resources Institute (OEWRI). Elijah’s university experience taught him the development life cycle, and he eventually landed at VillaGIS, Inc., where he participates in Internet mapping and enterprise application development using Adobe Flex and AIR. So, where do our experiences merge with yours? It’s simple: we think Flex is cool, and we hope you will too. We know you can learn it, and we believe we can help you. And by teaching you what we’ve already learned, we’ll help you get started quickly and avoid some common pitfalls. Our mutual goal is helping you acquire the precious sense of accomplishment that is so essential for new developers.
xii
Preface
Figure P-1. Flex application showcase (http://flex.org/showcase-all)
Figure P-2. Searching “flex” at Dice.com (http://www.dice.com)
Preface
xiii
Who This Book Is For N ot e
Although this is admittedly an introductory text, we’ll give you a taste of advanced development in Chapter 16 by exposing you to a simple Flash-PHPMySQL implementation. It should be enough exposure to help you segue into more specific studies of either PHP and/ or MySQL server technologies.
We wrote this book as a guide for anyone learning Flex, but we focused on those completely new to software development. Even if you have no experience with the Flash IDE, web design, or programming in general, we’ll make you feel comfortable enough to jump in and tinker with our examples. We will explain basic programming concepts along the way, but this is not a recipe book for advanced projects. Our aim is helping new programmers get started with Flex. Our hope is that each chapter will leave you itching with questions, and that the following chapter will scratch that itch. If we succeed, perhaps you’ll step deeper into programming by taking an interest in advanced user interface (UI) development or distributed systems integration. Flex is a powerful programming environment, but we cover only the nuts and bolts. If you enjoy this technology and want to learn more, there are additional ways to further your studies, including several great books that discuss advanced Flex and ActionScript techniques, as well as blogs, tutorials, and code samples submitted by unsung heroes in the user community. So, if you’re new to programming, we’ll get you started with some fun examples, and as always, you’re encouraged to extend these examples and make them your own.
How This Book Is Organized This book is meant to be read cover to cover. Skills are taught progressively, so each chapter builds on the one preceding it. We’ll take a hands-on approach, guiding you through key concepts by building applications in stages. You’ll feel comfortable reading each chapter away from your computer, peeking at the code and considering how it affects the applications. Then, once you’ve absorbed the concept, you can revisit the chapter and construct the example, reinforcing the subject covered by the exercise. Of course, if a topic doesn’t interest you, just skip that chapter.
Companion Website You can download each chapter’s source code from the book’s companion website, http://www.learningflex4.com. So if you skip ahead, experiment, or if your code becomes out of sync with examples in another chapter, just visit the companion website and download code for the appropriate chapter. We also created a WordPress blog to serve as a forum, and we’ll likely post new examples there from time to time; find it at http://learningflex4. wordpress.com.
xiv
Preface
What This Book Covers Our aim is to give you a step-by-step tutorial through the basic aspects of Flex development. We chose topics designed to empower you and get you started without overwhelming you. We’ll familiarize you with the best tool for the job, Adobe’s Flash Builder. Then, we’ll introduce you to the three languages composing the Flex 4 framework: MXML, ActionScript, and FXG. Finally, once you’ve learned how to create applications, we’ll teach you how to deploy them and share them with others. We’ll have you start by installing Adobe’s Flash Builder 4, which is widely considered the best platform for Flex application development. Because Flash Builder is free to try for 60 days, we strongly recommend using it while you learn Flex. Later, once you’re comfortable with the framework, you can always revisit your options and experiment with alternative development tools. After discussing the Flash Builder authoring software, we’ll transition into application development by creating the obligatory “Hello World” example. Then, we’ll discuss the basics of MXML and ActionScript so you’ll understand how these languages work together in Flex. While you cut your teeth on the Flex languages, we’ll walk you through building three applications, and in the process you’ll learn how to manage event-driven interaction, create dynamic user interfaces, and cycle data through your applications. Of course we’ll also discuss “flashy” stuff, including effects, animations, and styles. Toward the end of the book we’ll demonstrate a Flex-PHP-MySQL integration, and the final lesson will demonstrate how to deploy projects to the Web or the desktop. As this is a beginners’ book, we will occasionally refer you to other sources we consider helpful with regard to deeper subjects. In fact, if you flip to Chapter 18, you’ll find a reasonably dense list of third-party code libraries, books, blog posts, and links to Adobe documentation, all of which might prove useful in your quest.
N ot e
Just an FYI, Adobe offers Flash Builder for free if you meet any of these criteria: • Student, faculty, or staff of an eligible educational institution • Unemployed software developer affected by a recessed economy • Event attendee possessing a special promo code This is a very cool campaign. No gimmicks. Check it out for yourself at https:// freeriatools.adobe.com/.
N ot e
It’s customary to create a “Hello World” example when learning a new programming language. As Scott Rosenberg describes them in Dreaming in Code (Crown Publishers), “‘Hello World’ programs are useless but cheerful exercises in ventriloquism; they encourage beginners and speak to the optimist in every programmer. “If I can get it to talk to me, I can get it to do anything!”
Typographical Conventions Used in This Book The following typographical conventions are used in this book: Plain text This style is used to describe menu navigation, such as Window➝Variables, and keyboard shortcuts, such as Ctrl-C (Windows) or Command-C (Mac OS). Italic This styling calls attention to new terms and concepts, much like any instructional text, and is used for emphasis; it’s also used to represent filenames and filesystem paths. Preface
xv
Constant width Constant width formatting introduces code, either inline among body text or as a block of example code: N ot e
This styling denotes tips, suggestions, or general notes. Wa r n i n g
This styling signals warnings and cautions.
Constant width bold This styling calls your attention to additions or changes within a block of code; it appears most often as a complex example grows:
Constant width italic This style indicates replacement by specific, user-supplied values.
Using the Code Examples This book is here to help you learn the craft. In general, you’re welcome to use examples from this book in your own programs and documentation. You do not need to contact us for permission, unless you’re reproducing a significant portion of the code. For example, writing a program that uses several chunks of code from this book does not require permission. Selling or distributing a CD-ROM of examples from O’Reilly books does require permission. Answering a question by citing this book and quoting example code does not require permission. Incorporating a significant amount of example code from this book into a product’s documentation does require permission. We appreciate, but do not require, attribution. An attribution usually includes the authors’ names, the book’s title, the publisher, the copyright holder and the ISBN. For example: Learning Flex 4, by Alaric Cole and Elijah Robison (O’Reilly). Copyright 2011 Alaric Cole and Elijah Robison, 978-0596-80563-0. If you think your use of code examples falls outside fair use or the permission given here, feel free to contact O’Reilly at
[email protected].
We’d Like to Hear from You Please address comments and questions concerning this book to the publisher: O’Reilly Media, Inc. 1005 Gravenstein Highway North Sebastopol, CA 95472 (800) 998-9938 (in the United States or Canada) (707) 829-0515 (international or local) (707) 829-0104 (fax)
xvi
Preface
We have a web page for this book, where we list errata, examples, and any additional information. You can access this page at: www.oreilly.com/catalog/9780596805630 To comment or ask technical questions about this book, send email to:
[email protected] For more information about our books, conferences, Resource Centers, and the O’Reilly Network, see our website at: www.oreilly.com
Safari® Books Online Safari Books Online is an on-demand digital library that lets you easily search over 7,500 technology and creative reference books and videos to find the answers you need quickly. With a subscription, you can read any page and watch any video from our library online. Read books on your cell phone and mobile devices. Access new titles before they are available for print, and get exclusive access to manuscripts in development and post feedback for the authors. Copy and paste code samples, organize your favorites, download chapters, bookmark key sections, create notes, print out pages, and benefit from tons of other time-saving features. O’Reilly Media has uploaded this book to the Safari Books Online service. To have full digital access to this book and others on similar topics from O’Reilly and other publishers, sign up for free at http://my.safaribooksonline.com.
Acknowledgments Like a good film, a good technical book is a product of the combined efforts of lots of dedicated people. While we’re the only authors of this book, we couldn’t have done it alone.
Thanks from Alaric Micah Laaker for that initial push and for all the insider tips. Elijah Robison for taking a chance. Sharif Zawaideh at http://globalimagesllc.com for contributing stunning photos that make the book shine. Justin Kelly for his reality checks (even though one of them bounced).
Preface
xvii
Michael Hoch for his un-boss-like understanding and patience when I came to work dreary from all-night writing marathons. Allen Rabinovich for going above and beyond the title of tech editor in the first edition. Mom and Dad for being a true mother and father, respectively. The O’Reilly team for their hard work and support of this book. They’re truly the best in the business. The Adobe Flex team for another solid release.
Thanks from Elijah Elizabeth Robison, my wife, for being so encouraging and understanding through another exhausting writing campaign. I couldn’t have succeeded without your support. Alaric Cole for being my favorite success story. Chris Giesey and Jesper Larsen, for helping me with the tough stuff. Ed Fisher, Curtis Copeland, Lori Giesey, Sean Hills, and everyone in management at VillaGIS—thank you so much for your encouragement throughout this process. Grant Tomlins, for contributing a few photos to the PhotoGallery application, and for scaring me senseless at least five times a week. Actually, thanks for putting up with such a cranky, exhausted carpooler for so many months. Matt Sabath for contributing his Linux know-how to Appendix D. Thanks, Matt. David Baclian (http://www.davidbenjaminphotography.com/) and John Van Every for contributing some cool photos to the PhotoGallery application. Brian Moseley for suggesting several of the quotations introducing the chapters, for being there that time at that place to do that thing, and for being one of the most genuine people I’ve known. Dave, Debby, and Aston Quinonez; Billy Ellison; the Brownfield family; Corey Nolan; Dillon Walden; John Wallace; Gabriel Scott Dean; Nick Peña; Matt Moser; Mike Wingate; Brian Fitch; Marcus French; Seth Harrell; Chris Person; Justin Besancon; James Geurtz; Trey Ronne; Jimmy Kribs; my first real coder-friend Mark Ewing; Danqsyle; the curvature of the Earth: and anyone else who encouraged me, inspired me, or otherwise tolerated my absence during the first eight months of 2010. Mark Morgan, Seth Cartwright, Craig Shipley, and Craig Earl Nelson for initially getting me into computers and cool software. Kenny Anderson, the first of my friends who ever mentioned “integers” in day-to-day conversation. xviii
Preface
Brandon Lee Tate, because I fully agree that Brian May is the most underrated guitarist of all time. Bob Pavlowsky, Xin Miao, Jun Luo, and William Wedenoja for all the doors you open at Missouri State. Richard and Margaret Van Every, two generous parents whom I cannot thank enough. Mike and Linda Gurlen for tolerating my eccentricities while I tested so many waters—and for being fine parents. Steve Robison for being legendary. Jodie O’Rourke and Russ Ferguson for providing initial feedback that resulted in a much better book. Sumita Mukherji and Genevieve d’Entremont for marshaling me through the copyedit process with more speed and precision than Ned Braden and Dean Youngblood combined. Kristen Borg for transforming the raw manuscript into something resembling a book—and for painstakingly colorizing the code for a couple picky authors. Mary Treseler, the coolest editor I know, and everyone at O’Reilly Media who made this thing happen. Finally, the teams developing Open Office, the GIMP, and IrfanView, whose fantastic software was used exclusively when writing the manuscript for this book.
Preface
xix
Chapter
1
Getting Up to Speed “Supposing is good, but finding out is better.”
In This Chapter
—Mark Twain
What Is Flex?
This chapter provides a background discussion of Flex, including what it is, what situations it’s suitable for handling, how it compares to other RIA technologies, and when you should not use it. If you’re not presently concerned with background information, feel free to jump ahead to Chapter 2, where we introduce you to the Flash Builder IDE and have you import your first project.
What Is Flex?
What About AIR? Where Flex Fits Why Use Flex? How Flex Compares to Other Technologies When Not to Use Flex Summary
Flex 4 is a software authoring framework designed for rapid development of rich, expressive applications. Depending on your goals for a particular project, Flex applications may be developed for the Web, for the desktop, or for both. Flex isn’t exactly a single computer language. Really, Flex 4 includes three languages—MXML, ActionScript, and FXG—and each satisfies a special purpose. Let’s briefly consider the three languages and see an example of each. MXML MXML is typically used to arrange an application’s user interface (UI), the components making up the application’s visible layout (Example 1-1). Similar to a description of a person’s appearance, MXML defines what for an application.
What Does MXML Mean? The acronym MXML was never formally defined. Some think it stands for “Maximum eXperience”. Others say it means “Macromedia XML.” Honestly, though, it’s all conjecture. Refer to it however you like.
1
What Is Flex?
N ot e
Don’t worry about fully grasping these examples. While we kept them simple and fairly self-explanatory, we just want you to see some basic MXML, ActionScript, and FXG code blocks.
Example 1-1. MXML: A VGroup container with two TextInput controls and a Button; the Button’s “click” event calls an ActionScript function
ActionScript
N ot e
ActionScript 3.0 is a modern objectoriented language, and it’s much more complex than we’re hinting at in this simple description. We’ll discuss the tenets of object-oriented programming later in Chapter 5.
For now, think of ActionScript as handling an application’s reactive qualities. Use ActionScript to provide step-by-step instructions when user interaction occurs or when something needs to happen (see Example 1-2). ActionScript describes how. Example 1-2. This ActionScript function takes the text value of one TextInput control and assigns it to the text value of another TextInput private function refreshOutput():void{ outputTI.text = inputTI.text; inputTI.text = ""; }
Flash XML Graphics (FXG)
N ot e
For more information on FXG graphics, jump to Chapter 14 and read the sidebar titled “FXG Graphics” on page 288. It won’t hurt to read it out of sequence.
Stated simply, FXG is an XML-based standard for sharing graphics between various Adobe products. FXG graphics can be created individually by a programmer, and simple graphics often are (see Example 1-3) However, the real benefit of FXG graphics is realized by creating complex graphics in design software such as Adobe Illustrator or Photoshop, exporting them as FXG files, and then importing them into Flex as reusable graphics objects. Example 1-3. An FXG Rectangle graphic with both a fill and a stroke creating the background and border for an MXML Group container
2
Learning Flex 4
What Is Flex?
Flex Is a Modern, Hybrid Framework Flex will feel natural to web developers familiar with Hypertext Markup Language (HTML) and JavaScript. Although different architecturally, the similarities should make it easy for experienced developers to get started. MXML is a markup language, and ActionScript is a scripting language. Like modern web design, Flex combines markup and scripting for application development.
Flex Is Flash Flex applications, like other Flash content, are deployed as SWF files (pronounced “swiff”). SWF files are compiled projects that Flash Player reads and renders onscreen, often in a browser. With Flex, you can create applications that are small enough to download quickly and that will, with few exceptions, look and act the same on any computer or operating system (Figure 1-1). 100
Percentage of Internet-enabled PCs
90
99.0
80
77.0
70 60
61.0
50
52.0
40 30
30.0
20
What Does Flex Look Like? Although there is a default appearance, the look and feel of a Flex application is not set in stone. Flex doesn’t have to look like Windows or Mac or anything else; rather, it’s easily styled and fully skinnable. In Flex development, styling refers to the assignment of basic colors, font characteristics, padding, and the like using Cascading Style Sheets (CSS). Stylesheets are simple, so style values defined in CSS can be reworked quickly. On the other hand, skinning implies broad change of a component’s look, shape, or behavior. In the Flex 4 designer-developer workflow, skinning often involves collaboration between a graphic designer and a developer to create a unique, “branded” look for an application. Finally, there are themes. If you do some quick digging on the Web, you can find a number of themes that let you rapidly change the entire look of your application with one fast action. With the right code, you could even let the users of your application select a preferred theme!
10 0
Adobe Flash Player
Java
Apple Quicktime Player
Adobe Shockwave Player
Real One Player
Figure 1-1. Flash Player reach
Chapter 1, Getting Up to Speed
3
What About AIR?
Flex Is the Flex SDK
What’s the Flash Platform? The Flash Platform is an overall term referring to several technologies composing the Flash “ecosystem,” which Adobe divides into five categories: tools, framework, servers, services, and clients. In the context of this book, we’ll be using Flash Builder—the tool—to develop applications in Flex—the framework—that will be handled at runtime by either the Flash Player or the AIR client. Other elements of the Flash Platform include Flash Professional, Flash Catalyst, Flash Media Server, LiveCycle, and BlazeDS. For more information, check out Adobe’s website: http://www.adobe.com/ flashplatform.
The Flex Software Development Kit (SDK) consists of an extensive library of UI components, a compiler, and documentation tools that facilitate development. To illustrate, creating a Button component no longer requires writing several lines of ActionScript code or dealing with timeline animation; Flex developers can simply type or use Flash Builder’s Design mode to drag and drop a Button wherever they want in an application. Thanks to the SDK tools, Flex developers can create applications using any text editor and the free compiler, but Flash Builder—Adobe’s luxury IDE— certainly provides a more comfortable development experience. In other words, it’s not necessary to create Flex applications in Flash Builder, but it helps. Because Adobe provides a 60-day trial of Flash Builder, we recommend using it while you learn Flex. Once you’re comfortable programming MXML and ActionScript, you can always switch to another IDE and/or commandline compiling.
What About AIR? Adobe Integrated Runtime (AIR) is the solution for bringing Flash and other web-based content to the desktop. With all the benefits of a RIA, why would anyone want to do this? Mainly, browsers have limitations—they don’t support drag-and-drop from the desktop, they have security restrictions, and users can’t access web applications when they don’t have an Internet connection. Also, many users like having an application in their Start menu or Dock for quick access. Here’s another reason AIR shines: it opens up desktop development to the seasoned web developer. Because of the broad demand for web development, many programmers are already familiar with HTML, JavaScript, and Flash, as well as the architecture of a complex website. With Adobe AIR, there’s no need to learn C# or Java just to create a standalone application; rather, familiar skills can be used to start creating desktop applications with a shorter learning curve. This is especially significant if you intend to make both web and desktop applications. Finally—and possibly the most compelling reason to use AIR—Flash applications are platform agnostic, which means your desktop application won’t be chained to a particular operating system. You won’t have to worry about developing for Windows, Mac, or Linux; you simply write a program in Flex or JavaScript, and anyone can run it as an AIR application.
4
Learning Flex 4
Where Flex Fits
Where Flex Fits The phrase Rich Internet Application (RIA) was coined by Macromedia (now Adobe) in 2002 to describe a trend toward more expressive web applications. In the beginning, HTML documents on the Web were just that: documents. They were text and, later, images and multimedia. This original client-server paradigm meant a user, by typing a URL in his browser, requested a document. With the Web being so far-reaching, savvy developers quickly learned to create server-based applications, programs anyone could access while online. Think of all the web forms you’ve filled out, where you type your name and address and hit the submit button. After a few moments, you’re greeted with an entirely new page telling you the form was submitted (or that you have errors to fix). This interaction describes the client-server model, where a “thin” client (a browser) gathers content and sends it back to a server for processing. Besides being slow, this approach wasted client resources at the expense of the server. The advent of JavaScript introduced a new potential—offloading work to the client. For instance, when configuring an item in an online store, it used to be necessary to send all calculations, such as shipping or sales tax, back to the server. With scripting, it became possible to calculate that information right on the client machine and update the page according to user interaction. This new approach marked the beginning of the “thick” client, which describes client-server relationships where the client shares processing responsibilities with the server. However, for developers wanting animations, transitions, and a richer experience, there was a need to load data without refreshing the entire page. Before Ajax entered the scene, the answer for many was Flash. Flash got its start as a solution for rendering animations and multimedia on the Web. As it matured, more and more interactive elements were added, and some people learned how to create Flash ads and games. Because Flash was quick, lightweight, and naturally rich, other developers started using it in complex applications such as data visualizers, product catalogs, and photo viewers. Because the Flash IDE was an animation tool, creating complex interaction was often difficult and a bit messy. The introduction of Flash Professional in 2003 improved the process by adding key features such as reusable components and data connectors, but it still left a lot to be desired, especially for enterprise developments and projects with large teams. Enter Flex. Building upon the power of Flash Player, Flex made it easy to develop rich user interfaces. With a more developer-centric model, it was easier for Java programmers and others to jump on board and start developing without the “what is this timeline?” confusion. Even better, the markupbased language made it easy to read and share code, which has definitely contributed to its growing success.
Chapter 1, Getting Up to Speed
5
Why Use Flex?
Why Use Flex? N ot e
A number of image editing utilities exist as web applications, and you can find several with a quick search. Most of the online editors we found appeared to be built with Flex (they ran in Flash Player), and they had decent user interfaces, but the FXG Editor by 7Jigen Labs stood out as our favorite, not because it had the most graceful UI or the greatest features, but because it provided such a rare, sought-after service—online FXG editing! If you don’t have Adobe Illustrator but want to create FXG graphics, this is the only free option we’ve found. You can access the FXG Editor by 7Jigen Labs at http://fxgeditor.7jigen.net/. They also make it available as an AIR application: http://labs.7jigen.net/2010/05/15/ fxg-editor-air-app/. What’s even better? 7Jigen made their source code available. Check it out someday when you’re feeling ambitious: http:// www.libspark.org/wiki/seven/fxgeditor/en.
“Why use Flex?” Did you ask yourself this question when you picked up this book? Flex was created to simplify development of web applications for Flash Player, but it has evolved into a broadly useful framework that lends itself to both web and desktop application development.
Flex Is for Applications The Flex framework was built to streamline application development, and as such, it includes a number of robust, customizable components that make designing and developing an application relatively easy. Flex programs can run in a web browser or be deployed as AIR applications, so Flex is ideal for writing an application once and delivering it to anyone.
Web Applications Defined A desktop application is any software you use on a personal computer, such as a web browser or a word processor. In contrast, a web application is any application you access through a web browser. Some applications may dually exist on the desktop as well as the Web. Email applications provide a familiar example. The desktop email client makes it easy to read archived email whenever you please, even when you’re offline, but web access creates the advantage of sending and receiving email from any Internet-ready computer, such as those in a classroom, a workplace, or a friend’s house. Now imagine if the desktop email client and the web portal were nearly identical, having the same look and feel, and even the same code base! Flex makes that possible.
For Easy Interactivity Flex makes it easy to create a high level of interactivity. It comes with support for data binding, a smooth event architecture, and a set of components with built-in methods for providing user feedback. Add to this the ability to quickly create beautiful effects and transitions, and it’s easy to see why Flex is getting so much attention from new developers.
For Development Speed There is no faster way to create such rich, interactive, uniquely skinned applications. Although everything you can do in Flex can be done in the Flash IDE, development in Flex reduces the process to a fraction of the time it takes in Flash. And with Flash Builder, development is faster still.
6
Learning Flex 4
Why Use Flex?
For Speed All Around Flex components are built in ActionScript 3.0, the latest version of the programming language for Flash Player, and Flash Player 10 was introduced in tandem with the release of Flex 4. Improved performance was one of the goals for Flash Player 10, and it shows. Although you should always make an effort to optimize your programs, you can feel confident that Flex 4 and Flash Player 10 “have your back” when it comes to handling graphically intense routines.
Because It’s Clean Flex supports separation of content and design by allowing external styling of applications. Because of this, you can quickly restyle an application by referencing a fresh stylesheet or by dropping in one of the many freely available Flex themes. Proponents of the Model-View-Controller (MVC) design pattern will find that Flex supports that architecture as well. Free libraries are available, such as the Cairngorm framework, which simplifies implementing MVC.
N ot e
For more information on the Cairngorm framework, start at http://opensource. adobe.com/wiki/display/cairngorm/ Cairngorm. While we’re on the subject of Flex frameworks, the Swiz framework is becoming increasingly popular. Its torch-bearers tout its lightweight simplicity, lack of socalled “boilerplate” code, and techniques for creating components to handle repetitive situations. If you can’t tell, we’re describing advanced Flex development, but in the spirit of learning, we recommend that you to look into it someday: http://swizframework.org/.
Because It’s Free Although you have to pay for a full copy of Flash Builder, the Flex framework is completely free. Therefore, you have the option of creating and editing code in your favorite text editor and compiling it using the free command-line compiler without paying a dime. The scope of this book is for beginners, and because Flash Builder makes it easy to get started, we’ll discuss development, compiling, and debugging using Flash Builder. Luckily, Adobe offers a free 60-day trial, so there’s no reason not to use Flash Builder while you’re learning Flex: http://www.adobe. com/products/flex.
N ot e
Only standard components are available to you in the free SDK. Fortunately, most Flex components are standard components. In comparison, advanced components, such as the data visualization (i.e., charting) components, require a Flash Builder license.
Because It’s Open Flex is also open source. This means all the component code is yours for the looking (and using and reusing in most cases). As a new developer, having access to the underlying code helps you learn. Open source also means Flex is yours. You can modify and improve the code as well as submit your modifications for inclusion in future versions. Because it's open source, a community has grown around extending and improving Flex. Scores of freely available advanced components have been created to extend the base set. As such, it’s usually possible to find special components, as well as tutorials explaining how they’re created from scratch.
Chapter 1, Getting Up to Speed
7
How Flex Compares to Other Technologies
For Data (and Fast) Flex offers built-in support for XML and Java objects, simplifying data exchange using these approaches. Flex also supports Action Message Format (AMF). With Java and ColdFusion servers, you can transmit compressed binary data over the wire to your Flex application, making data submission and retrieval much faster than text-based solutions. And for the freeware folks, you can also combine Flex with AMFPHP to send and receive serialized ActionScript objects to and from server-side PHP scripts.
Because It’s Beautiful Although Flex comes with a default theme that may suit your needs, an application’s look and feel is limited only by your imagination. Plus, because styles can be established using Cascading Style Sheets, you can change the look of your program with a single line of code. Flex provides a robust set of UI controls right out of the box, and with the wide variety of third-party components, you can create any interface you desire. With Flex Charting, you have a nice set of data visualization tools at your disposal. You can choose from bar charts, pie charts, high-low-openclose charts—you name it. Moreover, thanks to the ease of development in Flex, the number of third-party data visualization components is growing every day.
How Flex Compares to Other Technologies Flex is a hybrid technology, taking the best elements from modern programming languages while incorporating standards such as XML and (CSS). Because of this, Flex bears a familiar resemblance to several technologies.
Flash Like Flash, Flex applications run in Flash Player. However, aside from having the same underlying scripting language—ActionScript—these two technologies have some differences. At its core, Flash was created to run Timelinebased animations. Development features were added later. On the other hand, Flex was designed from the ground up to simplify application development. Users of Flash who have dealt only with the Timeline or simple scripting may find Flex a bit overwhelming at first, whereas Java or C developers will feel more at home.
8
Learning Flex 4
How Flex Compares to Other Technologies
There’s nothing you can do in Flex that you can’t do in Flash—technically, that is. It’s possible to develop a great application using just the Flash IDE. However, there’s always a right tool for a job, and Flex was engineered to help you create applications. Specifically, Flex supports data management, simple styling using Cascading Style Sheets, and an improved designer-developer workflow for advanced component skinning. Plus, Flex makes it easy to add rich animations and graphical effects to your programs. However, Flex is not a drawing framework or animation toolkit. So if you’re looking to create movies or animated cartoons, the Flash IDE is the right tool for the job.
C Languages Flash Builder is an IDE similar to Visual Studio, and with it you can write code, compile, debug, and deploy applications from a single piece of software. Flex’s MXML markup language may be unfamiliar at first, but it’s intuitive, so you can expect to learn it rapidly. And while everyone is entitled to her own opinion, some might say it’s difficult to beat MXML when it comes to designing an interface. Though Flex is based on a language different from C++, Objective-C, and so on, developers familiar with scripting languages should feel comfortable learning ActionScript. Because ActionScript is a class-based, object-oriented language, seasoned C++ and .NET developers should adapt quickly to Flex. However, C# developers may find the easiest transition, because that language shares a number of commonalities.
A Note About the Term “Flash" In this book, we’ll frequently mention “Flash,” a term that for many is tough to define. Depending upon the context, Flash can mean many things. For instance, Flash may refer to the Flash Integrated Development Environment (IDE), the animation and development tool that started it all. In other contexts, Flash may refer to the content you find on the Web— the animations, advertisements, or applications, which are compiled SWF files running inside a browser. In yet another capacity, Flash is an umbrella term describing the technology built upon Flash Player, the plug-in that makes it possible to view all this stuff on your computer. Out in the wild, you’ll hear “Flash” used in various contexts, but in this book, we’ll try to keep things consistent. When we say “Flash,” we’re referring to the underlying technology requiring Flash Player. When we discuss the development software, we’ll say the “Flash IDE” or the “Flash authoring tool.”
Java/Java FX Flex is similar to Java and the Java Swing platform. For one, ActionScript is similarly structured—it inherits the concept of packages, and its syntax is nearly identical. MXML poses the biggest difference, but as you’ll discover, it’s easy to learn. Because Flash Builder is built on Eclipse, many Java programmers will already be comfortable using the IDE. Java, like Flex, also allows for application deployment to either the Web or the desktop. However, the ubiquity and small size of Flash Player compared to the Java SDK makes Flex applications available to a wider audience. A lot of Java developers are learning Flex, and a lot of projects that might have been built in Java are moving to Flex.
HTML/JavaScript/Ajax Flex was built after the web explosion, and for this reason its design features a number of commonalities to traditional web development. Most notably, Flex couples a tag-based language (MXML) with an ECMA-compliant language (ActionScript). Web programmers with knowledge of HTML and XML
Chapter 1, Getting Up to Speed
9
How Flex Compares to Other Technologies
will quickly absorb MXML, and because JavaScript syntax is so similar to ActionScript, web developers proficient in JavaScript will transition easily to ActionScript. Behind the scenes, MXML and ActionScript have a different relationship to one another than HTML and JavaScript, but on the surface, their interaction will make sense to most traditional web developers. Ajax (Asynchronous JavaScript and XML) and Flex have several similarities, and developers of either technology can be downright religious when it comes to identifying the favorite. Both Flex and Ajax allow developers to create responsive web applications that avoid clumsy, full-page reloads. Regarding their differences, Ajax is “leaner” than Flex, as it doesn’t require a framework download before the application is available to the user. However, strict browser settings can cripple Ajax applications, leaving users confused as to why the application isn’t working. Like with Flex, several third-party Ajax libraries have emerged, and the Ajax libraries tend to be more mature than their Flex counterparts; the Google Maps API comes to mind in this respect. In Flex's favor, MXML/ActionScript code is arguably easier to write and maintain than Ajax code, and the Flash Player provides superior support for graphics and animation, including charting and data visualization. However, Ajax is more suitable for applications that need to load quickly, and this is especially true if the application will be graphically lightweight.
Silverlight/XAML Silverlight is Microsoft’s answer to Flex; in fact, it shares the XML-based markup paradigm coupled with a choice of programming languages. In this way, knowing Silverlight will definitely help in learning Flex, and vice versa. With Flex, thanks to the Flash plug-in, you can expect your programs to perform almost identically anywhere they’re deployed. Silverlight also attempts to offer cross-platform compatibility using a browser plug-in, and although the Silverlight plug-in is larger, its reach is growing. Like Flex, Silverlight offers several advanced controls and layout containers; however, because Flex is open source, the number of third-party Flex components has the potential to increase at a greater pace.
OpenLaszlo OpenLaszlo is a popular open source framework using Scalable Vector Graphics (SVG) and XML/JavaScript to build RIAs. As such, developers comfortable with this framework will surely make an easy adjustment to MXML and ActionScript.
10
Learning Flex 4
Summary
When Not to Use Flex Flex is a great technology, and many will find it solves issues that have plagued past development. However, it’s not for everyone. If you’re looking to create simple animations and don’t want to write any code, a Timeline-based animation utility might be a better choice. Because Flex requires a component framework, its applications often result in larger file sizes than custom Flash or ActionScript-only applications. However, in many cases, a slight increase in size may be worth the reduced development time. If you don’t want simple widgets or small applications to be weighed down by the framework, there are some solutions. For instance, it’s not necessary to use the Flex components or even MXML to create Flex widgets. It’s completely possible to create an ActionScript-only project and compile it using the Flex compiler, and if this is your intention, Flash Builder is a great tool for such projects. If your project requires a lot of richly formatted text and basic user interactions, you might be better off using HTML/Ajax. While Flex has decent support for HTML, it may be insufficient for some projects. However, if you want to reserve the option of deploying to the desktop via Adobe AIR, Flex might become the better choice, as AIR has native support for the full gamut of HTML. If you only intend to develop websites with loads of text, just use HTML.
Summary Hopefully, now you have a better idea of what Flex is all about. While Flex was created to simplify web application development for Flash Player, Flex has become a key player in the world of rich applications for the Web and the desktop. Since a Flex UI can be created rapidly using MXML and CSS, and because an application’s appearance and scripted functionality are easily separated, Flex helps simplify exchanges between designers and developers working collaboratively. You’ve seen how Flex compares to other technologies, and you’ve learned what Flex is good for as well as when it’s not the best choice. If Flex is the tool you’re looking to learn, the following chapters will get you rolling. The next chapter jumps right into the basics of using Flex and Flash Builder.
How Do I Know It’s a Flex Application? With the explosion of Web 2.0 and the RIA, the lines have blurred between what’s possible in HTML and what’s reserved for Flash. Just a few years ago, if you saw a fancy transition or animation, you could be sure it was Flash. Now, though, it’s tough to tell just by looking. One trick to test whether a site or widget was created using Flex is to right-click (Control-click on a Mac) some area of the application. If the content is Flash or Flex, a context menu will appear noting “About Adobe Flash Player” at the bottom. Although this test can guarantee content is running in Flash Player, it doesn’t confirm it was built using Flex. For that, unfortunately, there’s no sure method, because folks have built some pretty sophisticated applications using just the Flash IDE. However, once you get a feel for a few Flex applications and become familiar with the most common components, you can generally spot a Flex application simply by seeing it and interacting with it.
Chapter 1, Getting Up to Speed
11
Chapter
2
Setting Up Your Environment “Give me six hours to chop down a tree, and I will spend the first four sharpening the axe.”
In This Chapter
—Abraham Lincoln
Using Alternatives to Flash Builder
Adobe’s Flex 4 SDK is free, and with it, you can use any text editor to create Flex applications. However, if you adopt this approach you’ll be working without code completion, and you’ll need to compile applications using the SDK’s command-line compiler. This doesn’t exactly describe a course of least resistance. That said, Adobe’s Flash Builder 4 is designed to simplify Flex development. Regarded as the premier IDE for Flex development, Flash Builder provides a customizable code editor, code completion, informative framework documentation, automated compiling, debugging tools, and utilities that assist team-based development.
Introducing Flash Builder and Eclipse Running Your First Application Creating a New Flex Project Summary
Almost anyone who’s familiar with Flex and who has used another editor to develop Flex applications will tell you Flash Builder is the IDE of choice. Of course, there are other options available to you, which we discuss next, but this book will introduce Flex development using Flash Builder. If you don’t have Flash Builder yet, it’s easy to download it from Adobe at http://www.adobe.com/products/flex/. If you prefer to use your own editor and compile via the command line or other alternatives, you can download just the Flex SDK. However, we recommend starting with a copy of Flash Builder because Adobe will give you 60 days to try it with no limits. (Actually, they’ll put a watermark in any chart you create, but besides that, all the features will be there.)
N ot e
A Software Development Kit (SDK) is a collection of library code, sample files, documentation, and/or utilities that enable development in a particular language or for a special purpose.
You have two options when downloading and/or buying Flash Builder: Adobe’s standalone Flash Builder installation or their Eclipse plug-in. We discuss these options later in the section titled “Flex Flavors” on page 16.
13
Using Alternatives to Flash Builder
N ot e
An Integrated Development Environment (IDE) is an application designed to help developers write programs. A basic IDE should provide code editing, compiling, and debugging tools, whereas an advanced IDE might offer additional luxuries such as code completion, version control, bug tracking, and project management utilities. For more information, see the sidebar titled “More About the IDE” on page 18. N ot e
If you want to try alternative editors, you’ll likely need the Flex 4 SDK. Visit the following site to get the Flex 4 SDK directly from Adobe: http://opensource.adobe.com/wiki/display/flexsdk/ Download+Flex+4.
N ot e
Shortly before going to press, we found a blog post that explains how to integrate the Flex 4 SDK into Eclipse; see http://www.seanhsmith.com/2010/03/29/ flex-for-free-setting-up-the-flex-4-sdkwith-eclipse-ide/. It’s worth your while to check it out, although it seems you’ll still be without code completion.
Using Alternatives to Flash Builder If your copy of Flash Builder has expired, or if you’re just being stubborn, there are alternatives available. Since Flex’s MXML is an XML-based language, you’ll benefit from an editor that offers XML markup, such as tab indent and color-coded syntax. Moreover, to avoid undue frustration, any editor that can automate Flex compiling should be considered ahead of those that don’t. With this advice in mind, check out this list of alternative editors that may interest you. FDT (Windows, Mac OS) FDT is a professional IDE for Actionscript and Flex projects, and some might say it’s superior to Flash Builder. As always, you’re welcome to form your own opinion, as Powerflasher Solutions—the makers of FDT—allow you to evaluate their product for 30 days. Visit http://www. fdt.powerflasher.com/. FlashDevelop (Windows) FlashDevelop is a popular open source IDE for ActionScript developers, and you can use it to edit and compile Flex applications as well. Like Eclipse, FlashDevelop is free, but since it offers code completion and automated compiling (see the sidebar “Configure FlashDevelop to Use the Flex 4 SDK” on page 15), it gets our vote as the best free alternative. Visit http://osflash.org/flashdevelop. Eclipse (Windows, Mac OS, Linux) Eclipse is a free, open source IDE with an impressive following in the Java community. You can use Eclipse to develop in many different languages, and even better, you can configure Eclipse to compile Flex applications using the Flex 4 SDK. Visit http://www.eclipse.org/. TextMate (Mac OS) TextMate is a great text editor with built-in support for ActionScript, but if you try it, look for a Flex “bundle” that will simplify working with MXML. Visit http://macromates.com/. Notepad++ (Windows) Notepad++ is a neat editor to have in your arsenal. Besides support for HTML and XML, one of its advertised features is the ability to implement third-party code completion utilities. See http://notepad-plus.sourceforge. net/uk/site.htm. TextPad (Windows) Touted as a powerful editor that’s easy to get up and running, TextPad is a good choice for coding MXML by hand in Windows. Visit http://www. textpad.com/.
14
Learning Flex 4
Using Alternatives to Flash Builder
Configure FlashDevelop to Use the Flex 4 SDK FlashDevelop is a reasonable alternative to Flash Builder, especially for a free IDE. Unfortunately, FlashDevelop is available only for Windows, but if you’re a Windows user, it’s easy to configure FlashDevelop to use the Flex 4 SDK, and doing so enables both code completion and automated compiling (Figure 2-1). Assuming you’ve installed FlashDevelop (we used version 3.2.2 RTM) and downloaded/unzipped the Flex 4 SDK (we unzipped our SDK to C:\flex4sdk), point FlashDevelop at your SDK folder by selecting Project➝Properties, and then clicking the Compiler Options tab. Under the Compiler Options tab, locate the field “Custom Path to Flex SDK” and assign a value pointing to your unzipped Flex 4 SDK, for example, C:\flex4sdk.
That will be enough to enable code completion and compiling, but you’ll need to do one more thing to make sure FlashDevelop properly launches a compiled application. The easiest solution is to configure FlashDevelop to call Flash Player, which you can do by selecting Project➝Properties, and then clicking the Output tab. Under the Output tab, locate the “Test Movie” option at the bottom of the dialog and select “Play in popup.” That’s all there is to it! Now you can use this free tool to create and compile Flex 4 applications.
Figure 2-1. Creating a Flex 4 application with code completion using FlashDevelop and the Flex 4 SDK Chapter 2, Setting Up Your Environment
15
Introducing Flash Builder and Eclipse
N ot e
For more information about using the command line to compile Flex code, check out Adobe’s documentation on the Flex 4 compiler API at http://help.adobe. com/en_US/Flex/4.0/CompilerAPI/ flex_4.0_compilerapi.pdf. While we’re on the subject of Adobe documentation, we’d be remiss if we didn’t point you toward the Flex Developer Center at http://www.adobe.com/devnet/ flex/?view=documentation. It’s loaded with various resources to help you learn and grow as a Flex developer. Check it out. Bookmark it, even.
After using a bare-bones editor to write code, you’ll still need to compile that code before you have a functioning application. Because Flex is an open platform, new compiling options become available every day, so a quick search might reveal just what you need. Realize that most third-party solutions will implement the free command-line compiler, which you can interface using either a command prompt (Windows) or terminal window (Mac OS, Linux). By the way, the command-line compiler does provide some debugging support, so you won’t be flying blind; however, the editor-and-compiler approach is definitely not for the weak-willed.
Introducing Flash Builder and Eclipse Once you have a copy of Flash Builder, go through the program to familiarize yourself with the most important features. Flash Builder is built on the popular and open source Eclipse IDE. Eclipse is powerful, but it might not be the most beautiful or user-friendly program ever developed, so we’ll hold your hand through the process of discovering what’s what.
Flex Flavors Flash Builder comes in two flavors: a standalone installation or an Eclipse plug-in. What’s the difference, you ask? Well, branding. If you’re already familiar with the Eclipse IDE and you develop in several languages and frameworks, Adobe’s Flash Builder plug-in for Eclipse is more appropriate for your needs. However, if Flex development is your primary interest and/or you’re unfamiliar with Eclipse, be good to yourself and get Adobe’s standalone installation. The standalone installation comes with several great features, such as a Flex icon for your Dock/Start menu, a Flex splash screen, and…well, you get the idea. We’ll use the standalone version in the book examples, so if you’re using the Eclipse plug-in, there will be situations when the screen looks different and menu navigation isn’t identical.
16
Learning Flex 4
Introducing Flash Builder and Eclipse
What If You’re Using Linux? There’s no indicator that Linux will see a fully qualified Flex 4 IDE from Adobe any time soon. The Flex 3 SDK was supported by an Eclipse plug-in, which has been loosely maintained as an alpha release with a trial license, and you can still acquire it and use it (Figure 2-2). Unfortunately, the Flex 3 plug-in can’t be manipulated to handle the Flex 4 SDK—for one thing, code completion didn’t work, and that’s a relatively serious shortcoming.
Figure 2-2. Using Adobe’s Flex Builder 3 for Linux plug-in for Eclipse (Europa only), an alpha release with an uncertain future That doesn’t mean Linux users are entirely without options. Other IDE utilities can be configured for developing Flex 4 against the free SDK, but presently, we’re not aware of any tools that offer code completion. If you know of something, please strike up a discussion on the companion website’s WordPress forum at http://learningflex4.wordpress.com/. One such option is to use the NetBeans IDE along with a plug-in called FlexBeans, which provides functions for registering the Flex SDK (Figure 2-3). Out of the box, versions of the Flex 3 SDK work well, compiling without a hitch, but it seems you’ll have to do some tinkering in ANT, a Java-based compiler, to properly compile against Flex 4.
Finally, you might find an occasional blog post from a grinder tearing it up with the free command-line compiler. Surprisingly, we had more luck creating a simple Flex 4 application using Ubuntu 10.04, gedit (a built-in editor), the Flex 4 SDK, and Adobe’s command-line compiler (Figure 2-4). If you’re interested in trying this approach, check out Appendix D, Compiling Flex Applications on Linux Using the Command Line, which was written by Matthew Sabath, one of Elijah’s coworkers at VillaGIS.
Figure 2-3. Using the NetBeans IDE with its FlexBeans plug-in to create Flex 3 applications
Figure 2-4. Going commando with Linux, Adobe’s Flex 4 SDK, and command-line compiling
Chapter 2, Setting Up Your Environment
17
Introducing Flash Builder and Eclipse
More About the IDE Again, IDE stands for Integrated Development Environment, and the term describes software made just for making other software. In other words, an IDE is a programmer’s tool for writing code, organizing project files, debugging applications, and deploying finished products—an all-in-one development solution. Familiar IDEs include Microsoft Visual Studio, Xcode, Eclipse, and countless others. You’ll find mentions of the Eclipse IDE more than a few times in this book in regard to Flash Builder. We’ll often refer to Eclipse when we’re talking about a feature that isn’t specific to Flash Builder but is part of the default Eclipse IDE, which Flash Builder extends. So what’s the deal with Eclipse? By default it comes packaged as a Java editor, but it can handle just about anything you throw at it if you’re using the right plug-ins. A lot of Java programmers use Eclipse as their main development environment, but it’s also great for JavaScript, HTML, C, Python, and many other languages. Eclipse also supports source control when you’re sharing and maintaining code with a team. And if you’re interested
in connecting to a Subversion (SVN) repository, check out Subclipse, a plug-in you can use with Eclipse and Flash Builder. Find it at http://subclipse.tigris.org/. Adobe chose to build Flash Builder on top of Eclipse because of the IDE’s popularity with Java programmers, and because the basic package offered a number of mature features. This allowed Adobe to concentrate less on building an entire IDE and more on extending features specific for Flex development. Plus, since Eclipse was already cross-platform, they didn’t need to create separate code bases for Mac, Windows, and Linux. Eclipse is most useful for developments involving multiple languages, because the one IDE can manage everything. More to the point, since Flash Builder uses Eclipse as its foundation, you’re free to pick and choose value-adds from the wide assortment of Eclipse plug-ins and use them inside Flash Builder. This opens some more doors, and you’ll probably appreciate it sooner or later. And just in case they ever release Trivial Pursuit, the IT edition, Eclipse was built in Java, and it was inherited from an IBM project, becoming fully open sourced in 2001.
Flash Builder Installation Once you have a copy of Flash Builder, open the installer and follow the onscreen instructions. It may ask you a few questions about where you’d like to put your installation and things of that nature; unless you’re picky, just trust the defaults. When everything’s finished, open Flash Builder, and you should be greeted with a screen that looks like Figure 2-5.
Figure 2-5. The Flash Builder Start Page
18
Learning Flex 4
Introducing Flash Builder and Eclipse
This is the Flash Builder Start Page, essentially a browser window running in Eclipse (yes, it has its own browser). The start page offers the “Build an App in an Hour” tutorial for you to get your hands dirty in Flex, and it’s a great introduction. Since you have this book, it’s not necessary, but you might enjoy roaming through some of the materials. Notice the navigation options at the bottom of the page, specifically those for Flex Documentation, Developer Center, and Tour de Flex (Figure 2-6). If you’re in a hurry to get rolling, you’ll probably blow right past these, but don’t forget to hit them up sometime. Between the Flex Documentation and the Developer Center, there is a ton of information you’ll appreciate as a developer, particularly as the concepts start to crystallize. We know you’re anxious to get started, so let’s take a peek at the Flash Builder tools and jump into our first exercise.
Figure 2-6. Don’t forget to check out the developer documentation from time to time. There’s a wealth of information in those resources.
Your Editor at a Glance Eclipse and Flash Builder utilize panes and panels to organize the various tools into so-called perspectives aimed at specific development tasks. Panes refer to very specific Flash Builder utilities, whereas panels are used to dock similar panes. Perspectives refer to particular arrangements of panes and panels. With your fresh install, Flash Builder should open directly into the development perspective. Take a look around. The Package Explorer is where you’ll work with code files, assets (e.g., images, sounds, etc.), and third-party libraries. The Outline pane shows a tree-style visualization of an application’s structure, and the Problems pane will announce any and all complaints— such as bugs and warnings—that the Flex compiler may find in your code. Luckily, because you’re starting fresh, you don’t have any problems yet! We’ll go into more detail about the workbench tools later, but for now let’s have some fun and run an application.
N ot e
The development perspective and the debugging perspective are the perspectives in which you’ll spend most of your time. A perspective is just a particular pane and panel layout arranged to support a specific development activity, such as developing or debugging. In addition to these two preset perspectives, Flash Builder allows you to create and save your own perspectives.
Chapter 2, Setting Up Your Environment
19
Running Your First Application
N ot e
You can always add additional Flex applications into an existing project, but a Flex application can’t exist outside of a Flex project.
Running Your First Application Note that everything is a project in Eclipse/Flash Builder. This means you’ll never have just one standalone file; instead, you’ll have a group of files that work together to make things happen. So, to create a Flex application, you’ll first need a Flex project. In this case, though, we’ll start by importing an existing project.
Importing a Project Archive For the first exercise, we’ll import an existing project into Flash Builder. Wa r n i n g
Web addresses pointing to resources on the companion website are case-sensitive. Please keep this in mind. We apologize in advance if this creates any confusion.
We've provided a project for this exercise on the book’s companion website, so all you need to do is download it. To get started, point your browser to the following URL and save the resulting ZIP file anywhere you please: http://learningflex4.com/code/ch2/GettingStarted.zip Once you’ve downloaded the ZIP file, go to Flash Builder and, as shown in Figure 2-7, choose File➝Import Flex Project (FXP). The Import Flash Builder Project dialog box should then appear (Figure 2-8). This dialog box can take either a zipped project archive or an unpacked (i.e., a copied and pasted) project folder and import it into the Flash Builder workspace.
Figure 2-7. Launching the Import dialog
20
Learning Flex 4
Running Your First Application
In this case, make sure to choose the File option, because we’ll be importing the compressed project directly. Then, click Browse and locate the ZIP file you just downloaded (Figure 2-8). Of course you can import the project anywhere you want, but for this example we chose to import into the suggested default workspace. Notice that the default workspace is nested rather deep in the file structure. We’ll spend some more time discussing this in the next chapter, but for now, we want to get you rolling, so just click Finish to finalize the import.
Wa r n i n g
If your browser unzips the archive when you download the file or if you’ve unzipped it yourself, the Import Flex Project Archive command won’t work. Instead, you’ll want to use the Import Existing Projects into Workspace dialog box, which we’ll explain later in the section “Importing an Existing Project.”
Figure 2-8. Preparing to import a project archive
After a few moments, you’ll see your project in the Package Explorer pane. Click the arrow next to the project name in the Package Explorer (Figure 2-9) to expose the contents of the folder. You’ll see even more folders, but one of them contains the main application. Which one is it? Well, it’s a common practice among programmers to include the source code in a folder called source or src. So, expand the src folder as shown in Figure 2-9, and you’ll see the application file GettingStarted.mxml.
Chapter 2, Setting Up Your Environment
21
Running Your First Application
Figure 2-9. Your first project
Opening the Application You’ve downloaded a project and imported it into your workspace, and now you’re ready to look at the code. Double-click the GettingStarted.mxml file, and it’ll open in Flash Builder’s Source mode. Flash Builder provides two editor views you can use for development: Source mode and Design mode. Source mode allows you to create and modify the written code of your project. Alternatively, Design mode allows you to visually compose your project by dragging and dropping components, tweaking their styles and arrangements, and previewing the overall application layout as you build it. The buzz phrase for this approach is What You See Is What YouGet, or WYSIWYG. Go ahead and jump into Design mode by clicking on the Design button, as shown in Figure 2-10.
Figure 2-10. Switching between Source mode and Design mode
22
Learning Flex 4
Running Your First Application
You might be a little surprised by what you see in Design mode (shown in Figure 2-11). The project does look unsettling but there are perfectly good reasons why. We promise it’ll look better when you run it.
Figure 2-11. The GettingStarted project, a bit half-contrived as of yet
What you read in the next paragraph may not make much sense, but encountering some terms now might prime you to absorb their meaning later when we cover the topics more thoroughly. So, if you can stand a little jargon, here’s a description of the layout calamity you’re seeing in this first application: “The vertical position (y attribute) of the Label, “My First Flex Application”, is calculated at runtime (when the application is launched) by a data binding (a dependent value) to the vertical position of the HGroup container that holds the Button and the two TextInput controls.”
If you’re curious about which line of code is handling that so-called “data binding” we just mentioned, jump to Source mode using the keyboard shortcut Ctrl-tilde (~) and look for the statement y="{hgroup.y - 25}" in the following code block:
We tried to make it easy to identify the line of code responsible for the data binding. Again, don’t worry too much about that previous explanation. We just wanted you to get a quick dose of jargon. This stuff will gradually gel together. For instance, we’ll cover data bindings properly in Chapter 8, but for now, let’s run this and see what happens.
Chapter 2, Setting Up Your Environment
23
Running Your First Application
Running the Application Now that the GettingStarted.mxml file is open in Flash Builder, you can run the application in a browser by selecting Run➝Run GettingStarted or by clicking the green, circular “Run” button in your main toolbar, shown in Figure 2-12. The Run button will launch a browser window after a few moments, and you’ll see our first Flex application running in an HTML page (Figure 2-13).
Figure 2-12. The Run button
Figure 2-13. The first app, running, and with plenty to say
24
Learning Flex 4
Running Your First Application
Everything Is a Project So now that you’ve imported your first project and run it, let’s delete it. Yes, all that hard work, and you’re going to throw it all away! Not to worry, though: you can always bring it back. In Flash Builder, deleting a project from your workspace doesn’t mean you have to delete the actual source code, and just because source code exists on your hard drive doesn’t mean it’s available to Flash Builder. Let’s discuss how this works; just follow along. First, select the project in the Package Explorer—that is, select the top folder titled GettingStarted, and don’t worry about the files or folders under it. Next, choose Edit➝Delete. You’ll be prompted with a dialog box asking whether you’d like to delete the contents of the project (Figure 2-14). Be sure to select “Do not delete contents” (which should already be selected) because this will keep the project files on your machine.
N ot e
We’ll frequently tell you how to access commands using the menu bar, but many of the most common commands are available as context menus in Flash Builder. For example, to delete the project, you could also right-click the project folder (Control-click on Mac OS) and choose Delete from the context menu.
Figure 2-14. Deleting a project
Now you can check your filesystem for the project folder. By default it’s under your documents folder and Flash Builder 4, or wherever you originally placed the project. The project should still be there, and you should see a directory structure similar to what was displayed in the Package Explorer. So, what’s the point? Well, it shows you that a project in Flash Builder maintains its own identity. Just because you have some Flex code lying around doesn’t mean Flash Builder can use it—not until you reference it as a project. You can try this by going to the src folder and double-clicking the GettingStarted.mxml file on your machine. It might open in a text editor, or your computer may not even know what to do with it. You might expect it to open in Flash Builder, but that’s just not the case. If you want to use it, you have to return to the Import dialog and reference the containing project folder so that Flash Builder can understand how to handle it. Let’s do that, actually, and import the project again.
Chapter 2, Setting Up Your Environment
25
Running Your First Application
The Flash Builder Workspace We’ll occasionally refer to workspaces in Flash Builder. A workspace is any folder on your system that you choose for saving projects and preference settings. You can have more than one workspace, but the one you create when you install Flex will become your main workspace, and by default it’s located under your documents folder and Flash Builder 4. If you want to create a separate workspace, which is reasonable when you have multiple unrelated projects, you can select File➝Switch Workspace➝Other and create a new one. Here’s a cool tip concerning workspaces: you can copy an entire workspace from one system running Flash Builder and paste it into another system running Flash Builder, and doing so will transfer not only source code from the original system, but editor settings as well (i.e., custom syntax colors, the arrangement of your panes and panels, and any custom perspectives you may have created). In fact, we do this sort of thing frequently when situations require us to work from home or while on the road. This trick can also be really handy if you’re a student and you want to keep a workspace intact while shuffling back and forth between a lab computer and your home installation of Flash Builder (the Educational License, of course).
Importing an Existing Project Importing projects is one of those tasks you’ll be doing frequently over time, so it’s best to become comfortable with the routine. You might think you already know how to import a project. Previously, you imported a zipped project archive, which is a project in a compressed state. To import an unpacked project—such as a project you previously deleted from your workspace but never archived, or a copied and pasted project—you’ll use a slightly different approach. In Flash Builder, select File➝Import Flex Project (FXP) just as before. However, this time choose the Project folder option from the “Import project from” section. This will allow you to import an existing, uncompressed project. Click Browse, and choose the GettingStarted folder (Figure 2-15) you deleted in the previous section. Now click Finish (Figure 2-16), and Flash Builder will import the project.
Figure 2-15. Finding the GettingStarted project in the default workspace
26
Learning Flex 4
Creating a New Flex Project
Figure 2-16. Importing a local, unpacked project
Creating a New Flex Project Of course, when you’re creating real Flex applications, you’ll usually be creating new projects from scratch. As such, we’ll end this chapter by creating a new project that we’ll return to in the next chapter. To create a new project, go to the File menu, and choose New➝Flex Project. A dialog box will pop up, giving you options for your project. Give the project a name in the “Project name” field. In this case, call the project MyNewProject.
Wa r n i n g
This dialog box has three sections: Project location, Application type, and Server technology. “Project location” lets you modify where the project folder and files will be stored in the local filesystem. The “Project location” value will default to your workspace folder, but you can change it by deselecting “Use default location” and entering your own. For this exercise, just keep the default workspace.
You can’t use spaces or funky characters in your project name—only letters, numbers, the dollar sign ($) character, and the underscore (_) character are allowed. Eclipse is very good about warning you, though, so rest assured you won’t get away with anything.
The second section is “Application type.” This is where you get to choose between developing for the Web and developing for the desktop with Adobe AIR. In this example, you want your application to run in a web browser, so leave the default type, which is a web application.
Adobe AIR Adobe AIR is getting a lot of recognition lately, and it’s for good reason. With AIR, you can develop desktop applications that provide a Start menu/Dock icon, access to the local filesystem, drag-and-drop support, and several other features you’d expect in a native application. While Flex is useful for creating programs that run in a browser, it’s also great for creating media-heavy desktop applications.
N ot e
Each Flex project has its own folder, and by default, the project folder typically has the same name as the main application file, but this isn’t essential. If you want a new project to be in a different folder, that’s fine; if you want it outside your workspace, such as in a folder on your desktop, that’s cool, too.
Chapter 2, Setting Up Your Environment
27
Creating a New Flex Project
N ot e
You can always change project settings later. This dialog box is just a tool to help you get started. If you ever want to change something, simply select your project in the Package Explorer, and then open Flash Builder’s Project menu and choose Properties. Alternatively, you can right-click (Windows) or commandclick (Mac OS) a project in the Package Explorer and choose Properties from the context menu.
The third section, “Server technology,” refers to server technologies you might want to use. This setting helps you connect your Flex application to a server environment, such as a development server or a production server. For this simple example, just select None as the server type, because we’re not ready to set up a remote data service. Later, if you want Flash Builder to recognize an external server environment that will support your Flex application, this is the place to start. You’ll notice the Next, Cancel, and Finish buttons at the bottom of the dialog box. We’re in the mode of keeping it simple, so just click Finish to accept the remaining defaults for your new project.
The Structure of a Flex Project Now that you’ve created a few projects, it’s a good time to go over what all these folders mean. Every Flex project has a bin folder, an html-template folder, a libs folder, and a src folder. Table 2-1 describes the purpose of each of these folders, and Figure 2-17 shows the project folder structure in the Package Explorer pane. Table 2-1. The Flex project folder structure Name
Short for
Purpose
bin-debug
binary debugging
Holds the compiled code (the SWF file). For Flex web applications, this also contains an HTML container and supplemental files. For AIR applications, it holds the application descriptor file as well.
html-template
HTML template
Holds the template HTML file that generates the container HTML file (web applications only).
libs
libraries
Holds files for additional compiled libraries.
src
source
Holds the source code. This can be .mxml files, .as files, and an application descriptor file (AIR only).
N ot e
It’s not necessary to preserve these folder names. If you’d prefer to call the source folder source instead of src, or if you’d like to omit it altogether and keep your main MXML file in the top level of the project, that’s fine. You can arrange this when creating a new project by clicking Next instead of Finish in the New Project dialog box, or you can change the settings later by right-clicking the project and choosing Properties. In the project properties dialog, modify your default folders by going to the Flex Build Path section and changing the Main source folder and the Output folder.
28
Learning Flex 4
Figure 2-17. Your new project in the Package Explorer
Summary
Summary In this chapter you learned the basics of managing projects in Flash Builder. You also learned how to import, open, and run existing applications, and we discussed the folder structure of a Flex project. Now that we’ve covered some Flash Builder essentials, you’re ready to have some fun and build something. In Chapter 3, we expand on what you just learned by creating a simple layout in Design mode. Oh, and as for the last project you created, go ahead and delete it. You can delete the code, too.
Chapter 2, Setting Up Your Environment
29
Chapter
3
Using Design Mode “Deal with the difficult while it is yet easy; deal with the great while it is yet small.”
In This Chapter
—Lao Tzu, Tao Te Ching
A Blank Slate: Your First Project
Design mode is Flash Builder’s What You See Is What You Get (WYSIWYG) editor, and it can be a good place to start a new project. Design mode provides tools to visually compose an application layout, which you do by dragging and dropping components directly into the application. Design mode also provides utilities for assigning color and style properties to components; this is particularly helpful for thematic color selection, as you can see changes taking shape.
Adding Components to the Application
This chapter introduces you to Design mode by touring the Flash Builder workbench and reviewing some common components and their properties. In the process, we’ll also assemble a Flex application layout.
Exploring Common Components Modifying Properties Directly Summary
A Blank Slate: Your First Project If you don’t already have Flash Builder open, go ahead and launch it. Inside Flash Builder, open the File menu and choose New➝Flex Project (Figure 3-1).
31
A Blank Slate: Your First Project
Figure 3-1. Starting a project N ot e
The default application file created by Flash Builder will inherit its filename from your project name. If this could be inappropriate—for example, if your project has multiple interfaces, such as a public-facing frontend and an administrative backend—you can change the application filename later by rightclicking it (Windows) or control-clicking it (Mac) and selecting “Rename.”
When the New Flex Project dialog appears, enter “HelloWorld” for the Project Name. Now set the project location. Flash Builder will suggest your default workspace, which is rather deep in your folder structure. For example, the default path for Windows is under the current profile’s Documents and Settings folder. As such, you may wish to change the project location to something closer to the drive root. You’re welcome to keep the default setting, but we’ll often use the workspace C:\Flex4Code. Below the workspace, each project will exist in a unique directory, so in this case we’ll use the project location C:\Flex4Code\ HelloWorld. If you endorse this arrangement, your New Project dialog should look like Figure 3-2. We’ll accept default values for the rest of our configuration, so choose Finish to complete the setup. Flash Builder will take a moment to construct the guts of the project, and when it’s finished, you’ll emerge in Source mode. We cover Source mode in the next section, so let’s jump over to Design mode. Two specific buttons toggle between Source and Design modes, and they are located side-by-side, directly above the code editor. The code editor is the dominant, central window, titled HelloWorld.mxml. Click on the Design button to change views (Figure 3-3).
32
Learning Flex 4
A Blank Slate: Your First Project
Figure 3-2. Configuring the project
Figure 3-3. Triggering Design mode
Chapter 3, Using Design Mode
33
A Blank Slate: Your First Project
N ot e
Flash Builder is built on top of the popular Eclipse IDE. If you’ve used Eclipse before, you’ll be comfortable using Flash Builder. Another benefit of the Flash Builder–Eclipse relationship is the potential to weave Eclipse plug-ins into Flash Builder. Check out one called Web Tools Platform at http://download.eclipse.org/ webtools/downloads/. N ot e
If you have multiple monitors, take advantage of them by undocking the perimeter panes and dragging them to a different monitor. This will increase the screen area available to your editor. Undock panes by dragging and dropping them wherever you want. Alternatively, right-click a pane, select Detached, and then drag it elsewhere.
Behold Design mode, and your blank slate. We’ll add some components momentarily, but first let’s glance clockwise around the Flash Builder workbench. The Flash Builder workbench consists of several toolkits scattered around the perimeter of the application. These toolkits, called panes, are grouped together with other panes having a similar theme or purpose—altogether, we call them panels. By default, the panels are docked to the edges of the Flash Builder application window. Front and center is your editor, titled HelloWorld.mxml. The Editor pane will always reveal the filename of whatever file you have open. If more than one file is open, multiple tabs will appear across the top of the Editor pane. The right panel contains the States pane, and below it, the Properties and Appearance panes. The bottom panel includes the Problems, Data/Services, and Network Monitor panes. Finally, the left panel contains the Package Explorer, Outline, and Components panes. See Figure 3-4.
Wa r n i n g
If you want to restore your panes and panels to their original positions, open the Window menu and select Perspective→Reset Perspective. This can also be helpful if your multimonitor system is hiding a pane you believe to be visible outside of your screen area, which can happen unintentionally as a result of changing the primary monitor.
34
Learning Flex 4
Figure 3-4. The Flash Builder workbench in Design mode
We’ll explore the Components, Properties, and Outline panes in this chapter. Because the other panes are consuming valuable screen real estate, go ahead and close them.
A Blank Slate: Your First Project
Start with the States pane. Close it by left-clicking the “x” in the pane’s title bar. Also close the entire bottom panel (Problems, Data/Services, and Network Monitor). If you prefer, you can minimize the panel, but we won’t be using it. If you want to restore a pane you’ve closed, you can recover it at any time by opening the Window menu and selecting the pane by name. Let’s shift our attention back to that blank slate. Presently, the sole representative of your first project is a lonely Application container (Figure 3-5). The Application container should be selected by default, but if it’s not, left-click anywhere near the middle of your Editor pane to select it. You can tell the Application container is selected when it’s highlighted by a light-blue border with “handles” in the corners and along the perimeter.
Wa r n i n g
Flash Builder remembers your custom arrangements for each perspective (we briefly discussed perspectives in Chapter 2). At times, you will notice differences between our screenshots and the arrangement on your system. This is certainly the case if you undock your panes. On the whole, however, we’ll try to maintain a default appearance.
Figure 3-5. The selected Application container
We need to tweak a few characteristics of our Application container before we add any controls to it, so find your Properties pane, which should be docked on the right. Locate the Width and Height property fields and change both values to 100%. Clear the values for Min width and Min height. This should yield a nice, form-fitting Application container for your Flash Builder editor (Figure 3-6).
Chapter 3, Using Design Mode
35
Adding Components to the Application
Figure 3-6. The Application container with percentage-based sizes
Now we’re ready to add some components.
Adding Components to the Application As mentioned previously, Design mode lets us add Flex UI components to a project by dragging and dropping. You’ll find the common controls and containers in the Components pane.
Dragging and Dropping Components In the Components pane, scroll down until you notice the Label control, and then drag it into your application and drop it somewhere near the topleft corner. Once dropped, the control should remain selected. Remember, the blue border and the presence of handles indicate that a component is selected. With the label selected, return to the Properties pane to make some changes. The Properties pane offers access to the properties for the currently selected component, and it has three different views: Standard, Category, and Alphabetical. The Properties pane should be in Standard view by default (Figure 3-7). Standard view is good for quick designing, and it’s subdivided into three more categories: Common, Style, and Size and Position. Under the Common theme, set the label’s id to titleLabel, and set its Text property to “My First Flex 4 Application”. 36
Learning Flex 4
Adding Components to the Application
Below the Style heading, you can modify typography characteristics such as font family, size, styling, alignment, and color. Let’s change some of these. We set the font family to Arial, kept the size at 12, and changed the style to bold. Feel free to take liberties. But something’s vexing us. In the Size and Position area, the X and Y properties were casually set by dragging and dropping the label control into the Application container. If you like to see agreeable, symmetric numbers in situations like these, change the X and Y values to something like 50 and 50. Let’s keep adding components. Scroll down in the Components pane until you find the Layout controls, and drag an HGroup container into your editor (don’t drop it just yet). We want to drop the HGroup near to and below the label. As you approach the label, notice that snapping indicators will attempt to influence your drop (Figure 3-8). Maybe this is good and maybe it isn’t. If you’re irritated by the snapping cues, they’re easily disabled by holding the Alt key while you drag the component through the layout. Alternatively, you can permanently disable snapping by opening the Design menu and unchecking the option Enable Snapping. In keeping with the old adage “build it fast and fix it later,” we recommend using snapping while in Design mode, and then fine-tuning component positioning later in Source mode.
Figure 3-7. A detached Properties pane in Standard view N ot e
Figure 3-8. Snapping the HGroup container to the label component
You can temporarily disable snapping by holding the Alt key while dragging components around the layout in Design mode. For a permanent solution, disable snapping by opening the Design menu and unchecking the option Enable Snapping.
Chapter 3, Using Design Mode
37
Adding Components to the Application
Don’t Put a Label on That! Several controls use a label property to identify their purpose or function. The Button component uses a label property, and so do CheckBox, RadioButton, and Panel. However, the Label control uses a text property in the same manner, and it’s limited to a single line of text. Therefore, if your UI requires a multiline description, consider using a Text, TextInput, or TextArea control rather than several labels.
When you find a suitable place for your HGroup container, drop it and change its width to 80%. Keep the default height value; we’ll return to it in a moment. Next, drag a Button control into your HGroup container and drop it. Flash Builder will force the button into the top-left corner of your HGroup. That’s fine. While the button remains selected, set its id property to speakButton, and change its label property to “Say Something”. We can now return to our HGroup to fix its height property, but we need to select it before the Properties pane will recognize its attributes.
Selecting Components in the Outline Pane When you want to select a component in Flash Builder, there are two approaches. In Design mode, you can always left-click on a visible component to select it. However, if a component is out of sight (either invisible or masked by a component in front of it) or if many components are cluttered together, the Outline pane offers a more elegant selection mechanism. Let’s demonstrate. Unless you’ve moved it or closed it, you should find the Outline pane docked on the left, and it should be in the same panel as your Components pane. If you closed it, you can get it back by opening the Window menu and selecting Outline. Within the Outline pane, left-click on your HGroup container. This should select the HGroup in your Editor pane (Figure 3-9). You can now tweak its attributes in the Properties pane. Go ahead and delete the height value, and then watch the HGroup control conform to the height of its child component.
Figure 3-9. A detached Outline pane and selected HGroup container
Fathers and Sons In the Flex/Flash (and MXML/ ActionScript) parlance, any component referred to as a child is implied to be contained by another component. In this example, our Button is a child of the HGroup. However, if we nest our HGroup within a different component—such as a VGroup—the HGroup would be a child with children of its own.
38
Learning Flex 4
It may be difficult to perceive the real benefit of the Outline pane in the context of this example. However, large applications requiring a plethora of components are much more difficult to navigate by clicking around in the editor. If you relentlessly pursue the clicking-around approach, sooner or later you’ll unintentionally resize elements or drag them ever-so-slightly out of place. So don’t forget the Outline pane; it’s there when you need it. We’re almost done with our first user interface. Only one more component remains to complete it: a TextInput control. Return to your Components pane, find the TextInput control, and drag it into the HGroup. It should snap directly to the right of the button. While it’s still selected, set its id property to speakTI and the width property to 100%. Notice how the TextInput control adjusts to fill its HGroup container. That’s it! You just completed your first user interface, as shown in Figure 3-10. In the next chapter, which discusses Source mode, we’ll add code to make this application interactive. For now, let’s break to discuss the common components and their properties.
Exploring Common Components
Figure 3-10. The completed HelloWorld user interface
Exploring Common Components A component is simply a reusable framework object that can be dropped into your application. The very term “component” implies a smaller part of a larger system. The components available to you in Flex come preloaded with helpful properties and methods, and what’s more, they’re easy to style.
Classes, Objects, Packages, and Namespaces At some point we’re likely to refer to components, controls, containers, navigators, and nonvisual components collectively as classes and/or objects. These terms come from the object-oriented programming parlance, and they refer to simplified, compact code elements created for specific purposes. In this context, Flex UI components were created to handle communication between the software and a user. A package can be as simple as a few classes (MXML or ActionScript files) saved together in the same folder. However, a package may also be as complex as a folder containing many packages, which may contain packages of their own. Finally, a namespace is merely a unique pointer referring to a specific package. Flex 4 has three native namespaces: Spark (s:), Halo (mx:), and the Language (fx:) namespace. We’ll discuss namespaces more thoroughly in Chapter 4, and object-oriented programming concepts in Chapter 5.
Chapter 3, Using Design Mode
39
Exploring Common Components
Most components fall into one of four categories, and you’ve already worked with two of them: Controls and Containers. Navigators and Charts are the other two. Components can be separated further based on their belonging to a package. For example, older Flex components are called Halo or mx components, and new Flex 4 components are called Spark components. What follows is a brief summary of the common components you’re likely to use. We’ll discuss the controls first, then containers and navigators.
Controls Controls are interactive components that typically perform some function— a Button clicks, a ComboBox presents a menu, a CheckBox can be selected and deselected, etc. (Figure 3-11). The HelloWorld application required three controls: a Label, a Button, and a TextInput. Here are the common controls you’re likely to use: Button
This is pretty simple: the Button is a clickable control that looks and acts like a physical button. Checkbox
The CheckBox control is much like a Button, only it can be toggled to retain a selected or deselected state. ComboBox
The ComboBox provides a compact drop-down menu of options for selection. The selectedItem (object) or selectedIndex (integer) properties let you determine the current selection. Image
Figure 3-11. Flex controls in the Components pane
The Image component lets you load external images. Compatible data types include GIF, JPEG, PNG, and other SWFs. Use the source property to set a reference to an image. Label
The Label is a simple single-line identifier. List
The List component literally displays a list of items. It allows for item selection and provides scroll bars if there are too many items for the component’s allotted size. ProgressBar
The ProgressBar is designed to show download progress. Pair it with an Image component by binding its source property to an Image control’s id property, and you’ll see the download progress. 40
Learning Flex 4
Exploring Common Components
RadioButton
The RadioButton is most useful when grouped with other RadioButton controls, so that selecting one RadioButton deselects the others. The easiest way to arrange this control is by dragging a RadioButtonGroup into a project, which opens a dialog box that helps you create the set of RadioButton controls. Text
Use the Text control when you want to display large chunks of text but don’t want to have scroll bars. This control will set its size to accommodate its text property. TextArea
Use a TextArea when you want text that may exceed the available space. It will add scroll bars as needed. TextInput
Use the TextInput control to collect single-line input. With a TextInput, you can get or set its text property (this applies to all text components, such as Text, TextArea, and RichTextEditor).
Layout Containers Layout containers, or simply containers, are visual components you use to arrange your UI. Specifically, they organize and align controls in relationship to one another. Layout containers may also be used to arrange other containers. For instance, it isn’t uncommon to see a VGroup with several nested HGroups, or vice versa. Application
You don’t even have to think about this one. All Flex applications have an instance of the Application component as their root. It’s a type of container with special constructs that make it perform as the base for everything else. By default, it lets you place components anywhere you like, but you can also make it arrange your components vertically or horizontally. Group
The Group container is one of the lowest-level containers in Flex. It’s stripped down and optimized for performance. The Group class lends itself to leaner SWFs (leaner = smaller file sizes); however, it accomplishes this by compromising styling potential—it’s not skinnable. If you want to skin a Group, check out SkinnableContainer instead.
N ot e
If you’re accustomed to Flex 3, get ready for some surprises, because the Flex 4 Layout containers changed rather dramatically between Halo and Spark. For example, the popular Canvas was abandoned, and anything formerly called a Box (HBox/VBox) is now called a Group (HGroup/VGroup).
BorderContainer
This container supports border and background styling characteristics. If you miss the Canvas container, use a BorderContainer with a BasicLayout.
Chapter 3, Using Design Mode
41
Exploring Common Components
Form
This Halo container makes it easy to create an HTML-like form layout. Pair it with FormItem components, and it will stack them vertically with left alignment. The new Spark component set does not include a counterpart for the Form class, but the Halo class has a few more miles to go before it sleeps. FormItem
Another Halo holdover, the FormItem container takes a control such as a TextInput and provides it with a label. You’ll set the label property on the FormItem container itself. When you place a few of these inside a Form container, everything will line up automatically, like those HTML forms you’re familiar with. HGroup
The HGroup organizes its children horizontally. If you want to change the default spacing between components, increase or decrease the gap property. VGroup
The VGroup is identical to the HGroup, except the VGroup imposes a vertical alignment. Panel
The Panel is a window-like container, complete with a title bar. By default it uses a basic layout, meaning components placed inside it must specify x and y coordinate positions. You can change the layout to horizontal or vertical as well, which means you can arrange the child controls any way you like.
Navigators Navigators are a hybrid component designed to handle content visibility. They work much like a layout container and a control mixed together. Navigators take a set of containers and make only one visible at a time, and because of this, they’re useful for designing modular interfaces. Both the Halo and Spark packages offer navigation components, but in Flex 4, you’ll find that Halo components still have an important role in content navigation. TabNavigator
This navigator can take a set of Halo containers—such as the Canvas, Panel, HBox, etc.—and make it so only one is visible at a time. This component provides a set of familiar tabs with labels corresponding to nested
42
Learning Flex 4
Exploring Common Components
containers, and the visible container depends on the selected tab. The TabNavigator can take Spark containers such as the BorderContainer, Group, or Panel, but Spark containers need to be nested within a NavigatorContent container. Accordion
The Accordion is similar to the TabNavigator, except it stacks containers vertically and animates a transition between content selection. The Accordion might be used along with a group of Form containers, separating them into sections and providing a sense of flow through the dataentering process.
N ot e
One big difference between Halo and Spark containers is this: Halo containers provide a label property, and Spark containers do not. A container with a label property is necessary for navigators to handle their hal.
ViewStack
The ViewStack is actually an invisible navigator container that’s used to provide navigation functionality through other means. Later in this book, we’ll demonstrate how the ViewStack works as the dataProvider for the Spark navigators—TabBar, ButtonBar, and LinkBar. TabBar
The TabBar is a Spark navigator. You’ll find it looks quite similar to the TabNavigator, only it’s a little sleeker. It takes a Halo ViewStack with nested Spark NavigatorContent containers. The ViewStack should be given a unique id property and assigned to the dataProvider property of the TabBar. ButtonBar
This navigator is assembled just like the TabBar, and its functionality is nearly identical. The appearance of the ButtonBar resembles several Button components placed side by side in an HGroup container with a gap of 0. LinkBar
The LinkBar is set up exactly like the TabBar and the ButtonBar; its appearance resembles text hyperlinks separated by pipe (|) characters. MenuBar
The MenuBar is an odd duck. It’s a Halo control that operates like a familiar drop-down menu, and its menu selection is handled by an itemClick event that the MenuBar listens for. Although you’ll find the MenuBar under the Navigators category in your Components pane, this control doesn’t take containers as nested content; rather, you’ll need to feed it an appropriate dataProvider. XML data is often used as the dataProvider for the MenuBar control.
Chapter 3, Using Design Mode
43
Modifying Properties Directly
Nonvisual Components In addition to the components discussed in the previous sections, Flex also provides several nonvisual components to handle functionality that isn’t inherently visual. Nonvisual components cannot be dragged from the Components pane and dropped into your application. Examples of nonvisual components include data objects, formatters, validators, and various service components. For instance, the HTTPService class provides methods for connecting to remote data. Similarly, data objects returned by a server, such as an Array or an XMLList, would also be nonvisual components. You cannot use Design mode to add or modify nonvisual components, so you need to create them in Source mode, which we discuss in the next chapter. For now, though, let’s continue by discussing properties common to visual components.
Modifying Properties Directly As we learned earlier, you can modify properties of visual components in Design mode via Flash Builder’s Properties pane. We changed sizing characteristics, element positioning, element IDs, labels, etc. However, there is more to the Properties pane than the default Standard view.
Examining the Properties Pane Wa r n i n g
Heads up! The Properties pane doesn’t appear in Source mode. So, if you’re jumping back and forth between Design and Source modes, note that you need to be in Design mode to use the Properties pane.
The Properties pane should be docked on the right. If you don’t see it, you might need to reenable it by selecting Window➝Properties. As you select components in Design mode, the Properties pane will refresh to show the properties available to the selected component. So, if you select a Button component by clicking it or choosing it in the Outline pane, you’ll notice the Properties panel refresh to show s:Button in its heading area. It will also offer properties relevant to the Button class.
Standard view Standard view is the default view of the Flex Properties panel, and it populates with the most commonly used properties for each component, such as the label, id, width, and height attributes. Standard view is also useful for modifying the style characteristics of your components, such as the font, text decoration (bold, italic, underline, and so on), and transparency.
44
Learning Flex 4
Modifying Properties Directly
Category view Category view is an alternative view of the Properties panel. Category view organizes all a component’s properties into a hierarchical arrangement (Figure 3-12). This is similar to Standard view’s Common, Layout, and Style themes. However, in Category view, you can look through every property available to a component. It’s useful for finding a particular property quickly or for perusing the list of properties available to a selected component.
Figure 3-12. Flex Properties pane in Category view
Alphabetical view The final view available in the Properties pane is the Alphabetical view. This, like Category view, shows all properties available to a component. However, unlike the Category and Standard views, the properties are organized alphabetically, not thematically. It’s merely a list of styles and properties organized from A to Z. Alphabetical view is great when you know the name or the first few letters of the property you want to modify. It’s also useful for reviewing which properties have been assigned on a particular component.
N ot e
The Windows version of Flash Builder provides a quick way to get to a property when using Alphabetical view. Click on the Property column heading to select it, then type the first few letters of the property, and the list will scroll to the first match. This technique also works for other panes that have a large list of items. Unfortunately, this functionality doesn’t exist for the Mac version.
Chapter 3, Using Design Mode
45
Modifying Properties Directly
Common Properties All Flex visual components inherit from a base class called UIComponent. This class has several properties related to visibility, mouse and keyboard interaction, focus, sizing, and all the goodies you’d expect for visual interaction. Visual components such as buttons, text inputs, and containers extend this base component. Component extension refers to components that inherit properties and functions of a less-complicated (i.e., more abstract) component, and that have been expanded to include additional properties or functions geared for a special purpose. This is useful because once you learn the properties of a common component, you can anticipate when it may become useful to extend that component. What follows is a list of the most commonly used properties for the most common components, along with examples of each: id id (short for identifier) is a very important property because it’s the name you give to a specific instance of a component. If you’ve placed two buttons in an application, calling them “button1” and “button2” allows you to distinguish them from each other later in code. However, it’s better practice to use descriptive names based on the component’s purpose in your application; for example, “submitButton” and “refreshButton” tell us the real purpose of the component. It’s not essential to type an id yourself, because Flex assigns a generic id as necessary, but it’s recommended to do so.
N ot e
Use of x and y properties requires a parent container supporting a basic/absolute layout. The HGroup and VGroup containers will not recognize x and y property assignments to nested components, because their layout arrangements override explicit positioning (i.e., x and y) as well as constraint properties (i.e., top, bottom, left, and right). We’ll provide a better discussion of layout characteristics and component positioning in Chapter 9.
x
This property refers to the number of pixels a component displays to the right of its parent component’s left edge. For example, when a Button is declared inside a container, and that button’s x value is set to 20, the button will display 20 pixels to the right of that container’s leftmost edge.
y
This property refers to the number of pixels a component should measure down from the top of its parent component. The y attribute is similar to x, except that it references vertical position instead of horizontal position.
visible
This property controls whether an item is visible in the application layout. Setting visible to false will make an item disappear from view, but it will still maintain the same space. For instance, if we declare four
46
Learning Flex 4
Modifying Properties Directly
buttons inside an HGroup container, which aligns them horizontally, and if we make the second button invisible, the two buttons to its right and the one to its left will remain in the same place because the invisible button continues to occupy its position in the layout (Figure 3-13).
Figure 3-13. Button “Two” is invisible but still occupies layout space
includeInLayout
Setting a component’s includeInLayout property to false will cause a container to fully ignore that component when rendering its layout (Figure 3-14).
toolTip
A toolTip is a pop-up message that displays when the mouse cursor hovers over a component for a moment (Figure 3-15). It can help describe an item’s purpose. All Flex UI components support the toolTip property, so it’s easy to implement.
Figure 3-15. A Button with a toolTip
label
Not all components use labels, but many do. For a Button, a label is a no-brainer—it’s the text that displays on the button. CheckBox components use them similarly (Figure 3-16). Halo containers use labels, but Spark containers do not. For instance, the FormItem container will display a label, which can be used as a description of a field when paired with another control, such as a TextInput, in a Form. For other Halo containers, the label displays within navigation components. That is, when using a navigation component such as a TabNavigator, a Halo container’s label will display as the label of the tab that selects it.
N ot e
There is also a control called Label, which is used for single lines of text. The Label component doesn’t take a property called label; rather, it uses a property called text.
Figure 3-16. A CheckBox and a Button with their own labels
Chapter 3, Using Design Mode
47
Modifying Properties Directly
text
The text property refers to the text string displayed in text controls such as Label, TextInput, and TextArea (Figure 3-17). Figure 3-17. Two controls that use the text property
>
enabled
Setting an enabled property to false makes a component unavailable. This causes the component to “gray out” and generally ignore mouse interaction (Figure 3-18). This is useful when you want to disable a control that isn’t ready for use, such as a submit button when required fields are empty or invalid. However, the enabled property also affects containers and their children. This means you can set a container’s enabled property to false, and everything inside will be disabled.
N ot e
Curiously, we have found situations where disabled components continue to serve their toolTip pop ups.
Figure 3-18. Two Panels with the same contents; one is enabled, the other disabled
48
Learning Flex 4
Modifying Properties Directly
N ot e
source
Use the source property to point a control, such as an Image control, to an external asset. You can also bind the source property of a ProgressBar to the id of an Image control to measure the control’s rendering progress. The following example demonstrates two usages of the source property—one for identifying an Image control’s target, and the other for identifying which component’s rendering status a ProgressBar should follow (Figure 3-19).
Yet again, we casually mention binding one property value to another. We’re referring to data binding, and it’s common in Flex. Bound values (and expressions, e.g., 1+2) are wrapped in braces ({ and }), and they indicate dependence on the wrapped value or expression. In this example, image is the id of the Image control, and thus image is a variable that can be referenced with binding. We’ll provide a serious discussion of data binding in Chapter 8.
Figure 3-19. An Image and a ProgressBar working together beautifully
Let’s face it, some of these properties will require rote memorization, but when you're using Design mode, the most common options are right at your fingertips. Because many components have commonalities, though, it’s not difficult to become familiar with the common properties.
Chapter 3, Using Design Mode
49
Summary
Summary This chapter introduced you to the common components and their properties. Hopefully you are now comfortable using Design mode to create user interfaces by dragging and dropping components into the editor. You still have a few skills to learn in order to make your applications interactive and fun, but you’re on your way to learning Flex. In the next chapter, we’ll go behind the scenes with an introduction to Source mode, and we’ll continue to work with the HelloWorld project, so make sure to save it if you close Flash Builder.
50
Learning Flex 4
Chapter
4
Using Source Mode “The whole is greater than the sum of its parts.”
In This Chapter
—Aristotle
What Design Mode Does
When we created the HelloWorld application, Flash Builder automatically generated several lines of MXML code. In this chapter, we use Source mode to examine our HelloWorld application and glean some additional insight into the structure of a Flex project. We also use Source mode to add a few more components and get a feel for Flash Builder’s code completion mechanism and MXML syntax.
What Design Mode Does As previously stated, when you drag components into your Flex 4 project, Flash Builder creates corresponding MXML code in whatever MXML file you’re currently editing. Conversely, if you alter the MXML code in Source mode, Design mode will rebuild and reflect the changes. Let’s take a look at the MXML for our HelloWorld application.
Anatomy of a Flex Application Adding Components in Source Mode Code Completion MXML in Depth S, FX, and MX: Namespaces Explained Summary
If you closed Flash Builder since creating HelloWorld in Chapter 3, reopen it and switch to Source mode. It’s easy to switch from Design mode to Source mode; just click the “Source” button above your WYSIWYG editor (Figure 4-1).
51
Anatomy of a Flex Application
N ot e
Whether you’re using Windows or Mac OS, you can quickly switch between Design mode and Source mode using the keyboard shortcut Ctrl-tilde (~).
Figure 4-1. Switching to Source mode
Total Recall Flash Builder remembers the workspace, project, and editors that were open when it was last closed, so it opens where you left it, possibly in HelloWorld’s Design mode. If you were browsing around the IDE between chapters (which is fine), it could open elsewhere, and now you know why. If you deleted HelloWorld from your workspace and need to reload it, open the File menu, select “Import Flex Project (FXP)”, toggle “Project Folder”, and browse to your HelloWorld project. We recommended the location C:\Flex4Code\HelloWorld, close to your drive root, but if you didn’t change this value, the project may be in the default workspace. Flash Builder recognizes the following default workspaces: yy Windows XP: C:\Documents and Settings\[user]\My Documents\Flash Builder 4 yy Windows Vista and Windows 7: C:\Users\[user]\Documents\Flash Builder 4 yy Mac OS: /Users/[user]/Documents/Flash Builder 4
Anatomy of a Flex Application Your source code for this example should look something like that in Example 4-1. N ot e
Code created by Design mode has a tendency to be ugly. On another note, due to limitations of print/page dimensions, it’s impossible to identically replicate the code you’re seeing in print. As a result, expect our book examples to differ from yours somewhat.
52
Learning Flex 4
Example 4-1. The MXML code autogenerated by Design mode
Code created by Design mode is usually jumbled and messy. As a result, our source code could use some housecleaning. Before we break apart the code and discuss it, let’s clean up the code here in Source mode. Using extra line breaks and tab indents, make your Source code look more like Example 4-2. Example 4-2. Our clean MXML code after reformatting it in Source mode
N ot e
Notice that we deleted the Declarations block? This block will always appear in a new project, so if you won’t need it—and we won’t need it for a while—you can delete it to create cleaner code. Of course, it won’t hurt to leave it. It’s your decision.
Now that we can comfortably read the code, let’s consider what’s happening. The first line is a mere XML declaration that usually begin XML files. It has no functional purpose in the code, but Flash Builder will always add it to new application files. The “real Flex” begins with the Spark Application tag. Every Flex application contains a root tag. Flex applications geared for web deployment will use an Application tag, but Adobe AIR applications designed for the desktop will use a WindowedApplication tag. Our HelloWorld application is designed for the Web; therefore, the entire project exists between and , the opening and closing tags of the Flex Application container. Notice that the opening tag includes an ensemble of attributes, specifically several namespace assignments (i.e., xmlns:), as well as the width and height properties we established back in Design mode. The opening tag for every component exists between left () angle brackets. The Declarations section (which you may have deleted per the note) is identified by the and tags, and it’s reserved for nonvisual elements. We briefly discussed nonvisual elements in Chapter 3. Even though this application doesn’t have any nonvisual elements, Flash Builder creates the Declarations section anyway.
Chapter 4, Using Source Mode
53
Adding Components in Source Mode
The , , , and tags represent components we added in Design mode. The Label and the HGroup container are nested within the main application, but the Button and the TextInput are nested within the HGroup. The Label, Button, and TextInput controls are closed differently than the Application and HGroup containers. Closing XML tags using /> is an optional syntax, but it’s frequently used for controls. Alternatively, you could open and close the Button using the code shown in Example 4-3. Example 4-3. A Button created with optional syntax
However, using the full syntax on controls has a tendency to make your code less readable. Fortunately, Flash Builder will encourage the abbreviated syntax by using it for controls created in Design mode. As you inspect the remaining MXML code, you should recognize other properties we set back in Design mode. While you’re here, feel free to change some of the basic properties (x, y, width, height, text), and then leap back into Design mode (Ctrl-tilde) to see the changes take effect.
Adding Components in Source Mode Of course, we can also add components to our project while in Source mode, so let’s add another button to perform a “clearing” function. Just below the TextInput but still within the HGroup tag, add a Button component by typing . In context, it should look like Example 4-4. Example 4-4. Adding a Button in Source mode
If you switch back to Design mode, you’ll notice the TextInput control sandwiched between the “Say Something” and “Clear” buttons. The HGroup container is forcing the three controls to consume the 80% width allotted to it. For the sake of playing around, convert both HGroup tags to VGroup tags (literally replace the “H” in each tag with a “V”), and then jump back to Design mode to see how this change affected the layout of your application (Figure 4-2). You can keep the layout in this arrangement if you want, but our example will continue using the HGroup.
54
Learning Flex 4
Code Completion
Figure 4-2. HelloWorld using HGroup and VGroup, respectively
Code Completion When you created the button in Source mode, did you notice a pop up after you started entering the code for the control? Perhaps it looked like Figure 4-3.
N ot e
Code completion is a rose with many names: code hinting, content assist, autocomplete, and autocompletion, to name a few. Developers with a lot of experience using Microsoft’s Visual Studio might even call it IntelliSense. This is important because you’ll encounter these various terms in the blogosphere.
What Gives?! Figure 4-3. Flash Builder’s code completion utility
Code completion is your best friend when you’re new to a programming language. Not only does code completion help you avoid typos and spelling errors, it can also be a useful reference. Consider this: in Design mode’s Properties pane, you can toggle Category or Alphabetical view to see properties available to a component. Similarly, Source mode’s code completion allows you to browse a control’s properties and methods, but it also allows you to browse components, classes, data types, objects, etc. If you’re trying to brainstorm a solution to a programming task, sometimes it’s helpful to trigger code completion just to peruse the menu. You never know; it just may trigger some inspiration. Code hinting will attempt to offer you the best reasonable match to the text you’ve entered into the code editor, and it will begin making suggestions alphabetically as soon as you create the left angle bracket (. Here’s an example of commenting in MXML:
One helpful use of comments is commenting out code to prevent it from compiling. This can be useful when debugging, which we discuss in the next chapter.
Summary This chapter introduced you to the basics of scripting in ActionScript, and you learned the following: • ActionScript can be placed inline, within MXML attributes. • Named functions should be placed within a Script/CDATA block, and they can be called from inline script as well as other functions. • Named functions can receive parameters and/or return typed values. • Functions that do not return a value should be typed void; functions that do return a value should be strongly typed. • You can define the scope/accessibility of both variables and functions to control their visibility to other components in an application. • Classes are specialized, predefined objects that can have both properties (variables) and methods (functions). • ActionScript classes expect to belong to a package, which you have the option of maintaining outside of any particular project. • Flex framework components correspond to ActionScript classes. You covered a lot of ground in this chapter. However, the coolest stuff happening in Flex requires a much deeper understanding of ActionScript, and excelling at ActionScript will take some further study, so we have a few recommendations: Learning ActionScript 3.0 (O’Reilly) Foundation ActionScript 3.0 for Flash and Flex (friends of ED/Apress) Visual Quickstart Guide: ActionScript 3.0 (Peachpit Press) ActionScript 3.0 Cookbook (O’Reilly) We’ll continue throwing ActionScript at you, and hopefully you’ll pick up a few tricks. In the next chapter, we give you a crash course in debugging Flex applications.
88
Learning Flex 4
Chapter
6
Debugging Flex Applications Butch Cassidy: “I’ll jump first.” Sundance Kid: “Nope.” Butch Cassidy: “Then you jump first.” Sundance Kid: “No, I said!” Butch Cassidy: “What’s the matter with you?!” Sundance Kid: “I can’t swim!” Butch Cassidy: “Why, you crazy…the fall will probably kill ya!”
—Paul Newman and Robert Redford, Butch Cassidy and the Sundance Kid
In This Chapter Outputting Values to the Console Using trace() Inspecting Event Properties with trace() Using Breakpoints Summary
By now, you’re probably comfortable enough with Flex basics to have created a few experimental interfaces. To be a real code mechanic, though, you also need some techniques to inspect what’s happening under the hood. It’s called debugging. No doubt you’ve heard the term before, and your first impressions are probably close enough. Debugging is troubleshooting, and troubleshooting is tedious. Fortunately Flash Builder includes some tools to simplify your debugging routines, and this chapter teaches you how to use them. We’ll discuss use of the trace() statement to preview variable values, how to pause and inspect code logic using breakpoints, and how to benefit from Flash Builder’s Debugging perspective. The goal of debugging is testing variables and functions to ensure they result in the values you expected when you first created them. By its very name, debugging implies that there’s a bug—or glitch—in your software that you need to locate. As you’ll see, however, there’s more to debugging than that. Our first foray into debugging will expose the trace() statement and a new pane from the Flash Builder workbench—the Console pane.
89
Outputting Values to the Console Using trace()
Outputting Values to the Console Using trace() N ot e
The Console pane is, by default, located at the bottom of your Flash Builder window, next to the Problems pane. If your Console pane isn’t visible, make it visible by selecting Window➝Console.
The trace() statement displays text in the Console pane while you interact with your Flex application. Use of the trace() statement requires an event to trigger a function that calls trace(), and inside the call statement some application variables are added. The function in Example 6-1 demonstrates proper construction of a trace() statement. Example 6-1. Tracing a control property and a variable value public function someFunction():void{ trace("myTextInput.text = " + myTextInput.text + " and myVariable = " + myVariable); }
To some degree, trace() statements are effectively “invite only,” and running an application in the usual manner won’t display trace output. To use trace(), you’ll have to be debugging. So how do you do that? Pretty easily. Instead of launching the application with the green arrow button, click the green bug icon to its right (Figure 6-1).
Figure 6-1. Launching Debug mode
Clicking the Debug button launches the application in Debug mode. For the most part it will look the same, but any event calling someFunction() will trace its output to the Console pane. So let’s demonstrate how to use trace(). For that we’ll need a new Flex project. Assuming you’re already in Flash Builder, open the File menu and select New➝Flex Project. Title the application DebugApp and save it under C:\ Flex4Code\DebugApp. Accept the rest of the default settings, and when the editor opens, piece together the application as shown in Example 6-2. Example 6-2. Application code we’ll use to demonstrate debugging
90
Learning Flex 4
Outputting Values to the Console Using trace()
You can run it as soon as it’s built, and it’s pretty simple. The MXML tags provide input and output controls, a NumericStepper (myNS) and a TextInput (myTI), respectively. The functions under the script tag are hollow, and as you can tell by the comments (//do something), this is where we’ll conduct our trace() experiments. This piece in the TextInput control’s text attribute—{myNS.value}—binds the current value of the NumericStepper control to the binding ({}) position within the TextInput control’s text attribute. This syntax is called data binding, which we’ve seen a couple of times already, and which we discuss in depth in Chapter 8. Presently, the NumericStepper is calling the empty onChange() function, and nothing is happening when it’s called. We’ll create a trace() there. So go ahead and delete the comment, and rework the function to look like Example 6-3.
Chapter 6, Debugging Flex Applications
91
Outputting Values to the Console Using trace()
Example 6-3. Adding a trace() statement to the onChange() function private function onChange():void{ numericStepperValue = myNS.value; trace("testing stepper value: " + numericStepperValue); doAdd(); }
This block first assigns our variable, numericStepperValue, the current value of the NumericStepper control. Next, the trace() statement outputs our variable to the Console pane. The last line, doAdd(), sets up the next function. For now it’s OK that doAdd() is empty. With everything in place, click the Debug icon and watch your Console pane as you ratchet up the NumericStepper (Figure 6-2). Wa r n i n g
If you don’t have a multimonitor display, you might need to resize your browser window in order to watch the Console pane while you increment the NumericStepper. See Figure 6-2 for an example of this.
Figure 6-2. Tracing variable values as output to the Console pane
That’s simple enough. But let’s complete the other functions to see some more action. Modify the doAdd() and doMultiply functions accordingly, as shown in Example 6-4.
92
Learning Flex 4
Inspecting Event Properties with trace()
Example 6-4. Adding more trace() statements
Two Heads Are Better Than One
private function doAdd():void{ numericStepperValue += 10; trace("adding 10 to stepper: " + numericStepperValue); doMultiply(); } private function doMultiply():void{ numericStepperValue *= 10; trace("multiplying stepper by 10: " + numericStepperValue); }
Now when you run Debug mode, notice that your application will continue to output the incrementing value of the NumericStepper control, but the Console pane will report the additional math carried out on our variable.
If you’ve ever wanted an excuse to get a secondary monitor (or even a third), serious debugging may provide the impetus. Of course, multiple displays are more expensive, and sometimes they can be tricky to set up. But be warned that once you become accustomed to developing with a multiple monitor setup, it’s difficult to go back.
As you have seen, the trace() statement is easy to work with and useful for monitoring application variables. Next you’ll learn how to use trace() and Debug mode to inspect information about an event.
Inspecting Event Properties with trace() Last chapter we learned that you can pass parameters into functions. To explore another use of the trace() statement, we’re going to do just that. For this exercise we need to add a new function, checkEvent(), and modify the NumericStepper control’s change attribute to call that function. Add the checkEvent() function directly below doMultiply(). The code is shown in Example 6-5. Example 6-5. Tracing an event’s type and the object that called it
N ot e
If you peruse enough code samples on the Web, you’ll often see Event variables abbreviated as simply e, or sometimes evt.
private function checkEvent(event:Event):void{ trace("The event type is: " + event.type + " and the current target is: " + event.currentTarget); }
Notice the code we added between parentheses, event:Event. This line tells our function to expect a variable of type Event and name it event. You can call it whatever you like, but event in lowercase does the job. Now we have a trace() statement capable of reporting details about an event, namely the event’s type and currentTarget. Did you realize using this function will require one more step? You still have to call the function and pass it a parameter. The event parameter is somewhat special. It’s built in, meaning you don’t have to create it before you can use it; rather, Flex will create it at compile time. Think of it as a feature. That said, you can pass the event parameter into the checkEvent() function by modifying the change attribute of the NumericStepper like in Example 6-6.
Chapter 6, Debugging Flex Applications
93
Inspecting Event Properties with trace()
Example 6-6. Calling the event tracer using inline script
Here’s a breakdown of what happens when you launch the application in Debug mode: 1. When you increment the NumericStepper, its change method calls checkEvent(). 2. The checkEvent() function will receive an object of type Event, which is a Flex class possessing unique properties. 3. The event object’s type property will be inspected and output to the Console pane. In this case, it is a change event. 4. The event object’s currentTarget property, which contains a reference to the object that passed in the event (whatever called the function), will also be discovered and reported. And in this case, it is the NumericStepper (myNS). Because the function expects an event parameter to be passed in, failing to pass it when calling the function will incur a compile-time error. You’re ready to test this, so launch the application in Debug mode and increment the NumericStepper. You should get a message in the Console pane that states: “The event type is: change and the current target is DebugApp.ApplicationSkin2._ ApplicationSkin_Group1.contentGroup.VGroup5.HGroup6.myNS”
Make sense? You knew the type of the event would be change, but the currentTarget value is a little cryptic. First, look at the end of the phrase and note myNS. Remember, myNS is the id of our NumericStepper. But what’s the rest? When Flex compiles your application, it creates a class based on the name of the application—DebugApp in this case—and the currentTarget property describes the fully-qualified containment order from the lowest container—DebugApp—all the way to the control that called our function— NumericStepper. So, in terms of hierarchy, myNS is considered part of an HGroup, which is in turn part of a VGroup, and so on. This event information can be handy when creating functions because you can make the functions highly reusable. For example, you could create a function that first tests for the type of event that occurred and/or what called it (the currentTarget), and then react accordingly.
94
Learning Flex 4
Using Breakpoints
Using Breakpoints In this section we discuss how to use breakpoints to pause your application while you examine control properties and variable values. A breakpoint is a position in the logic of your code where you’d like to stop everything and conduct an inspection. Some programming constructs can get quite complicated, so it’s useful to say, “Halt!” and then review the current status of one or many variables. Breakpoints allow you to do just that—pause and take a look. To create a breakpoint, simply double-click a line number in your code editor where you want to suspend your application. To test this, we’ll create two breakpoints, one inline with doAdd() and the other inline with doMultiply(); see Figure 6-3. We’ll also need to restore the change method of our NumericStepper to call onChange() once again, shown in Example 6-7. N ot e
Breakpoints will stop your application before any code on that line is processed. Therefore, it’s best to place breakpoints on the same line calling a function so you can inspect variable values both before and after they are changed by a problematic routine.
Figure 6-3. Breakpoints created to interrupt the two math functions in DebugApp Example 6-7. Restoring the onChange() function to test breakpoints
At this point, you’re ready to launch the application in Debug mode. Whenever the NumericStepper is incremented, onChange() will be called, and everything will abruptly stop before doAdd() is called. Let’s see how it works. Go ahead and launch Debug mode. Everything will seem normal at first. Your application will load in a browser window and wait for you to interact with it. Once you increment the NumericStepper, however, you’ll trigger the onChange() function as well as the first breakpoint.
N ot e
To hit the first breakpoint in DebugApp, you’ll need to increment the NumericStepper, which will call the code corresponding to the breakpoint.
You’ll probably be prompted with a dialog box from Flash Builder similar to Figure 6-4, asking if you want to switch to the Flash Debug perspective. You might want to enable “Remember my decision” so Flash Builder will launch the correct perspective whenever breakpoints are set. Either way, click “Yes” and you’ll gain a whole new perspective on debugging.
Chapter 6, Debugging Flex Applications
95
Using Breakpoints
Figure 6-4. Flash Builder’s Confirm Perspective Switch dialog box
Seeing a New Perspective We briefly mentioned perspectives in Chapter 2, but in this section we demonstrate how a different perspective can benefit you as a developer. Perspectives in Flash Builder are preset workbench layouts that include the most convenient panels and panes for a particular job. Before switching to the Debug perspective, you were using the Flash perspective. The Flash perspective is geared toward writing and editing code; among other components, it contains the Package Explorer, the Outline pane, and the Properties pane. When debugging, you’ll need some panes we haven’t discussed, and they’re contained in the Debug perspective.
The Variables Pane One of the new panes you’ll see in the Debug perspective is the Variables pane, and by default it’s in the top-right panel. The Variables pane presents information in a tree list that needs a lot of vertical space, so you might want to change its positioning. Flash Builder allows you to move and resize panels easily. Just click and drag the Variables tab toward the right until it snaps against the right side of Flash Builder, becoming its own panel. It may also help to widen it. Alternatively, if you have multiple monitors, you can detach the pane and place it somewhere more convenient. The Variables pane displays information about your application’s current state when the debug runtime hits a breakpoint in your code. You’ll have two columns of information at your disposal: Name and Value. Name identifies components, variables, etc., and Value identifies their current value.
96
Learning Flex 4
Using Breakpoints
You should see a menu item called this in the tree list. Note that this corresponds to the DebugApp application. Expand the contents of this by clicking the plus symbol (+), and then look for the items myNS, myTI, and numericStepperValue. The child nodes myNS and myTI refer to our controls, and numericStepperValue refers to our int variable (Figure 6-5).
Figure 6-5. Reviewing numericStepperValue in the Variables pane.
To get to the next breakpoint, we have two options: we can either walk through the code line by line, or we can leap to the next breakpoint using the Resume button. First, let’s go for a walk.
“Walk, Don’t Run” Under your Run menu and along the top of your Debug pane, you’ll find a few tools to dictate how you want to proceed while in Debug mode. You’ll find these functions quite handy, and you’ll appreciate them even more if you memorize their corresponding keyboard shortcuts. Let’s consider the debugging controls, shown in Figure 6-6.
Chapter 6, Debugging Flex Applications
97
Using Breakpoints
Figure 6-6. Debugging controls in the Debug pane N ot e
If the stepping shortcuts are not the same for Mac OS, you can open the Run menu and glean the correct keyboard shortcut from the menu.
Step Into (F5 in Windows) Step into a called function and stop at the first line of that function. Step Over (F6 in Windows) Execute the current line of a function, and then stop at the next line. Step Return (F7 in Windows) Continue execution until the current function returns to its caller. Resume (F8 in Windows) Resume application processes, either stopping at the next breakpoint or running through to completion. For our purposes, use the Step Over command (F6) to walk through each individual line of code. Here’s a handy trick: if you hover your mouse cursor over a variable, such as numericStepperValue, Flash Builder will offer you a quick pop up noting the variable’s current value (Figure 6-7). If you prefer a faster way to watch, find your variable in the Variables pane and watch its value change as you step through the code line by line. When a variable value changes, that variable will become highlighted in the Variables pane. Note how this looks in Figure 6-8.
98
Learning Flex 4
Using Breakpoints
Figure 6-7. Spot-checking a variable’s value with a quick mouseover
Figure 6-8. Watching a variable’s value change in the Variables pane
We previously mentioned that another debugging option is to leap directly to the next breakpoint or to the end of the processing sequence. Once you’re content with your ability to follow a variable through the runtime using the stepping approach, and assuming you’ve exhausted your logical sequence, increment the NumericStepper once again to trap the runtime at the first breakpoint. Then, either toggle the Resume button, which is in the top-left panel of your Debug perspective (Figure 6-9), or hit F8 (Windows) to leap to the next breakpoint. Resuming a third time should exhaust the process, placing you once again at the end of the sequence.
Chapter 6, Debugging Flex Applications
99
Using Breakpoints
Figure 6-9. Advancing to the next breakpoint using the Resume button
Ending Your Debug Session Once you’re ready to quit debugging, be sure to end your session using the red Terminate button located to the right of the Resume button (Figure 6-10). It’s also available in the Console pane, or if you’re a Windows user, via the keyboard shortcut Ctrl+F2. Because debugging pauses Flash Player, you might run into problems if you try to close the browser without properly ending the debug session.
Figure 6-10. Ending the debug session using the Terminate button
100
Learning Flex 4
Summary
Finally, return to the basic Flash perspective using the toggle button at the top right of Flash Builder or by selecting Window➝Perspective➝Flash (Figure 6-11).
Figure 6-11. Returning to the Flash perspective
Summary Except for the occasional mind-bending troubleshoots, debugging isn’t that bad. And hopefully you’ll find that typical day-to-day debugging scenarios can be stimulating and a little fun. After all, if programming were 100% easy, you wouldn’t experience that thrill when your applications work as intended. This chapter introduced you to three debugging techniques: • Using a trace() statement to reveal component properties and variable values • Using breakpoints to trap your application in the runtime while you snoop • Walking through your code line by line while watching for value changes In Chapter 7, we continue working with ActionScript as we examine event handling a little more closely—and make a fun game, no less.
Chapter 6, Debugging Flex Applications
101
Chapter
7
Adding Interaction with ActionScript Software users excel at initiating interaction. Their techniques include mouse movement, clicking, dragging and dropping, and keyboard entry, to name a few. For you, the Flex developer, “the trick” isn’t programming each individual event interaction as much as it is “seeing the big picture,” or specifically, knowing what interactions and events the framework exposes and the relatively few techniques used to weave them into your application. In this chapter, we review the most common events; we also teach you how to research events in the official documentation. After we finish discussing the background information, we demonstrate how to handle events in your programs, and for the grand finale, we develop a simple, yet surprisingly fun game called Collision! (Figures 7-1 and 7-2), which we hope will inspire you through the rest of this book.
In This Chapter Understanding Events Common Events Researching Events Listening for and Responding to Events Collision! A Whirlwind of Events Summary
Figure 7-1. Collision!: 3 files, 190 lines of code, 1 timeless classic
103
Understanding Events
Figure 7-2. Keeping it real with grammar from the Nintendo days
Understanding Events
N ot e
Interaction and event handling can extend beyond the user interface. For instance, if your application makes a request to a web server, that server’s response is an event. We experiment with interactions like these in Chapter 11, where we’ll build a searching utility, and Chapter 16, where we’ll integrate with PHP and MySQL.
Flex applications listen for and respond to events. An event is something that happens either by direct user interaction or by something less obvious, such as a component being drawn onscreen or data returning from a server. When a user clicks a Button, a click event occurs. When a TextInput field receives or loses a character, a change event occurs. When the application display finishes rendering, the applicationComplete event occurs. Programming events in Flex applications requires code to both listen for as well as respond to or handle events. When an event occurs, you say the event fired or was triggered, or even dispatched. For example, clicking on an image thumbnail may fire a click event that loads the full-size image, but the loading in turn triggers two more events—progress and complete. As such, the progress event can be listened for and handled by a ProgressBar, and the complete event can be used to hide the ProgressBar.
Common Events Programming for interaction and events requires knowing the options available to you. Table 7-1 lists the most common events, their constant values, and a description of the event. We discuss constants later in this chapter, in the section titled “Handling Events in ActionScript” on page 113.
104
Learning Flex 4
Researching Events
Spend a moment reviewing the events described in this table. Although you might not have an immediate use in mind for each event, familiarize yourself with this list now so that you’re better prepared later when you really need these events. Table 7-1. The most common events Event name
Constant
Description
change
Event.CHANGE
Fired when a selection changes in a list or navigation component such as a TabBar, or when a text component’s text is changed.
click
MouseEvent.CLICK
Fired when a user clicks an element. This means someone pressed the mouse button down and released it on the same component.
mouseDown
MouseEvent.MOUSE_DOWN
Fired when someone presses the mouse button down on a component.
mouseUp
MouseEvent.MOUSE_UP
Fired when someone releases the mouse button on a component.
rollOver
MouseEvent.ROLL_OVER
Fired when the mouse pointer moves over a component.
rollOut
MouseEvent.ROLL_OUT
Fired when the mouse pointer moves out of a component’s area.
initialize
FlexEvent.INITIALIZE
Fired during the draw process when a Flex component or the application container is being instantiated.
creationComplete
FlexEvent.CREATION_COMPLETE
Fired when a Flex component is finished drawing.
resize
Event.RESIZE
Fired when the application is resized because the browser or window is resized.
applicationComplete
FlexEvent.APPLICATION_COMPLETE Fired when the application is fully initialized and drawn in the
display.
Researching Events We realize a list of common events will only get you so far. Therefore, it will benefit you to know the best resources for researching events on the fly.
What Events Are Available to This Component? You won’t always remember the full range of events available to a component. When this is the case, there are a few approaches to help you find out fast: • In Design mode, select a component in the application, and then check the Properties pane in Category view. Find the Events section, and you’ll have a list of every event available for that component (Figure 7-3).
Chapter 7, Adding Interaction with ActionScript
105
Researching Events
Figure 7-3. Identifying events using the Properties pane
• In Source mode, code completion will reveal every property available to a component, including events. Events are indicated by a lightning bolt icon (Figure 7-4).
Figure 7-4. Identifying events using the code completion hints
• Review the official documentation for a component.
Flex/ActionScript Documentation Sometimes you’ll need to know more than “what events are available to this component?” You might be left asking, “When can I use this, and how can I use it?”
106
Learning Flex 4
Researching Events
When this is the case, there are three approaches you can take to researching event specifics: Flash Builder’s help system, ASDoc, and the favorite, Adobe’s Flash Platform Language Reference.
Flash Builder’s help system To access Flash Builder’s help system, follow Help➝Flash Builder Help. You’ll be presented with a utility that combines internal and external documentation. If you use the search utility to search for a component, technique, or tutorial, the help system will expose a number of articles, including official documentation and contributions from the user community, describing anything and everything related to your search.
ASDoc If you’re in the middle of coding and you just want a quick review of a component, open the ASDoc pane (Window➝ASDoc), select a component, and then read through the information provided (Figure 7-5).
N ot e
You need to be in Source mode to open the ASDoc pane.
This sort of documentation did not exist in Flash Builder’s predecessor, and it can be quite useful, especially for reviewing information at a glance. However, ASDoc won’t give you in-depth coverage or example code; for that, you’ll need to check Adobe’s Flash Platform Language Reference.
Figure 7-5. Reviewing component details at a glance in the ASDoc pane
Chapter 7, Adding Interaction with ActionScript
107
Researching Events
Adobe’s Flash Platform Language Reference N ot e
Adobe’s Language Reference has gone through a recent rebranding of sorts. With Flex 3, we would have discussed the Flex 3 Language Reference, and the same applied to Flex 2. However, with Flex 4, Adobe is emphasizing the Flash ecosystem, and as such, the Language Reference for each of the participant technologies has been amalgamated into one universal Flash Platform Language Reference.
When you need to deeply research a Flex component, turn to Adobe’s Flash Platform Language Reference: http://livedocs.adobe.com/flex/gumbo/langref/ The Language Reference is dense, and arguably the most comprehensive resource available to Flex/ActionScript developers. Not only does the Language Reference describe just about every aspect of a component or class (e.g., properties, methods, events, styles, etc.), it also provides examples, and better yet, it contains a “footer” section of questions and answers, comments, and insights contributed by both the user community and Adobe moderators. If there is a downside to the Language Reference, it’s that it can be daunting at first, particularly for new developers. But once you’re comfortable with it, you’ll begin to appreciate its depth of coverage. As you research topics in the Language Reference, you’ll see something similar to Figure 7-6. At the top of every component’s reference is a list of its properties, methods, events, styles, and so on.
Figure 7-6. Adobe’s Flex 4 Language Reference
To inspect the events supported by a component, click the Events link at the top, or scroll down to the Events heading. There you’ll find the list of events as pictured in Figure 7-7.
108
Learning Flex 4
Listening for and Responding to Events
Figure 7-7. The Flex Language Reference detailing a Button’s events
Note that there may be many inherited events you won’t see unless you select “Show Inherited Events.” Components typically inherit functionality from a more abstract, lower-level class, so to view the properties of the base classes, you’ll need to expand the inherited events. The same reasoning applies to properties, styles, and everything else. In this case, the Button inherits its click event from UIComponent, which is the base class for all Flex UI components.
Listening for and Responding to Events We know you’re itching to see some code, and don’t worry, you’re about to get a sincere dose. Now that you know how to expose and research events, let’s consider how you can integrate event listeners and event handlers into your applications. We discuss two approaches: • Handling and/or calling event handlers using inline script • Adding event listeners and event handlers within the Script/CDATA block
Handling Events Inline By now you should be comfortable with the idea of handling events with inline ActionScript. After all, we used this technique in both Chapters 5 and 6.
Chapter 7, Adding Interaction with ActionScript
109
Listening for and Responding to Events
In Chapter 5 we used inline event handling (Button, click) to change the text property of a TextInput control. We also used inline event handling (Button, click) to call a named function, clearSpeakTI(). Chapter 6, although shorter and more specialized, demonstrated the use of an inline event (NumericStepper, change) to call the named functions onChange() and checkEvent(). These approaches don’t change. Script can be placed inside MXML attributes to handle simple, one- or two-line tasks, or to call named functions in the Script/CDATA block to handle more complex, several-line tasks. Before we move on, let’s see two more examples using inline handling. The first example uses pure inline handling to follow a mouseMove event and dispatch the mouse’s x and y coordinates to two TextInput controls. The second example listens for a TextInput control’s change event to validate an email address.
Inspecting screen coordinates with mouseMove() For Example 7-1 we created a new project, CoordCapture, that uses the Application container’s mouseMove listener to send the current applicationlevel mouse coordinates (mouseX, mouseY) to two TextInput controls. There shouldn’t be any surprises here. Do notice, though, that the mouse coordinates return Number values, and since the TextInput controls are expecting String types, we’re casting the coordinate properties into Strings using the expressions String(mouseX) and String(mouseY), respectively. Example 7-1. C:\Flex4Code\CoordCapture\src\CoordCapture.mxml
110
Learning Flex 4
Listening for and Responding to Events
If you create this application and run it, you’ll discover something important about coordinate positioning in Flash—namely, the origin (0, 0) exists in the top-left corner of the layout, with x increasing as you move right and y increasing as you move down. The maximum coordinate values exist at the bottom-right corner. For a demonstration of this, see Figures 7-8 through 7-11. This concept will be particularly important when we create the game at the end of this chapter. N ot e
Mouse coordinate capture occurs relative to the component doing the listening, but the MouseEvent class contains built-in methods to get the coordinate relative to the component (event.localX and event.localY) or the coordinate relative to the application (event. stageX and event.stageY). For more details on how to access mouse coordinates in these capacities, check out the Language Reference documentation for the MouseEvent class. Figure 7-8. Mouse near the origin (0, 0), top left
Figure 7-9. Mouse near max-x and min-y, top right
Figure 7-10. Mouse near min-x and max-y, bottom left
Figure 7-11. Mouse near max-x and max-y, bottom right
Following the mouse programmatically is useful to a variety of applications; however, you also have access to the mouseOver and rollOver events, which are available to any class inheriting from UIComponent, and which you can use to create so-called “invitations” and “interesting moments” that inspire users to interact with a particular component.
N ot e
For a solid discussion of both what to do (best practices) and what not to do (antipatterns) when creating user interfaces, check out Bill Scott and Theresa Neil’s Designing Web Interfaces (http://oreilly. com/catalog/9780596516253/).
Chapter 7, Adding Interaction with ActionScript
111
Listening for and Responding to Events
y-axis
X and Why? A Note About Coordinates You’re probably familiar with the Cartesian coordinate system. With x referring to placement along a horizontal axis and y referring to placement along a vertical axis, the origin is 0,0, and x and y values increase as you move up or to the right, respectively. In this system, a point at x="3" and y="5" will be placed up and to the right of the origin (Figure 7-12). In Flash, the origin is at the top left of the stage (i.e., the parent Application container), and x and y values increase as you move toward the bottom and right, respectively. So, in comparison with what you may be familiar with, the y values are backward in Flash.
10
5
P(3,5) x-axis
–10
–5
5 –5
10
(0,0) origin
–10
Figure 7-12. A Cartesian coordinate system (image courtesy of Gustavb and Wikipedia, reprinted under the terms of the GNU Free Documentation License)
Testing data input using change() For Example 7-2 we created the project ValidateEmail to demonstrate a practical use of the change event to validate one TextInput control’s text property against that of another TextInput.
Figure 7-13. Reentering an email address; the submit button remains disabled
Unlike the previous example, where the entire event is handled inline, this example calls a named function to perform a conditional analysis using an If..Else block. The If..Else block in this example uses an equality operator (==) to test whether both TextInput controls contain the same text value. Notice that the entire conditional expression—emailTI.text == validEmailTI. text—is wrapped in parentheses. If the values on both sides of the expression match, the submission Button is enabled and a “VALID!” alert becomes visible; however, if the values do not match, the Button is disabled (submitButton.enable = false) and the “VALID!” alert is made invisible (validLabel. visible = false). See Figures 7-13 and 7-14. When you create this example for yourself, pay particular attention to the If..Else conditional and the construction of the conditional block itself. The
Figure 7-14. When both fields match, the submit button enables and the “VALID!” indicator appears
112
Learning Flex 4
ability to make decisions with code is crucial, and this is the first time we’ve exposed you to something like this. However, we won’t let you down; we have some more complex stuff lined up before the end of this chapter.
Listening for and Responding to Events
Example 7-2. C:\Flex4Code\ValidateEmail\src\ValidateEmail.mxml
N ot e
The UI layouts for some of these examples are gradually increasing in complexity, and we admit that we’re relying on your ability to make sense of the MXML when it’s presented in context. Chapter 9 will address layout construction in greater detail. For the meantime, we promise not to throw anything unreasonable at you.
Handling Events in ActionScript Up until now all of our examples have demonstrated inline event sequences, with the inline listener either performing some task right in the MXML or calling a named function in a Script/CDATA block. However, you can also set up event listeners using ActionScript, and honestly, this approach affords you some extra liberties—for one, timing. Before we see a couple examples of ActionScript-only event handling, let’s discuss something called a constant and the event constants.
Chapter 7, Adding Interaction with ActionScript
113
Listening for and Responding to Events
Event constants A constant is a fixed value, which means it can store a value that you don’t expect to change. Constants are often used to give a name to a numeric value because, let’s face it, words are easier to remember than numbers. Can you remember π (pi) to the 15th decimal place? We didn’t think so. What about the ASCII value for the Caps Lock key? That’s why some smart person invented constants. Get a piece of the pi by using the constant Math.PI, or get the keyboard code for the Caps Lock key with Keyboard.CAPS_LOCK. Calling numeric values is not the only thing constants are good for. The Flex framework often uses constants for String values as well, and the most common examples of this are the event types. For instance, the event describing when the mouse goes outside of an application’s bounds is called mouseLeave. Because the string “mouse leave” or “mouse-leave” isn’t sufficient to reference this event, ActionScript establishes event constants so you don’t have to remember the specifics: Event.MOUSE_LEAVE. You might be thinking to yourself, “Is that easier to remember?!” Maybe not, but here’s the take-home message: constants are properties of a class (MOUSE_LEAVE is a property of the Event class, like PI is a property of the Math class, etc.), so they’re accessible using code completion. Have you noticed that constants are all in uppercase? That’s to distinguish them as constants. Although capitalization is not necessary, it’s considered a best practice. And because it’s difficult to distinguish separate words in alluppercase text, the standard is to place an underscore ( _ ) between the words. Now you know.
Using addEventListener() in ActionScript It’s time to demonstrate some ActionScript-only event listener definitions. We’re getting close to our game development at the end of this chapter, so we want these examples to pull double-duty and teach you a few tricks that we’ll apply later. This way, it won’t be a shock when you see them in the game code. We’ll show you two more examples before we get into the fun stuff. The first example creates a draggable green ball on the screen, and it will teach you how to create a simple FXG graphic as well as how to enable dragging on a layout component. The second example demonstrates how to set up a Timer to make the same ball move from one side of the screen to the other.
114
Learning Flex 4
Listening for and Responding to Events
Creating a draggable component Many developers like to take advantage of the Application container’s creationComplete event to set up several event listeners within the same named function. In a larger application, it’s more efficient to place all your event listener definitions in one area of the code. To demonstrate, Example 7-3 contains a project we created called DragCircle that draws a simple, draggable FXG graphic in Flash Player (Figure 7-15). Example 7-3. C:\Flex4Code\DragCircle\src\DragCircle.mxml
Chapter 7, Adding Interaction with ActionScript
115
Listening for and Responding to Events
Figure 7-15. Dragging an FXG graphic
What’s to notice here? Let’s work from the bottom up this time. See that MXML Group container? The only thing it contains is our FXG graphic, which we gave an id of circle. In fact, if you flip back to Chapter 1, you’ll find that this FXG graphic is nearly identical to the one we presented as an example of FXG. By now, your understanding of XML structure should be enough to make sense of the graphic. N ot e
Throughout this example, we referred to our circle graphic as a “draggable” component; that’s because we aren’t managing its drop into a different container. If you have an interest in that sort of interaction, check out the following blog posting by Justin Shacklette: http:// saturnboy.com/2009/08/drag-and-dropflex-4/.
Moving up, we have two functions, dragOn and dragOff, practically written by code-ninja Mr. Miyagi himself. As you can see, each function toggles either startDrag() or stopDrag() on the Group container, which has the id of circle. This is important: the FXG graphic doesn’t support startDrag() and stopDrag(), so we wrapped the graphic inside a lightweight Spark container that does support dragging. The top of the example shows the Application container’s applicationComplete event calling the named function onAppComplete(), which enables the event listeners, MouseEvent.MOUSE_DOWN and MouseEvent.MOUSE_UP, which start and stop the dragging, respectively. Notice two things about the event listener definitions and the named functions. First, the listener definitions do not include the parentheses (e.g., dragOn()) of their function references. Second, both named functions pass in a MouseEvent class as an event variable. If you add the constructor parentheses to the called functions in the addEventListener() definitions, you’ll get errors. Likewise, if you remove the event parameters being passed into the functions, you’ll also get errors.
116
Learning Flex 4
Listening for and Responding to Events
Creating “Invitations” with the Mouse Here’s a solution for changing the color of the FXG graphic based upon MouseEvent.MOUSE_OVER. Doing so would create an “invitation” for users to interact with your draggable component. Here’s a hint, but it’s up to you to plug it into your application:
Creating a self-powered, moving component Example 7-4, called PoweredCircle, teaches you the following skills: • You can use a Timer class to automate events. • The KeyboardEvent class allows you to catch keyboard input. • The Alert class allows you to output simple messages to the user. While you’re at it, you’ll also have a chance to rehearse the trace() method and review the structure of an If block conditional.
Chapter 7, Adding Interaction with ActionScript
117
Listening for and Responding to Events
Foremost, we’re using the same FXG graphic from the previous lesson, and we’re building our event listeners in the Application container’s applicationComplete handler. So we won’t spend time discussing those aspects of this example. Instead, we’ll focus on understanding the Timer, the KeyboardEvent, and the Alert classes. Example 7-4. C:\Flex4Code\PoweredCircle\src\PoweredCircle.mxml
Wa r n i n g
Flash Builder will usually create import statements as you add classes in ActionScript; however, you might need to import the Alert class manually.
N ot e
In order to determine the proper keyCode value for the Enter/Return key, we set a trace() on the keyDown function’s event parameter, converting the entire event object into a String representation. Then, we launched the application in Debug mode and hit the Enter key (we actually hit a ton of keys for the fun of it) to see which values changed. We recommend you repeat this trace() step when you construct this application to reinforce your debugging skills, which are priceless when you’re on your own, to research the burning question “So, what am I supposed to do with this object?”
= stage.stageWidth){ trace("Finished"); timer.stop(); Alert.show("Finished", "PoweredCircle"); } } ]]>
118
Learning Flex 4
Listening for and Responding to Events
The first thing you should notice about the Timer in this example is that we created it with class-level scope; the private keyword ensures any method in the class (the application in this case) can access properties and methods of the Timer. Next, the Timer takes two variables when it’s constructed: delay and repeatCount. The delay property represents the number of milliseconds the Timer will suspend between firing its TimerEvent. The repeatCount is the number of times the Timer will iterate before stopping itself. We chose a delay of 10 milliseconds and a repeatCount of 0. A repeatCount of 0 translates to unlimited repetitions. If you look down through the code, you’ll notice that the Timer has two methods we’ll be calling, start() and stop(); these methods perform as you would expect. Further, notice that the timer’s event listener calls the function ballMover(). We’ll discuss that function in a moment, but realize that the Timer will call ballMover() once every 10 milliseconds. Next we have the KeyboardEvent listener waiting for any key to be pressed. So, what’s this stage that will listen for the KeyboardEvent? Here’s how the Language Reference defines it: “The stage class represents the main drawing area.” It goes on for about 10 more pages discussing the stage, but for our purposes, listening for keystrokes at the application level requires attaching our event listener to the stage. Moving on, the KeyboardEvent listener is calling the handler keyDown(). Every time a key is pressed, the keyDown() function tests the event parameter’s keyCode property (event.keyCode) to see whether it equals 13, which corresponds to the Enter/Return key. If the condition evaluates to true, keyDown calls the timer’s start() method, beginning the automation, or in this case, the animation of the circle graphic across the screen.
Wa r n i n g
When you run this application, you’ll need to click on it somewhere to give it focus. Without focus, the application won’t catch your keystrokes, and the animation will not begin.
Now for the ballMover() function. Once the automation is engaged, ballMover() recalculates the circle graphic 5 pixels to the right once every 10 milliseconds. The function uses the addition assignment operator (+=) to say “your current x value, plus 5.” After the movement is committed, the function compares the graphic’s x-value to the application’s width to detect whether the move is complete. The Stage class has some useful properties, namely stageWidth and stageHeight, that tell us the dimensions of the application at runtime. Resizing the screen will create a problem—you’d need another listener to catch Event.Resize—but for our current needs it doesn’t matter. Back to the function: if the graphic’s x value plus its width meets or exceeds the width of the stage (i.e., the expression circle.x + 100 >= stage.stageWidth, becomes true) the graphic has finished its move and the Timer is stopped. Next, ballMover() calls the Alert class’s show() method to create the “Finished” message. The first parameter in the show() method is the message string; the second parameter is the title. If you run this application, you should end up with something pretty similar to Figure 7-16.
N ot e
There are a lot of useful properties and methods attached to the Stage class. Check it out sometime in the Language Reference documentation: http://www.adobe.com/livedocs/flash/9.0/ ActionScriptLangRefV3/flash/display/ Stage.html.
Chapter 7, Adding Interaction with ActionScript
119
Collision! A Whirlwind of Events
Figure 7-16. An Alert message noting the animation is complete
Collision! A Whirlwind of Events For Tim Bloomquist, who is always asking me to program a game, …and for Steve Robison, who loves pinball.
Take a deep breath, because we’re about to take you right to the edge of everything you’ve learned about Flex. We’re going to make a Flash game called Collision!, and in the process we’ll borrow something from everything you’ve learned so far. The game is based on a combination of timeless classics. It’s like Pong in the sense that you’re moving a paddle around trying to intercept a moving ball, but it’s also like pinball in the sense that it’s one-player. However, we took this hybrid concept a couple of steps further by adding some twists. For one, we added the ability to move the paddle top to bottom in addition to left and right. Second, we thought it would be cool if you could actually drag the paddle and play with the mouse rather than the keyboard. Surprisingly, it ends up being relatively fun to play. Here’s the good news: the project is about 190 lines of code, and this chapter prepared you by teaching almost everything you need to know coming into this exercise. We ramped you up. But, here’s the bad news: you might not like the math necessary to calculate the trajectory of the ball. On the bright side, it’s only four or five lines of math! That’s not bad!
120
Learning Flex 4
Collision! A Whirlwind of Events
We’ll approach this project code-first. That is, first, you’ll link to the external source directory we started in Chapter 5, and then you’ll create a new components package. Next, we’ll have you program two supporting components, Ball and Paddle, and save them to the new package. Then, rather than bore you with a multipage onslaught of explanations, we decided to scare you first by giving you the source code for the main application file. After you’ve had a chance to glance over the main source, we’ll spend the rest of this section explaining the details, including a breakdown of each of the five functions in this application. Five functions, five lines of math. You should be excited; this is a cool project! Let’s get underway.
Create the Supporting Classes The name of the game is Collision!, so start by creating a new Flex project named Collision in your workspace.
Linking the external source and adding a package With the new project established, make sure it’s selected in the Package Explorer, then open Project➝Properties➝Flex Build Path, and click the “Source path” tab. In the Source path dialog, select Add Folder and browse to C:\Flex4Code\ com, or the equivalent workspace directory on your system. This is the package root we created back in Chapter 5. Add the package as an external source path.
N ot e
If you need a refresher on how to add an external package to your project, return to Chapter 5 and review the section titled “Packages” on page 79.
Now that the external package is linked to the project, right-click it (Windows) or Control-click it (Mac OS) and follow New➝Package in the drop-down menu. When the dialog appears, it should already offer the name “learningflex4”. Append the name so that we’re creating the package learningflex4.components. Then, click Finish. When you emerge into the editor, you should have a fresh, empty package directory, wherein we’ll create the Ball and Paddle components for Collision.
Ball.mxml The code for this class is nothing new, but the task of creating a new component might be awkward at first. To start the Ball component, right-click/ Control-click your new components package and select New➝MXML Component. Enter the name Ball, and delete the values for Width and Height so those fields are empty. If the “Based on” field is not set to spark.components.Group, click Browse and search for that class. Your dialog should resemble Figure 7-17 when you’re ready to proceed. Click Finish to commit the new component class.
Chapter 7, Adding Interaction with ActionScript
121
Collision! A Whirlwind of Events
Figure 7-17. The New MXML Component dialog
You should emerge into a new editor window. Add the code in Example 7-5 and save to create the custom component. N ot e
Example 7-5. C:\Flex4Code\com\learningflex4\components\Ball.mxml
Notice that the root tag for your component is not an Application container, but a Group component.
122
Learning Flex 4
Collision! A Whirlwind of Events
Paddle.mxml Now we need to create the Paddle component. Repeat the tasks you performed in the previous step to create another Group-based component called Paddle. When you emerge into the editor, add the code in Example 7-6 to create the Paddle component. This code is similar to Example 7-3, DragCircle, which we created earlier in this chapter. Notice that the Paddle component establishes its event listeners in the initialize event handler. The component’s creationComplete handler would work equally well, but we used the initialize event in this case. When you’re finished entering the code, save
the component to commit it to the project. If you don’t save, code completion might not see your new component when we're drafting the main application source. Example 7-6. C:\Flex4Code\com\learningflex4\components\Paddle.mxml
Chapter 7, Adding Interaction with ActionScript
123
Collision! A Whirlwind of Events
Once you have the Paddle component built and saved, let’s test it to make sure it will support dragging like we expect. The quickest solution is to add the component to the main application, compile it, and test it. So jump back to the Collision editor. Notice Figure 7-18. If you simply type = paddle.y)) || ball.x + 20 >= stage.stageWidth || ball.y + 20
Initial Insights Some observations may leap out at you immediately. For instance, there’s a new namespace in this code. The math looks fairly intense, and that’s one cryptic If block. Switch? Case? What is Switch..Case? We break down these walls for you in this section.
A new namespace Did you notice the deviation emphasized in Example 7-9 among the namespace declarations? Example 7-9. The new namespace
Chapter 7, Adding Interaction with ActionScript
127
Collision! A Whirlwind of Events
If you need a primer, we discussed namespaces in Chapter 4 in the section “S, FX, and MX: Namespaces Explained” on page 60. However, it’s not a mystery. The components namespace references the components in our custom components package, and it corresponds directly to the package name. If you don’t like the namespace components, you’re at liberty to change it to any unique namespace you prefer.
The math How about the first few lines in the ballMover() function, shown in Example 7-10? N ot e
If the URL is difficult to read among the source code, here’s the link to the forum where we found the math-magic solution to calculate the Ball component’s trajectory: http://www.actionscript.org/ forums/showthread.php3?t=177361.
Example 7-10. The math passage, which determines the trajectory of the Ball private function ballMover(event:TimerEvent):void{ // move ball first.. //http://www.actionscript.org/forums/showthread.php3?t=177361 var radians:Number = degrees * Math.PI/180; radius += speedFactor; ball.x = radius * Math.cos(radians) + xStart; ball.y = radius * Math.sin(radians) + yStart;
Converting between radians and degrees? Math.cos? Math.sin? Whoa! Don’t worry; we won’t turn this into a trigonometry lesson. In fact, we can’t claim this math; it’s a gem gleaned from the user community and adapted for this application. Notice that we included the forum URL as a comment right in the source code, as if to say, “Go here for some extra insight into this code.” If you follow that URL, however, you’ll realize that we did impose some hacking to get the results we wanted, particularly with regard to the data types used and the speedFactor variable, which we added as a means of increasing the game speed as the Ball’s collision count increased.
The branching structures (decision logic) This application has two significant decision-making, or branching, routines. The first decision considers a complex set of Boolean criteria (it’s either true or false) to determine whether a collision has occurred. The decision is evaluated with every movement of the Ball (every 10 milliseconds). The second decision routine, a Switch..Case block, toggles Paddle movement using the keyboard arrow keys. We haven’t discussed a Switch..Case routine, but if we can help you comprehend the collision-detection conditional, which we'll explain in the next section, you won’t have any trouble with the Switch..Case block. They’re actually quite clean and a joy to work with, as opposed to many nested If..Else blocks.
128
Learning Flex 4
Collision! A Whirlwind of Events
The Five Functions This section considers the five functions necessary for Collision to create game play.
onAppComplete() Like many of our prior examples, onAppComplete() is used to define event listeners for both KeyboardEvent.KEY_DOWN and TimerEvent.TIMER. The former forces the application to listen for keyboard interaction, and the latter is used to animate the Ball component by updating its position every 10 milliseconds. This function also calls resetGame() on startup, mostly just to set the Paddle’s starting position.
resetGame() This function is called by both onAppComplete() and the reset Button. The purpose of this function is to reset the Timer, the Ball position, the Paddle position, the movement variables, and the game play variables back to their initial values, which are assigned near the top of the application code. The technique used to reset the Paddle is compelling, particularly the Paddle’s x value, as it takes half of the stageWidth value and then subtracts half of the Paddle’s width (50) in order to arrive at a true center placement: paddle.x = Number(stage.stageWidth / 2) - 50; paddle.y = Number(stage.stageHeight - 50);
startBallMovement() This function is called by the start button click event. In turn, it calls the Timer class’s start() method, which begins the Ball animation, which effectively begins the game.
ballMover() The ballMover() function is the engine that drives the entire game. It calculates the trajectory of the Ball, tests the Ball’s position for collisions, handles collision responses, and, when necessary, ends the game—and it will be necessary. Calculating the trajectory
Here’s how we explain the Ball’s trajectory calculation. (Sorry, we lied when we said we weren’t going to give you a math lesson.) For the Ball to move along a path, we need to establish its origin, speed, and direction. We can choose any starting position and any start angle. Furthermore, the Timer can establish speed as a function of pixels per 10
Chapter 7, Adding Interaction with ActionScript
129
Collision! A Whirlwind of Events
milliseconds. So here is a restatement of the givens according to the values we’ve selected: Point of origin xStart/yStart = 0,0
Initial direction of travel 45 degrees Rate of travel Initially, 5 pixels / 10 milliseconds To reinterpret Xegnma’s advice from the ActionScript.org forum, we can use trigonometric functions to calculate points along the perimeter of a circle that increases in size for every subsequent measurement. We can grow the circle by increasing its radius, thus allowing for calculation of a new point beyond the last.
Wa r n i n g
These lines represent trigonometric formulas, not ActionScript code.
If you search for documentation on this subject, you’ll find the following equations, appearing together as an approach for calculating a point on a circle as x/y, where we know the origin of the circle (xStart/yStart) and t, an angle in radians: newX = xStart + (radius * cosine(t)) newY = yStart + (radius * sine(t))
Documentation also tells us that we can convert from degrees to radians: t = degrees * pi/180;
Backed by these ideas, we can achieve increasing speed of trajectory by increasing the circle size, not at a fixed rate, but through a factored increase of its radius. We found that a modifier of +1 to the radius (speedFactor) once every 10 collisions created a natural rate of acceleration. With that said, here’s the math routine that calculates the trajectory: N ot e
The Flex framework provides the trigonometric functions as Math.cos (cosine) and Math.sin (sine), and Math.PI as the constant pi.
var radians:Number = degrees * Math.PI/180; radius += speedFactor; ball.x = radius * Math.cos(radians) + xStart; ball.y = radius * Math.sin(radians) + yStart;
With each level-up, this line of code modifies the circle to produce acceleration; notice the use of the incrementing operator (++ ) to increase the speedFactor by 1, modifying the radius as a number of pixels: speedFactor ++;
Testing for collisions
The first decision in the collision-detection routine is a fairly dense Boolean condition (i.e., it’s either true or false) that tests the Ball’s position for collisions with the Paddle or the stage boundaries. We’re throwing some new operators at you here, including the greater-than or equal (>=) operator, the 130
Learning Flex 4
Collision! A Whirlwind of Events
AND operator (&&), the less-than or equal (=). If true, there is an intersection of the x-axis. However, we also (&&) need an intersection of the y-axis. The second expression compares the Ball’s y-value plus its depth of 20 to the Paddle’s pure y-value, representing the plane of the Paddle’s surface. If both of these criteria are true, there is a collision with the Paddle. There’s no shame in reading that paragraph a couple of times to try and grasp this. The most difficult aspect of this criteria to keep straight is the pattern of parentheses used to distinguish the two halves of the condition, as well as the parentheses used to unite the two expressions into a single criteria. In the code in Example 7-11, the first expression represents the x-axis check, and the second expression represents the y-axis check. If we divorce the first line from the opening conditional parenthesis and emphasize the individual expressions, it may be easier to see the structure of the two-part conditional. Example 7-11. Testing for collisions with the Paddle If (
((ball.x + 20 >= paddle.x && ball.x + 20 = paddle.y))
The next three criteria, differentiated from one another by the OR operator (||) and shown in Example 7-12, test for collisions with the right, top, and left borders. You’ll find these three criteria are similar to the one used in Example 7-4, that stopped the PoweredCircle when it hit the stage boundary. To test the right boundary (line three of the conditional), the routine compares the Ball’s x-value plus its width to the stageWidth; if the Ball’s rightmost x-value has met or exceeded stageWidth, there is a collision. The top border (line four) is much easier. If the Ball’s unadjusted y-value meets or goes below the origin (0), there is a collision. And finally (line five), if the Ball’s x-value plus its width is less than or equal to the origin (0), there is an intersection. Example 7-12. Testing for collisions with the borders //continuing.. || ball.x + 20 >= stage.stageWidth || ball.y + 20
