www.it-ebooks.info Programming Flex ™ 2 www.it-ebooks.info Other resources from O’Reilly Related titles Apollo for Flex Developers Pocket Guide ActionScrpt 3 Cookbook ActionScript 3 Design Patterns Essential ActionScript 3 Ajax on Java Ajax on Rails Learning JavaScript Programming Atlas Head Rush Ajax Rails Cookbook Dynamic HTML: The 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. www.it-ebooks.info Programming Flex ™ 2 Chafic Kazoun and Joey Lott Beijing • Cambridge • Farnham • Köln • Paris • Sebastopol • Taipei • Tokyo www.it-ebooks.info 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 corporate@oreilly.com. Editor: Steve Weiss Developmental Editor: Audrey Doyle Production Editor: Philip Dangler Indexer: Reg Aubry Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrators: Robert Romano and Jessamyn Read 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] www.it-ebooks.info v 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 www.it-ebooks.info vi | Table of Contents 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 www.it-ebooks.info Table of Contents | vii 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 www.it-ebooks.info viii | Table of Contents 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 www.it-ebooks.info Table of Contents | ix 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 www.it-ebooks.info [...]... to the objects or via CSS Flex Builder 2 Flex Builder 2 is the official Adobe IDE for building and debugging Flex applications Built on the popular Eclipse IDE, Flex Builder has built-in tools for writing, debugging, and building applications using Flex technologies such as MXML and ActionScript The Flex framework ships as part of Flex Builder However, Flex Builder and the Flex framework are not synonymous... decision we made was to provide the Flex Framework SDK, which includes the Flex framework with complete source, compilers, and other utilities, for free We did this to encourage adoption and enable it to be freely used with nonAdobe tools You can download it by going to the official Flex web site, http://www flex. org Flex Builder 2 Flex Builder 2 is an IDE that makes using the Flex framework more productive... www.it-ebooks.info Preface 2 This book is a long time in the making We first started talking about this book several years ago, when Flex 1.0 first hit the market We recognized that Flex was something important, yet we knew the product hadn’t matured enough at that point However, we shortly thereafter heard the whispers of Flex 2, a new and improved Flex After working with Flex 2, we were certain that... not really support Flex, they couldn’t have been more wrong It was amazing to experience how excited Adobe employees were about Flex and all of the technology being created by the former Macromedia teams And over the past year since the acquisition, this has been confirmed by what we’ve been able to accomplish January 4, 20 07, just six months after shipping Flex 2, we released Flex 2. 0.1 Although it... to create Flex 2 So, what is it? The core of Flex 2 is the Flex framework, a library of ActionScript objects that provide a great foundation for building rich Internet applications that run on Flash It is a developer-centric framework that provides a strong architecture and uses design patterns that will be familiar to developers coming from a NET, Java, or web development background Flex 2 has a rich... Flash Player 9 This means Flex 2 applications can utilize all the functionality of Flash Player, such as animation, audio, video, request/response network data communication, real-time data communication, and much more Furthermore, the Flex 2 framework vastly simplifies the creation of Flash Platform applications over previous options (Flash authoring, Flex 1.5, etc.) Flex 2 is huge Although the learning... all major browsers, including Firefox, Internet Explorer, Safari, and Opera Flex 2 content relies on features of Flash Player 9, meaning that users must be running Flash Player 9 or higher to correctly view Flex 2 content You can read more about deploying Flex applications and detecting player versions in Chapter 2 Using the Flex framework you can build and compile to the swf format The compiled swf... can really understand what’s going on What I really like about Programming Flex 2 is that not only does it take you through the breadth of what Flex provides, but it also takes you deep into how it works It explains the high-level concepts as well as points out the finer details of what’s really happening I also like that Programming Flex 2 takes a practical approach, explaining common techniques of... use Flex Builder to use the Flex framework Instead, you can opt to install the free Flex SDK, which includes the compiler and the Flex framework You can then integrate the Flex framework with a different IDE, or you can use any text editor to edit the MXML and ActionScript files, and you can run the compiler from the command line Flex Builder is a commercial product See http://www.adobe.com/go/ flexbuilder... Flash Media Server Additional Flex Libraries and Components At the time of this writing there is just one official add-on Flex library, the Flex Charting Components As time goes on, it is expected that many additional Flex libraries will become available Additional Flex libraries such as the Flex Charting Components are not part of the standard component sets that ship with the Flex framework Rather, you . 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. Objects) 22 8 Handling State Events 23 0 When to Use States 23 1 Summary 23 1 11. Using Effects and Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 2 Using. . . . 23 2 Using Effects 23 2 Creating Custom Effects 24 4 Using Transitions 25 1 Creating Custom Transitions 25 6 Summary 25 7 www.it-ebooks.info viii | Table of Contents 12. Working with Data . .