Programming Flex™ 2 Other resources from O’Reilly Related titles Apollo for Flex Developers Ajax on Rails Pocket Guide Learning JavaScript ActionScrpt 3 Cookbook Programming Atlas ActionScript 3 Design Head Rush Ajax Patterns Rails Cookbook Essential ActionScript 3 Dynamic HTML: The Ajax on Java Definitive Reference oreilly.com oreilly.com is more than a complete catalog of O’Reilly books. You’ll also find links to news, events, articles, weblogs, sample chapters, and code examples. oreillynet.com is the essential portal for developers interested in open and emerging technologies, including new platforms, pro- gramming languages, and operating systems. Conferences O’Reilly brings diverse innovators together to nurture the ideas that spark revolutionary industries. We specialize in document- ing the latest tools and systems, translating the innovator’s knowledge into useful skills for those in the trenches. Visit conferences.oreilly.com for our upcoming events. Safari Bookshelf (safari.oreilly.com) is the premier online refer- ence library for programmers and IT professionals. Conduct searches across more than 1,000 books. Subscribers can zero in on answers to time-critical questions in a matter of seconds. Read the books on your Bookshelf from cover to cover or sim- ply flip to the page you need. Try it today for free. Programming Flex™ 2 Chafic Kazoun and Joey Lott Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo Programming Flex 2™ by Chafic Kazoun and Joey Lott Copyright © 2007 O’Reilly Media, Inc. All rights reserved. Printed in the United States of America. Published by O’Reilly Media, Inc., 1005 Gravenstein Highway North, Sebastopol, CA 95472. O’Reilly books may be purchased for educational, business, or sales promotional use. Online editions are also available for most titles (safari.oreilly.com). For more information, contact our corporate/institutional sales department: (800) 998-9938 or [email protected]. Editor: Steve Weiss Cover Designer: Karen Montgomery Developmental Editor: Audrey Doyle Interior Designer: David Futato Production Editor: Philip Dangler Illustrators: Robert Romano and Jessamyn Read Indexer: Reg Aubry Printing History: April 2007: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Programming Flex 2, the image of a Krait Snake, and related trade dress are trademarks 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. This book uses RepKover™, a durable and flexible lay-flat binding. ISBN-10: 0-596-52689-X ISBN-13: 978-0-596-52689-4 [M] Table of Contents Foreword . xi Preface . xxi 1. Introducing Flex . 1 Understanding Flex Application Technologies 1 Using Flex Elements 6 Working with Data Services (Loading Data at Runtime) 7 Understanding the Differences Between Traditional (HTML) and Flex Web Applications 9 Understanding How Flex Applications Work 10 Understanding Flex and Flash Authoring 11 Understanding Flex 1.5 and Flex 2 12 Summary 12 2. Building Applications with the Flex Framework . 13 Using Flex Tool Sets 13 Creating Projects 15 Building Applications 19 Deploying Applications 31 Flash Player Security 31 Understanding HTML Wrappers 33 Using SWFObject 34 Using Runtime Shared Libraries 35 Summary 42 v 3. MXML . 43 Understanding MXML Syntax and Structure 43 Making MXML Interactive 50 Summary 52 4. ActionScript . 53 Using ActionScript 54 MXML and ActionScript Correlations 57 Understanding ActionScript Syntax 58 Variables and Properties 61 Inheritance 72 Interfaces 73 Handling Events 74 Error Handling 76 Using XML 78 Reflection 82 Summary 85 5. Framework Fundamentals . 86 Understanding the Flex Application Life Cycle 86 Differentiating Between Flash Player and Framework 88 Bootstrapping Flex Applications 89 Understanding Application Domains 92 Understanding the Preloader 94 Summary 95 6. Managing Layout . 96 Flex Layout Overview 96 Making Fluid Interfaces 116 Putting It All Together 117 Summary 120 7. Working with UI Components . 121 Understanding UI Components 122 Buttons 128 Value Selectors 129 Text Components 130 List-Based Controls 131 Pop-Up Controls 140 vi | Table of Contents Navigators 143 Control Bars 147 Summary 149 8. Framework Utilities and Advanced Component Concepts . 150 Tool Tips 150 Pop-Ups 156 Cursor Management 162 Drag and Drop 164 Customizing List-Based Controls 172 Focus Management and Keyboard Control 183 Summary 188 9. Working with Media . 189 Overview 189 Adding Media 191 Working with the Different Media Types 197 Summary 210 10. Managing State . 211 Creating States 211 Applying States 212 Defining States Based on Existing States 213 Adding and Removing Components 214 Setting Properties 216 Setting Styles 217 Setting Event Handlers 218 Using ActionScript to Define States 218 Managing Object Creation Policies (Preloading Objects) 228 Handling State Events 230 When to Use States 231 Summary 231 11. Using Effects and Transitions . 232 Using Effects 232 Creating Custom Effects 244 Using Transitions 251 Creating Custom Transitions 256 Summary 257 Table of Contents | vii 12. Working with Data . 258 Using Data Models 258 Data Binding 268 Enabling Data Binding for Custom Classes 277 Data Binding Examples 280 Building Data Binding Proxies 284 Summary 287 13. Validating and Formatting Data . 288 Validating User Input 288 Formatting Data 308 Summary 314 14. Customizing Application Appearance . 315 Using Styles 316 Skinning Components 333 Customizing the Preloader 344 Themes 348 Runtime CSS 351 Summary 354 15. Client Data Communication . 355 Local Connections 356 Persistent Data 360 Communicating with the Host Application 374 Summary 379 16. Remote Data Communication . 380 Understanding Strategies for Data Communication 381 Working with Request/Response Data Communication 382 Web Services 395 Real-Time/Socket Connection 406 File Upload/Download 407 Summary 408 17. Application Debugging . 409 The Flash Debug Player 409 Using FDB 413 Debugging with Flex Builder 2 414 viii | Table of Contents Remote Debugging 418 Logging Using trace( ) Within an Application 419 The Logging Framework 421 Debugging Remote Data 425 Summary 426 18. Application Components . 427 The Importance of Application Components 428 MXML Component Basics 429 Component Styles 440 Summary 443 19. Building Custom Components . 444 Component Framework Overview 444 Component Life Cycle 446 Component Implementation 449 Adding Custom Properties and Events 457 Adding Styling Support 460 Summary 462 Index . 463 Table of Contents | ix Foreword 1 Whenever I talk to people about Flex 2, the most common questions they ask are the basic ones: what is it, who is it for, and why did we build it? It turns out that although these questions are basic, they really get to the heart of what Flex 2 is all about. Flex 2 is a new technology for building rich web applications and experiences that run on Flash Player, so they look great, are responsive, and are highly interactive. It was designed specifically to be comfortable and productive for those coming from a web or application development background, though it is suitable for anyone. Why did we build it? Well that’s a longer story. This Shouldn’t Be Too Hard The genesis of my involvement with Flex 2 really started with a seed of inspiration. Like everyone who surfs the Web, I would occasionally come across an application that just blew me away. It would be responsive, look incredible, and have an almost cinematic quality to it. Being curious, I would poke around to figure out how it was built. What I discovered was that it was almost always built with Flash. Because my back- ground is in software development and I like to build things, this made me want to try Flash, so I did. The result was shocking and humbling. I failed miserably, and I came away unable to fathom how anybody built anything with Flash, never mind how they built the amazing creations that had inspired me. Part of my problem was with the Flash authoring tool. Not only didn’t it feel like the developer tools I’d used before, but also it didn’t really seem to have been designed for what I was trying to do. For example, the Timeline is one of the most notable fea- tures of Flash. I could not, for the life of me, figure out how I would use it to build an application. Although developer tools often provide a toolbox of components, such as buttons and lists that you can drag onto the design surface, the Flash toolbox was xi different. Here the components were things such as a line, rectangle, pen, pencil, ink bottle, and paint bucket. How do I build an application with a pencil? The other problem I had was with the terminology used to describe the concepts pre- sented by Flash Player. In Flash, small reusable UI elements are called Movie Clips. The main display area is called the Stage. The output of compiling the project is a Movie. I can’t tell you how weird it was to try to track down a problem by running the Debug Movie command. Maybe We Need a Different Approach From my experiment, I concluded that Flash simply was not designed for building applications, or for developers like me. However, rather than see this as a problem, I saw it as an opportunity. How many more great Flash applications would there be if it was easier for developers to build them? I focused on this question, instead of just trying harder to use Flash, because my main interest in software is not so much in writing applications, but in improving the process of doing so.