Flex 4 Cookbook docx

www.it-ebooks.info www.it-ebooks.info Flex 4 Cookbook www.it-ebooks.info www.it-ebooks.info Flex 4 Cookbook Joshua Noble, Todd Anderson, Garth Braithwaite, Marco Casario, and Rich Tretola Beijing • Cambridge • Farnham • Köln • Sebastopol • Taipei • Tokyo www.it-ebooks.info Flex 4 Cookbook by Joshua Noble, Todd Anderson, Garth Braithwaite, Marco Casario, and Rich Tretola Copyright © 2010 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 (http://my.safaribooksonline.com). For more information, contact our corporate/institutional sales department: 800-998-9938 or corporate@oreilly.com. Editor: Mary E. Treseler Development Editor: Linda LaFlamme Production Editor: Kristen Borg Copyeditor: Rachel Head Proofreader: Kiel Van Horn Indexer: Ellen Troutman Zaig Cover Designer: Karen Montgomery Interior Designer: David Futato Illustrator: Robert Romano Printing History: May 2010: First Edition. Nutshell Handbook, the Nutshell Handbook logo, and the O’Reilly logo are registered trademarks of O’Reilly Media, Inc. Flex 4 Cookbook, the image of a Kuhl’s flying gecko, 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 con- tained herein. TM This book uses RepKover™, a durable and flexible lay-flat binding. ISBN: 978-0-596-80561-6 [M] 1273589930 www.it-ebooks.info Table of Contents Preface . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv 1. Flex and ActionScript Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.1 Create a Flex Project in Flash Builder 2 1.2 Create a Flex Library Project in Flash Builder 8 1.3 Set Compiler Options in Flash Builder 9 1.4 Compile a Flex Project Without Flash Builder 12 1.5 Add an Event Listener in MXML 14 1.6 Create Typed Vectors 16 1.7 Use Event Bubbling 17 1.8 Use Custom Events and Dispatch Data with Events 19 1.9 Listen for a Keyboard Event 20 1.10 Define Optional Parameters for Methods 21 1.11 Define and Implement an Interface 22 1.12 Access the Parent of a Flex Component 24 2. Containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27 2.1 Position Children Within a Container 28 2.2 Dynamically Add and Remove Children 30 2.3 Reorder Child Elements of a Container 33 2.4 Display Children Using Data Items 35 2.5 Use a Custom Item Renderer in a DataGroup 38 2.6 Use Multiple Item Renderers in a DataGroup 41 2.7 Enable Scrolling in a Container 43 2.8 Scale Children of a Container 48 2.9 Apply Skins to a Container 50 2.10 Set the Background Image of a BorderContainer 55 2.11 Use a Control Bar 57 2.12 Modify Layout of Content Elements in a Panel 59 2.13 Track Mouse Position Within a Container 62 2.14 Drag and Drop Between Visual Containers 64 v www.it-ebooks.info 2.15 Drag and Drop Between Data Containers 68 2.16 Add a Spark Layout Container to a MX Navigation Container 72 2.17 Create a Spark-Based ViewStack 74 3. Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 3.1 Position Children Linearly 82 3.2 Switch Layout Management at Runtime 83 3.3 Align and Size Children Within a Layout 85 3.4 Lay Out Children Using Rows and Columns 88 3.5 Size Children Uniformly 91 3.6 Lazily Create and Recycle Children 92 3.7 Create a Custom Layout 95 3.8 Measure and Alter the Container Size 97 3.9 Dynamically Change the Child Depth in the Layout 100 3.10 Use Matrix3D to Apply Transformations Within a Layout 102 3.11 Use TransformOffsets to Apply Transformations Within a Layout 104 3.12 Create a Custom 3D Layout 107 3.13 Programmatically Scroll Within a Layout 110 3.14 Determine the Visibility of Elements in a Sequence-Based Layout 114 4. Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 4.1 Size and Position a Graphic Element 119 4.2 Use Path to Draw a Shape with Stroke and Fill 120 4.3 Display Text in a Graphic Element 124 4.4 Display Bitmap Data in a Graphic Element 126 4.5 Display Gradient Text 129 4.6 Apply Bitmap Data to a Graphic Element as a Mask 130 4.7 Create a Custom Shape Element 132 4.8 Create a Custom Standalone Graphic Component 136 4.9 Define and Reuse Graphic Symbols 138 5. Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 5.1 Handle a Button’s Click Event 141 5.2 Create a Button Bar 144 5.3 Load a External SWF 146 5.4 Use a Calendar Date Input 147 5.5 Create Event Handlers for Menu-Based Controls 150 5.6 Display an Alert in an Application 151 5.7 Display a Custom Pop Up in a Custom Component 153 5.8 Detect a Mouse Click Outside a Pop Up to Close It 155 5.9 Using s:Scroller to Create a Scrollable Container 156 5.10 Handle focusIn and focusOut Events 157 5.11 Open a DropDownList with a Keyboard Shortcut 158 vi | Table of Contents www.it-ebooks.info 5.12 Grouping Radio Buttons 160 5.13 Submit a Flex Form to a Server-Side Script 162 6. Skinning and Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165 6.1 Create a Skin for s:Button 165 6.2 Apply a Repeating Background Image to an Application 168 6.3 Create a Skin for s:ButtonBar and s:ButtonBarButton 169 6.4 Skin an s:DropDownList 171 6.5 Skin a Spark Container 174 6.6 Change the Appearance of Components Using Styles 176 6.7 Apply Skins and Properties to Spark and MX Components with CSS 177 6.8 Create a Button Component with an Icon 179 6.9 Add Custom Style Properties 181 6.10 Partially Embed Fonts with CSS 183 7. Text and TextFlows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185 7.1 Create a TextFlow Object 186 7.2 Generate a TextFlow Object from Another Source 187 7.3 Create Links in a TextFlow 189 7.4 Add Graphic Elements to a TextFlow 190 7.5 Bind a Value to a s:TextInput Control 192 7.6 Create a Custom Selection Style 193 7.7 Style Links Within a TextFlow 195 7.8 Locate Elements Within a TextFlow 196 7.9 Determine All Fonts Installed on a User’s Computer 198 7.10 Display Vertical Text in a TextArea 199 7.11 Set the Selection in a TextArea 201 7.12 Control the Appearance of the Selected Text 203 7.13 Copy a Character as a Bitmap 204 7.14 Create Linked Containers in a TextFlow 207 7.15 Use a Custom Format Resolver 208 7.16 Skin the TextArea Control 212 7.17 Create Multiple Text Columns 213 7.18 Highlight the Last Character in a TextFlow 214 8. Lists and ItemRenderers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217 8.1 Create an Item Renderer for a Spark List 218 8.2 Create an Editable List 219 8.3 Scroll to an Item in a Spark List 221 8.4 Change the Layout of a Spark List 221 8.5 Create a Nested List 222 8.6 Set XML Data for a Spark List 225 8.7 Allow Only Certain Items in a Spark List to Be Selectable 228 Table of Contents | vii www.it-ebooks.info 8.8 Format and Validate Data Added in a Spark List Item Editor 230 8.9 Create a Right-Click Menu for a Spark List 235 8.10 Enable Dragging in a Spark List 237 8.11 Customize the Drop Indicator of a Spark List 240 8.12 Display Asynchronously Loaded Data in a Spark List 244 9. DataGrid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249 9.1 Create Custom Columns for a DataGrid 249 9.2 Specify Sort Functions for DataGrid Columns 253 9.3 Filter Items in a DataGrid 254 9.4 Create Custom Headers for a DataGrid 257 9.5 Handle Events from a DataGrid 260 9.6 Enable Drag and Drop in a DataGrid 264 9.7 Edit Items in a DataGrid 266 9.8 Search Within a DataGrid and Autoscroll to the Match 267 9.9 Generate a Summary for Flat Data by Using a Grouping Collection 270 9.10 Create an Async Refresh for a Grouping Collection 273 10. Video . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277 10.1 Create a Basic Video Player 277 10.2 Display Video Playback Progress 278 10.3 Create a Skinned Video Player 280 10.4 Display Streaming Video 283 10.5 Display the Bytes Loaded of a Video 284 10.6 Create a Basic Video Player Using the Open Source Media Framework 285 10.7 Access and Display Cue Points Embedded in a Video File 286 10.8 Create a Wrapper for the Open Source Media Framework 289 10.9 Display Captions with the Open Source Media Framework 290 11. Animations and Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295 11.1 Dynamically Set a Filter for a Component 296 11.2 Call an Animation in MXML and in ActionScript 297 11.3 Create Show and Hide Effects for a Component 299 11.4 Define Keyframes for an Animation 301 11.5 Create Parallel Series or Sequences of Effects 302 11.6 Pause, Reverse, and Restart an Effect 304 11.7 Set Effects for Adding a Component to or Removing One from a Parent Component 305 11.8 Create Custom Animation Effects 308 11.9 Use the DisplacementMapFilter Filter in a Flex Effect 310 11.10 Use the Convolution Filter to Create an Animation 314 11.11 Use Pixel Bender to Create a Transition 319 viii | Table of Contents www.it-ebooks.info [...]... in E4X Use Regular Expressions in E4X Queries Add a XMLList to a XML Object Handle Namespaces in XML Returned by a Service Encode an ActionScript Data Object as XML Decode XML from a Web Service into Strongly Typed Objects 40 6 40 8 41 0 41 3 41 7 42 0 42 6 42 7 42 9 43 1 43 3 43 4 43 5 43 7 43 8 43 9 44 1 44 2 44 3 44 4 44 6 16 Browser Communication 44 9 16.1 16.2 16.3 16 .4. .. www.it-ebooks.info 46 4 46 7 46 9 47 0 47 2 47 4 47 6 47 9 48 1 17.10 Use Query Strings to Pass Data to Modules 17.11 Use Linker Reports to Optimize Modules 48 6 48 8 18 AIR Basics 49 1 18.1 18.2 18.3 18 .4 18.5 18.6 18.7 18.8 18.9 18.10 18.11 18.12 18.13 18. 14 18.15 18.16 18.17 18.18 Create and Run an AIR Application with Flash Builder 4 Sign and Export... 23.11 Use Memory Profiling with Flash Builder to View Memory Snapshots 23.12 Check the Performance of Specific Methods 681 682 6 84 686 24 Internationalization, Accessibility, and Printing 689 24. 1 24. 2 24. 3 24. 4 24. 5 24. 6 24. 7 24. 8 24. 9 24. 10 24. 11 Add an International Character Set to an Application Use a Resource Bundle to Localize an Application Use the ResourceManager... Invoke JavaScript Functions from Flex Invoke ActionScript Functions from JavaScript Change the HTML Page Title via BrowserManager Parse the URL via BrowserManager Deep-Link to Data via BrowserManager Deep-Link Containers via BrowserManager 44 9 45 0 45 2 45 3 45 5 45 6 45 8 46 0 17 Modules and Runtime Shared Libraries 46 3 17.1 17.2 17.3 17 .4 17.5 17.6 17.7 17.8 17.9 Create... Beginnings of Lines with Regular Expressions 14. 14 Use Back-References 14. 15 Use a Look-Ahead or Look-Behind 380 383 3 84 387 389 392 393 393 3 94 395 397 398 40 0 40 0 40 2 Table of Contents | ix www.it-ebooks.info 15 Working with Services and Server-Side Communication 40 5 15.1 15.2 15.3 15 .4 15.5 15.6 15.7 15.8 15.9 15.10 15.11 15.12 15.13 15. 14 15.15 15.16 15.17 15.18 15.19 15.20 15.21... Visual Components with FlexUnit Create Mock Objects for Testing Use Complex Assertions in a Test Case 638 638 641 644 647 649 651 661 6 64 23 Compiling, Debugging, and Deploying 667 23.1 23.2 23.3 23 .4 23.5 23.6 23.7 23.8 Use trace Statements Without Flash Builder Use the Component Compiler Install the Flex Ant Tasks Use mxmlc and Ant to Compile Flex Applications Use... 353 3 54 357 358 362 3 64 366 370 372 14 Validation, Formatting, and Regular Expressions 379 14. 1 Use Validators and Formatters with TextInput Controls 14. 2 Create a Custom Formatter 14. 3 Use Regular Expressions to Create an International Zip Code Validator 14. 4 Validate Combo Boxes and Groups of Radio Buttons 14. 5 Show Validation Errors by Using ToolTips in a Form 14. 6 Use... 3.0 Cookbook by Joey Lott, Darron Schall, and Keith Peters (O’Reilly) Although Flex 4 Cookbook covers some areas of overlap between the Flex Framework and core Flash ActionScript classes, this book is very much focused on Flex development How This Book Is Organized As its name implies, Flex 4 Cookbook is stuffed full with recipes intended to teach you techniques that will help you get more from your Flex. .. Package an Application in a Native Installer (.exe, dmg, rpm) 18.20 Include Native Code Within Your AIR Application 49 1 49 4 49 7 49 9 49 9 500 502 503 505 507 508 509 511 512 5 14 5 14 516 522 530 531 19 Working with Data in AIR 537 19.1 19.2 19.3 19 .4 19.5 19.6 19.7 Safeguard Files with the Encrypted Local Store Migrate Serialization Changes Create an In-Memory... Unique IDs 323 325 327 328 329 332 336 339 342 344 345 347 349 13 Data Binding 351 13.1 13.2 13.3 13 .4 13.5 13.6 13.7 13.8 13.9 Bind to a Property Bind to a Function Create a Bidirectional Binding Bind to Properties by Using ActionScript Use Bindable Property Chains Bind to Properties on a XML Source by Using E4X Create Customized Bindable Properties . XMLSocket 43 8 15.16 Navigate a XML Document in E4X 43 9 15.17 Use Regular Expressions in E4X Queries 44 1 15.18 Add a XMLList to a XML Object 44 2 15.19 Handle. . . . . . . . . . 44 9 16.1 Link to an External URL 44 9 16.2 Work with FlashVars 45 0 16.3 Invoke JavaScript Functions from Flex 45 2 16 .4 Invoke ActionScript