8946Ch00CMP4
11/12/07
8:46 AM
Page i
Foundation Flex for Developers Data-Driven Applications with PHP, ASP.NET, ColdFusion, and LCDS
Sas Jacobs with Koen De Weggheleire
8946Ch00CMP4
11/12/07
8:46 AM
Page ii
Foundation Flex for Developers Data-Driven Applications with PHP, ASP.NET, ColdFusion, and LCDS Copyright © 2008 by Sas Jacobs with Koen De Weggheleire All rights reserved. No part of this work may be reproduced or transmitted in any form or by any means, electronic or mechanical, including photocopying, recording, or by any information storage or retrieval system, without the prior written permission of the copyright owner and the publisher. ISBN-13 (pbk): 978-1-59059-894-8 ISBN-10 (pbk): 1-59059-894-6 ISBN-13 (electronic): 978-1-4302-0443-5 ISBN-10 (electronic): 1-4302-0443-5 Printed and bound in the United States of America 9 8 7 6 5 4 3 2 1 Trademarked names may appear in this book. Rather than use a trademark symbol with every occurrence of a trademarked name, we use the names only in an editorial fashion and to the benefit of the trademark owner, with no intention of infringement of the trademark. Distributed to the book trade worldwide by Springer-Verlag New York, Inc., 233 Spring Street, 6th Floor, New York, NY 10013. Phone 1-800-SPRINGER, fax 201-348-4505, e-mail
[email protected], or visit www.springeronline.com. For information on translations, please contact Apress directly at 2855 Telegraph Avenue, Suite 600, Berkeley, CA 94705. Phone 510-549-5930, fax 510-549-5939, e-mail
[email protected], or visit www.apress.com. The information in this book is distributed on an “as is” basis, without warranty. Although every precaution has been taken in the preparation of this work, neither the author(s) nor Apress shall have any liability to any person or entity with respect to any loss or damage caused or alleged to be caused directly or indirectly by the information contained in this work. Java™ and all Java-based marks are trademarks or registered trademarks of Sun Microsystems, Inc., in the US and other countries. Apress, Inc., is not affiliated with Sun Microsystems, Inc., and this book was written without endorsement from Sun Microsystems, Inc. The source code for this book is freely available to readers at www.friendsofed.com in the Downloads section.
Credits Lead Editors Chris Mills, Matthew Moodie Technical Reviewer Charles Brown Editorial Board Steve Anglin, Ewan Buckingham, Tony Campbell, Gary Cornell, Jonathan Gennick, Jason Gilmore, Kevin Goff, Jonathan Hassell, Matthew Moodie, Joseph Ottinger, Jeffrey Pepper, Ben Renow-Clarke, Dominic Shakeshaft, Matt Wade, Tom Welsh Project Manager Beth Christmas Copy Editor Nancy Sixsmith Associate Production Director Kari Brooks-Copony
Production Editor Elizabeth Berry Compositor Diana Van Winkle Proofreaders Patrick Vincent, April Eddy Indexer Odessa&Cie Artist Diana Van Winkle Cover Image Designer Corné van Dooren Interior and Cover Designer Kurt Krames Manufacturing Director Tom Debolski
8946Ch00CMP4
11/12/07
8:46 AM
Page iii
For my partner David, who has supported and loved me while writing this book. And for our son, whose birth interrupted the writing process. I love you both. Sas Jacobs
8946Ch00CMP4
11/12/07
8:46 AM
Page iv
8946Ch00CMP4
11/12/07
8:46 AM
Page v
CONTENTS AT A GLANCE About the Authors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xix About the Technical Reviewer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xxi About the Cover Image Designer . . . . . . . . . . . . . . . . . . . . . . . . . . xxiii Acknowledgments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xv Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . xvii
PART 1 FLEX APPLICATION BASICS Chapter 1 Introduction to Flex . . . . . . . . . . . . . . . . Chapter 2 Working with ActionScript 3.0 in Flex 3 Chapter 3 Creating Custom Components . . . . . . . . Chapter 4 Interacting with Users . . . . . . . . . . . . . . . Chapter 5 Interacting with the Web Browser . . . . . Chapter 6 Working with Data in Flex Applications . Chapter 7 Introduction to XML . . . . . . . . . . . . . . . . Chapter 8 Using XML in Flex Builder . . . . . . . . . . . . Chapter 9 Flex Data-Driven Controls . . . . . . . . . . . Chapter 10 Debugging Flex Applications . . . . . . . .
3 . 17 . 47 . 75 119 147 209 227 267 311
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PART 2 DATA-DRIVEN APPLICATIONS Chapter 11 Chapter 12 Chapter 13 Chapter 14
XML Case Study . . . ColdFusion Project ASP.NET Case Study PHP Case Study . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
333 357 375 421
PART 3 LIVECYCLE DATA SERVICES Chapter 15 Introduction to LiveCycle Data Services Chapter 16 LiveCycle Data Services Case Study . . . . Index
. . . . . . . . . . .
469 511
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
534
. . . . . . . . . . .
v
8946Ch00CMP4
11/12/07
8:46 AM
Page vi
8946Ch00CMP4
11/12/07
8:46 AM
Page vii
CONTENTS About the Authors .
About the Technical Reviewer .
Introduction
xxi
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
About the Cover Image Designer Acknowledgments .
xix
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . .
xxiii xv
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
xvii
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
PART 1 FLEX APPLICATION BASICS Chapter 1 Introduction to Flex
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
3
Understanding web applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Understanding the role of Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Understanding the role of MXML and ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . 6 Understanding MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Understanding ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Understanding the major changes in ActionScript 3.0 . . . . . . . . . . . . . . . . . . . . . 9 Working with applications in Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Working with data in Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 Flex tools for working with data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12 The application development process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Useful resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Chapter 2 Working with ActionScript 3.0 in Flex 3 Working with ActionScript 3.0 in Flex applications Using inline ActionScript statements . . . . . . Using the element . . . . . . . . . Using the source attribute in . . . Using include inside an element . Creating custom class files . . . . . . . . . . . Understanding packages . . . . . . . . . . Understanding custom classes . . . . . . . Working through an example . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
17
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
18 19 22 27 27 28 28 30 31
vii
8946Ch00CMP4
11/12/07
8:46 AM
Page viii
CONTENTS
Creating ActionScript projects . . . . . Working with a minimal Flex interface . Additional points . . . . . . . . . . . . . . . Understanding ActionScript 3.0 events Creating bindable properties . . . . . . What happened to trace? . . . . . . . . ActionScript 3.0 best practices . . . . . . . Declaring data types appropriately . . . Importing classes . . . . . . . . . . . . . Creating appropriate packages . . . . . Summary . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
Chapter 3 Creating Custom Components .
. . . . . . . . . . .
. . . . . . . . . . .
Working with the Alert control . . . . . . . Adding a message and title . . . . . . . Adding buttons . . . . . . . . . . . . . . Setting the parent . . . . . . . . . . . . Adding a closeHandler method . . . . . Setting the iconClass argument . . . . . Setting the defaultButtonFlag argument A simple example . . . . . . . . . . . . Changing the appearance of the alert . Changing the size of the alert . . .
viii
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
48 49 51 54 55 56 59 63 63 65 66 67 68 68 68 68 68 68 69 70 71 72 72
75
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
36 37 40 40 42 42 43 43 43 44 44
47
. . . . . . . . . . . . . . . . . . . . .
Creating components using MXML . . . . . . . . . . . . . . Example: Creating a country ComboBox component . . Passing a value to the component . . . . . . . . . . . . Binding a property in the component . . . . . . . . . . Dispatching events . . . . . . . . . . . . . . . . . . . . . Creating a custom event class . . . . . . . . . . . . . . Creating a composite component . . . . . . . . . . . . Creating components using ActionScript . . . . . . . . . . . Working through examples . . . . . . . . . . . . . . . . Passing values to ActionScript components . . . . . . . Dispatching custom events in ActionScript components Deciding on MXML or ActionScript . . . . . . . . . . . . . . Creating simple components . . . . . . . . . . . . . . . Creating composite components . . . . . . . . . . . . . Creating nonvisual components . . . . . . . . . . . . . Modifying component behavior . . . . . . . . . . . . . Creating a new component . . . . . . . . . . . . . . . . Using the code-behind approach . . . . . . . . . . . . . . . Sharing components . . . . . . . . . . . . . . . . . . . . . . Distributing SWC files . . . . . . . . . . . . . . . . . . . Using SWC files . . . . . . . . . . . . . . . . . . . . . . . Distributing Runtime Shared Libraries . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 4 Interacting with Users
. . . . . . . . . . .
. . . . . . . . . .
76 76 77 77 77 78 78 78 82 82
8946Ch00CMP4
11/12/07
8:46 AM
Page ix
CONTENTS
Changing the button labels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Changing the button size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 A simple example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Working with pop-ups . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 A simple example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85 Passing values from the pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 89 Passing values to the pop-up . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Responding to pop-up events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Working with forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Understanding the Form container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Working with a data model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Using the tag . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 Determining required values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Validating user input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Working with the CreditCardValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Working with the CurrencyValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Working with the DateValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Working with the EmailValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Working with the NumberValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Working with the PhoneNumberValidator . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Working with the RegExpValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Working with the SocialSecurityValidator . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Working with the StringValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106 Working with the ZipCodeValidator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Adding validation to a form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Validating with validator events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Validating with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 110 Formatting user input . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Using the CurrencyFormatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Using the DateFormatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 Using the NumberFormatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Using the PhoneFormatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 Using the ZipCodeFormatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Applying the formatter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115 Adding formatters to a form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116 Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
Chapter 5 Interacting with the Web Browser Loading a web page from Flex . . . . . . . . . . Sending variables when calling a web page Calling JavaScript with navigateToURL . . . Working through a simple example . . . . . Sending variables into a SWF file . . . . . . . . Using querystring parameters . . . . . . . . Modifying the Flex wrapper files . . . . Accessing querystring variables in Flex . Working through an example . . . . . . Using flashVars . . . . . . . . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . . . . . . .
119
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
120 121 121 122 124 125 125 126 126 128
ix
8946Ch00CMP4
11/12/07
8:46 AM
Page x
CONTENTS
Understanding the External API . . . . . . . . . . . . . . . Scripting the ExternalInterface class . . . . . . . . Calling a JavaScript function using ActionScript . . . . Calling an ActionScript function with JavaScript . . . . Working through a two-way communication example Limitations of the External API . . . . . . . . . . . . . Understanding Flash Player security . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
Chapter 6 Working with Data in Flex Applications Sources of external data . . . . . . . . . . . . . . . Working with the HTTPService class . . . . . . . . . Creating an HTTPService request . . . . . . . . Making the request . . . . . . . . . . . . . . . . Receiving a response . . . . . . . . . . . . . . . Specifying a return type . . . . . . . . . . . . . Accessing loaded content . . . . . . . . . . . . Sending variables with the request . . . . . . . Specifying a request method and format . . . Properties of the HTTPService class . . . . . . . Methods of the HTTPService class . . . . . . . Events of the HTTPService class . . . . . . . . . Understanding the URLLoader class . . . . . . . . . Creating a URLLoader request . . . . . . . . . . Making the request . . . . . . . . . . . . . . . . Receiving a response . . . . . . . . . . . . . . . Specifying a return type . . . . . . . . . . . . . Sending variables with the request . . . . . . . Specifying a request method . . . . . . . . . . Properties of the URLLoader class . . . . . . . Methods of the URLLoader class . . . . . . . . Events of the URLLoader class . . . . . . . . . . Comparing the HTTPService and URLLoader . . . . Loading information from text files . . . . . . . . . Using the tag . . . . . . . . Using the HTTPService class with ActionScript . Using the URLLoader class . . . . . . . . . . . . Loading information stored in variable pairs . . . . Using variable pairs with the HTTPService class Using variable pairs with the URLLoader class . Using the tag . . . . . . . . Using the HTTPService class with ActionScript . Using the URLLoader class . . . . . . . . . . . . Sending data to the server . . . . . . . . . . . . . . Sending variables with the HTTPService class . Sending variables with the URLLoader . . . . . Other considerations . . . . . . . . . . . . . . . Working through an example . . . . . . . . . . Updating content with the HTTPService class .
x
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
. . . . . . . .
130 130 131 135 139 143 144 145
. . . . . . . . . . . . .
147
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
148 148 149 149 149 150 150 151 151 151 153 153 153 154 154 154 154 155 155 155 155 156 156 157 157 159 160 161 161 162 162 164 165 166 166 166 167 167 167
8946Ch00CMP4
11/12/07
8:46 AM
Page xi
CONTENTS
Updating content with the URLLoader class . . . . . . . . Understanding Flash Player 9 security . . . . . . . . . . . . . . Understanding security sandboxes . . . . . . . . . . . . . Creating a cross-domain policy file . . . . . . . . . . . . . Proxying data locally . . . . . . . . . . . . . . . . . . . . . Separating data from presentation . . . . . . . . . . . . . . . Working with the tag . . . . . . . . . . . . . Using ActionScript to work with complex data structures Understanding data binding . . . . . . . . . . . . . . . . . . . Binding with curly braces syntax . . . . . . . . . . . . . . Including a calculation . . . . . . . . . . . . . . . . . . Concatenating values . . . . . . . . . . . . . . . . . . Adding conditions . . . . . . . . . . . . . . . . . . . . Using an ActionScript function . . . . . . . . . . . . . Binding with the tag . . . . . . . . . . . . . Including a calculation . . . . . . . . . . . . . . . . . . Concatenating values . . . . . . . . . . . . . . . . . . Adding conditions . . . . . . . . . . . . . . . . . . . . Using an ActionScript function . . . . . . . . . . . . . Working through an example . . . . . . . . . . . . . . Binding with ActionScript . . . . . . . . . . . . . . . . . . Using bindProperty . . . . . . . . . . . . . . . . . . . Using bindSetter . . . . . . . . . . . . . . . . . . . . . Working through a scripted binding example . . . . . . . Adding validators and formatters . . . . . . . . . . . . . . . . Understanding validators . . . . . . . . . . . . . . . . . . Creating a custom validator . . . . . . . . . . . . . . . Understanding formatters . . . . . . . . . . . . . . . . . . Creating a custom formatter . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 7 Introduction to XML.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Understanding XML . . . . . . . . . . . . . . . . . . What is an XML document? . . . . . . . . . . . Understanding the XML framework . . . . . . A brief history . . . . . . . . . . . . . . . . . . . Understanding why you should use XML . . . . Simplicity . . . . . . . . . . . . . . . . . . . Flexibility . . . . . . . . . . . . . . . . . . . Readability . . . . . . . . . . . . . . . . . . Accessibility . . . . . . . . . . . . . . . . . . Platform and vendor independence . . . . Using XML information . . . . . . . . . . . . . Understanding the structure of an XML document The document prolog . . . . . . . . . . . . . . The XML declaration . . . . . . . . . . . . . Processing instructions . . . . . . . . . . . Document Type Definitions (DTDs) . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
172 174 174 175 175 176 177 179 187 188 188 188 188 189 189 190 190 190 190 191 195 195 197 198 201 201 201 204 204 207
209 . . . . . . . . . . . . . . . .
210 210 210 211 212 212 212 213 213 213 213 214 214 214 215 216
xi
8946Ch00CMP4
11/12/07
8:46 AM
Page xii
CONTENTS
The document tree . . . . . . . . . The document root . . . . . . Elements . . . . . . . . . . . . Attributes . . . . . . . . . . . . Text . . . . . . . . . . . . . . . Entities . . . . . . . . . . . . . CDATA . . . . . . . . . . . . . . White space . . . . . . . . . . . . . Namespaces . . . . . . . . . . . . . A simple MXML document . . . . Understanding the term “well-formed” Element structure . . . . . . . . . . Elements must be closed . . . . . Elements must nest correctly . . . Use quotes for attributes . . . . . Summary . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
Chapter 8 Using XML in Flex Builder
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
Working with XML . . . . . . . . . . . . . . . . . . . . . . . . Understanding E4X expressions . . . . . . . . . . . . . . . Understanding the XML and XMLList classes . . . . . . . . Properties of the XML class . . . . . . . . . . . . . . . Methods of the XML class . . . . . . . . . . . . . . . . Manipulating XML content . . . . . . . . . . . . . . . . . Changing node and attribute values . . . . . . . . . . Adding new nodes . . . . . . . . . . . . . . . . . . . . Copying nodes . . . . . . . . . . . . . . . . . . . . . . Deleting nodes . . . . . . . . . . . . . . . . . . . . . . Working with the tag . . . . . . . . . . . . . . . . Loading an external XML document . . . . . . . . . . . . . . Using the tag . . . . . . . . . . . . . . Using the HTTPService class with ActionScript . . . . . . . Using the URLLoader class . . . . . . . . . . . . . . . . . . Problem solving . . . . . . . . . . . . . . . . . . . . . . . . Binding XML content with E4X expressions . . . . . . . . Working through an example . . . . . . . . . . . . . . . . Consuming web services . . . . . . . . . . . . . . . . . . . . . Working with the WebService class . . . . . . . . . . . . . Properties of the WebService class . . . . . . . . . . . Methods of the WebService class . . . . . . . . . . . . Creating the web service request . . . . . . . . . . . . Specifying the operation . . . . . . . . . . . . . . . . Making the request . . . . . . . . . . . . . . . . . . . Receiving a response . . . . . . . . . . . . . . . . . . . Accessing the web service response . . . . . . . . . . Understanding data types . . . . . . . . . . . . . . . . Consuming a web service with the tag Consuming a web service with ActionScript . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
xii
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . .
216 216 216 218 219 219 220 220 220 221 222 222 223 223 224 224
227 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
228 228 231 232 233 236 236 237 237 237 238 240 240 242 243 244 244 245 253 253 254 255 255 256 257 258 258 258 259 263 265
8946Ch00CMP4
11/12/07
8:46 AM
Page xiii
CONTENTS
Chapter 9 Flex Data-Driven Controls Working with a dataProvider . . . . . . . . . . . Using the Repeater control . . . . . . . . . . . Setting the dataProvider . . . . . . . . . . . Using XML as a dataProvider . . . . . . . . Iterating through controls in a Repeater . . Working through a simple example . . . . . Using the TileList . . . . . . . . . . . . . . . . . Displaying images in a TileList . . . . . . . . Changing the direction . . . . . . . . . . . . Using a custom item renderer . . . . . . . . Responding to user interactions . . . . . . . Working through an example . . . . . . . . Using the DataGrid . . . . . . . . . . . . . . . . Specifying column settings . . . . . . . . . Sorting columns . . . . . . . . . . . . . . . Reordering columns . . . . . . . . . . . . . Setting the display of data within a column Wrapping text within a column . . . . . . . Using renderers . . . . . . . . . . . . . . . . Working with a drop-in renderer . . . . Working with an inline renderer . . . . Working with a custom renderer . . . . Choosing a renderer . . . . . . . . . . . Editing content . . . . . . . . . . . . . . . . Using the default item editor . . . . . . Using a drop-in item editor . . . . . . . Using an inline item editor . . . . . . . Using a custom item editor . . . . . . . Other column properties . . . . . . . . . . Working with rows . . . . . . . . . . . . . . Using common DataGrid events . . . . . . . Working with the change event . . . . . Working with the itemClick event . . . Working through a DataGrid example . . . Summary . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . .
267
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 10 Debugging Flex Applications . Working with the trace method . . . . . . . . . Logging to a text file . . . . . . . . . . . . . Working with the tag . . . . Understanding Flex errors . . . . . . . . . . . . Compiler warning messages . . . . . . . . . Compiler errors . . . . . . . . . . . . . . . . Run-time errors . . . . . . . . . . . . . . . . Using ActionScript to catch run-time errors Working with try catch blocks . . . . . Including more than one catch block .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
268 269 269 270 271 272 276 276 278 279 281 281 284 285 287 287 288 289 289 290 291 293 293 293 294 295 296 296 297 297 298 298 299 301 309
. . . . . . . . . . . . . . . . . . . .
311
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
312 313 314 315 315 316 317 318 318 320
xiii
8946Ch00CMP4
11/12/07
8:46 AM
Page xiv
CONTENTS
Adding a finally block . . . . Throwing custom errors . . . Creating custom errors . . . Using the debugger . . . . . . . . . . Adding breakpoints . . . . . . . . Managing breakpoints . . . . . . Viewing variable values . . . . . Changing the value of a variable Watching a variable . . . . . . . Summary . . . . . . . . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
. . . . . . . . . .
321 321 322 323 325 326 326 328 329 330
PART 2 DATA-DRIVEN APPLICATIONS Chapter 11 XML Case Study
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Understanding the application . . . . . . The application interface . . . . . . The application data source . . . . . The assets . . . . . . . . . . . . . . . Structuring the application . . . . . Creating the application structure . . . . Creating the interface . . . . . . . . Creating the custom class . . . . . . Creating the custom component . . Writing the custom class . . . . . . . . . Declaring private variables . . . . . . Creating the constructor method . . Loading the XML document . . . . . Creating the GalleryLoader object . . . . Processing the loaded XML content . . . Populating the ComboBox with galleries Building the custom component . . . . Creating the interface . . . . . . . . Configuring the component . . . . . Displaying the first image . . . . . . . . Displaying the other images . . . . . . . Summary . . . . . . . . . . . . . . . . . .
Chapter 12 ColdFusion Project
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Understanding the application . . . . . . The application data source . . . . . Structuring the application . . . . . Creating the application . . . . . . . . . Connecting to the ColdFusion server Creating the ColdFusion page . . . . Creating the Flex application . . . . Creating the Flex interface . . . . . . Summary . . . . . . . . . . . . . . . . . .
xiv
. . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
. . . . . . . . .
333 . . . . . . . . . . . . . . . . . . . . . .
334 334 336 336 336 337 337 338 339 339 340 340 341 342 343 345 346 346 347 349 352 355
357 . . . . . . . . .
358 360 361 361 361 364 366 367 373
8946Ch00CMP4
11/12/07
8:46 AM
Page xv
CONTENTS
Chapter 13 ASP.NET Case Study
. . . . . . . . . . . . . . . . . . . . . . . . . . . .
Understanding the application . . . . . . . . . . . . . . . . . . . . . . . . . . . The application interface . . . . . . . . . . . . . . . . . . . . . . . . . . . The application data source . . . . . . . . . . . . . . . . . . . . . . . . . . The database structure . . . . . . . . . . . . . . . . . . . . . . . . . . The XML content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Structuring the application . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Creating the Flex application interface . . . . . . . . . . . . . . . . . . . . Creating the ASP.NET pages to generate XML content for the application Displaying a list of events . . . . . . . . . . . . . . . . . . . . . . . . . Displaying a list of categories and locations . . . . . . . . . . . . . . . Creating the custom class . . . . . . . . . . . . . . . . . . . . . . . . . . . Loading the events for a specific date . . . . . . . . . . . . . . . . . . . . Populating the interface with the events . . . . . . . . . . . . . . . . . . . Creating a custom component for event details . . . . . . . . . . . . . . . Showing details of the selected event . . . . . . . . . . . . . . . . . . . . Updating the selected event . . . . . . . . . . . . . . . . . . . . . . . . . . Updating in Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Updating in ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . Testing the update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Adding a new event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Deleting an event . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Deleting in Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Deleting in ASP.NET . . . . . . . . . . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Chapter 14 PHP Case Study .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Understanding the application . . . . . . . . . . . . . . . . . . . The application interface . . . . . . . . . . . . . . . . . . . The application data source . . . . . . . . . . . . . . . . . . Viewing the XML content . . . . . . . . . . . . . . . . . Structuring the application . . . . . . . . . . . . . . . . . . Creating the application . . . . . . . . . . . . . . . . . . . . . . Creating the Flex application interface . . . . . . . . . . . . Creating the PHP pages to generate the XML content . . . Creating the custom ActionScript class to load the content Loading the XML content . . . . . . . . . . . . . . . . . . . Creating custom events . . . . . . . . . . . . . . . . . . . . Creating the MessageEvent class . . . . . . . . . . . . . Creating the PostsEvent class . . . . . . . . . . . . . . . Dispatching events from the completeHandler function Displaying the current posts . . . . . . . . . . . . . . . . . . Displaying the title and date . . . . . . . . . . . . . . . Displaying the content . . . . . . . . . . . . . . . . . . . Changing the date format . . . . . . . . . . . . . . . . . Displaying the archive posts . . . . . . . . . . . . . . . . . . Disabling administrator functions . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . .
375 . . . . . . . . . . . . . . . . . . . . . . . . .
376 376 378 378 380 381 383 384 386 387 389 391 393 395 399 406 407 407 411 413 415 416 416 418 419
421 . . . . . . . . . . . . . . . . . . . .
422 422 426 426 428 429 430 433 436 438 439 439 440 441 442 442 444 444 445 448
xv
8946Ch00CMP4
11/12/07
8:46 AM
Page xvi
CONTENTS
Coding the login form . . . . . . . . . . . . . . . . Creating a custom component for post details . . Updating the selected post . . . . . . . . . . . . . Creating the custom class to store post values Creating the editPost function . . . . . . . . . Handling the edit . . . . . . . . . . . . . . . . . Processing the updates . . . . . . . . . . . . . Validating the form contents . . . . . . . . . . Responding to the returned message . . . . . Refreshing the data provider for the Repeater Adding a new post . . . . . . . . . . . . . . . . . . Deleting an existing post . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
. . . . . . . . . . . . .
448 452 454 454 455 456 457 458 461 462 463 464 466
PART 3 LIVECYCLE DATA SERVICES Chapter 15 Introduction to LiveCycle Data Services . LiveCycle Data Services features . . . . . . . . . . . . . . . . . . . . . Installing LiveCycle Data Services ES . . . . . . . . . . . . . . . . . . LDS with integrated JRUN . . . . . . . . . . . . . . . . . . . . LDS J2EE application . . . . . . . . . . . . . . . . . . . . . . . LiveCycle Data Services ES directory structure . . . . . . . . Set up a Flex application for use with LiveCycle Data Services ES Using JRun . . . . . . . . . . . . . . . . . . . . . . . . . . . . Using Tomcat . . . . . . . . . . . . . . . . . . . . . . . . . . . Using LiveCycle Data Services . . . . . . . . . . . . . . . . . . . . . . Message Service . . . . . . . . . . . . . . . . . . . . . . . . . . . Building a basic chat application . . . . . . . . . . . . . . . . . . Setting up the message destination . . . . . . . . . . . . . . Sending messages to the server . . . . . . . . . . . . . . . . Receiving messages from the server . . . . . . . . . . . . . . RPC services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exploring web and HTTP services . . . . . . . . . . . . . . . . . . Understanding the Proxy Service . . . . . . . . . . . . . . . . Consuming a web service . . . . . . . . . . . . . . . . . . . . Consuming an HTTP service . . . . . . . . . . . . . . . . . . . Exploring the remote object service . . . . . . . . . . . . . . . . Consuming a simple remote object service . . . . . . . . . . Data Management Services . . . . . . . . . . . . . . . . . . . . . . . Using DMS with SQLAssembler . . . . . . . . . . . . . . . . . . . Setting up the Flex project . . . . . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
xvi
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . .
469
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
470 471 472 472 473 474 475 475 475 476 476 477 478 479 481 481 482 482 486 489 489 497 499 499 509
8946Ch00CMP4
11/12/07
8:46 AM
Page xvii
CONTENTS
Chapter 16 LiveCycle Data Services Case Study. Understanding the case study . . . . . . . . . . . . The book admin application . . . . . . . . . . . The book viewer application . . . . . . . . . . The server-side configuration . . . . . . . . . . Creating the book admin application . . . . . . . . Showing the selected book details . . . . . . . Creating the client-side Book class . . . . . Populating the form with the book details Showing the book cover image . . . . . . . Updating the selected book details . . . . . . Deleting a Book object . . . . . . . . . . . . . . Adding a Book object . . . . . . . . . . . . . . Uploading a book cover to the server . . . . . Creating a FileReference object . . . . . . . Browsing the file system . . . . . . . . . . . Uploading the selected file . . . . . . . . . Understanding the server-side script . . . . Creating the book viewer application . . . . . . . . Adding an application ControlBar . . . . . . . . Setting up the Flex DataService . . . . . . . . . Building the custom item renderer . . . . . . . Showing the books in a TileList . . . . . . . . . Showing the details of each book . . . . . . . . Testing both applications . . . . . . . . . . . . . . . Summary . . . . . . . . . . . . . . . . . . . . . . . .
Index
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . .
511
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
512 512 513 514 516 517 518 519 520 521 522 523 523 524 524 525 526 528 528 529 530 531 532 533 533
534
xvii
8946Ch00CMP4
11/12/07
8:46 AM
Page xviii
8946Ch00CMP4
11/12/07
8:46 AM
Page xix
ABOUT THE AUTHORS Sas Jacobs is a web developer who set up her own business, Anything Is Possible, in 1994, working in the areas of web development, IT training, and technical writing. The business works with large and small clients building web applications with .NET, Flash, XML, and databases. Sas has spoken at such conferences as Flashforward, webDU (previously known as MXDU), and FlashKit on topics related to XML and dynamic content in Flash. She is also the author of books about Flash and XML. In her spare time, Sas is passionate about traveling, photography, running, and enjoying life.
Koen De Weggheleire is a faculty member of the Technical University of West-Flanders (HOWEST), department PIH-Multimedia and Communication Technology (MCT) in Belgium, where he teaches Flash Platform Solutions (Flash, Flex, AIR) with a smile. As the Adobe User Group Manager for Belgium (www.adobeusergroup.be), Koen is heavily addicted to the community and inspires the community by his blog (www.newmovieclip.com) and by speaking at national and international industry events. Koen also coordinates the yearly Belgian multimedia conference, Multi-Mania (www.multi-mania.be), where 800 people come together to learn from industry experts and to share knowledge. When he has time, you can find Koen doing freelance Flash platform consultancy on advanced award-winning Rich Internet Applications. Sometimes it happens that Koen is not talking ActionScript. Then you can find him producing music, collecting Adobe gadgets, eating pizza, or renovating his 100-year-old house.
xix
8946Ch00CMP4
11/12/07
8:46 AM
Page xx
888bba9cf12226c8bc6011165b8042d4
8946Ch00CMP4
11/12/07
8:46 AM
Page xxi
ABOUT THE TECHNICAL REVIEWER Charles E. Brown is one of the most noted authors and teachers in the computer industry today. His first two books, Beginning Dreamweaver MX and Fireworks MX Zero to Hero, have received critical acclaim and are consistent bestsellers. In early 2004, Charles coauthored a book on VBA for Microsoft Access: VBA Access Programming. His latest book, The Essential Guide to Flex 2 with ActionScript 3.0, continues to be a best seller, and is used as a textbook at several international universities. In the spring of 2008, the book will be updated for Flex 3. In addition to his busy writing schedule, Charles conducts frequent seminars as an Adobe Certified Trainer. His topics include Flex, Flash, Dreamweaver, and ActionScript programming. He is also frequently called in as a consultant for major web sites involving Adobe technologies. Charles is also a noted classical organist, pianist, and guitarist; and studied with such notables as Vladimir Horowitz, Virgil Fox, and Igor Stravinsky. It was because of his association with Stravinsky that he got to meet and develop a friendship with famed artist Pablo Picasso. Charles can be contacted through his web site at www.charlesebrown.net.
xxi
8946Ch00CMP4
11/12/07
8:46 AM
Page xxii
8946Ch00CMP4
11/12/07
8:46 AM
Page xxiii
ABOUT THE COVER IMAGE DESIGNER Corné van Dooren designed the front cover image for this book. After taking a brief vacation from friends of ED to create a new design for the Foundation series, he worked at combining technological and organic forms, with the results now appearing on this and other books’ covers. Corné spent his childhood drawing on everything at hand and then began exploring the infinite world of multimedia—and his journey of discovery hasn’t stopped since. His mantra has always been “The only limit to multimedia is the imagination,” a saying that keeps him moving forward constantly. Corné works for many international clients, writes features for multimedia magazines, reviews and tests software, authors multimedia studies, and works on many other friends of ED books. You can see more of his work at and contact him through his web site: www. cornevandooren.com. If you like Corné’s work, be sure to check out his chapter in New Masters of Photoshop: Volume 2 (friends of ED, 2004).
xxiii
8946Ch00CMP4
11/12/07
8:46 AM
Page xxiv
8946Ch00CMP4
11/12/07
8:46 AM
Page xxv
ACKNOWLEDGMENTS I’d like to acknowledge the hard work from all the people at friends of ED. Chris, Ben, Matt, Beth, Nancy, Liz, and anyone else I’ve forgotten, thanks for your valuable input. I’d also like to thank Koen for contributing two chapters to this book at short notice. We couldn’t have done it without you! Sas Jacobs
When I started writing this book, it felt like one big interesting adventure. It has been a long adventure because we really wanted to be sure the book contained the latest and greatest information available on Adobe Flex concerning data-driven applications. I really want to thank the dedicated and patient people at friends of ED: Chris Mills, Beth Christmas, Charles Brown, Matthew Moodie, Elizabeth Berry, Tina Nielsen, and Nancy Sixsmith for their professional help and guidance through this wonderful adventure. Also my thanks go to my coauthor Sas Jacobs. Sas put an incredible amount of work in this book and with her wealth of knowledge she made sure this book had everything it needed. Of course, finally, I also want to thank my friends and family for being supportive and for understanding why I sometimes didn’t have enough time. I learned a lot from the community myself, and I still do, but I am very happy that I can give something back. You know, it’s all about giving back to the community! Happy coding! Koen De Weggheleire
xxv
8946Ch00CMP4
11/12/07
8:46 AM
Page xxvi
8946Ch00CMP4
11/12/07
8:46 AM
Page xxvii
INTRODUCTION Regardless of which type of application they’re building, developers usually have to carry out a range of common tasks: communicating information to a user, displaying pop-up windows, showing repeating information in a tabular or grid layout, providing forms to update an external data source, and so on. Many times, when learning a new programming language I’ve wanted a book that provided me with a set of building blocks showing me how to achieve one of these tasks. So I wanted to write one about the Flex framework that covered these common developer tasks and then brought the concepts together in a series of case studies. Welcome to this book. If you’ve picked up the book, you’re probably a designer or developer who has some experience with the Flex 2 or 3 framework. You’ve probably had some exposure to ActionScript 2.0 and are keen to learn more about ActionScript 3.0. With this book, you can take your skills to the next level. No book can cover everything, but here you’ll learn some of the more useful tools for Flex application development. Most importantly, you’ll learn how to include external data within your Flex applications. I’ll focus particularly on XML documents and content from databases and show you how to add this information to your Flex interfaces. The book is purposely simple so you can get the basic concepts right. Each chapter covers a small topic, demonstrating, with some basic examples, how you might achieve specific tasks using Flex. It’s not until the second part of the book that we put these concepts together to create four complete applications. This book started as a book about Flex 2. During the writing process, Adobe announced the release of Flex 3, so I changed the focus halfway through. It was also interrupted by the birth of my son in June 2007, so it’s been a long road. I hope you enjoy reading this book and that you find it useful for demonstrating some of the complexities of Flex 3 and ActionScript 3.0. I find Flex to be a very powerful application development tool and I hope to share my excitement about it with you!
xxvii
8946Ch00CMP4
11/12/07
8:46 AM
Page xxviii
INTRODUCTION
Layout conventions To keep this book as clear and easy to follow as possible, the following text conventions are used throughout. Important words or concepts are normally highlighted on the first appearance in bold type. Code is presented in fixed-width font. New or changed code is normally presented in bold fixed-width font. Pseudo-code and variable input are written in italic fixed-width font. Menu commands are written in the form Menu ➤ Submenu ➤ Submenu. Where I want to draw your attention to something, I’ve highlighted it like this:
Ahem, don’t say I didn’t warn you.
Sometimes code won’t fit on a single line in a book. Where this happens, I use an arrow like this: ➥. This is a very, very long section of code that should be written all on the same ➥ line without a break.
xxviii
8946CH01CMP4
11/10/07
1:56 PM
Page 1
Part 1
FLEX APPLICATION BASICS In the first part of this book, I introduce the Flex framework and discuss some of the tools that developers need to start building applications. You’ll examine how ActionScript 3.0 works with Flex applications and see some of the approaches that you can use to structure these applications. You’ll look at common developer tasks such as interacting with the user, communicating with the web browser, working with external data sources, and displaying dynamic data, and you’ll see how to use these techniques within Flex Builder 3.
8946CH01CMP4
11/10/07
1:56 PM
Page 2
8946CH01CMP4
11/10/07
1:56 PM
Page 3
Chapter 1
INTRODUCTION TO FLEX
Flex 3 provides a new approach to building SWF applications that run with Flash Player 9. Like Flash before it, the Flex framework creates SWF files, but there’s a world of difference between the two products. If you’ve worked with version 1 of Flex, versions 2 and 3 are a major revamp, so you’ll need to forget what you already know and be prepared to start again. For developers who’ve worked with Flash previously, Flex 3 introduces a wide range of new possibilities. It provides a development environment specifically suited to creating SWF-based applications, and it shifts the focus from animation to creating user interfaces and interactions. Developers who’ve worked with tools such as Visual Studio .NET will find it easy to adapt to the changes because the development environment, Flex Builder 3, uses a very similar approach. Instead of creating keyframes in a timeline, Flex applications use an XML vocabulary called MXML to describe the components that make up the user interface. Each MXML tag corresponds to an ActionScript 3.0 class, and developers can access the methods, properties, and events of each class through attributes of the tag. Developers can also use ActionScript 3.0 to create and wire up these user interface components to respond to user interactions. ActionScript 3.0 represents a major overhaul of the ActionScript language to provide a more standards-based and robust approach. The new version is compliant with the ECMAScript Language Specification, Third Edition (ECMA-262). Developers with a
3
8946CH01CMP4
11/10/07
1:56 PM
Page 4
CHAPTER 1 solid grounding in ActionScript won’t find it too hard to make the transition, but there are some major differences. I’ll cover some of the most important changes to the ActionScript language a little later in the chapter. This chapter introduces you to the role of Flex in web application development and provides you with some of the key concepts you’ll need to get started. I’ll explain the role of ActionScript 3.0 and of MXML, and provide an introduction to each. I’ll give you an overview of the new features in the ActionScript 3.0 language as well as introducing some of the new classes. I also want to explain the different ways to work with data in Flex applications: the types of datadriven applications, the types of data that you can include in them, and the tools in the Flex framework that are specific to working with data-driven applications. I’ll finish up with some useful resources for learning more about Flex. Let’s start by discussing how Flex fits into the world of web applications.
Understanding web applications Web applications present data within web pages that appear within a web browser. These web pages provide an easy way for users to access and interact with the data. Web applications typically consist of a number of different layers: the user interface, the data used to populate the user interface, and a third layer that allows the user interface to interact with the data layer. These layers are often called n-tier or multi-tier architecture. The user interface provides the means for a user to interact with the data in the web application. It usually consists of web pages that include standard elements such as buttons, text inputs, drop-down lists, images, and hyperlinks. The user interface responds when the user interacts with each element, perhaps clicking a button or hyperlink, or moving the mouse over an image. In n-tier architecture, the user interface is referred to as the presentation tier or layer. In web applications, the presentation layer occurs within the web browser using XHTML or SWF objects, and clientside scripting such as JavaScript or ActionScript. The user interface displays data from databases, XML and text documents, the file system, and data streams from web services and RSS feeds. Increasingly, web applications rely on XML structures to provide content. The XML content might result from a request to a database or by receiving a response from a web service. This layer is called the data tier in n-tier architecture. The layer is abstracted from the presentation tier and is located separately. A database server provides a good example of the data tier. It exists separately from the web browser and server. To include data from the data tier within the presentation tier, there’s a need for a middle layer between the two. In n-tier architecture, this layer is called the business logic, or application, tier. This tier exists as an intermediary between the data source and the application interface. It also enforces business rules and other logic required within the web application.
4
8946CH01CMP4
11/10/07
1:56 PM
Page 5
INTRODUCTION TO FLEX The business logic tier exists within an application server and relies on server-side languages such as ColdFusion, ASP.NET, and PHP. This layer is responsible for requesting data from the data tier and providing it to the presentation tier in an appropriate format, often using an XML structure. There can be a little more to n-tier architecture than I’ve presented here. However, the idea was to give you an overview of the architecture that typically underpins a web application. One implication of using n-tier architecture is that this approach separates the presentation layer from the data source. It’s not possible for the client software (the web browser, in this case) to communicate directly with a database. Instead, the communication between the two is handled with a serverside language and an application or web server within the business logic tier. You can see that this approach makes a lot of sense from a security standpoint. Allowing a web page to access a database directly would open up all sorts of possibilities for executing malicious code. It’s for this reason that there are so many restrictions on the functionality of XHTML and client-side scripts such as ActionScript. So how does Flex fit into an n-tier architectural style?
Understanding the role of Flex In traditional web applications, the user interface is built using XHTML. The user makes a request for a web page and waits until the web server responds and the requested page loads into the web browser. Each time users require new information, they make a request for another web page so that each state in the application responds to a new web page. When a new page loads from the server, the user interface is loaded again. This means that traditional web applications are very stop/start in nature. Recent years have shown a fundamental change in the way web applications are built, and a new model has evolved: the Rich Internet Application (RIA). RIAs don’t rely on the traditional request/response model. Instead, they use requests to the server to populate specific parts of the user interface. As a result, RIAs provide more responsive and media-rich interfaces. Users don’t have to wait around for each new page to load from the server. In fact, the concept of pages within a web application has disappeared altogether, replaced by a single page interface in which only parts of the page change in response to user interaction. As a style of web application, RIAs demand new approaches and tools for web application development. Examples of approaches for building RIAs include both Ajax and SWF-based applications. These applications can be created with a combination of XHTML and JavaScript, or by using Flash or Flex to generate SWF files. One key feature is that data is requested asynchronously so that users don’t have to wait for a server response each time they carry out an action. Flex 3 provides a framework for building RIAs that are compiled to SWF files. Flash does the same, although the Flex framework is targeted more toward the developer community. SWF files represent the presentation tier within an n-tier web application and offer an alternative to XHTML and JavaScript-based approaches. SWF-based presentation tiers provide functionality that is possible using browser scripting alone. Developers can use SWF files to work with multimedia content and to create more expressive online applications. SWF files can also be deployed to devices such as mobile phones and PDAs.
5
8946CH01CMP4
11/10/07
1:56 PM
Page 6
CHAPTER 1 Within the Flex 3 framework, developers can use an XML vocabulary, MXML, with ActionScript 3.0 to describe user interfaces and capture user interactions. Flex 3 applications are compiled to create ActionScript capable of being viewed in Flash Player 9. The Flash Player can be embedded within a web browser or in a standalone application. The Flex framework includes a rich class library of components for creating user interfaces for use in web applications. In addition to the range of standard user interface elements, the Flex framework includes advanced controls specifically aimed at displaying data: DataGrid, Tree, and Repeater controls. The class libraries within the Flex framework also include mechanisms for consuming dynamic content provided by the business logic tier, or server-side files supplying data to a web application. The Flex framework can make requests for text and XML content from external sources, and display the responses in the user interface elements. However, as with any technology involved in the presentation tier, applications built in Flex cannot interact directly with databases or with the server file system. While there is a small learning curve for developers who want to use the Flex framework to build SWF files, it does leverage existing ActionScript and web application development skills. Flex Builder 3, the dedicated Flex 3 IDE, provides a similar approach to that found in software such as Visual Studio .NET. In addition, developers familiar with web standards such as XML, SOAP, ECMAScript, and E4X will find that they are integrated into the Flex 3 framework. Developers can use both MXML and ActionScript 3.0 to create Flex 3 applications, so it’s worth understanding the role of each.
Understanding the role of MXML and ActionScript 3.0 The two foundations of the Flex framework are MXML and ActionScript 3.0. MXML is an XML vocabulary that allows developers to describe user interfaces. MXML consists of a set of tags or elements that correspond to ActionScript 3.0 classes. The MXML elements are compiled into the relevant ActionScript code when a SWF file is created. The attributes in each MXML tag correspond to either a property or method of the ActionScript class, a style applied to the object created with the tag, or an event listener for the object. MXML elements describe everything from user interface elements, visual layouts and effects, to data connections. Users add these elements to their applications declaratively, in the same way that they’d add XHTML to generate a web page. They can also add elements by dragging and dropping them in the Design view of Flex Builder 3. As mentioned, the methods, properties, and events described in ActionScript are represented by attributes in MXML tags. When you view the help content for the Flex framework, you can either see an API for the MXML elements or for the ActionScript equivalent classes. It’s possible to create an application interface using only MXML tags, entirely in ActionScript 3.0, or using a combination of both (the most likely alternative). Let’s look a little more closely at the structure of MXML documents.
6
8946CH01CMP4
11/10/07
1:56 PM
Page 7
INTRODUCTION TO FLEX
Understanding MXML MXML provides the same role in Flex applications as XHTML does in web pages. Both are markup languages describing a user interface. Because MXML is a vocabulary of XML, all the XML construction rules apply. An MXML document must be a well-formed XML document, which means the following: The MXML document contains one or more elements or nodes. The MXML document contains a single root node, usually the element that can contain other nested elements. Each element closes properly. Elements nest correctly. Attribute values are contained in either double or single quotes. All MXML documents start with an XML declaration, as shown here: The root element of an MXML document is usually the tag, although you can use other elements for the root node. The root element represents the container for all other parts of the MXML document and will enclose all other containers and controls. The root element also includes a reference to the namespace www.adobe.com/2006/mxml. You can see it here within the element: Although the namespace refers to a URI, it doesn’t actually reference a page at that location. Instead, using a unique URI provides a reference saying that all tags using the same prefix (in this case, mx:) come from the same XML vocabulary. Each time a Flex element appears in an MXML file, it must use this prefix. Developers can add other namespaces with their own prefixes to the element if they develop custom components. For example: In this case, any custom components must use the prefix comp: to distinguish them from built-in Flex components. The following code block shows a very simple Flex interface written with MXML tags:
7
8946CH01CMP4
11/10/07
1:56 PM
Page 8
CHAPTER 1 The interface contains a single element: a button. The code creates an instance of the Button ActionScript 3.0 class using the tag. It sets the id and label properties of that instance using attributes within the tag. When you compile the application, the process will create the relevant ActionScript to create the button within the SWF file. All MXML tags and class names begin with an uppercase letter, and if there is more than one word in the name, each word in the name starts with an uppercase letter (for example, ComboBox). As mentioned, MXML elements are compiled to create a SWF file. During this process, the MXML tags are parsed, and the compiler generates the corresponding ActionScript classes. The compiler then compiles the ActionScript classes into SWF bytecode contained in a SWF file. This process occurs either by using Flex Builder 3 or through the free command-line compiler included with the Flex SDK. As a bit of a hint, it’s much easier to compile SWF files using Flex Builder 3! MXML works hand in hand with ActionScript 3.0.
Understanding ActionScript 3.0 ActionScript 3.0 is the new version of this scripting language and is at the heart of the Flex framework. It is based on ECMAScript and is fully compliant with the ECMAScript language specification, Third Edition (ECMA-262). You can find a copy of this specification at www.ecma-international.org/ publications/standards/Ecma-262.htm. ActionScript 3.0 is run by the ActionScript Virtual Machine (AVM) inside Flash Player 9. Unlike earlier versions, Flash Player 9 includes two AVMs—one for ActionScript 3.0 (AVM2) and one for earlier language versions (AVM1). Changes to the AVM mean that the new version of ActionScript works much more quickly than ActionScript 2.0 or 1.0. It also means that you can’t include different versions of ActionScript in the same application. Flex 3 applications must work with ActionScript 3.0. The ActionScript 3.0 language is made up of two parts: the core language and the Flash Player API. The core language describes the basic language elements, including data types, expressions, loops, and conditions. This part of the language hasn’t changed much. The Flash Player API describes the ActionScript classes that are run by the Flash Player, and this is the area in which you’ll find the most changes. Developers can work with ActionScript 3.0 in Flex applications in the following ways: Adding inline ActionScript statements to MXML tags Adding code blocks with the tag in an MXML file Working with external ActionScript files, perhaps as the source for an element or as a custom class Developers familiar with earlier versions of ActionScript will need to make some adjustments when learning ActionScript 3.0. There are new data types and changes to the way class files are written. You can find out about the main changes to the language a little later in the chapter. The following code block shows an application that uses ActionScript 3.0 declarations to create the same interface as the preceding application built with MXML tags:
8
8946CH01CMP4
11/10/07
1:56 PM
Page 9
INTRODUCTION TO FLEX
Instead of adding an tag directly in the application, the code block uses a function called buttonCreator to create the button. The function is called when the application finishes creating and, as in the previous example, the interface contains a single button element. You can see that the ActionScript code is contained within a CDATA block. It includes a constructor for creating the button, new Button(), as well as a new method for displaying the button in the interface (addChild). Don’t bother to try this code yourself because it’s just an illustration. I’ve got some much more interesting examples ahead. As you can see from the previous code block, there are some major changes to the ActionScript language in version 3.0.
Understanding the major changes in ActionScript 3.0 The basic constructs of ActionScript 3.0 haven’t changed greatly, although there have been some major changes to the packages and classes within the language. For example, ActionScript 3.0 now provides support for regular expressions that is consistent with the ECMA-262 specification, and the Void keyword has been changed to lowercase: void. The use of the trace statement has changed. Previously, you could use trace to show messages in an output window. Now, when you use trace you can view messages in the Flex Builder 3 IDE only when you are debugging an application. These messages appear in the Console view, and you can also write them out to a log file. ActionScript 3.0 includes some new primitive data types. ActionScript 2.0 recognized the Number data type, which handled all numeric data, integer or floating point. ActionScript 3.0 contains the int and uint types in addition to the Number type, which handles floating-point numbers. An int type is a 32-bit, signed integer that’s useful for loop counters and integer variables. The uint type is an unsigned, 32-bit integer type used in RGB color values and byte counts.
9
8946CH01CMP4
11/10/07
1:56 PM
Page 10
CHAPTER 1
One of the big changes is the way that ActionScript 3.0 deals with XML content. The XML class from earlier versions of ActionScript has been renamed to the XMLDocument class for legacy application support. The new and revamped XML class provides support for the ECMAScript for XML standard (ECMA-357), also known as E4X. This standard provides for a more intuitive way to target content in XML documents. It works with the new XMLList class (you’ll find out more later on in the book). Another change is to the way external content is loaded. The XML and LoadVars classes no longer handle the loading of external data. Instead, the URLLoader, HTTPService, and WebService classes access content from external files. The new Loader class loads external assets such as SWF files and images. ActionScript 3.0 handles visual elements quite differently from previous versions. The MovieClip object is no longer the focal point of a SWF file. Instead of focusing on MovieClip objects stacked at different depths and levels, ActionScript 3.0 introduces the concept of a display list that indicates the relative hierarchy of screen elements. The display list handles depths automatically, so there’s no need to manually deal with the stacking order of elements as in earlier versions of ActionScript. In ActionScript 2.0, each application has a main timeline that corresponds to the stage. The stage includes movie clips that have their own timelines and objects. You can keep adding new layers to the hierarchy as required. In ActionScript 3.0, the hierarchy operates a little differently. The display list still contains the stage at the top of the hierarchy. The stage contains a single child, the application. Instead of relying only on movie clips, the application contains display containers and display objects. Display containers include the new Sprite object, the MovieClip object, and Shape objects. Display objects are visual elements such as MovieClip objects and TextField objects. They must be placed inside display containers before they will appear in the user interface. Each display container can include other containers and display objects in a hierarchy. Even the way that developers need to write custom ActionScript classes has changed. In ActionScript 3.0, all ActionScript classes must appear inside packages declared with the package statement. Each package corresponds to a hierarchy of folders. If you don’t specify a package location, any classes you declare must be included in the top-level package that is the same as the root for the project. This is not the recommended approach, and it’s better to create a directory structure for all classes and reference the package path using dot notation. The new class structure is shown in the following code block: package com.aip { //import statements public class MyClass extends Sprite { //constructor public function MyClass() { } } } In the preceding code block, the file MyClass.as would appear within the aip folder inside the com folder.
10
8946CH01CMP4
11/10/07
1:56 PM
Page 11
INTRODUCTION TO FLEX
Methods and properties can be declared as private, public, protected, and internal. These declarations modify how visible the code is to other sources. The public modifier means that the content can be accessed from anywhere, while a private statement allows access only inside the current class. The new protected modifier allows access only within a specific class and subclasses, while the internal keyword provides access to classes within the current package. A default value of internal is assumed if no visibility modifier is included when declaring members. ActionScript 3.0 removes many language elements from previous versions, including createTextField, createEmptyMovieClip, duplicateMovieClip, loadMovie, onClipEvent, removeMovieClip, stopAllSounds, tellTarget, unloadMovie, loadBitmap, setTransform, getTransform, swapDepths, LoadVars, _global, and _level. In addition, many other language elements have been relocated and reorganized into new ActionScript 3.0 classes. Adobe includes a great article containing tips for working with ActionScript 3.0 at www.adobe.com/ devnet/actionscript/articles/actionscript_tips.html. Now that you understand some of the basics, let’s move on to see how Flex works with applications in a general sense.
Working with applications in Flex Developers can create the following types of applications with the Flex 3 framework: Static data applications Simple dynamic data-driven applications Flex LiveCycle Data Services applications Static data applications include their data within the application and don’t reference external data sources. Each time data changes, you need to modify the Flex application and recompile the SWF file. Examples of this type of application might include calculators or applications that chart fixed data points. Static data applications aren’t a very flexible way to include data. Simple dynamic data-driven applications load external data from a range of sources. The next section of this chapter covers the types of data you’re likely to work with in this sort of application. Dynamic applications also often provide mechanisms for updating existing data and adding new data. Changing the external data source is enough to update the content in this type of application; there is no need to recompile the SWF file. This makes dynamic applications more flexible compared with storing data within the application. Applications that use Flex LiveCycle Data Services are more tightly integrated with server-side logic. These applications facilitate ActionScript classes to talk directly to Java libraries so that they can be called from within the Flex application. If you’ve worked with Flash Remoting previously, you’ll recognize this approach. In this book, I’ll focus on the last two types and show you how to create applications that use different types of data.
11
8946CH01CMP4
11/10/07
1:56 PM
Page 12
CHAPTER 1
Working with data in Flex One of the great things about Flex is its capability to include dynamic data from external sources. Flex can include the following types of data: XML content from static files, server-side files, and calls to SOAP and REST web services Text content from static or server-side files Text content formatted into name-value variable pairs from static or server-side files AMF content through Flex LiveCycle Data Services Forget what you know about loading data in previous ActionScript versions. The LoadVars class from earlier versions of ActionScript has been removed from the language. The ActionScript 2.0 XML class has also been renamed to the XMLDocument class and replaced with a completely new ActionScript 3.0 XML class. Flex uses the new HTTPService, URLLoader, URLRequest, and WebService classes to request external XML and text content. You can use the new classes to track a wider range of events and improve error handling.You can also use the MXML and tags to load external content without the need to write ActionScript. The Flex 3 framework provides many other tools specifically targeted at data-driven applications.
Flex tools for working with data The Flex framework provides several tools that you’ll find useful for working with data-driven applications, including the following: Client-side data models Data binding Validation Formatting Data-driven components Let’s have a brief look at what each of these tools means for developers. They’re covered in more detail in later chapters of the book. You can store server-side content in client-side objects called Data Models. These objects are represented by the and tags, which provide simple representations of your data. For more complicated data structures, you can use custom ActionScript 3.0 class files. Developers can also take advantage of data binding functionality. Data binding provides a mechanism for you to link the properties of two objects so that an updated value in one of the properties leads to an updating of the related value in the second object. Developers can add bindings using curly braces syntax { }, through the tag, or by writing ActionScript to create the bindings. You’ll see examples of all these methods later in the book. The Flex framework includes a range of built-in validation tools to check for appropriate user input. Validators allow developers to check credit card numbers, Social Security numbers, Zip code and
12
8946CH01CMP4
11/10/07
1:56 PM
Page 13
INTRODUCTION TO FLEX telephone numbers, number and currency values, dates, e-mail addresses, and regular expressions. Developers can also build their own custom validators. Flex includes a range of built-in formatters that can change the way data displays in an application. These controls take raw data and add formatting, such as a currency or date format, before displaying it in the user interface. Again, developers can also create their own formatters. A number of Flex components are specifically designed for displaying and manipulating data. Components such as List, ComboBox, and DataGrid allow developers to bind their data directly to a data provider. The DataGrid component also provides mechanisms for editing content within the data provider. You can see that Flex includes a range of tools specifically aimed at working with data, and I’ll cover all of them in this book. Before I wind up, it’s useful to get an idea of the type of process that you’re likely to work through when creating data-driven Flex applications.
The application development process Flex application development normally follows through a standard range of steps:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11.
Create the MXML application in Flex Builder 3 or a text editor. Create the layout for the interface by adding one or more container components. Create the interface by adding user interface controls to the containers. Define a data model for the application. Add a call to external content such as consuming a web service, connecting to an external file, or requesting a remote Java object (Flex Data Services). Add data bindings. Add formatting to display the data. Add validation to user input controls. Write ActionScript to wire up the user interface. Run or debug the application, or use the command-line compiler to create a SWF file. Deploy the application.
You’ll see these steps as you start building applications later in the book. I want to finish by providing you with some resources that you might find useful.
Useful resources There are lots of web sites providing information about Flex. In this section, I want to show you some of the links that I think you’ll find most useful. The logical starting point for all things Flex is the product section in the Adobe web site (www.adobe.com/products/flex/). The site provides full access to all software downloads as well as Flex quick start tutorials, code samples, demonstration applications, and a Flex developer community.
13
8946CH01CMP4
11/10/07
1:56 PM
Page 14
CHAPTER 1 The following Flex explorers are useful for viewing sample code: Flex Component Explorer: http://examples.adobe.com/flex2/inproduct/sdk/explorer/ explorer.html Flex Style Explorer: http://examples.adobe.com/flex2/consulting/styleexplorer/ Flex2StyleExplorer.html Flex.org is a useful web site for developers coming to grips with Flex Builder 3, Flex Data Services, and the Flex SDK. You can find it at www.flex.org/. Similarly, the community Flex site at www.cflex.net/ might be a good starting point. The Flexcoders discussion group (http://groups.yahoo.com/group/flexcoders/) is specifically aimed at software developers who focus on Flex. It discusses methods and practices for developing Flex applications as well as best practices. It’s a useful discussion group in which developers can share code tips and ask questions.
Summary That’s it for the introduction to the Flex framework. In this chapter, I talked about the role of Flex in building web applications. I explained the role of MXML and ActionScript 3.0 in the Flex framework, and provided an overview of some of the ActionScript 3.0 changes. I showed you the different types of data that you might want to work with in Flex and introduced the new loading methods. I also explained the different types of applications that you can create in Flex. I finished by listing some resources that you might find useful. In the next chapter, I want to delve deeper into the world of ActionScript 3.0.
14
8946CH01CMP4
11/10/07
1:56 PM
Page 15
8946CH02CMP3
11/6/07
7:52 PM
Page 16
8946CH02CMP3
11/6/07
7:52 PM
Page 17
Chapter 2
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
ActionScript 3.0 is the latest version of the ActionScript scripting language for use in Flash Player 9. You can create applications by using this language version in Flex Builder 3, Flash 9, a text editor, or another development environment, but you need to have access to the Flex SDK, which contains the library of ActionScript 3.0 classes. ActionScript 3.0 includes a major overhaul of the language and introduces a number of new features as well as a reorganization of packages and class files. Chapter 1 provides an overview of the major changes to the language and you’ll see examples throughout this chapter. ActionScript 3.0 and the new Flash Player 9 ActionScript Virtual Machine (AVM2) speed up processing to make SWF files run more quickly. Adobe states that the new version of ActionScript speeds up development time because of features such as improved error reporting, E4X support when working with XML content, and support for regular expressions. You can make up your own mind after you get started with ActionScript 3.0.
17
8946CH02CMP3
11/6/07
7:52 PM
Page 18
CHAPTER 2 Flash Player 9 also provides support for applications built with earlier versions of ActionScript because it includes the relevant virtual machine: AVM1. Even though this is the case, it’s not possible to just mix and match different versions. Developers need to take notice of the following rules for working with multiple language versions: You can’t include earlier versions of ActionScript with applications that use ActionScript 3.0. You can load an external SWF file that uses ActionScript 1.0 or ActionScript 2.0, but you won’t be able to access the code within the file. SWF files that include earlier versions of ActionScript can’t load SWF files that include ActionScript 3.0. In this chapter, I want to get you started with ActionScript 3.0. I’ll show you different ways to include ActionScript in your Flex applications, and you’ll write some ActionScript 3.0 custom classes so you can compare the approach with that used in ActionScript 3.0. You can download the resources that I refer to in this chapter from the friends of ED web site at www.friendsofed.com. Note that this chapter does not provide a complete introduction to the ActionScript 3.0 language. It assumes that you understand the basics. If you need to go back and cover some of the introductory concepts, I recommend The Essential Guide to Flex 3 with ActionScript 3.0, by Charles E. Brown (friends of ED 2007, ISBN: 1590597338), and Foundation ActionScript 3.0 for Flash CS3 and Flex 3, by Steve Webster and Sean McSharry (friends of ED 2007, ISBN: 1590598156). Throughout this chapter and the rest of the book, I’ll be using Flex Builder 3 for all of the examples, but remember that you can use other packages, including a text editor, provided that you have the Flex SDK installed. In this case, you’ll have to use the command-line compiler to generate SWF files. Let’s get started.
Working with ActionScript 3.0 in Flex applications You can work with ActionScript 3.0 in Flex 3 applications in the following ways: By writing ActionScript statements inline within Flex elements in an MXML file. By including ActionScript statements in an MXML file in an element. By writing ActionScript statements in an external ActionScript (.as) file and including a source attribute in an element in an MXML file. This approach has the same effect as if the statements are inside the MXML file itself. By using an include directive inside an block to copy the contents of the external .as file to an MXML file. By creating custom class files and adding and referring to them with import statements in an MXML application. By creating an ActionScript project that defines all aspects of the application. We’ll look at each of these options in this section of the chapter. I’ll work through a simple example, showing you how to use the preceding approaches to work with ActionScript 3.0. To keep things sim-
18
8946CH02CMP3
11/6/07
7:52 PM
Page 19
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3 ple, you’ll create a calculator in the example that converts distances between miles and kilometers and back again. The first approach is to use inline ActionScript to power the calculator.
Using inline ActionScript statements The simplest way to include ActionScript 3.0 in an MXML file is to include it within attributes of an MXML element. You might do this because you’re implementing simple data binding between two elements or because you want to add an event handler. The approach is very similar to that of writing inline JavaScript inside XHTML elements in a web page. Let’s look an example that uses this method. Start by creating a new Flex project using File ➤ New ➤ Flex Project, and call it LengthConverter. Store the application file in the root directory of the project rather than in the src folder. Create the following interface, which defines the simple calculator: I created the interface using MXML elements added declaratively in Source view. You could also drag these elements into the application in Design view. VBox and HBox elements control the layout of the interface elements. You can see that these nest inside each other to create a layout that doesn’t use x and y placement values. By default, the tag adds the layout attribute with a value of absolute. This attribute requires that you have to provide x and y values to lay out the controls in the application. In other words, there is no automatic layout as there would be with an attribute value of vertical or horizontal. The ComboBox component is populated by using an element. The element contains an array of objects, and each object contains both a label and data property. The label content will display in the ComboBox while the data contains the conversion figure. I’ll multiply the figure by the amount that the user enters in the TextInput control to calculate the converted amount.
19
8946CH02CMP3
11/6/07
7:52 PM
Page 20
CHAPTER 2 Figure 2-1 shows how the interface appears in a web browser.
Figure 2-1. The conversion calculator interface
It’s a very simple interface, and I haven’t bothered to change the default style. You should catch any errors that the user enters before carrying out the conversion, such as a text or blank value, so this calculator will be a little more robust if it uses an element. The element will see whether you entered a valid number, and will respond appropriately if you didn’t. To add the validation, I have to bind the validator to the text property of the TextInput; I’ll do this by using curly braces { } notation. This notation allows you to add simple data binding between two MXML elements by specifying the id of the bound control as well as the bound property. For example, in the following line of code, the text property of the control txtBoundControl is bound to the text property of the control called txtMyInput: You’ll learn more about data binding later in the book. To create the binding, add the following code below the opening element: This element ensures that the user has entered a numeric value in the control called txtDistance. The element checks the text property of the TextInput control. Validation normally occurs when the user exits the TextInput control, but in this case, I want it to happen when I click the Convert button. That’s why I set the trigger for the validation to the click event of the btnConvert control.
20
8946CH02CMP3
11/6/07
7:52 PM
Page 21
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
Notice the way I wrote the invalid attribute. The value of this attribute is a simple ActionScript statement that sets the text property of the txtResult control: txtResult.text = 'Enter only numbers for distance' I had to use single quotes around the text value as it appears inside the double quotes used by the invalid attribute. Run the application to test the validator. Figure 2-2 shows what happens if you enter a text value and click the Convert button. You can see an error message in the txtResult Label control below the Convert button. Again, I haven’t bothered with styling the message, but you could easily make that change.
Figure 2-2. The validator displays a message when an invalid value is entered in the TextInput control.
The next step is to configure the Convert button so that when the user clicks it, the converted distance appears in the txtResult label. Modify the element as shown in bold: The code adds a click attribute that sets the value of the text property for the txtResults control. The text property uses the value of the data property associated with the selectedItem in the ComboBox multiplied by the number entered in the txtDistance control. The selectedItem property provides access to the item that has been chosen from the data provider for the ComboBox—in this example, the array of objects. The application could then access either the data or label property of the selected object. Notice that I have to cast the txtDistance.text property as a number and then cast the calculated result as a string before I can display it in the Label control. Flex 3 applications are stricter about enforcing data types than earlier ActionScript 2.0 applications.
21
8946CH02CMP3
11/6/07
7:52 PM
Page 22
CHAPTER 2
Even though this approach provides an easy way to update the interface, you can see that the click attribute is very long and appears to be quite clumsy. I find the inline code a little difficult to read. You’ll change this in the next example. In the meantime, run the application again to test it out. Figure 2-3 shows the finished calculator converting a value.
Figure 2-3. The completed application
In this example, you saw how to include ActionScript 3.0 statements inside elements in an MXML file. You can see my finished file saved as LengthConverter1.mxml with your resources. You’ll need to import it into a Flex project if you want to run it from within Flex Builder. This approach doesn’t lend itself to code reuse. A better approach may have been to add the ActionScript statements in an block to the top of the page.
Using the element The element allows you to include blocks of ActionScript 3.0 code within an MXML file. You can’t reuse code in this element within other Flex application files, so it’s not a good approach for code reuse. You must add any block as a child of the root element, which is most likely to be the tag. The convention is to place the block just below the opening tag. While you can have more than one block in the MXML file, your code is likely to be easier to read if you consolidate it into a single block. When you add an element in Flex Builder, it is automatically enclosed in a CDATA declaration, as shown here:
22
8946CH02CMP3
11/6/07
7:52 PM
Page 23
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3 If you’re not using Flex Builder, don’t forget to add this declaration around any ActionScript code contained within an MXML file. The CDATA declaration prevents Flex Builder from parsing the contents of the element as XML content. Without the CDATA block, ActionScript code would be interpreted as XML elements that aren’t well formed, and you’d see a whole lot of errors when you tried to compile the application. You’ll re-create the previous calculator using an ActionScript code block in an MXML file. The application will populate the ComboBox using an ActionScript function. The application will call the function after the interface is created. To avoid adding ActionScript code to the MXML tags, a function will handle the conversion when the user clicks the Convert button. The application also uses an ActionScript function to respond when the user enters an invalid value for conversion in the TextInput control. Create a new MXML file in the same project by choosing File ➤ New ➤ MXML Application. Give it the name LengthConverter2. You probably wouldn’t add multiple application files in practice, but doing so here saves you from having to create a new project each time you want to try something different. The first step is to add a NumericValidator to the application. This component checks that the user has entered a number. It can also check that the value of the number falls within a specific range, although this example doesn’t do that. Notice that in this example the element uses the required attribute to make sure that the user has entered a value for the distance. Add the following interface including the element: I removed the element from inside the element because you’ll add the data provider programmatically after the application has been created. After the application finishes drawing the interface, it dispatches a CREATION_COMPLETE FlexEvent. The application will use an ActionScript function called populateCombo that runs when this event is dispatched. You’ll need to add a creationComplete attribute in the element referencing this function.
23
8946CH02CMP3
11/6/07
7:52 PM
Page 24
CHAPTER 2
Add an block below the opening tag. If you’re using Flex Builder, notice that it adds the CDATA declaration automatically. If you’re using another development environment, make sure your code block looks like the following: The populateCombo function will create an array containing the values for the ComboBox and assign it to the dataProvider property. Add the following function to the script block: import mx.events.FlexEvent; private function populateCombo(e:FlexEvent):void { var dp:Array = new Array(); dp.push({label:"Kilometers to miles",data:0.621371}); dp.push({label:"Miles to kilometers",data:1.609344}); cboUnit.dataProvider = dp; } There are a few things to notice in this block of ActionScript. First, the call to the populateCombo function automatically passes a FlexEvent event object as an argument. Remember that this function is called when the FlexEvent is dispatched because it will be referenced in the creationComplete attribute of the tag. Second, the first line of code is an import statement that references the mx.events.FlexEvent class. This is no different from the import statement used in ActionScript 2.0. I need to include the import statement so I can refer to the type of event dispatched by creationComplete without writing a fully qualified name. I can use FlexEvent instead of the full package reference mx.events.FlexEvent. Finally, notice that I declared the function as private. ActionScript 2.0 recognized public and private access modifiers. ActionScript 3.0 recognizes four modifiers: public, protected, private, and internal. Table 2-1 summarizes the difference between these modifiers and shows how they affect members of a class. Table 2-1. Access modifiers available in ActionScript 3.0
Modifier
Explanation
public
The member can be accessed from anywhere by any other object. Class constructor methods must be declared as public, as should any custom classes that you intend to use in your Flex applications.
protected Hides access to the member from everything except subclasses. You can’t access protected members from other instances and you can’t define classes as protected. private
24
The member is accessible only from the class in which it is defined. You can’t access private members from other instances and you can’t define classes as private.
8946CH02CMP3
11/6/07
7:52 PM
Page 25
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
Modifier
Explanation
internal
Similar to public and the default access for items that don’t include a specific access modifier. You can access internal members from any class in the same package. There is no access from other packages.
The populateCombo function returns nothing, and you’ll notice that the return type of void uses a lowercase first letter unlike the Void return type in ActionScript 2.0. The populateCombo function creates a new array and pushes two objects containing the same labels and data as in the previous example. Finally, the function assigns the array to the dataProvider property of the ComboBox. You need to call this function in the opening element, as shown in bold in the following code block: Notice that the function explicitly passes the event object as an argument to the populateCombo function. As discussed, this object will be of the type FlexEvent. Run the application now and you’ll see that the ComboBox populates (refer to Figure 2-1). This version of the application sets up the NumericValidator using an ActionScript function named setUpValidator. The function identifies the source component and the relevant text property, as well as the trigger and triggerEvent for the validation. Add the following function to the block underneath the populateCombo function: private function setUpValidator(e:FlexEvent):void{ validateDistance.source = txtDistance; validateDistance.property = "text"; validateDistance.trigger = btnConvert; validateDistance.triggerEvent = "click"; } This function uses ActionScript to assign values to the properties that were previously set using attributes in the tag. Notice that each attribute equates to a property of the same name. Again, you need to call this function in the opening element, so modify it as shown here in bold: If you run the application now, you should see the validator highlight in red if you enter an invalid value in the TextInput.
25
8946CH02CMP3
11/6/07
7:52 PM
Page 26
CHAPTER 2
The last step in this example is to configure the Convert button. Clicking the button will call an ActionScript function called doConversion that will calculate the converted amount and display the result in the txtResult component. Before you add this function, you need to add two more import statements to the script block: import flash.events.MouseEvent; import mx.events.ValidationResultEvent; The button click handler dispatches an event object of type MouseEvent so the code needs to include a reference to this class. The validator dispatches an event object of type ValidationResultEvent when it validates the contents of the TextInput. This event object will also be dispatched when the user clicks the Convert button because the validator uses the click triggerEvent. Add the following doConversion function to the script block: private function doConversion(e:MouseEvent):void { if (validateDistance.validate().type==ValidationResultEvent.VALID){ var convertedAmount:Number = Number(txtDistance.text) ➥ * cboUnit.selectedItem.data; txtResult.text = String(convertedAmount); } else { txtResult.text = "Enter only numbers for distance"; } } Note that Flex Builder usually adds any required import statements when you type the class name in your code. If you hadn’t already included the import statement for the MouseEvent class, Flex Builder would have automatically added it when you typed e:MouseEvent. The doConversion function first checks whether the NumberValidator successfully validated the entry in the TextInput. It does this by comparing the outcome of the validation with a VALID response using the following line: if (validateDistance.validate().type==ValidationResultEvent.VALID){ If the content is valid, the calculation proceeds and the value displays in the Label control. The previous inline example used the same approach. If the content is invalid, an error message displays in the Label control. The function is called when the user clicks the Convert button. Add the click handler to the MXML element, as shown in bold: When the user clicks the button, the application calls the doConversion function, dispatching a MouseEvent.
26
8946CH02CMP3
11/6/07
7:52 PM
Page 27
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3 If you run the application now, you should be able to enter a number, choose a conversion type, and see a converted amount. If you enter an invalid amount, you should see an error message. You can find my completed example saved as LengthConverter2.mxml with your resources. You can see that the block quickly adds many lines to the application file. You can reduce the size of the file by storing the ActionScript content in an external .as file.
Using the source attribute in The source attribute of the element allows an external block of script to be treated as if it were included in the current MXML file. The attribute is added to the opening element and it can include relative paths to the file: One advantage of this approach is that it allows you to reduce the size of the MXML file. Storing code externally is a better way to organize large blocks of ActionScript code. It’s not the same as defining classes in .as files, and you can’t use this method to refer to class files. Note that you can’t set the source attribute in the tag and add ActionScript code inside the same element. You’d need to include any ActionScript stored inside the MXML file in a second tag. Let’s use the previous example to create an external script file. Create a new ActionScript file by choosing File ➤ New ➤ ActionScript file. Give it the name LengthConverterScript and click Finish. Save your LengthConverter2.mxml file as LengthConverter3.mxml so you don’t accidentally overwrite the original. Copy the content inside the element to the LengthConverterScript.as file—you don’t need to include the CDATA declaration. Remove everything from inside the block except for the opening tag and modify it as follows (the changes appear in bold): You should be able to save and run the application as before. The only change is that you have two files now instead of just one. You can find the finished files LengthConverter3.mxml and LengthConverterScript.as with the other downloaded resources. An alternative to using the source attribute is to add an include statement.
Using include inside an element You can use the include statement to copy the contents of an ActionScript file into an MXML file. It’s written this way inside an block:
27
8946CH02CMP3
11/6/07
7:52 PM
Page 28
CHAPTER 2
Each include statement can refer to only one .as file, but you can include more than one include statement in the MXML file. You can also conditionally include files inside if statements. You could rework the previous example by changing the script block to read as follows: When you run this example, you should see the same results as before. You can see this example saved as LengthConverter4.xml with the other resources. It’s worth noting that Adobe doesn’t recommend using include with a large number of external ActionScript files. Instead, it’s probably best to rework the code into class files.
Creating custom class files Storing code inside custom class files is an alternative method to including ActionScript 3.0 logic in a Flex project. You can use the class file to work with an existing MXML file or you can create the application entirely in ActionScript.
Understanding packages The way that developers need to create custom classes has changed in ActionScript 3.0 compared with ActionScript 2.0. All ActionScript 3.0 class files must appear inside a package, and this wasn’t a previous requirement. Packages allow developers to group related classes together in folders. In fact, a package equates to a directory on the computer. Storing class files inside packages helps developers to avoid name conflicts where different classes use the same name. It’s not possible to include two classes of the same name in the same package, so using different folder structures sidesteps this problem. There is one top-level package in a Flex project that equates to the current folder containing the application. Adobe recommends that you don’t use the default package to store your classes. Instead, you can define other packages stored in different locations. If you’re using Flex Builder, it will create the folder structure for you when you define the class. Packages are normally relative to the current project, but you can define a different classpath so the compiler knows where to locate the package. You might do this, for example, if you want to store classes in a central library and reuse them. The default classpath includes the current folder containing the application, but you can add other folders to the classpath. You need to do this for each project in Flex Builder. Add a new folder to the classpath by right-clicking a project and choosing Properties. Click the Flex Build Path option on the left of the window and choose the Add Folder option on the right. You can then navigate to and select the external folder, as shown in Figure 2-4.
28
8946CH02CMP3
11/6/07
7:52 PM
Page 29
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
Figure 2-4. Adding to the classpath for a Flex project
If you’re not using Flex Builder, you’ll need to pass the classpath as an argument to the command-line compiler. Class files always start with the package name, normally written in lowercase: package myPackage { } The package name uses dot syntax to indicate the folder structure: package allPackages.myPackage { } If you’re creating libraries of classes, a common convention is to use the name of the owner to name the package. Another is to use the reverse domain name when specifying package structures. For example, if the package creator is myCompany.com, the package names might start with com.myCompany. Using this type of naming convention makes it easier to create unique package names, especially when working in a large company. You’d specify a folder inside the current project if you weren’t likely to reuse the class in other applications. Then you’d probably name the package with the name of the application, for example, myCompany.myApplication.
29
8946CH02CMP3
11/6/07
7:52 PM
Page 30
CHAPTER 2
Understanding custom classes In ActionScript 2.0, each class file had to appear in a single .as file of the same name as the class. It wasn’t possible to include more than one class definition in a file. ActionScript 3.0 allows you to include more than one class in an .as file, although you’re still limited to a single public class. The other classes might be helper classes—accessible only to the public class. Even though you can include multiple classes in the same file, good practice might keep you separating your classes because it’s easier to reuse them if you store them in separate files. It can also be confusing to store a class file in an .as file that has a different name, especially if you’re used to ActionScript 2.0. For example, it would not be very obvious that the file MyClasses.as includes a class called UserDetails. Adobe actually recommends that you continue to follow the ActionScript 2.0 practice of including each class in its own file of the same name. As with ActionScript 2.0, classes start with a class declaration. In ActionScript 3.0, the class declaration must be placed inside a package declaration. By convention, developers normally use uppercase names for classes and lowercase for package names: package myPackage { public class MyClass { { } In ActionScript 2.0, many classes extended the base class MovieClip so that they could access the methods and properties of that object. ActionScript 3.0 introduces another object: the Sprite. As an object, a Sprite is similar to a MovieClip, but without a timeline, so it’s ideal for anything that doesn’t need to reference a timeline. It’s also more lightweight than a MovieClip. The class file normally includes a constructor that is called to create a new instance of the class. This function must have the same name as the class file without the .as suffix. package myPackage { public class MyClass { public function MyClass() { //statements } { } Constructor functions are always public and don’t provide a return value, although you can pass arguments to them. You use the constructor to create a new instance of the class, as follows: var newInstance:MyClass = new MyClass(); You need to add an appropriate import statement for any classes that aren’t within the default package: import myPackage.MyClass;
30
8946CH02CMP3
11/6/07
7:52 PM
Page 31
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3 You can create class files like you did in ActionScript 2.0. One point to remember is that you no longer need to use the mx.utils.Delegate class because ActionScript 3.0 enables a method closure to remember its original object instance automatically. You no longer have to pass a reference to the original object. That’s likely to make life a lot easier for developers! The next section shows a simple custom class example.
Working through an example Let’s work through the same calculator example using a class file to provide the functionality. The application will still use an MXML file for part of the interface, but the other elements will be created in ActionScript. Start by creating a new MXML application called LengthConverter5.mxml. Add the following code to create the interface: If you worked through the previous examples, you’ll notice that there are some interface elements missing here. I haven’t added a TextInput for the distance or a ComboBox for the conversion type. I also haven’t created a Label to display the results. I’ll add those controls programmatically; to do this I gave id attributes to the two HBox controls. You might also notice that I didn’t include the NumberValidator element. Again, the application will handle validation in ActionScript. There are probably much better ways to handle interface elements than creating them in a class file. However, I have done so in this example only because I want to introduce the concept of the display list and show you how you can create display elements with ActionScript. In the first chapter, I introduced you to the new mechanism that ActionScript 3.0 uses for working with visual elements: the display list. Instead of working with movie clips that are dynamically added to and removed from the stage, ActionScript 3.0 recognizes a hierarchy of display containers and display objects. The stage is at the top of the hierarchy and contains the application. The application consists of display containers and display objects that may be nested in a hierarchy.
31
8946CH02CMP3
11/6/07
7:52 PM
Page 32
CHAPTER 2 In the interface for this example, the display list hierarchy looks something like Figure 2-5.
stage
Application
VBox
Hbox (inputs)
Button (btnConvert)
Hbox (outputs)
Label
Figure 2-5. The display list hierarchy in the current application
This example uses ActionScript to add controls to two HBox containers: inputs and outputs. Create a new ActionScript class using File ➤ New ➤ ActionScript Class. Enter the options shown in Figure 2-6 and click Finish. I entered the package name converters and the name KmMilesConverter for the class. It’s a public class based on the flash.display.Sprite class. Unless you’re extending another class, it’s common to use Sprite as the super class. You can click the Browse button to select the relevant class name from the list. If there’s no obvious class to extend, you can leave the Superclass section blank. When you click Finish, the Navigator view should show a file called KmMilesConverter.as in a folder called converters. If you’re not using Flex Builder, you’ll need to create this folder structure and the .as file manually.
32
8946CH02CMP3
11/6/07
7:52 PM
Page 33
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
Figure 2-6. Creating a new ActionScript custom class
The class file contains the following code: package converters { import flash.display.Sprite; public class KmMilesConverter extends Sprite { } } To start, add some import statements for the classes used in the example. Doing this means that the application won’t need to use fully qualified names. Add the new import statements underneath the existing one that appears after the package declaration: import import import import
mx.containers.HBox; mx.controls.TextInput; mx.controls.ComboBox; mx.controls.Label;
33
8946CH02CMP3
11/6/07
7:52 PM
Page 34
CHAPTER 2
If you’re using Flex Builder, the software package will usually add the relevant import statements as you add code to your class file. While you often don’t need to add these references manually, I included the list here for reference and for readers who aren’t using Flex Builder. The next step involves adding the private variables for the class. These variables refer mainly to the application interface elements, although the first variable, dp, refers to an array that will populate the ComboBox control. private private private private
var var var var
dp:Array; userDistanceTI:TextInput; distanceTypeSelector:ComboBox; resultsLabel:Label;
Add the constructor function to the class file after the variable declarations: public function KmMilesConverter(inputHBox:HBox, outputHBox:HBox) { init(inputHBox, outputHBox); } The constructor takes two arguments: the names of the two HBox components. The application will need these references to add the extra user interface controls in the right place a little later. The KmMilesConverter method then calls the init method. I find it useful to separate functionality into separate functions within the class file, and it is common practice to give the initialization function the name init. This method of organization separates the logic within the class file and makes the code easier to read. The init function will set up the data provider for the ComboBox control. It will then call the createInterface function to set up the additional interface elements. Add the init function that follows: private function init(inputHBox:HBox, outputHBox:HBox):void{ dp = new Array(); dp.push({label:"Kilometers to miles",data:0.621371}); dp.push({label:"Miles to kilometers",data:1.609344}); createInterface(inputHBox, outputHBox); } This function creates the array called dp and adds two elements. The code is identical to the approach in the previous example. When the function finishes creating the array, it calls the createInterface function, passing the reference to the two HBox controls. Add this function now. It will need a little explaining afterward. private function createInterface(inputHBox:HBox, outputHBox:HBox):void { userDistanceTI = new TextInput(); distanceTypeSelector = new ComboBox(); distanceTypeSelector.dataProvider = dp; resultsLabel = new Label(); inputHBox.addChild(userDistanceTI); inputHBox.addChild(distanceTypeSelector); outputHBox.addChild(resultsLabel); }
34
8946CH02CMP3
11/6/07
7:52 PM
Page 35
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
The createInterface function illustrates how easy it is to create interface elements dynamically. If you look through the first few lines, you’ll see that the ActionScript can create new controls by calling their constructor functions; for example, new TextInput() or new ComboBox(). Once created, you can then set attributes for the controls. The function creates three new controls: a TextInput, a ComboBox, and a Label. It sets the dataProvider for the ComboBox. At this point, the controls have no visual appearance in the application, even though they exist. The addChild method adds the controls to the display list so that they become visible in the interface. Notice that the code must specify the parent for each control to create the correct hierarchy. Let’s test the application at this point by switching to the MXML file and adding a new instance of the class. Add the following script block: The code block starts by importing the custom class, specifying the package and class names. It also imports the FlexEvent class, which is the type of event object broadcast by the creationComplete event. The code then declares a private variable called converter of the type KmMilesConverter. The code includes a call to the initApp function, which creates a new instance of the class, passing the ids of the two HBox elements to the constructor. The application needs to call the initApp function in the creationComplete event handler of the element as shown in bold here: Run the application and you should see the same interface that appears in Figure 2-1, complete with the populated ComboBox. The only thing left to do is to add functionality to the Button element so that it carries out the conversation when clicked by the user. Switch back to the class file and add the following convert public method. The application will call it with the click handler for the button. public function convert():void { var convertedAmount:Number = Number(userDistanceTI.text) * ➥ distanceTypeSelector.selectedItem.data; if (isNaN(convertedAmount)) { resultsLabel.text = "Enter only numbers for distance";
35
8946CH02CMP3
11/6/07
7:52 PM
Page 36
CHAPTER 2
} else { resultsLabel.text = String(convertedAmount); } } The function takes no arguments and returns no values. It starts by calculating the converted distance by multiplying the entered number by the appropriate conversion factor. You’ve seen this code before. Instead of relying on a NumberValidator control, ActionScript tests whether or not the calculator returns a number. If not, the application shows an error message in the results label control; otherwise, it shows the calculated amount. Switch back to the MXML file and modify the Button control, as shown in bold: You now need to add this function to the block at the top of the file: private function doConversion(e:MouseEvent):void { converter.convert(); } This function calls the convert method of the converter object. If Flex Builder didn’t add the following import statement automatically, add it yourself: import flash.events.MouseEvent; You’re now ready to test the application. After running it, you should be able to enter a value and see either the converted amount or an error message. You can find the completed files saved with the other resources as LengthConverter5.mxml and KmMilesConverter.as. The final approach to working with ActionScript is to create an ActionScript-only project. This is a much more difficult proposition as this type of project can’t reference Flex user interface components.
Creating ActionScript projects You don’t have to include or reference ActionScript from inside MXML application files. Instead, your SWF application can be constructed entirely from ActionScript. Instead of creating a Flex project, you can use Flex Builder to create a new ActionScript project by choosing File ➤ New ➤ ActionScript Project. Be aware that if you do take this approach, you can’t use any Flex elements, so automatic layouts using the VBox and HBox containers won’t be possible. You’ll also have to avoid using the Flex components. ActionScript-only projects either have to draw their own elements with the drawing API or rely on simple elements such as the TextField. If you need access to Flex components, at the bare minimum you’ll need to link the ActionScript files to a simple MXML file containing an element and basic container and then write the appropriate ActionScript statements.
36
8946CH02CMP3
11/6/07
7:52 PM
Page 37
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3 Flex components are useful and cut down development time enormously. Given that this book is about Flex development, it’s beyond its scope to create projects solely in ActionScript. I’m not going to take you through an ActionScript-only example. Instead, I’ll show you an example that creates the interface mostly in ActionScript, but still relies on Flex components for layout and user interaction.
Working with a minimal Flex interface In this example, you’ll re-create the conversion calculator using a minimalist MXML file. You’ll embed most of the application code in ActionScript files and create the interface programmatically. Create a new Flex application file and call it LengthConverter6.mxml. Add the following MXML elements: That’s about as simple as it gets! The application contains only a VBox container. The application will place all controls inside this container programmatically. Create a new ActionScript class in the converters package and give it the name KmMilesConverter2. The class should extend the Sprite class, and the code looks like the following. package converters { import flash.display.Sprite; public class KmMilesConverter2 extends Sprite { } } Add the following import statements underneath the initial statement added by Flex Builder. The complete list follows with the new statements shown in bold: import import import import import import import import
flash.display.Sprite; mx.containers.VBox; mx.containers.HBox; mx.controls.Label; mx.controls.TextInput; mx.controls.ComboBox; mx.controls.Button; flash.events.MouseEvent;
The application has to reference all these classes for the Flex components in the custom class file. The last import statement references the MouseEvent class.
37
8946CH02CMP3
11/6/07
7:52 PM
Page 38
CHAPTER 2
The application also needs to include some private variables that will control the interface. Add the following variable declarations inside the class declaration: private private private private private private private private private
var var var var var var var var var
dp:Array; container:VBox; inputs:HBox; outputs:HBox; distanceLabel:Label; userDistanceTI:TextInput; distanceTypeSelector:ComboBox; convertButton:Button; resultsLabel:Label;
The purpose of each variable is fairly self-explanatory from its name. The first variable, dp, is the data provider for the ComboBox component. The other variables relate to the containers and controls that I’ll add programmatically to the initial VBox component. The class file needs a constructor method and will receive a reference to the VBox container as a parameter. Add the following function: public function KmMilesConverter2(container:VBox) { init(container); } This simple method calls the init function, passing along the VBox reference. Add this private function next: private function init(container:VBox):void{ dp = new Array(); dp.push({label:"Kilometers to miles",data:0.621371}); dp.push({label:"Miles to kilometers",data:1.609344}); createInterface(container); } The init method populates the dp array variable with the items that will appear in the ComboBox component. After doing so, it calls the createInterface method, which will do all the work. Add the function now and I’ll work through it afterward: private function createInterface(theContainer:VBox):void { container = theContainer; inputs = new HBox(); outputs = new HBox(); distanceLabel = new Label(); distanceLabel.text = "Distance"; userDistanceTI = new TextInput(); distanceTypeSelector = new ComboBox(); distanceTypeSelector.dataProvider = dp; convertButton = new Button(); convertButton.label = "Convert"; convertButton.addEventListener(MouseEvent.CLICK, convert); resultsLabel = new Label();
38
8946CH02CMP3
11/6/07
7:52 PM
Page 39
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
container.addChild(inputs); inputs.addChild(distanceLabel); inputs.addChild(userDistanceTI); inputs.addChild(distanceTypeSelector); container.addChild(convertButton); container.addChild(outputs); outputs.addChild(resultsLabel); } I separated the code into two blocks. The first block creates the containers and controls that will make up the interface. The second block actually adds the elements so they’ll display visually. You can see that each component is programmatically created using the new constructor, followed by the component type. You can then set properties for each component where appropriate. For example, the code assigns a text property to the first Label control and a dataProvider to the ComboBox. The second block adds the components to the interface using the addChild method. It does this in order of how each component will appear. I could also have used addChildAt if I wanted to specify the exact location for each child. The addChildAt method takes an additional parameter that is the position of the component, starting from 0. One point to notice is that the code adds an event listener to the Button control. The event listener listens for the click event (MouseEvent.CLICK) and calls the convert function in response. Add that method now. Note that it’s the same method used in the previous example. private function convert(e:MouseEvent):void { var convertedAmount:Number = Number(userDistanceTI.text) * ➥ distanceTypeSelector.selectedItem.data; if (isNaN(convertedAmount)) { resultsLabel.text = "Enter only numbers for distance"; } else { resultsLabel.text = String(convertedAmount); } } And that’s all for the class file. You can check my KmMilesConverter2.as file saved with the other resources if you want to compare your class file with mine. To finish, the MXML application file needs to reference the class file. Switch back to LengthConverter6.mxml and add the following script block:
39
8946CH02CMP3
11/6/07
7:52 PM
Page 40
CHAPTER 2
This code block imports the new class file as well as the FlexEvent class. It then creates a variable of type KmMilesConverter2. The code includes a single initApp function, and the application will call this function in the element. The function has a FlexEvent parameter, passed from the function call, and it creates a new instance of the KmMilesConverter2 class called converter. Modify the tag, as shown in bold, so that the application calls the initApp function after it is created: That’s it! Run the application and you should see the same result as in the previous examples—a simple kilometers- and miles-conversion tool. The resources download includes the two finished files from the example KmMilesConverter2.as and LengthConverter6.mxml. In this section, I showed you how to create the same application in several different ways. I tried to get these examples to address the main issues that you’ll need to know for working with ActionScript 3.0, but there are some additional points that might be useful.
Additional points There are a couple of additional points that weren’t really addressed in the examples that you’ve worked through so far. These are some basic issues that are important in the understanding of ActionScript 3.0: The new event model in ActionScript 3.0 Data binding and bindable properties The trace statement I want to go through each of these issues, starting with the new event model.
Understanding ActionScript 3.0 events Event handling has changed quite a bit in ActionScript 3.0, so it’s worth exploring the topic in a bit of detail. Events are triggered when something changes in a Flex application, such as clicking a button or creating the application. The new system of event handling is based on the same approach as the Document Object Model (DOM) Level 3 Events Specification, which you can find at www.w3.org/TR/DOM-Level-3-Events/. In earlier versions of ActionScript, you had a range of choices about how to handle these events. In ActionScript 3.0, you can handle these events in only one way. You can’t use the on or onClipEvent event handlers or the addListener method available in earlier ActionScript versions. In ActionScript 3.0, all event detection happens by using listeners. An event listener is a function that responds to the specific event. Flex components have a set of predetermined events, each represented by an event object. Developers can also create and dispatch their own custom events. The built-in event objects come from one of the Event classes or subclasses. The event object is dispatched when the event fires in the
40
8946CH02CMP3
11/6/07
7:52 PM
Page 41
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3 application and the object is passed to the target of the event. For example, when you click a button, the MouseEvent object is dispatched. Developers can include ActionScript in the MXML component declaration to handle the event. For example, the following MXML tag includes a handler for the click event that passes the event object: You’d then write the clickHandler function, making sure that it includes a MouseEvent argument, the type of the passed event object: function clickHandler(e:MouseEvent):void { //do stuff } Developers can also assign and create the event handler purely in ActionScript. The following line shows ActionScript that adds the same event listener to the myButton instance: myButton.addEventListener(MouseEvent.CLICK, clickHandler); When a user clicks myButton, this listener responds to the click event with a call to the clickHandler method. Notice that instead of passing the string click to represent the event, the application passes the constant MouseEvent.CLICK. This approach is recommended by Adobe, so you don’t cause problems by accidentally entering typos when specifying the event. By the way, there’s no requirement for you to name the method above clickHandler. It’s simply a convention that some developers prefer to use to make it easier to identify the purpose of the function. The event listener can be removed by using the following: myButton.removeEventListener(MouseEvent.CLICK, clickhandler); Notice that the method required the event type and handler function to remove it from the instance. Developers can use the event object passed to the handler function to find out information about the event. They can also access properties and methods associated with the event object; for example, it’s possible to find out the event type using the type property. Some other useful event properties include the following: currentTarget: Refers to the object that is currently processing the event object target: Refers to the object that is the target of the event toString: Creates a string representation of the event object The destination point for the event object is the event target. Where the target is an item in the display list, it may need to be passed through the hierarchy of objects in the display list. This process is called the event flow. One useful side effect of the new event model is that there is no longer a need to delegate the scope of a listener method as in ActionScript 2.0. You can say goodbye to the mx.util.Delegate class!
41
8946CH02CMP3
11/6/07
7:52 PM
Page 42
CHAPTER 2 Another implication is that Flash Player 9 recognizes a series of default behaviors for specific events. An example is that new text displays in a TextInput control as it is entered. Flash Player automatically creates an instance of the TextEvent class to handle this display. You can find out about default behaviors in the Flex documentation. Developers can cancel many of these default events using the preventDefault method.
Creating bindable properties In an earlier example, you saw that it is possible to use curly braces to specify data binding between two components. I’ll discuss this topic in much more detail later in the book, but in the meantime, it’s worthwhile mentioning that you can bind properties to components in ActionScript as well. When you add a variable to a block of ActionScript code, you can use the [Bindable] metatag to indicate that it can be bound to a component; for example: [Bindable] public var myArray:Array; You can then assign the variable directly to a component using curly braces notation: This type of binding is useful because when the value of the variable changes, the bound property will update automatically. Therefore, you can modify the bound property from any number of methods without having to explicitly assign a value using ActionScript.
What happened to trace? If like me, you were used to using trace statements in earlier versions of ActionScript, you’ll notice that the code in this chapter doesn’t use a single one. You can include trace statements to display information at various points in your ActionScript code, but they operate a little differently in Flex Builder. In Flash, when you include a trace statement, you are used to seeing the results display in an Output window. There isn’t an Output window in Flex Builder, so don’t expect to see the results in the same way when you run an application. Instead, you have to choose the Debug option (to the right of the Run button) to compile the application. When you debug the application, any trace statements within your code will appear in the Console view within Flex Builder. The application will run in the debug version of Flash Player 9, and you’ll have to switch back to Flex Builder to see the results from the trace statements in the Console view. You can also add output from trace statements to a log file. I’ll talk about debugging applications in some detail later in the book.
42
8946CH02CMP3
11/6/07
7:52 PM
Page 43
WORKING WITH ACTIONSCRIPT 3.0 IN FLEX 3
ActionScript 3.0 best practices To finish this chapter, I want to cover a couple of best practices that will help you make the transition to ActionScript 3.0: Declaring data types appropriately Importing classes Creating appropriate packages I’m sure that there are plenty of other best practices that you’ll come across in your Flex work, but I think that these are some of the most important.
Declaring data types appropriately Always declare data types for your variables, parameters, and method return values, including a return type of void for functions that don’t return anything. ActionScript 3.0 doesn’t require that you declare all data types, but doing so will help to track down errors in your application more easily. It will also improve performance as the Flash Player won’t need to carry out implicit type conversions. As an aside, ActionScript 3.0 includes the capability to supply optional arguments to your methods. You can do this by assigning default values as shown here: public myMethod(arg1:String, arg2:Boolean = false):void { // do something } Back to data types. A related recommendation is to use the new int data type for creating loops. You can use this data type anywhere you need a number that doesn’t have decimals, and it will improve performance slightly compared with using the Number data type. You can use the as operator to change the data type of variables. The following example casts the variable strXML to the data type of XML: var myXML:XML = strXML as XML; If you need to create a variable that can be any data type, use the following declaration instead of leaving out the data type: var anything:*;
Importing classes You should import classes so you don’t have to use fully qualified names in your code: import import flash.events.MouseEvent; Be aware, however, that you can’t leave out the import statement even if you do use fully qualified names when referring to classes.
43
8946CH02CMP3
11/6/07
7:52 PM
Page 44
CHAPTER 2 You’ll have better control over your code if you import individual classes instead of entire packages. That way, you can be sure which class is involved in your code in case you strike any problems.
Creating appropriate packages Don’t store class definitions in the default package; that is, the top-level package in your application. This happens when you save your class files in the root directory of the application and define the package without a path, as shown: package { } Instead, you should create a folder structure to support your classes. If you plan on reusing your classes, add them to an external location and edit the classpath in your Flex application to reference the external folder. You can do this by right-clicking the project in Flex Builder, choosing Properties, selecting the Flex Build Path area, and using Add Folder to locate the external folder.
Summary In this chapter, I showed you the different ways to work with ActionScript in a Flex application. I set up an example and showed you several different ways to add functionality with ActionScript. The chapter showed how to write inline ActionScript within MXML elements; how to include an block in an MXML file and use it to add code, reference external ActionScript files with the source attribute, and import external code into the MXML file. I also worked through two examples that showed how to create custom class files and add interface elements. In the next chapter, I want to look at how you can create your own components for reuse in Flex applications.
44
8946CH02CMP3
11/6/07
7:52 PM
Page 45
8946CH03CMP4
11/6/07
7:53 PM
Page 46
8946CH03CMP4
11/6/07
7:53 PM
Page 47
Chapter 3
CREATING CUSTOM COMPONENTS
The Flex framework includes a number of built-in components: user interface controls, containers, navigation controls, and even a range of charts. You can use these components to create the interfaces for their Flex applications. Each component corresponds to an ActionScript class contained in the Flex SDK. Developers can also build their own custom components, often based on one or more prebuilt components. They can do this in one of two ways: by using MXML files or by creating ActionScript classes. Even pure MXML components are likely to include some ActionScript. Creating custom components allows developers to create reusable functionality in their applications. Why spend time re-creating something that’s already built? Building components also allows developers to break their application code into smaller parts. Instead of writing one long MXML file, it might be easier to split the code into smaller, function-specific files. This approach also allows developers in a team to take on different development tasks. The best components are independent of other code in the application and are what’s referred to as loosely coupled. This term means that the component doesn’t rely on any other components or instances and it operates independently. When you develop components in this way, it’s important to make it very clear to other developers what parameters are needed to create the component and what values the component can return. Developers need to be aware of the properties and methods of the component, as well as having an understanding of which events the components can dispatch.
47
8946CH03CMP4
11/6/07
7:53 PM
Page 48
CHAPTER 3 In this chapter, I’ll show you how to build custom components that you can reuse. I’ll show you three approaches: how to use MXML components, how to use ActionScript components, and how you might use a hybrid approach. We’ll work through examples that include prebuilt components as well as supporting ActionScript. You can download the resources for this chapter from the friends of ED web site at www.friendsofed.com. Let’s start by looking at the process involved in creating a simple MXML component based on built-in components.
Creating components using MXML To build a simple MXML component, developers generally work through the following steps:
1. Create a new MXML file for the component inside a subfolder. 2. Provide a name for the MXML file that will adequately describe the component. 3. Instead of using the tag as the root node, use a component such as a container or user interface control as the base class for the component.
4. Add the required components inside the root node. 5. Add the ActionScript required for the working of the component. The component can then be referenced from an application file in the project. A couple of points are worth noting here. First, in step 1, I mentioned that we should create the component inside a subfolder of the Flex project. While this approach is not necessary, it’s certainly a good practice because it organizes the Flex project and allows you to refer to all custom components using a namespace. It also means that you can avoid conflicting names for your components. The name you give for the component file is the same one that Flex applications will use when creating tags for the component. For example, if you call the file MyNewComponent.mxml, Flex will use the tag name to create the component. It’s important that your tag name is descriptive. You’ll notice in step 3 that we can’t use the tag as the root node for a component MXML file. This happens because we’ll be referencing the component inside an application file that already uses that root node. It’s not possible to have more than one tag in an application. The root node in the component file will need to declare the namespace www.adobe.com/ 2006/mxml namespace. It’s also important to note that a custom component can contain other custom components along with the components included with the Flex framework. You might build up a library of components that you can include within your applications. Developers need to be able to reference custom components in their MXML applications. They do this by adding a new namespace to the tag with an appropriate short name. You can use any prefix for the namespace, and the following line uses comp: xmlns:comp="components.CountriesCombo"
48
8946CH03CMP4
11/6/07
7:53 PM
Page 49
CREATING CUSTOM COMPONENTS The namespace refers to the directory structure for the component; for example, the previous line adds a namespace referring to the CountriesCombo component in the components folder. I could also use an asterisk (*) to refer to all components. If you add components at the top level of the Flex project, you’d use the following namespace, although as mentioned, this location isn’t recommended: xmlns:comp=" *" To add the component called CountriesCombo in the application, we can reference it using the namespace prefix and file name as follows: The best way to see this process is to create a simple component in an MXML file. The component will be a ComboBox that displays a list of countries. We’ll be able to add this component in an application. If you’re an experienced developer, I’m sure you’ve often needed this type of functionality.
Example: Creating a country ComboBox component Create a new Flex project using File ➤ New ➤ Flex Project. Give it the name CustomComponents and click the Finish button. You can choose any location for this project. Choose the root folder as the location for application files. Create a new folder in the project called components by right-clicking the name in Navigator view and choosing New ➤ Folder. Create a new component file in that folder called CountriesCombo. Choose the ComboBox as the base class. At this point, your component file should look like the following: We want to display a list of countries, so we’ll need to add a data provider to the ComboBox. So it won’t take forever, I’ll add only a few countries, but you are welcome to add the complete list of all countries if you like. Add the following data provider to the ComboBox control: Unlike the other tags, the tag is in lowercase because it’s a property of the ComboBox control, not a class in its own right. In fact, you’re probably aware that there are a number of components (such as the List and charting controls) that can use a dataProvider property.
49
8946CH03CMP4
11/6/07
7:53 PM
Page 50
CHAPTER 3
Notice that we populate the ComboBox from a series of objects, and each contains a label and data property. By using these names, we can automatically populate the corresponding properties in the ComboBox component. You can switch to Design view to get a preview of how this component will appear. In Figure 3-1, you’ll notice that the Design view looks different from that for an application file.
Figure 3-1. The complete component shown in Design view
We need to switch back to the main application file: CustomComponents.mxml. To add the component, we’ll need to add a namespace to the opening tag, as shown here in bold: We can now use the prefix comp to refer to any custom components that we want to include. Add the following lines inside the tag to add the custom component to this application inside a VBox control: When you run the application, you should see something similar to Figure 3-2.
Figure 3-2. The application, including the custom component
The application includes the ComboBox control containing the list of countries. Because the component uses the ComboBox base class, it inherits all the properties and methods from that class, so you can use any of them in your main application. Let’s extend the example so we can extract the label of the selected item from the ComboBox and display it in another control. Start by adding the following Label control in the application file, underneath the custom component: We’ll then use the change event of the custom component to change the text displayed in the Label control. Because we based the component on a ComboBox, it inherits the change event, and we can
50
8946CH03CMP4
11/6/07
7:53 PM
Page 51
CREATING CUSTOM COMPONENTS include it as an attribute in the control. Add the following attribute, shown in bold, to the custom component. The line sets the text property of the selectedCountry control to the label of the selected item in the custom component. When you run the application and select a country, you should see the Label control update, as shown in Figure 3-3.
Figure 3-3. Responding to the change event in the custom component
If you want to check the finished code, you can find my files saved in the 3-1 folder with your resources. You’ll need to import these into a Flex project to see them work. One of the reasons for creating custom components is so that developers can create a library of reusable controls that are available to any application. For this reason, it’s important to be able to pass property values to components—and we’ll look at this topic next.
Passing a value to the component Loosely coupled components don’t rely on specific elements in the main application file. Rather, they have properties that the application can set in the component. The usual way to add properties is by using ActionScript statements to declare them. You can either use setter and getter methods to work with the properties or you can declare them with the public access modifier. Using the public keyword allows an application file using the component to set or get the value of the property directly. You’ll see how this works as we modify the previous example. We could improve on the first example by allowing the main application file to set the selected value in the ComboBox. You’d need to do this if you are presenting a prepopulated form in the application. When the application file adds the component, it will pass in a value that we’ll use to set the selected item. We’ll call this property country, so we’ll need to add a public variable of the same name in the custom component. I’ll also show you what happens if you change the base class for your component from a ComboBox to a VBox container. Modify the starting component file CountriesCombo.mxml so it looks like the following: I added the ComboBox control inside a VBox and moved the namespace declaration to the new root element. The code adds an id attribute for the ComboBox and removes the data provider. We’ll populate the ComboBox using ActionScript.
51
8946CH03CMP4
11/6/07
7:53 PM
Page 52
CHAPTER 3
You could use any container you like for the ComboBox. I chose the VBox for convenience, but it means that the custom component no longer inherits the properties, methods, and events from the ComboBox. Making these changes in the custom component will cause an error in the main application file because the VBox doesn’t have a change event. We can still reference the ComboBox within the custom component from the application file or we can remove the change attribute altogether. We’ll do the latter so that the code for CustomComponents.mxml appears as follows: Switch back to the custom component and add the following init function to populate the ComboBox control, inside an block. Place this block immediately below the opening VBox tag: The script block creates a private array variable called dp and populates it using the same values as before. It uses the push method to add each new item at the end of the array. It then assigns the array to the dataProvider property of the ComboBox component. Because the variable uses the private modifier, it is not accessible to applications that use the custom component. We’ll need to call the init function when the component is created, so we’ll do this in the creationComplete event of the root node, the VBox control. Add the following attribute, shown in bold. Notice that the attribute passes an event object to the init function. We’ll need to modify the function declaration as shown in bold so that it recognizes that a FlexEvent object is passed with the function call. private function init(e:FlexEvent):void {
52
8946CH03CMP4
11/6/07
7:53 PM
Page 53
CREATING CUSTOM COMPONENTS
Flex Builder should add the following import statement at the top of the script block. If not, add it yourself: import mx.events.FlexEvent; We still haven’t dealt with passing a property value to the ComboBox control inside the custom component. As mentioned, we’ll create the property as a public variable, so add the following declaration below the import statement. public var country:String = "Australia"; We call the public variable country and we can use it as an attribute of the custom component in the main application file. Notice that I’ve set a default value of Australia for this variable in case the user doesn’t pass the value from the main application file. We then need to use this variable to set the value in the ComboBox and we’ll do this in a function called setSelectedCountry. Add a call to the function at the bottom of the init function: private function init(e:FlexEvent):void { dp.push({label:"Australia", data:"AU"}); dp.push({label:"Canada", data:"CA"}); dp.push({label:"New Zealand", data:"NZ"}); dp.push({label:"United Kingdom", data:"UK"}); dp.push({label:"United States of America", data:"US"}); countriesCombo.dataProvider = dp; setSelectedCountry(); } Add this private function to the script block below the init function: private function setSelectedCountry():void { if (country.length >0) { for (var i:int;i You can then set the data provider for the ComboBox by making the following change, shown in bold: At this point, the ComboBox doesn’t contain any data, but it is bound to an empty public array variable called dataSource. We’ll be able to populate this array from the main application file. Switch to the CustomComponents.mxml application and remove the country attribute from the countryCBO component. We can create a new Bindable variable and bind it to the dataSource public variable in the custom component. Add the following block below the tag: [Bindable] private var theCountries:Array = new Array({label:"Australia",➥ data:"AU"},{label:"Canada", data:"CA"},{label:"New Zealand",➥
54
8946CH03CMP4
11/6/07
7:53 PM
Page 55
CREATING CUSTOM COMPONENTS data:"NZ"},{label:"United Kingdom", data:"UK"},➥ {label:"United States of America", data:"US"}); You can then bind this variable to the dataSource property of the ComboBox in the custom component by modifying the tag, as shown in bold: If you run the application, you should see that the ComboBox component populates as before. To change the countries that display, you can modify the theCountries variable in the application file. You can find the finished files for this example saved in the 3-3 folder. In addition to being able to set properties, loosely coupled components should be able to call methods and dispatch events so that they can integrate fully with other elements in an application. You’ll see an example of a method call a little later, but in the meantime, let’s look at how the component can dispatch events to the application.
Dispatching events It’s possible to set up a custom component so that it dispatches events to the application that hosts it. First, you need to declare the event that will be broadcast. You then need to dispatch the event in response to some action within the component. Finally, you can capture and respond to the broadcast event in the main application. We’ll extend the example we’ve been working on so it dispatches an event whenever a user selects a new value in the ComboBox component. We’ll call this the countryChanged event. Because we based our component on the VBox container, we can’t simply hook into the change event of the ComboBox. To add the new event, we need to create an element above the script block in the custom component file. These elements provide additional information to the Flex compiler. This element contains an [Event] tag that specifies the name of the event that the component can dispatch and its type. Add the following code block to the custom component file, above the block: [Event(name="countryChanged", type="flash.events.Event")] The tag inserts meta tags into an MXML file that pass information to the Flex compiler about the application. By convention, this tag is usually placed underneath the opening tag above the tag in an application file. You can also place the Event declaration directly within a block of ActionScript code, without the tag. In the preceding code block, the tag creates a new event called countryChanged that is of the flash.events.Event type. This class is the basis for all events. We need to be able to dispatch this event whenever the value in the ComboBox component changes, so add a change attribute to the ComboBox component, as shown in bold.
55
8946CH03CMP4
11/6/07
7:53 PM
Page 56
CHAPTER 3
Each time the ComboBox selection changes, we’ll call the function comboChange to dispatch the countryChanged event. We’ll add this function now in the script block: private function comboChange():void { dispatchEvent(new Event("countryChanged")); } The function dispatches the countryChanged event using dispatchEvent. The dispatchEvent method takes the event object as an argument. We can respond to the countryChanged event in the main application file by writing it as an attribute of the custom component. Make the following change in the component in the CustomComponents. mxml file: The attribute responds to the countryChanged event by calling the countryChangedHandler function, which you now need to add to the script block. Notice that the function passes the event to the handler: private function countryChangedHandler(e:Event):void { selectedCountry.text = "Broadcast from the " + e.type + " event"; } The countryChangedHandler function sets the value of the text that displays in the selectedCountry label control. It accesses the type of event using the type property. Run the application to see how the example works. Selecting a value in the ComboBox dispatches an event that is detected in the main application file, and the text in the Label component updates, as shown in Figure 3-4.
Figure 3-4. The custom component broadcasts an event of countryChanged type to the application.
You can find the finished files saved in the 3-4 folder with the other resources. While this simple example is a good illustration of custom events, it isn’t very useful. It would be more useful if we could access properties about the event such as the selected label and data from the ComboBox. We can do this by creating a custom event class that passes the details of the selected item back to the application.
Creating a custom event class If we want to pass data with a custom event, we’ll need to create a custom event class. This class must extend the flash.event.Event class, which is the base class for all events. The custom class needs to call the super method of the Event class to create a new event object. In our custom class, we will pass the type of the custom event when we call the super method.
56
8946CH03CMP4
11/6/07
7:53 PM
Page 57
CREATING CUSTOM COMPONENTS
We must also override the clone method of the Event class, so we can return a new copy of the event object. The override method replaces the original clone method with a new one, specific to the custom class. The new clone method will return a copy of the custom class, setting the type of the event and any properties that it must pass. The custom component then needs to create a new instance of this class, passing in any properties required by the event. It can then dispatch this custom event to the application. Let’s see how this might work by creating a custom class called CountrySelectedEvent. We’ll need to create a new ActionScript class using File ➤ New ➤ ActionScript Class. Create the class inside the components folder and give it the name CountrySelectedEvent. It should extend flash.events.Event, which means that we’ll be able to use all the methods and properties of the Event class. Once created, the custom class file should appear as follows: package components { import flash.events.Event; public class CountrySelectedEvent extends Event { } } The custom event will pass two properties with the event object: the selected country and the code for the selected country. These properties correspond to the label and data properties of the selected item in the ComboBox component. We’ll start by adding these properties inside the class declaration, as shown here. They need to be public properties so we can access them from the custom component file. public var selectedCountry:String; public var selectedCountryCode:String; We’ll be able to access these properties directly from the event object using the previous variable names. We’ll also create a constant that references the name of the event that we’ll broadcast. Add the following line below the two you just added: public static const COUNTRYSELECTED:String ="countryChanged"; This line creates a constant called COUNTRYSELECTED, which will refer to the name of the event: countryChanged. We now need to add the constructor method, as well as overriding the clone method. Add the following code to the class file: public function CountrySelectedEvent(type:String,➥ theSelection:Object) { super(type); selectedCountry = theSelection.label; selectedCountryCode = theSelection.data; } override public function clone():Event{ return new CountrySelectedEvent(type, selectedCountry); }
57
8946CH03CMP4
11/6/07
7:53 PM
Page 58
CHAPTER 3 The constructor function takes two arguments: the string event type and the selected item from the ComboBox. It calls the super method of the Event class passing the new event type. This method calls the constructor of the base Event class, so we can create an Event object first, before we set the values of our public variables in the custom class. The CountrySelectedEvent function then sets the values of the two event properties selectedCountry and selectedCountryCode, which are derived from the label and data properties of the selected item object. The second method overrides the clone method, returning a new event with the relevant event type and selected item. As mentioned earlier, we need to do this to return the correct event object type. The clone method returns a copy of the event object; in our case, a copy of the CountrySelectedEvent. We use the keyword override to replace the original clone method in the Event base class. The override prevents us from returning an Event object and instead returns a CountrySelectedEvent object. We also need to call the clone method to support event bubbling. By using this method, the event can bubble to any parent containers. This is necessary to inform any other components that are listening for this event. If you don’t override the clone method, the event can’t bubble. We need to refer to this custom event in the custom component file, so switch to the CountriesCombo.mxml file. Modify the tag as shown here: [Event(name="countryChanged", ➥ type="components.CountrySelectedEvent")] This [Event] meta data tag defines a new event for the custom component called countryChanged that is of the type components.CountrySelectedEvent, our new custom event class. We’ll need to import this class into the script block with the following line: import components.CountrySelectedEvent; We’ll also need to dispatch the new event when a user changes the value in the ComboBox component. We can do this by modifying the existing comboChange function, as shown in bold: private function comboChange():void { var eventObj:CountrySelectedEvent = new CountrySelectedEvent ➥ (CountrySelectedEvent.COUNTRYSELECTED, ➥ countriesCombo.selectedItem); dispatchEvent(eventObj); } The function starts by creating a new instance of the CountrySelectedEvent in a variable called eventObj. To create the instance, we need to pass the type and selected item from the ComboBox, as defined in the constructor function. We pass the constant CountrySelectedEvent.COUNTRYSELECTED to indicate the event type. The final line in the function dispatches this new event.
58
8946CH03CMP4
11/6/07
7:53 PM
Page 59
CREATING CUSTOM COMPONENTS
Switch to the CustomComponents.mxml file so we can respond to this event. We’ll need to import the custom event class with the following statement inside the block: import components.CountrySelectedEvent; From the previous example, we’re already handling the countryChanged event using the countryChangedHandler function so we can simply modify this function to process the new event properties, as shown in bold. private function countryChangedHandler(e:CountrySelectedEvent):void { selectedCountry.text = "changed to " + e.selectedCountry; } The event type passed to the function has changed to the custom CountrySelectedEvent type. This handler now shows the text changed to with the selectedCountry property from the custom event. When you run the application, Figure 3-5 shows the effect of making a new selection in the ComboBox component.
Figure 3-5. Displaying a property from a custom event type
This example demonstrated how to pass properties with a custom event type. We created the new event with an ActionScript class that extended the base Event class. You can find the finished files in the 3-5 folder with your other resources. Flex custom components can include other components, both built-in and custom. We call components that contain this type of structure composite components.
Creating a composite component One advantage of using a modular component structure is that you can include one custom component inside another. We’ll work through an example here that includes the countries ComboBox component inside a new custom UserForm component. Start by creating a new component called UserForm in the components folder and base the component on the Form element. Because we want to include our ComboBox custom component, we’ll need to add another namespace declaration to the root element, as shown here in bold:
59
8946CH03CMP4
11/6/07
7:53 PM
Page 60
CHAPTER 3
Add the following form elements to the component, after the opening element: Figure 3-6 shows how this interface appears in Design view.
Figure 3-6. The interface shown in Design view
Now we’ll add the custom ComboBox component from the CountriesCombo.mxml file. Add the following tags, shown in bold, before the form button: Notice that we use the comp prefix to refer to the component. The CountriesCombo component actually contains the ComboBox control inside a VBox. Strictly speaking, we should probably remove that element, but I won’t do that so we can keep things simple and follow straight on from the previous examples. We’ll need to test the UserForm component inside a new application. Create a new MXML file called ComplexComponents.mxml and add the following namespace to the tag: xmlns:comp="components.*" We’ll add the UserForm component inside a VBox control and we’ll also add a label to display messages. Add the following elements to the application:
60
8946CH03CMP4
11/6/07
7:53 PM
Page 61
CREATING CUSTOM COMPONENTS Run the application and you should see an interface similar to that shown in Figure 3-7.
Figure 3-7. The application interface
Notice that the ComboBox component isn’t yet populated. We can handle that in the UserForm custom component. Previously, we used data binding to set the dataSource attribute in the application file. Because the ComboBox component is included in the UserForm component, we’ll do the binding at that point. By populating the ComboBox from its hosting MXML file, we can reuse it in other situations with different data. Switch to the UserForm.mxml file and add the following script block: This block sets up the data provider for the ComboBox control. You can reference it by changing the tag, as shown in bold: If you run the ComplexComponents.mxml application now, you’ll see that the ComboBox populates with the list of countries from the theCountries array variable. We could add some validation and error handling to the form, but that’s a little beyond the scope of this example. Feel free to do it yourself if you want to extend this example. As a last step, we’ll dispatch an event from the user form to indicate to the application file that the Update button has been clicked. The application can then respond appropriately. Add the following [Event] metadata tag to the UserForm.mxml component file: [Event(name="formUpdated", type="flash.events.Event")]
61
8946CH03CMP4
11/6/07
7:53 PM
Page 62
CHAPTER 3
The declaration indicates that the component will dispatch an event called formUpdated, which is a flash.event.Event type. We’ll also need to import that class into the script block with the following line: import flash.events.Event; To capture the event, we must define a change handler in the Button control. Modify it as shown here in bold: We now need to add the following updateHandler function in the block: private function updateHandler(e:Event):void { dispatchEvent(new Event("formUpdated")); } This function dispatches the formUpdated event to the hosting application, where it can be captured as an attribute of the custom component. Modify the UserForm component in the ComplexComponent.mxml application file, as shown here in bold: The component could have responded by calling another function, but for simplicity I used inline ActionScript to display a message in the txtMessage component. Run the application and click the Update button. Figure 3-8 shows the main application interface responding to the dispatched event.
Figure 3-8. The user interface after responding to the formUpdated event
You can find the finished files for this example in the 3-6 folder. This example shows how easy it is to create applications that use composite components. The UserForm component includes the CountriesCombo component that we created earlier. You can imagine that a ComboBox containing a list of countries is a useful component that we might reuse in a number of different applications.
62
8946CH03CMP4
11/6/07
7:53 PM
Page 63
CREATING CUSTOM COMPONENTS So far in this chapter, you’ve seen how to create components using MXML. You can also create components using ActionScript, and that’s the topic for the next section.
Creating components using ActionScript Another approach for developers is to create components using ActionScript classes and refer to them with MXML tags in their applications. Even though we use MXML tags to create the component, it is still an ActionScript class. These components can be used in much the same way as MXML components, but they can also include more complex content such as nonvisual elements. Again, the name you give to the class file will be the name of the corresponding MXML tag in the application. Building an ActionScript component is pretty much the same as building any ActionScript class and uses the following steps:
1. 2. 3. 4.
Determine whether the component needs to extend an existing class. Create the class and add properties and methods. Determine whether the component needs to override any methods of the base class. Decide whether the component needs to dispatch events.
The best way to get started is by re-creating some of the examples that we worked through earlier in the chapter.
Working through examples Let’s start by creating a new application in the Flex project called CustomComponentsAS.mxml. We’ll also create a new ActionScript class in the components folder called CountriesComboAS. To start with, this class will extend the existing ComboBox class and populate the control with a predefined list of countries. Add the following variable declaration containing the list of countries to display: private var dp:Array = new Array({label:"Australia", data:"AU"},➥ {label:"Canada", data:"CA"},{label:"New Zealand", data:"NZ"},➥ {label:"United Kingdom", data:"UK"},➥ {label:"United States of America", data:"US"}); As before, for simplicity the code doesn’t supply a complete list of all countries in the world, and we pass both a label and data property in the objects within the array. Add a constructor method to the class file as shown: public function CountriesComboAS() { super(); dataProvider = dp; }
63
8946CH03CMP4
11/6/07
7:53 PM
Page 64
CHAPTER 3
The function calls the super method, so we can create the ComboBox from the base class constructor method. The function sets the dataProvider property to the array stored in the private dp variable. The complete class file follows if you want to check your code to this point: package components { import mx.controls.ComboBox; public class CountriesComboAS extends ComboBox { private var selectedCountry:String; private var dp:Array = new Array({label:"Australia", data:"AU"},➥ {label:"Canada", data:"CA"},{label:"New Zealand", ➥ data:"NZ"},{label:"United Kingdom", data:"UK"},➥ {label:"United States of America", data:"US"}); public function CountriesComboAS() { super(); dataProvider = dp; } } } Switch to the new CustomComponentsAS.mxml file and modify the tag to include a namespace for the components folder: I used the comp prefix for the custom components. We can add the custom component inside a VBox with the following lines. I also included a Label control to display messages: Run the application and you should see a ComboBox control populated with a list of countries. Again, because we extended the ComboBox class when we created the component, we can use all the properties, methods, and events of that class. For example, we could update the text in the Label control with the chosen country as before by using the following: You can find this simple example saved in folder 3-7 with the other resource files. Let’s move on to see how to set the value in the ComboBox control using an attribute in the CountriesComboAS component.
64
8946CH03CMP4
11/6/07
7:53 PM
Page 65
CREATING CUSTOM COMPONENTS
Passing values to ActionScript components We might want to allow the main application file to set the selected value in the ComboBox component using an attribute. We can do this by adding a public setter method to the ActionScript file that takes a country name and sets the appropriate item in the ComboBox. We’ll call this method country and it will set a private variable called selectedCountry. Using a setter method means that we don’t have to add a public variable within the class file. Create the selectedCountry variable now with the following declaration below the dp declaration: private var selectedCountry:String = "Australia"; The line creates the private variable, setting a default value of Australia. We now need to add the country public method that follows: public function set country(theCountry:String):void { selectedCountry = theCountry; setCountry(); } This method takes one argument, the name of the preselected country, and it returns nothing. The first line sets the value of the private variable selectedCountry while the second calls the setCountry private method that will do all the work. Add that function now: private function setCountry():void{ for (var i:int=0;i The ActionScript code block starts by importing the MouseEvent class. It also imports the Alert class and creates the showAlert function. This function creates a simple alert with the message Click a button and the title Hello. The alert shows two buttons: Yes and No. Clicking the Click me button calls the showAlert function, passing a MouseEvent object. This is the type of event object passed with a mouse click. The showAlert function then displays the alert.
79
8946CH04CMP4
11/6/07
7:55 PM
Page 80
CHAPTER 4 Run the application. Figure 4-2 shows the effect of clicking the Click me button.
Figure 4-2. Clicking the button generates an alert
We see a simple message in an alert with two buttons. Clicking either button will close the alert, but there is no code to respond to each button individually. Let’s modify the code so we can detect which button the user clicks. To do this, we’ll need to add a closeHandler argument to the alert. We’ll display which button the user clicked in the Text control txtMessage in the main application file. Modify the Alert line in the script block. The changes appear in bold: Alert.show("Click a button","Hello",(Alert.YES|Alert.NO), this, ➥ findResponse); We added this as the parent for the alert. Using this allows us to center the alert relative to the main application. The user calls the findResponse function when they click one of the buttons in the alert. The handler function will have a single parameter passed to it: a CloseEvent object. We’ll need to import this class with the following line, so add it with the other import statements: import mx.events.CloseEvent; Add the following function to the code block: private function findResponse(e:CloseEvent):void{ if (e.detail == Alert.YES) { txtMessage.text = "You clicked yes"; } else { txtMessage.text = "You clicked no"; } }
80
8946CH04CMP4
11/6/07
7:55 PM
Page 81
INTERACTING WITH USERS
The function receives a CloseEvent object from the alert. It uses the detail property to find out which button the user clicked. The function compares this value to the constant Alert.YES to find out whether the user clicked Yes. If so, the Text control shows You clicked yes; otherwise it shows You clicked no. Run the application and click the Click me button to bring up the alert. Click either button in the alert and you should see the relevant text in the Text control. Let’s add an icon to the alert. We’ll use the foelogo.jpg file from the assets folder. First, we’ll need to embed the image so we can refer to it with a class name. Add the following code below the import statements: [Embed(source="assets/foelogo.jpg")] public var iconSymbol:Class; If you used a different image, replace foelogo.jpg with your image name. We can then use iconSymbol as an argument in the alert as shown here: Alert.show("Click a button","Hello",(Alert.YES|Alert.NO), this,➥ findResponse, iconSymbol); When you run the application and click the Click me button, you should see the icon inside the alert, as shown in Figure 4-3.
Figure 4-3. An alert with an icon
Let’s finish the example by setting a default button and including the name of the user from the main application file in the displayed message. Modify the Alert line as shown in bold here: Alert.show("Hi " + txtName.text + ". Click a button","Hello",➥ (Alert.YES|Alert.NO), this, findResponse, iconSymbol, Alert.NO); The changes set No as the default button and include the name entered in the main application within the alert message.
81
8946CH04CMP4
11/6/07
7:55 PM
Page 82
CHAPTER 4 Run the application, enter a name, and click the Click me button to see the effect shown in Figure 4-4.
Figure 4-4. The completed example
In this example, I showed you how to set various properties in an Alert control. We showed Yes and No buttons and added a closeHandler so that we could respond appropriately, depending on which button the user clicked. You can find my completed example saved as SimpleAlert.mxml with your resources. You’ll need to import it into a project to run the application. In this example, we accepted the default size of the Alert control. It’s also possible to set the size and other aspects of appearance using properties of the Alert object returned by the show method.
Changing the appearance of the alert You can change several aspects of the appearance of the alert, including the following: The size of the alert The labels on the buttons The width and height of the buttons Let’s see how you might do this, starting first with the size of the alert box.
Changing the size of the alert It’s easy to resize an alert by using the width and height properties of the returned Alert object. You need to set a reference for the object returned by the show method first: var theAlert:Alert = Alert.show("Learn more about Flex?","Question"); You can then set the size of the alert using the reference, as follows: theAlert.width = 400; theAlert.height = 200;
82
8946CH04CMP4
11/6/07
7:55 PM
Page 83
INTERACTING WITH USERS
Changing the button labels The Alert control has several static properties that relate to the button labels okLabel, yesLabel, noLabel, and cancelLabel. As they are static properties, you need to set them before you create the alert, as shown here: Alert.yesLabel = "Absolutely!"; Alert.noLabel = "No way!"; Alert.show("Learn more about Flex?","Question");
Changing the button size You can also change the size of the buttons inside the alert using the static properties buttonHeight and buttonWidth. Again, you need to set these properties before you create the alert: Alert.buttonHeight = 15; Alert.buttonWidth = 100; Alert.show("Learn more about Flex?","Question");
A simple example Let’s see how to change the appearance of the alert we created earlier in this chapter. We need to start by modifying the code, so we set a reference for the Alert object returned by the show method. Modify the showAlert function as shown here in bold: private function showAlert(e:MouseEvent):void { var theAlert:Alert = Alert.show("Hi " + txtName.text + ➥ "Click a button","Hello", (Alert.YES|Alert.NO), this, ➥ findResponse, iconSymbol, Alert.NO); } We’ll resize both the alert and the buttons in the alert and change the button labels. Modify the preceding function, as shown in the following code block. Again, the changes appear in bold: private function showAlert(e:MouseEvent):void { Alert.buttonHeight = 20; Alert.buttonWidth = 120; Alert.yesLabel = "Absolutely!"; Alert.noLabel = "No way!"; var theAlert:Alert = Alert.show("Hi " + txtName.text + ➥ "Click a button","Hello", (Alert.YES|Alert.NO), this, ➥ findResponse, iconSymbol, Alert.NO); theAlert.width = 300; theAlert.height = 120; } We resized the buttons in the alert by setting the buttonHeight and buttonWidth properties. Notice that we did this before we created the alert. We also changed the words displayed on the Yes and No buttons using the yesLabel and noLabel properties. We then created the alert, assigning the object theAlert at the same time. Finally, we used this object to set the width and height of the alert.
83
8946CH04CMP4
11/6/07
7:55 PM
Page 84
CHAPTER 4 Running the application produces the screenshot shown in Figure 4-5.
Figure 4-5. Changing the appearance of the alert
You can find the completed SimpleAlert1.mxml file saved with your resources. Alerts provide a structured way to display messages to users who respond to their interactions. You can choose from four different buttons. If you find that you don’t have enough flexibility with the built-in buttons, you can create custom pop-up windows containing any of the user interface controls.
Working with pop-ups The PopUpManager class allows you to create your own pop-up windows to interact with users. You can use these windows modally so that they halt processing until the user takes an appropriate action. To create the pop-up content, you’ll need to make a custom component or class that contains the controls that you need. You can then refer to the component or class when you create your pop-up window using the createPopUp method. This method takes the following arguments: createPopUp(parent, className, modal, childList) The arguments are as follows: The parent determines the parent for the pop-up, and it’s common to use a value of this to refer to the main application file. The className argument specifies the name of the class to create inside the pop-up. You can specify a modal pop-up by setting the modal argument to true. Finally, the childList specifies the childList in which to add the pop-up, and it is one of the following values: PopUpManagerChildList.APPLICATION, PopUpManagerChildList.POPUP, or PopUpManagerChildList.PARENT. If you don’t specify anything, the default value is PopUpManagerChildList.PARENT.
84
8946CH04CMP4
11/6/07
7:55 PM
Page 85
INTERACTING WITH USERS
The createPopUp method returns an IFlexDisplayObject, which represents the pop-up window. This object defines the interface for skin elements and is required so that the pop-up can display. You can create a pop-up window using the LoginForm class, as shown here: myPopUp = createPopUp(this, LoginForm, true); You can then remove the pop-up by referring to the returned pop-up object in the removePopUp method: removePopUp(myPopUp); You can also close a pop-up window from within the custom component or class by using this: removePopUp(this); We’ll work through a simple example so you can see how to create and remove a pop-up window.
A simple example In this example, we’ll create a login form component that we’ll use to populate a pop-up window. The component won’t have any functionality, but it will demonstrate how to work with pop-ups. Start by creating a new folder called components that we’ll use for our LoginForm component. Within this folder, create a new component by choosing the MXML Component option from the New menu. Figure 4-6 shows the settings for this component.
Figure 4-6. Settings for the new component
85
8946CH04CMP4
11/6/07
7:55 PM
Page 86
CHAPTER 4
Notice that the component was based on the TitleWindow control. This control includes a title bar, an automatic close button, and an area for displaying the other controls. It’s a common choice as the basis for a pop-up window component. Add the following user interface controls between the opening and closing tags: The interface includes VBox and HBox layout containers. Inside these containers, there are two Labels and two TextInput controls for the username and password, respectively. There is also a Login button inside. We’ll add a title to the TitleWindow control as well as a close button. Change the tag as shown in bold here. The change also reduces the size of the control to 300 by 150: When you set the showCloseButton attribute to true, the TitleWindow shows a cross at the top-right corner. The user can click it to close the pop-up. You can add a handler for the close event of the TitleWindow, as shown here in bold: When the close event fires, the pop-up will be removed from the application using the static removePopUp method. Notice that we refer to the pop-up window using this. To improve the appearance of the pop-up, it’s nice to center it when the LoginForm loads. We can do this in the creationComplete event of the LoginForm component by using the static centerPopUp method. Modify the root element as shown in bold:
86
8946CH04CMP4
11/6/07
7:55 PM
Page 87
INTERACTING WITH USERS When the interface is created, the pop-up will center itself. Because we referred to the PopUpManager class in the tag, we’ll need to import the class in an ActionScript block as follows. Add this now under the component’s opening tag: If we were making a fully working component, we’d need to refer to some server-side login logic and respond appropriately. Because this is a simple example, we’ll just close the pop-up window when the user clicks the Login button. Add the following private function to the script block: private function doLogin(e:MouseEvent):void { PopUpManager.removePopUp(this); } You’ll also need to import the MouseEvent class: import flash.events.MouseEvent; Finally, you’ll need to modify the click attribute for the button, as shown in bold, to call the doLogin handler method: The complete code for the LoginForm component follows:
87
8946CH04CMP4
11/6/07
7:55 PM
Page 88
CHAPTER 4
Now that we’ve finished creating the component, we need to make a new application that displays the pop-up showing the login form. Normally we wouldn’t have multiple application files in the same project, but for simplicity, create the application file in the same project using File ➤ New ➤ MXML Application. I called my file PopUpManagerExample.mxml. Create the following simple interface in the application: You can’t get much simpler than a button inside a VBox! Notice that the button calls the showPopUp function when clicked. We now need to add that function inside a script block. We’ll also need to import the relevant classes. Add the following code beneath the opening tag: The code starts by importing the components package, which will include all custom components and classes inside that package. It imports the MouseEvent, the PopUpManager class, and the IFlexDisplayObject class for the returned pop-up window. We create a variable called myLoginForm to reference the pop-up window. The variable is of the type IFlexDisplayObject. The code also includes the showPopUp function, which will be called by clicking the Click me button. This function uses the static createPopUp method to show a pop-up based on the LoginForm custom component. We specified that the window is modal by setting the last argument to true.
88
8946CH04CMP4
11/6/07
7:55 PM
Page 89
INTERACTING WITH USERS Run the application and click the Click me button. You should see a pop-up window populated by the LoginForm component, as shown in Figure 4-7.
Figure 4-7. The complete application showing a modal pop-up window
You should be able to close the pop-up by clicking the cross at the top right of the window. You should also be able to close the pop-up by clicking the Login button. It’s a simple example but it shows the relationship between a pop-up and a custom component. You can find my completed files saved as PopUpManagerExample.mxml and LoginForm.mxml with the other chapter resources. If you’re going to import them into your project without completing the exercise, make sure you add the LoginForm.mxml file to a components folder. The example might have been more useful if we could have passed a value from the LoginForm component back to the application; for example, the username. Let’s see how we might make this happen by extending the example.
Passing values from the pop-up We’ll extend the previous example so that we can send the entered username back to the main application and display it in a Text control in the interface. We’ll need to make some changes to both the LoginForm component and the application file, so save copies of them as LoginForm2.mxml and PopUpManagerExample2.mxml, respectively. Doing this means that you’ll have examples of both approaches used so far in this chapter. We’ll start by making changes to the component file. Because we want to reference the Text control in the main application file within the custom component file, we need to import the Text class and create a public variable. Add the following import statement to the script block inside the LoginForm2.mxml file: import mx.controls.Text;
89
8946CH04CMP4
11/6/07
7:55 PM
Page 90
CHAPTER 4
We’ll create a public property called username of the type Text that will reference the control in the main application using the following line. Add the line below the import statements: public var username:Text; We can then set the value of the text property of the control to the value the user entered in the pop-up. When we close the pop-up, we want to display the username in the Text control in the main application. To refer to the first TextInput control programmatically, we need to add an id attribute. Modify the element as shown in bold: Add the following line, shown in bold, to the doLogin function: private function doLogin(e:MouseEvent):void { username.text = "Welcome back " + txtUsername.text; PopUpManager.removePopUp(this); } Before we close the pop-up, we set the text property of the Text control username to say Welcome back and include the entered username. You’ll see how this works after we make changes to the main application file. Switch to the application file so that we can change the way we call the pop-up. Before we start, we have to add a Text control with an id of txtMessage below the button. This control will display the username that we pass from the pop-up. The custom component LoginForm2 contains a public variable username, and the intent is that we’ll access this variable from any application using the component. However, before we can do this, we need to set the data type appropriately for the custom component in the application file. If we don’t change the data type, the component has the type IFlexDisplayObject. We want it to have the type LoginForm2. In our example, we need to change the type of myLoginForm to be a LoginForm2 type, so make the alteration in the variable declaration: private var myLoginForm:LoginForm2; We can change the type by casting the component when it is created. The next line shows how to do this, so modify it in the showPopUp function: myLoginForm = LoginForm2(PopUpManager.createPopUp(this, LoginForm2,➥ true)); Note that if you didn’t change the name of the custom component at the beginning of this exercise, you’d need to use the type LoginForm.
90
8946CH04CMP4
11/6/07
7:55 PM
Page 91
INTERACTING WITH USERS
You can also remove the following import statement from the script block because we changed the data type of the LoginForm2 component: import mx.core.IFlexDisplayObject; We can refer to the public variable username as a property of the component. Modify the showPopUp function as shown here in bold: private function showPopUp(e:MouseEvent):void { myLoginForm = LoginForm2(PopUpManager.createPopUp(this, LoginForm2,➥ true)); myLoginForm.username = txtMessage; } Notice that we had to cast the pop-up to the data type LoginForm2 to be able to access the public property username within the custom component. The new line sets this property to reference the txtMessage control. The pop-up can then use the variable username to refer to the txtMessage control in the application file. The complete code for the application follows: Run the application and click the button to bring up the pop-up window. Enter a username and click Login. You should see the text Welcome back with the name you entered displaying in the main application. You can find the completed files LoginForm2.mxml and PopUpManagerExample2.mxml with the other resources for the chapter. The final extension of this example is to show how we can pass values to fields in the LoginForm custom component from the application file.
91
8946CH04CMP4
11/6/07
7:55 PM
Page 92
CHAPTER 4
Passing values to the pop-up It’s sometimes useful to be able to set values in a pop-up window from the main application. We’ll extend the previous example so that the username is already populated when the LoginForm component opens in the pop-up. You might do this if you had already accessed the username in the application, perhaps through a SharedObject or a JavaScript cookie. In the custom component, we need to set a bindable public property for each value that we want to set from the main application. We can then bind the public property to the relevant property in a control in the custom component. In our case, we’ll create a public string variable for the username and bind it to the text property of the TextInput control txtUsername. Start in the custom component file and save a copy under the name LoginForm3.mxml. Add the following bindable public variable to the new file: [Bindable] public var user:String; We’ll bind this variable to the txtUsername control, as shown in the following line: When we set the value of the public variable from the application, it will appear in the text of the txtUsername control. Switch to the application file and modify the showPopUp function, as shown here in bold: private function showPopUp(e:MouseEvent):void { myLoginForm = LoginForm2(PopUpManager.createPopUp(this, LoginForm2,➥ true)); myLoginForm.user = "Sas"; myLoginForm.username = txtMessage; } The new line sets the public variable user within the custom component to the value Sas (feel free to use your own name if you prefer). Because we bound the public variable to the TextInput control, the value will appear when the pop-up displays. Run the application and click the Click me button. As in Figure 4-8, you should see the Username value populated with the name entered in the main application; Sas in this case. Obviously, we set the value in code. You could equally set the value from a TextInput in the application. To set any other values in controls in the custom component, you just need to bind them to public bindable variables. You can then set these values from the main application file. You can also write ActionScript to set the properties of the custom component directly from the application; for example, the title property of the TitleWindow control. I saved the resource files for this example as PopUpManagerExample3.mxml and LoginForm3.mxml. They contain examples in which the application sets the label property of the button and the title property of the TitleWindow control.
92
8946CH04CMP4
11/6/07
7:55 PM
Page 93
INTERACTING WITH USERS
Figure 4-8. The Username value is populated from the main application.
As you can see, it’s possible to control many aspects of the pop-up from the main application file. One useful tool for developers is the ability to allow the application to respond to events dispatched in the pop-up.
Responding to pop-up events The main application can control all aspects of the custom component that appears in the pop-up window. I’ve mentioned that the application can set properties of the base component, such as the title. We also saw that it can set the value of public properties in the custom component. The application hosting the pop-up can even respond to events dispatched from the pop-up. In this example, we’ll control all aspects of the pop-up window from the main application file and respond to an event. Create a new custom component in the components folder based on the TitleWindow. Set a width of 300 and a height of 150 for the component, and call it LoginForm4. The custom component will contain only controls without any ActionScript. Create the following interface, shown in bold, inside the custom component:
93
8946CH04CMP4
11/6/07
7:55 PM
Page 94
CHAPTER 4
We used the same structure as in the previous examples and added an id attribute for the button so we can respond to the click event in the main application. Our application file is very simple as well. Create a new MXML application called PopUpManagerExample4.mxml and modify it to show the following structure: The first task is to add a script block. We’ll start by adding import statements and a variable declaration for the LoginForm4 component: We need to import the MouseEvent class so we can capture button click event objects. The PopUpManager class allows us to work with pop-ups, and we also need to import the custom component from the components package. We added a private variable that will refer to the LoginForm4 custom component. We need to add a function that will display the pop-up and control its appearance. Add the following function to the script block: private function showPopUp(e:MouseEvent):void { myLoginForm = LoginForm4(PopUpManager.createPopUp(this, LoginForm4,➥ true)); PopUpManager.centerPopUp(myLoginForm); myLoginForm.title = "Login"; myLoginForm.showCloseButton=true; } Because we’ll call the function by clicking a button, we need to pass in a MouseEvent event object as an argument. The second line of the function creates the pop-up and casts it to the data type LoginForm4—the name of the custom component. It creates the pop-up as a modal window.
94
8946CH04CMP4
11/6/07
7:55 PM
Page 95
INTERACTING WITH USERS
We center the pop-up by using the static centerPopUp method, passing the name of the pop-up returned by the createPopUp method. The function also sets the title and showCloseButton properties of the pop-up. Call this function when the user clicks the Click me button by modifying the element, as shown in bold here: We can modify the showPopUp function to add event listeners for the click event of the Login button and the close event of the pop-up window. Add the following lines at the end of the showPopUp function: myLoginForm.addEventListener(Event.CLOSE, closeHandler); myLoginForm.clickButton.addEventListener(MouseEvent.CLICK,➥ loginClickHandler); The lines add handlers for two events: the close event of the pop-up and the click event of the clickButton button. The closeHandler function will run when the pop-up closes while
the loginClickHandler function will respond when the user clicks the Login button. Notice that we can refer to the controls in the custom component using dot notation, for example: myLoginForm.clickButton You can also use this: myLoginForm["clickButton"] The last task is to add these two handler functions in the script block: private function loginClickHandler(e:Event):void { txtMessage.text = "Welcome back " + myLoginForm.txtUsername.text; PopUpManager.removePopUp(myLoginForm); } private function closeHandler(e:Event):void { PopUpManager.removePopUp(myLoginForm); } The loginClickHandler function sets the text in the txtMessage control, taking the value from the txtUsername control in the pop-up. The closeHandler function removes the pop-up using the static removePopUp method. That’s all there is to it! The application controls all aspects of the pop-up. Run the application and click the Click me button. Enter a username and log in. You should see the message Welcome back and your entered username displayed in the application. You can find this example in the resource files LoginForm4.mxml and PopUpManagerExample4.mxml. I want to move the focus of the chapter away from things that pop up in applications and look at the Flex forms.
95
8946CH04CMP4
11/6/07
7:55 PM
Page 96
CHAPTER 4
Working with forms In XHTML, forms provide a way to group user interface controls in a collection. You include all controls inside a tag. In Flex, forms work a little differently. They exist purely for layout purposes and make it easier to lay out individual form controls in an application. Flex includes the familiar range of user interface controls for collecting and displaying data to users. Developers will be familiar with the functionality of controls such as TextInput, TextArea, RadioButton, and CheckBox. In addition, Flex includes more advanced controls that aren’t available in XHTML, such as the DataGrid, Sliders, the NumericStepper, and the TileList. So far in this book, you’ve seen how to work with some of the most common user interface controls. In this section, I’ll introduce you to the Form layout container and show you how to use it with user interface controls. I’ll also show you how to use built-in validators to check user input and how to apply built in-formatters to change the way data displays. We’ll start with a closer look at the Form container.
Understanding the Form container You can use the Form container to control the layout of your form elements. It also includes functionality that allows you to specify which fields are required or optional and to add styling. One advantage of using the Form container is that you can bind the form to a data model to assist with management of your data. I’ll show you more about that topic a little later in this chapter. You create a Form container with the element. When you create the form in Design view, each field within the form exists within an element. This element is optional if you type the elements yourself in Source view. You can use the element to set the form’s heading. The following example shows a simple form inside a Panel container. The form collects the first name and last name of a user and displays the heading Enter your details. In this example, I added each control inside a element: Figure 4-9 shows how this form appears when viewed in a web browser. The form heading appears centered and in bold at the top of the form. The label of each appears to the left of the control contained inside.
96
8946CH04CMP4
11/6/07
7:55 PM
Page 97
INTERACTING WITH USERS
Figure 4-9. A simple Flex form
Forms often contain a set of related information for working with an external data source. For this reason, it’s useful to bind form elements to a data model.
Working with a data model A data model provides a way to store data in an organized manner within Flex. You might use a data model to organize data sent from a server-side page or to create a structure for data that you’ll send to the server to update a database. Although data models are very useful for integrating server data into Flex applications, you can also use them on their own as a way of structuring client-side data. That’s the approach we’ll take in this section to simplify the examples. You can use the element to define a simple data model for your application. This approach embeds the data within the file, so you need to compile the application each time the data changes. You can also define a more complex data model using ActionScript, either within the application or using a class file. You can use these options to load data dynamically at run time. We’ll cover those approaches later in the book.
Using the tag The tag is normally used for creating very simple data structures within an application; it doesn’t allow you to specify a data type. This tag uses XML tags to create the hierarchy and relationships as shown here: Foundation Data-Driven Flex 3 Applications Sas Jacobs 2007 The Essential Guide to Flex 2 with ActionScript 3.0 Charles E. Brown 2007 The preceding data model provides information about two books within a library.
97
8946CH04CMP4
11/6/07
7:55 PM
Page 98
CHAPTER 4 Because we use XML to describe the data structure in the model, we must make sure that the content conforms to the rules for well-formed XML documents. (One rule is that the model must contain a single root node.) In the previous example, it is the node. This node must contain all other nodes. You can see that the root node contains two nodes that in turn contain nodes providing information about each book. Other requirements for well-formed XML documents include these: Each node must close correctly. The case of both opening and closing tags must match. All attribute values must appear within quotation marks, either single or double. You can also load the structure from an external file by using the source property, but we won’t do that until later in the book: The data model can also be populated with content from an application by including data binding expressions inside each node or attribute. You might do this to bind the contents from form fields directly to your data model before updating an external data source. For example, we could bind the preceding model to user interface controls by specifying their id and a bound property inside curly braces as shown here: {txtBookTitle.text} {txtAuthor.text} {txtPubYear.text} In this example, the model populates from the text entered into the txtBookTitle, txtAuthor, and txtPubYear controls. You can also use ActionScript expressions within the bindings: {"Author: " + txtAuthor.text} Let’s work through a simple form example so that you can see how to use a form with a data model. Start by creating a new application file in your project and call it Forms1.mxml. Add the following MXML tags to the file:
98
8946CH04CMP4
11/6/07
7:55 PM
Page 99
INTERACTING WITH USERS
Choose... Australia United Kingdom United States Run the application and you should see a form that looks like the one displayed in Figure 4-10. We’ll use this form in the rest of the examples in the chapter. We’ll extend it a little later to add validation and formatting. Add the following data model to the top of the file below the tag: {txtFirstName.text} {txtLastName.text} {txtDOB.text} {txtEmail} {rdoGender.selectedValue} {cboCountry.selectedItem}
99
8946CH04CMP4
11/6/07
7:55 PM
Page 100
CHAPTER 4
Figure 4-10. The form interface
The model creates a root node called that contains other nodes corresponding to each field in the form. The model binds the child nodes to the relevant user controls with curly braces notation. Notice that we can’t specify the data types of these values as if we were using an ActionScript class. The and nodes use an ActionScript expression in their bindings. To find gender, we choose the selectedValue property of the RadioButtonGroup element rdoGender. We can use the expression cboCountry.selectedItem to find what has been selected in the ComboBox because its dataProvider only specifies a string property rather than both a label and data. There’s no point in running the example at this point because we won’t be able to tell whether the binding has been successful. There are no visual changes to indicate that the model updates. Let’s add functionality to the Update button to display some of the bound form details from the data model in a Text control. Add the following Text control below the closing element: Add a click handler to the Update button, as shown in bold: Add a script block above the element containing the following ActionScript code: This block of code starts by importing the MouseEvent class, which is the type of event object dispatched when the user clicks the Update button. It then creates the showEntries function, which displays a message in the Text control txtResponses. The message accesses the values inside the data model using the id of the data model and the name of the relevant node. For example, to access the user’s first name, we use userData.firstName. Figure 4-11 shows what happens when you run the application, fill in the form, and click the Update button.
Figure 4-11. The completed example
The Text control updates with the bound values from the data model. This simple example shows how to bind a form to a data model and to retrieve the bound values from the model. You can find the example saved as Forms1.mxml with the other resources. However, the example doesn’t distinguish between required and optional form elements, and doesn’t provide any type of validation to ensure that users have entered the correct types of values. Let’s look at those topics now.
Determining required values It’s common for some values in a form to be required before the form is processed. For example, it isn’t much use collecting user details that contain blank first and last names. If these fields are required in the database, you’ll get an error when you try to add the record. For this reason, we try to validate required fields before sending their content for processing. Flex provides a two-step process to deal with required fields. First, you can indicate that a field is required by displaying an asterisk in the label; to enforce the requirement, you can use a validator to ensure that the field contains a value.
101
8946CH04CMP4
11/6/07
7:55 PM
Page 102
CHAPTER 4
The required property in the element is a Boolean property that determines whether or not to display a red asterisk; it doesn’t check that the user has entered a value. You can use the property as follows: Any elements marked as required automatically display a red asterisk, as shown in Figure 4-12.
Figure 4-12. Required fields are marked with a red asterisk.
The required property displays an asterisk, but doesn’t ensure that content has actually been entered into the field. You’ll need to couple the declaration with an appropriate validator to ensure that data has been entered and that it is of the correct type.
Validating user input Flex includes a number of built-in validators that you can use to make sure that users have entered the correct data in form fields. The Validator classes include CreditCardValidator, CurrencyValidator, DateValidator, EmailValidator, NumberValidator, PhoneNumberValidator, RegExpValidator, SocialSecurityValidator, StringValidator, and ZipCodeValidator. You must add these validators as children of the tag. All validators use the Validator base class, which provides attributes that are common to all. Table 4-1 shows these properties.
102
8946CH04CMP4
11/6/07
7:55 PM
Page 103
INTERACTING WITH USERS Table 4-1. Properties common to all validators
Property
Explanation
enabled
A Boolean value indicating whether the validator is enabled
listener
Specifies a listener for the validation
property
The name of the property to be validated in the source control
required
A Boolean value indicating whether entry in the source control is required
requiredFieldError
The error message to display if there is no entry in a required field
source
The id of the control containing the property to be validated
trigger
The id of the component that triggers validation
triggerEvent
The event triggering the validation
To set any field as required, you can set the required property to true. Unless you specify a trigger and triggerEvent, validation will occur when the user tabs out of the field. This provides immediate feedback to the user that they have entered incorrect or invalid data. As an alternative, instead of validating each field one at a time, you might want to set validation for all fields to the click event of a single button control using the following attributes inside the validator: trigger="{btnClick}" triggerEvent="click" Whichever method you choose, an invalid entry will appear with a red border, as shown in Figure 4-13.
Figure 4-13. An invalid entry in a control displays a red border.
You can display the associated error message by moving your mouse over the control, as shown in Figure 4-14. Each validator has some standard error messages, and you can also set your own.
Figure 4-14. Displaying the error message associated with the invalid entry
It’s worth knowing that you can assign a single validator to multiple fields and more than one validator to the same field. You can also use ActionScript to work with validators (you’ll see an example later in the chapter). To start with, we’ll work through each validator in turn, starting with the CreditCardValidator.
103
8946CH04CMP4
11/6/07
7:55 PM
Page 104
CHAPTER 4
Working with the CreditCardValidator You can use the CreditCardValidator to check that a credit card meets all the criteria for the relevant card type, including the length, correct prefix, and Luhn mod10 algorithm. Even if the number is validated as meeting these criteria, the validator doesn’t indicate that the credit card itself is valid. You can specify the following card types: American Express, Diners Club, Discover, MasterCard, or Visa. The following example shows that you need to set two source objects and their properties to specify the credit card details. It specifies that the user can enter a space and hyphen in the formatting of credit card numbers: You can specify the following errors associated with invalid data: invalidCharError, invalidNumberError, noNumError, noTypeError, wrongLengthError, and wrongTypeError. Assign a string to each type of error to display it as a message when the user enters invalid data: invalidCharError ="You've entered an invalid character"
Working with the CurrencyValidator The CurrencyValidator checks that the entry is a valid expression indicating a currency value. This validator can specify a range of values, whether negatives are allowed, and the number of decimal places. You can specify the currency symbol, where it is aligned, and the characters used for both the thousands and decimal places separators. This example specifies that a currency value is required and must be between 1 and 10,000. It must use a $ sign on the left, with a dot for a decimal separator and a comma to separate thousands: The errors associated with this validator are currencySymbolError, decimalPointCountError, exceedsMaxError, invalidCharError, invalidFormatCharsError, lowerThanMinError, negativeError, precisionError, and separationError.
Working with the DateValidator The DateValidator checks that a string matches a specific date format. You can either validate a single string containing the whole date or individual date parts for the day, month, and year in separate controls. You can specify the separator character as well as an input format using MM to indicate month, DD to indicate the day, and YYYY to indicate the year. If you don’t specify a format, the
104
8946CH04CMP4
11/6/07
7:55 PM
Page 105
INTERACTING WITH USERS
DateValidator validates that dates use the MM/DD/YYYY format used in the United States. The code that follows shows an example of the DateValidator. It uses a European date format that allows for slashes, hyphens, dots, and spaces between the date parts. The validator validates the entry as a string because of the validateAsString property: You can respond to the following types of errors in the DateValidator: formatError, invalidCharError, wrongDayError, wrongLengthError, wrongMonthError, and wrongYearError.
Working with the EmailValidator The EmailValidator checks that an e-mail entry has a single @ sign and at least one dot; and that the top-level domain has two, three, four, or six characters. It can also check for valid IP addresses in the address, provided that you enclose them in square brackets. The following tag shows one way to use this validator to determine that the user has entered a valid e-mail address: You can display the following types of error messages: invalidCharError, invalidDomainError, invalidIPDomainError, invalidPeriodsInDomainError, missingAtSignError, missingPeriodInDomainError, missingUsernameError, and tooManyAtSignsError.
Working with the NumberValidator A NumberValidator checks for a valid number and can determine whether the number falls within a range or is an integer. You can also specify whether negative values are valid and how many decimal places the number can contain. As with the CurrencyValidator, you can specify the thousands and decimal places separator. This example shows a required integer entry between –500 and 500: You can specify the following errors: decimalPointCountError, exceedsMaxError, integerError, invalidCharError, invalidFormatCharsError, lowerThanMinError, negativeError, precisionError, and separationError.
105
8946CH04CMP4
11/6/07
7:55 PM
Page 106
CHAPTER 4
Working with the PhoneNumberValidator The PhoneNumberValidator checks for a valid phone number. This is a number that contains at least 10 digits as well as formatting characters: The preceding example specifies that the phone number can include bracket, hyphen, space, dot, and plus characters. You can respond to the following errors: invalidCharError and wrongLengthError.
Working with the RegExpValidator The RegExpValidator allows you to check that a string matches a specified regular expression. The validator allows you to specify an expression as well as any flags for the expression. The topic of regular expressions can be complex and is beyond the scope of this chapter, so you might want to find out more in the help topics. The following example matches any expression starting with the letters AA with two digits to follow: You can specify two errors associated with the RegExpValidator: noExpressionError and noMatchError.
Working with the SocialSecurityValidator You can use the SocialSecurityValidator to determine whether an entry is a valid U.S. Social Security number: The preceding example validates the text property of the txtSSN control, and allows for dot and hyphen characters. You can respond to the following errors: invalidCharError, wrongFormatError, and zeroStartError.
Working with the StringValidator You use the StringValidator on string content to indicate that input is required and to set a minimum and maximum length for the entry. Like all validators, you can indicate whether the content is required, set the source control for the validator, and specify the property being validated. The following example shows a StringValidator that checks the text property of the txtFirstName control. Entry is required and should be between 2 and 12 characters. The three possible error messages are shown in the following code block:
Working with the ZipCodeValidator The final built-in validator is the ZipCodeValidator, which checks for four- and five-digit U.S. or Canadian postal codes. The following example shows validation of U.S. Zip codes containing dot or hyphen characters: You can respond to the following errors: invalidCharError, invalidDomainError, wrongCAFormatError, wrongLengthError, and wrongUSFormatError. We’ll work through an example in which we add validation to the previous user details form example.
Adding validation to a form To see how some of the more common validators work, we’ll extend the previous form example to include validation. We’ll check that the required First name, Last name, and E-mail fields have been entered. We’ll also check for a valid date of birth and e-mail address. Instead of validating each control individually, we’ll carry out validation when the user clicks the Update button in the form. Start by adding the id btnUpdate to the Update button, as shown here: We’ll specify that this control triggers the validation and that the triggerEvent is click in each of our validators. Because we’ll use the U.S. date format for our DateValidator, it is a good idea to indicate the date format in the Date of birth FormLabel. Modify it as shown in bold: Note that for usability in a real-world application, I’d probably add three separate inputs—one each for the day, month, and year of the date of birth. I’d use a ComboBox for the month control and allow the user to select it by name so that they weren’t tied to a single date format. However, I haven’t done that here so that I can demonstrate how to use a DateValidator with a full date string. Let’s add the validators now. Enter the following tags in the application file. It doesn’t matter where you put them as long as they’re children of the object. I have added mine below the tag because I like to use a strict order in my files: These tags create the validators that I described earlier. You can see that the source attribute contains the id of a control in curly brackets, and the property attribute indicates the bound property of that control. I’ve added some custom error messages as well. I could have added more error messages in the , but I think you get the general idea! You might notice that I specified a value for the required property. Even if I don’t include this attribute, entry into the source will still be required because the property has a default value of true. Just adding a validator assumes that entry is required unless you explicitly set the required property to false to indicate otherwise. Run the application and click the Update button without making any entries. Figure 4-15 shows how the form appears when we don’t enter values in the required fields.
Figure 4-15. Validating the required fields
108
8946CH04CMP4
11/6/07
7:55 PM
Page 109
INTERACTING WITH USERS All the required fields are highlighted with a red border. You can move your mouse over each field to see the relevant error message. Fill in the required fields and add a European formatted date (DD-MM-YYY) as well as an incorrect e-mail address. Figure 4-16 shows the error message resulting from the incorrect e-mail address.
Figure 4-16. The e-mail validation message
You can see how easy it is to add validation to form elements in Flex. You can find this example saved as Forms2.mxml with your resources. It’s also possible to respond explicitly to validation within each component by detecting the valid and invalid events. We’ll look at this topic now.
Validating with validator events You can respond to the valid and invalid events associated with each validator if you want to write a custom function to handle validation. By assigning event handlers, you can listen for the events on each component and respond appropriately with ActionScript. This will allow you to do more than display a simple validation message in response to a valid or invalid entry. For example, you could change the application interface or state when the user makes a valid entry. The following tag shows how to assign these event handlers:
109
8946CH04CMP4
11/6/07
7:55 PM
Page 110
CHAPTER 4 You can then include the appropriate handler functions to process the relevant outcomes: private function //do something } private function //do something }
handleValid(e:Event):void{ with valid result handleInvalid(e:Event):void{ with invalid result
This approach is straightforward, so I won’t work through an example. Instead, I want to fix up some issues that occurred with the previous example. In our previous validation example, the user can select Choose... in the ComboBox control. We might want to prevent this from happening. We also might want to display all the validation error messages at the same time, so users don’t have to move their mouse over each control highlighted in red to see the message.
Validating with ActionScript We can be more flexible with our validation if we use ActionScript to detect invalid entries. We can assign a validation function to the click event of the button that checks the result of all validations. The validate method of each validation control will indicate whether the entry validated successfully. This method takes two arguments and returns a ValidationResultEvent: validatorID.validate(value, suppressEvents); You can pass in an entry to validate using the value argument. If this argument is blank or set to null, the validator uses the source and property attributes assigned in the MXML tag to determine which entry to validate. You can set the supressEvents argument to false if you want to notify the validation listener of the results of the validation. This is the default value if you omit the argument. In fact, it’s common to call this method without either argument. We can detect an invalid entry using something similar to the following code: theValidationResult = validatorID.validate(); if (theValidationResult.type==ValidationResultEvent.INVALID) { //entry was invalid } Notice that we could find the outcome of the validation by using the type property of the ValidationResultEvent returned from the validate method. We can access an array of all ValidationResult objects using the results property or we can view all error messages as a single string using the message property. By working through each validator, it’s possible to respond programmatically to invalid entries; for example, displaying all validation errors in a single Text control.
110
8946CH04CMP4
11/6/07
7:55 PM
Page 111
INTERACTING WITH USERS We’ll change the previous example so you can see how this approach might work. Start by changing the click handler function in the control, as shown here: Change the name of the private function showEntries to doValidation and add the following import statement to the top of the script block: import mx.events.ValidationResultEvent; The validate method returns a ValidationResultEvent object, so we needed to import the class. Add the following variable declarations below the import statements: private var theValidationResult:ValidationResultEvent; private var theResponse:String; We’ll use the theValidationResult variable for the results of each validation and we’ll store error messages in the theResponse variable so we can display it in the Text control. Change the doValidation function as follows: private function doValidation(e:MouseEvent):void{ theResponse = "Error messages:\n"; theValidationResult = fNameValidator.validate(); if (theValidationResult.type == ValidationResultEvent.INVALID) { theResponse += "
" + theValidationResult.message + "\n"; } theValidationResult = lNameValidator.validate(); if (theValidationResult.type == ValidationResultEvent.INVALID) { theResponse += "
" + theValidationResult.message + "\n"; } theValidationResult = DOBValidator.validate(); if (theValidationResult.type == ValidationResultEvent.INVALID) { theResponse += "
" + theValidationResult.message + "\n"; } theValidationResult = emailValidator.validate(); if (theValidationResult.type == ValidationResultEvent.INVALID) { theResponse += "
" + theValidationResult.message + "\n"; } txtResponses.htmlText = theResponse; } The function starts by adding an HTML formatted string to the theResponse variable. It then goes through each validator, checking the outcome of the validate method. If the entry is invalid, the relevant message is added to the theResponse variable. We find the error message using the message property of the theValidationResult object. Finally, the results display in the txtResponses Text control, using the htmlText property.
111
8946CH04CMP4
11/6/07
7:55 PM
Page 112
CHAPTER 4 Run the application and click the Update button without entering anything in the form. Figure 4-17 shows the result.
Figure 4-17. Validating the form with ActionScript
All validation error messages appear in the Text control underneath the form. Try entering incorrect values in the Date of birth (MM/DD/YY) and Email fields to see the other error messages. The final step is to add manual validation to make sure that the user hasn’t selected the Choose... option in the ComboBox control. Change the Country FormLabel so that it displays as a required field: Modify the end of the doValidation function, as shown here in bold: if (theValidationResult.type == ValidationResultEvent.INVALID) { theResponse += "
" + theValidationResult.message + "\n"; } if (cboCountry.selectedIndex == 0) { theResponse += "
You must choose a country\n"; } txtResponses.htmlText = theResponse; If you run the application again, you’ll see that clicking the Update button without making entries in the form will include the error message. You must choose a country in the Text control. You can find the finished file for this example saved as Forms3.mxml with the other resource files. It’s worth knowing that you can also declare validators using ActionScript. The following line declares a new StringValidator: private var fNameValidator: StringValidator = new StringValidator();
112
8946CH04CMP4
11/6/07
7:55 PM
Page 113
INTERACTING WITH USERS You can then set the properties as follows: fNameValidator.source = txtFirstName; fNameValidator.property = "text"; You might want to explore that aspect of validation a little further. You can also declare custom validators by extending the mx.validators.Validator class. Again, I’ll leave you to play with that topic yourself. The final topic for this chapter is formatters, which change the appearance of bound data.
Formatting user input Formatters modify the way that bound data displays in a component, and Flex includes several builtin formatters, all derived from the mx.formatters.Formatter base class. Formatters change the format after the bound data is sent from the source component, but before it is received in the target component. In our previous examples, we could apply formatters to change the data entered in the form controls before it is stored in the data model. Flex includes the following built-in formatters: CurrencyFormatter, DateFormatter, NumberFormatter, PhoneFormatter, and ZipCodeFormatter. You can also create your own custom formatters. Let’s work through each of these formatter types so you can see how they work; then we’ll modify our form example to apply a formatter to one of the form fields.
Using the CurrencyFormatter The CurrencyFormatter allows you to change to a currency-formatted number. You can specify the currency symbol, the thousands and decimal point separator, the number of digits of precision, and what to use for the negative symbol. The following example shows a number formatted to display a left-aligned $ symbol with two decimal places. It uses a dot to separate decimal places and a comma to separate thousands: You’ll notice there are two values specified for the decimal and thousands separators: from and to. The from value indicates the unformatted value in the source control; the to value indicates the value to use in the formatted output.
Using the DateFormatter The DateFormatter applies a date format to a date or string using any combination of the letters Y, M, D, A, E, H, J, K, L, N, and S. Table 4-2 shows the meaning of the letters that you can use.
113
8946CH04CMP4
11/6/07
7:55 PM
Page 114
CHAPTER 4
Table 4-2. Explanation of letters used by the DateFormatter
Abbreviation
Meaning
Options
Y
Year
YY = 07, YYYY = 2007
M
Month
M = 9, MM = 09, MMM = Sep, MMMM = September
D
Day
D = 5, DD = 05
A
AM/PM indicator
E
Day of the week
E = 1, EE = 01, EEE = Mon, EEEE = Monday
H
Hour in day
Values of 1 to 24
J
Hour in day
Values of 0 to 23
L
Hour in half day, am or pm
Values of 1 to 12
K
Hour in half day, am or pm
Values of 0 to 11
N
Minute
N = 5, NN = 05
S
Second
S = 5, SS = 05
The following code converts a U.S. date to a European-style date in DD-MM-YYYY format:
Using the NumberFormatter The NumberFormatter is similar to the CurrencyFormatter. It allows you to specify the number of decimal places, set the thousands and decimal separator, and determine how to display a negative sign. This example formats a number to three decimal places, with a negative sign, and uses a comma as the thousands separator:
Using the PhoneFormatter The PhoneFormatter formats an entry into one of a number of different phone formats. You can specify the format of both the area code and number using the areaCodeFormat and formatString attributes. You can also specify which characters are valid using the validPatternChars attribute:
114
8946CH04CMP4
11/6/07
7:55 PM
Page 115
INTERACTING WITH USERS
In the next code example, the PhoneFormatter formats a 10-digit number into the Australian international phone format displayed as +61 (##) #### ####:
Using the ZipCodeFormatter The ZipCodeFormatter allows you to apply one of the following Zip code formats: #####-#### ##### #### ##### ### ### You can format an entry to a five-, six- or nine-digit Zip code that you specify with the formatString attribute. This example formats an entry into two blocks of five and four numbers, respectively, separated by a hyphen: Now that you know how to construct formatter tags, it’s time to see how they can be applied in a data binding example.
Applying the formatter You can apply a formatter using the format method; for example, in the text property of a bound control. The following code shows how to apply a ZipCodeFormatter to the bound text property of a Text control: Camera: " + tempArray[1]; } The checkAccess function calls the ActionScript function returnStatus using the following: callingASFunction.returnStatus(); Notice that I had to call the function using the id or name of the SWF file, callingASFunction, which is taken from the name of the Flex application file. We capture the returned value from the ActionScript function in a variable called response and use the split method to separate the values into an array. Then we display the results in the interface using the innerHTML property of the accessInfo element. Switch back to the MXML application and run the file. Figure 5-8 shows the interface after clicking the Check accessories button in the web page.
The example isn’t pretty, but it demonstrates how easy it is to call an ActionScript function using JavaScript and use the returned value in a web page. You can find the completed files in the 5-5 folder with the other resources. So far in this chapter, you’ve seen two examples of one-way communication. Let’s work through a more complicated example showing how to achieve two-way communication using ActionScript and JavaScript.
138
8946CH05CMP4
11/6/07
7:50 PM
Page 139
INTERACTING WITH THE WEB BROWSER
Figure 5-8. Calling an ActionScript function using JavaScript
Working through a two-way communication example In this example, I want to show how to send and receive simple information between a web page and Flex application. Start by creating a new application file called twoWayCommunication.mxml and modify the interface as shown here: We also need to modify the interface in the index.template.html file. Remove the previous reference to the detection.js file as well as the functions you added earlier. Modify the form element underneath the tag as shown and change the id of the element: <strong>JavaScript says Clicking the HTML Communicate button will call the sendToFlex function. We’ll add that a little later.
139
8946CH05CMP4
11/6/07
7:50 PM
Page 140
CHAPTER 5 Switch back to the MXML application and click the Run button. Figure 5-9 shows how the interface should appear.
Figure 5-9. The completed interface
We’ll start by determining whether the External API is available and update the interface accordingly. Add an block containing the following code: The code imports the relevant classes and creates the variables we’ll need. It also creates the checkAvailable function, which determines whether the External API is available. If it is, we add a callback to make the ActionScript function called communicate available to JavaScript using the name communicate. We’ll add these functions a little later. If you run the application again, you’ll see that the CheckBox is ticked. When we click the Flex Communicate button, we want to send whatever has been entered in the TextBox control to the web
140
8946CH05CMP4
11/6/07
7:50 PM
Page 141
INTERACTING WITH THE WEB BROWSER
page. We’ll do this by adding a call to a JavaScript function called receiveFromFlex. Add the following sendToJS function to the block: private function sendToJS(e:MouseEvent):void { if (txtAS.text.length > 0) { jsResponse = ExternalInterface.call("receiveFromFlex",[txtAS.text]); txtMessages.text += "\n" + jsResponse; } } The function checks for an entry in the txtAS TextInput and uses the call method to call the JavaScript receiveFromFlex function, passing the value from the control. It captures the JavaScript response in the string jsResponse variable and adds it to the txtMessages TextArea control. We need to add the JavaScript function that we just called, receiveFromFlex, to an block in the index.template.html page: function receiveFromFlex(flexComment){ document.getElementById("flexResponse").innerHTML = "Flex said: " ➥ + flexComment; return "AS said: " + flexComment; } This JavaScript function receives a parameter from Flex that we called flexComment. It displays this value in the flexResponse element and returns it to the ActionScript function after the text AS said. Figure 5-10 shows what happens when you run the application, enter some Flex text, and click the Flex Communicate button.
Figure 5-10. Calling a JavaScript function from Flex and receiving a response
141
8946CH05CMP4
11/6/07
7:50 PM
Page 142
CHAPTER 5
You can see that the text entered in the TextInput appears in the element in the web page, preceded by the text Flex said:. The text AS said: with the original text is passed back to Flex from the JavaScript function and displays in the TextArea control in Flex. Now we need to enable the JavaScript side of the communication. The HTML Communicate button calls the sendToFlex function, so you need to add it now to the block in the index. template.html file: function sendToFlex() { var comment = document.getElementById("txtJS").value; var response = twoWayCommunication.communicate(comment); document.getElementById("flexResponse").innerHTML = "Flex replied: " + ➥ response; } The sendToFlex function gets the value entered in the HTML input control with the id of txtJS and calls the ActionScript communicate function, passing this value. The function captures the value returned from the ActionScript function in a variable called response and displays it in the element preceded by the text Flex replied:. Before we can test the function, we need to add the following communicate function to the Flex application: private function communicate(comment:String):String{ txtMessages.text += "\nJS said: " + comment; return "Thanks for the comment" } This function receives a string value from the JavaScript call and adds it to the TextArea control, with the words JS said: beforehand. It returns the string Thanks for the comment. Run the application and you should be able to send text back and forth between the Flex application and the web page. Figure 5-11 shows some sample communications. In this example, we set up two-way communication between ActionScript and JavaScript and displayed it in both HTML and Flex elements. You can find the completed files in the 5-6 resource folder. While it’s easier to use the External API compared with earlier methods of JavaScript communication, this approach still suffers from some limitations.
142
8946CH05CMP4
11/6/07
7:50 PM
Page 143
INTERACTING WITH THE WEB BROWSER
Figure 5-11. The completed application
Limitations of the External API The External API provides more functionality than the use of the navigateToURL method with URLVariables, querystring variables, or flashVars. Unlike these other options, the External API allows for synchronous communication so the ActionScript or JavaScript functions can wait and receive a response. However, the External API does have some limitations. You can use the External API to pass only certain data types between ActionScript and JavaScript. You’re limited to primitive data types and arrays. Even though it’s common to create ActionScript classes to describe complex data types, you can’t send these data types as part of ExternalInterface communication. Developers who want to use the External API in a web browser need to have a reasonably good understanding of both ActionScript and JavaScript. If this is likely to be an issue, the Flex-Ajax Bridge (FABridge) allows developers to create two-way communication from a web page using JavaScript alone. If you want to find out more, the FABridge is available as part of the Adobe LiveCycle Data Services 2.5 Beta at http://labs.adobe.com/downloads/livecycle_dataservices2_5.html. The final topic in this chapter is the Flash Player security model.
143
8946CH05CMP4
11/6/07
7:50 PM
Page 144
CHAPTER 5
Understanding Flash Player security As mentioned earlier, there are a number of security restrictions that affect the way Flex applications communicate with the web browser. I want to finish the chapter by looking at security a little more closely. Developers who need to load a SWF from a different domain in their web page will need to consider security settings when working with the External API. Flash Player security is based on the concept of security sandboxes. Flash Player allocates SWF files to different sandboxes for security purposes, depending on their location when they were loaded. Basically, files in the same sandbox can interact fully with each other. SWF files on the Internet are placed into separate remote sandboxes where they can access content only from the same remote sandbox. This means that, by default, they can only access content from the same domain. SWF files can only access other remote sandboxes if there is a cross-domain policy file in place, in the case of loading external data, or if they use the allowDomain method. SWF files in a remote sandbox cannot access local files. The sandbox security system has implications for the External API. By default, the SWF movie and web page must be in the same domain before they can communicate with each other. The default settings can be changed using the allowScriptAccess property and the allowDomain method. Within the ExternalInterface class, the value of the allowScriptAccess property in the and elements determines whether the call method will be successful. If the value is set to never, the call method will fail. If it is set to sameDomain, the default value, the method will succeed only if the application is in the same domain as the web page. Finally, if the value is set to always, the call method will always succeed as the domains of the Flex application and web page are not relevant. The allowDomain method allows an ActionScript function to be called using JavaScript in a web page located in a different domain. You would use it in the same function that adds the callback to specify allowed domains: Security.allowDomain(myDomain); The method can list the following types of domains: Text-based domains such as mysite.com IP addresses such as 192.168.1.1 An asterisk (*) to signify all domains If you specify an IP address, access isn’t granted to a domain that maps to that IP address. There’s a little more to security when you’re loading external data, and we’ll cover that in the next chapter.
144
8946CH05CMP4
11/6/07
7:50 PM
Page 145
INTERACTING WITH THE WEB BROWSER
Summary This chapter looked at the most common ways that a Flex application can communicate with a web browser. You saw that the navigateToURL method can load a web page, optionally passing variables. You also saw how to pass variables from a web browser into a Flex application. Even though these approaches offer some basic forms of communication, the External API offers the most flexible method. The External API allows developers to communicate with the Flash Player container. Most commonly, this is done to allow ActionScript and JavaScript to communicate, although it’s possible for ActionScript to communicate with other languages. In this chapter, we concentrated on JavaScript communications and worked through several examples showing one- and two-way communication. We finished the chapter by looking at the implications of the Flash Player security model for the External API. By default, both the Flash Player and web browser have to be within the same domain, although this can be overridden. In the next chapter, I want to introduce the topic of working with data in Flex applications. You’ll see the different ways to load external content in Flex and look at some of the tools that specifically help out with data-driven applications.
145
8946Ch06CMP3
11/3/07
4:50 PM
Page 146
8946Ch06CMP3
11/3/07
4:50 PM
Page 147
Chapter 6
WORKING WITH DATA IN FLEX APPLICATIONS
So far in this book, you’ve seen many examples of Flex applications that work with client-side data; that is, data stored inside the application. While it’s useful to be able to work with this type of data, it’s not a very flexible approach. Every time you need to update the data, you have to modify the Flex application and recompile the SWF file. A better approach is to store the data in an external data source such as a static file or within a database. You can then change the external data source as you need, and the Flex application updates without the need for it to be recompiled. As a developer, this means that you can allow clients to update the content themselves. Because Flex is designed specifically for data-driven applications, it includes a number of different options to help, including the following: The ability to interact with a range of external data sources An tag for storing simplistic data models client-side ActionScript classes for storing complex data structures Data-binding capabilities to make component updating easier Formatters for changing the appearance of bound data Validators for ensuring that users enter valid data
147
8946Ch06CMP3
11/3/07
4:50 PM
Page 148
CHAPTER 6 In this chapter, we’ll look at all of these areas. I covered some of these areas earlier in the book, but I’ll touch on them briefly here and extend the examples. You can download the resource files for this chapter from the friends of ED web site at www.friendsofed.com. We’ll start by looking at the different external sources of data that you can include in a Flex application.
Sources of external data Flex can connect with a variety of different external data sources, including the following: Text files Binary files Requests from server-side pages XML documents Web services In this chapter, I want to look at the topics of text files and requests from server-side pages. The next two chapters will look at working with XML content and web services. There is a range of choices for accessing the content in external data sources, including these: Using the tag Scripting the HTTPService class Scripting the URLLoader class Working with Adobe LiveCycle Data Services ES Using socket connections for real-time communication In this chapter, I’ll cover the first three options. We’ll look at Adobe LiveCycle Data Services ES later in the book. In earlier versions of ActionScript, developers used the LoadVars and XML classes to load external data. The LoadVars action has been removed, and the XML class has changed significantly in ActionScript 3.0. The LoadVars class has been replaced by the URLLoader and URLRequest classes. The ActionScript 2.0 XML class has been renamed to the XMLDocument class and replaced with a new ActionScript 3.0 XML class. We’ll see more about this in Chapter 8. Let’s start by seeing how to work with the HTTPService class.
Working with the HTTPService class The HTTPService class allows you to make a request from a URL and to receive a response, optionally sending parameters with the request. You can use work with the tag or use ActionScript to create and work with the class.
148
8946Ch06CMP3
11/3/07
4:50 PM
Page 149
WORKING WITH DATA IN FLEX APPLICATIONS
Creating an HTTPService request To create an HTTPService request using an MXML tag, you need to specify an id attribute and a url for the component, as shown here: You can also use the following ActionScript: var txtLoader:HTTPService = new HTTPService(); txtLoader.url = "text.txt"; The two approaches are equivalent.
Making the request You will request the URL using the send method. If you need to load the data so it is available with the application, it’s common to call this method in the initialize or creationComplete attribute of the tag: You could also call it in response to a button click or some other event.
Receiving a response When the HTTPService makes a response, it dispatches a result event. If the request fails, a fault event is dispatched. You can specify handlers for each of these events in the component: You can also use the ActionScript addEventListener method: txtLoader.addEventListener(ResultEvent.RESULT, resultHandler); txtLoader.addEventListener(FaultEvent.FAULT, faultHandler); In the preceding examples, the resultHandler function is called when the result event is dispatched, and the faultHandler function is called when the fault event is dispatched. Another approach is to bind the returned data directly to other components. You’ll see examples of this shortly.
149
8946Ch06CMP3
11/3/07
4:50 PM
Page 150
CHAPTER 6
Specifying a return type You can specify how the results are to be returned by using the resultFormat property. By default, you’ll receive the content as a tree of ActionScript objects, but there are a number of other choices. Table 6-1 shows the type of value that is returned and the relevant formats. Table 6-1. Summary of values for the resultFormat property
Format
Returned value
Explanation
object (default)
XML
Parsed as a tree of ActionScript objects.
array
XML
Parsed as a tree of ActionScript objects. If the top-level object is not an Array, a new Array is created, and the result set is the first item.
xml
XML
Content provided as an ActionScript 2.0 XMLNode object.
flashvars
Name-value pairs
Parsed into an ActionScript object.
text
Text
Value remains as raw text.
e4x
XML
Content provided as an ActionScript 3.0 XML object. Can be accessed using E4X expressions.
You set the property as follows: The equivalent ActionScript follows: txtLoader.resultFormat = "e4x";
Accessing loaded content Once the request has been successfully processed, you can access the response in the lastResult property of the HTTPService object. You can deal with this in ActionScript using the function handling the result event: function resultHandler(e:ResultEvent):void { //do something with e.target.lastResult } You can also bind a property within the result directly to a target component property:
150
8946Ch06CMP3
11/3/07
4:50 PM
Page 151
WORKING WITH DATA IN FLEX APPLICATIONS
In this case, we bound the textResponse property from the response to the text within a Text control using curly braces notation. As you can see, you can use dot notation to access the relevant properties within the lastResult property.
Sending variables with the request You might want to send parameters with the request. For example, if you’re requesting a server-side file, you might send one or more parameters to filter the results returned in the response. There are several ways to send parameters with the request. First, you can send variables at the same time that you call the send method. If you choose this approach, you need to specify an object containing the variable pairs inside the call, as shown here: countryLoader.send({continent: 'Europe'}; You can also use the tag to list the parameters. Here, the tag sends an XML-formatted parameter called continent that has a value of Europe: Europe Notice that the property of the element contains the parameter. It’s interesting to note that properties can act as containers in MXML syntax. Another approach is to add the parameters with ActionScript by creating an object, adding parameters to it, and assigning the object to the request property of the HTTPService: var params:Object = new Object(); params.continent = "Europe"; countryLoader.request = params;
Specifying a request method and format Parameters are always sent using HTTP GET unless you specify something else with the method property. You can also specify POST, HEAD, OPTIONS, PUT, TRACE, or DELETE. The format for the parameters is set with the contentType property. The default value of this property is application/x-www-form-urlencoded, which equates to name-value variable pairs. You can also use the setting application/xml if your URL expects to receive raw XML data. Before we move on to an example, let’s see a summary of the properties, methods, and events of the HTTPService class. There are a few additional options here that I haven’t covered yet.
Properties of the HTTPService class Table 6-2 summarizes the properties of the HTTPService class.
151
8946Ch06CMP3
11/3/07
4:50 PM
Page 152
CHAPTER 6
Table 6-2. Properties of the HTTPService class
152
Property
Data type
Explanation
channelSet
ChannelSet
Provides access to the ChannelSet used by the service. These are the channels used to send messages to the destination.
contentType
String
Specifies the type of content being sent. Choose from application/x-www-form-urlencoded (default) or application/xml.
concurrency
String
Indicates how to handle multiple calls to the same service. Choose from multiple (default), single, or last.
destination
String
Indicates the HTTPService destination name specified in the services-config.xml file.
headers
Object
Custom HTTP headers to send with the request.
lastResult
Object
The result from the last service request.
makeObjectsBindable
Boolean
Determines whether returned anonymous objects are forced to bindable objects.
method
String
HTTP method for making the request. Choose from GET (default), POST, HEAD, OPTIONS, PUT, TRACE, and DELETE.
request
Object
Object containing name-value pairs to be sent to the URL. For a contentType of application/xml, this should be an XML document.
requestTimeout
int
Sets the timeout for the request in seconds.
resultFormat
String
Determines how data should be returned from the service. Choose from object (default), array, xml, flashvars, text, and e4x.
showBusyCursor
Boolean
Determines whether to display a busy cursor while the call is in progress. Default value is false. Note that this is available only when using the MXML tag.
rootURL
String
The URL to use as the basis for calculating relative URLs. Used only when useProxy is set to true.
url
String
The location of the service.
useProxy
Boolean
Determines whether to use the Flex proxy service. Default value is false.
xmlDecode
Function
Sets the function to use to decode XML returned with the resultFormat of object.
xmlEncode
Function
Sets the function to use to encode a service request as XML.
8946Ch06CMP3
11/3/07
4:50 PM
Page 153
WORKING WITH DATA IN FLEX APPLICATIONS
The HTTPService class also has three methods.
Methods of the HTTPService class Table 6-3 summarizes the methods of the HTTPService class. Table 6-3. Methods of the HTTPService class
Method
Parameters
cancel
Explanation
Returns
Overrides the most recent request
Nothing
initialized
document: Object, id: String
Used for validation with ActionScript
Nothing
send
parameters: Object
Sends an HTTPService request with optional parameters
AsyncToken
The HTTPService class dispatches three events.
Events of the HTTPService class Table 6-4 summarizes the events dispatched by the HTTPService class. Table 6-4. Events of the HTTPService class
Event
Type
Explanation
fault
FaultEvent
Dispatched when the service call fails
invoke
InvokeEvent
Fired when the service call is invoked and an error is not thrown
result
ResultEvent
Dispatched when the service call successfully returns
We’ve covered the HTTPService class in some detail. Let’s move on to looking at the URLLoader class. After that, we’ll work through some examples so you can see the different approaches to requesting external content. When we’ve finished, we’ll compare the two classes.
Understanding the URLLoader class The URLLoader class makes server requests and handles responses. It is not a Flex component, so you need to work with it in ActionScript.
153
8946Ch06CMP3
11/3/07
4:50 PM
Page 154
CHAPTER 6
Creating a URLLoader request You can create a URLLoader object using the following ActionScript: var loader:URLLoader = new URLLoader();
Making the request To send the request, you use the load method and specify a URLRequest object. The URLRequest object specifies the URL to load as well as the loading method: GET or POST. It can also specify header information and MIME type. The following code shows an example of how to request a simple text file from the server: var request:URLRequest = new URLRequest("myText.txt"); var loader:URLLoader = new URLLoader(); loader.load(request);
Receiving a response When a successful response is received from the server, the complete event is dispatched by the URLLoader. You can add an event handler to respond to this event, as shown here: loader.addEventListener(Event.COMPLETE, completeHandler); You can capture the returned data in the data property of the URLLoader: loader.data By default, the response from the URLLoader is treated as a string. For other types of data, such as XML, you will need to cast the response appropriately. The following line casts the response as an XML object: var returnedXML:XML = XML(loader.data);
Specifying a return type You can also specify the dataFormat property to handle different types of responses. Table 6-5 summarizes the different dataFormat types that are available. Table 6-5. The values for the dataFormat property of the URLLoader class
154
dataFormat
Explanation
URLLoaderDataFormat.BINARY
The URLLoader.data property contains binary data stored in a ByteArray object.
URLLoaderDataFormat.TEXT (default)
The URLLoader.data property contains text in a String object.
URLLoaderDataFormat.VARIABLES
The URLLoader.data property contains URL-encoded namevalue variable pairs in a URLVariables object.
8946Ch06CMP3
11/3/07
4:50 PM
Page 155
WORKING WITH DATA IN FLEX APPLICATIONS
Sending variables with the request You can also send parameters with the URLLoader object using the data property of the URLRequest object: var serverPage:String = "http://localhost/FlexApp/getCountries.apx"; var request:URLRequest = new URLRequest(serverPage); var params:URLVariables = new URLVariables(); params.continent = "Europe"; request.data = params; In this code snippet, the URLRequest object sends the variable continent with a value of Europe.
Specifying a request method If you don’t specify the loading method, Flex uses GET by default. You can override this by specifying POST as the value of the method property: var serverPage:String = "http://localhost/FlexApp/getCountries.apx"; var request:URLRequest = new URLRequest(serverPage); request.method = URLRequestMethod.POST; Let’s look at the properties, methods, and events of the URLLoader class.
Properties of the URLLoader class Table 6-6 shows the properties of the URLLoader class. Table 6-6. Properties of the URLLoader class
Property
Data type
Explanation
bytesLoaded
uint
The number of bytes loaded so far.
bytesTotal
uint
The total number of bytes to be downloaded, populated when the operation is complete. The data received from the load method.
data dataFormat
String
Format for received data. Choose from URLLoaderDataFormat.TEXT, URLLoaderDataFormat.BINARY, or URLLoaderDataFormat.VARIABLES.
Methods of the URLLoader class Table 6-7 summarizes the two methods of the URLLoader class.
155
8946Ch06CMP3
11/3/07
4:50 PM
Page 156
CHAPTER 6
Table 6-7. Methods of the URLLoader class
Method Parameters
Explanation
Returns
close
Closes the current load operation
Nothing
Sends and loads data to the specified URLRequest
Nothing
load
request: URLRequest
Events of the URLLoader class Table 6-8 summarizes the events dispatched by the URLLoader class. Table 6-8. The events dispatched by the URLLoader class
Event
Type
Explanation
complete
Event
Dispatched after all received data is decoded and placed in the data property.
httpStatus
HTTPStatusEvent
Dispatched if the load method attempts to access data over HTTP and the Flash Player can detect and return the status code for the request.
ioError
IOErrorEvent
Dispatched if the load method results in a fatal error that terminates the download.
open
Event
Dispatched when downloading commences after a call to the load method.
progress
ProgressEvent
Dispatched when downloaded data is received.
securityError
SecurityErrorEvent
Dispatched if the load method attempts to load data from outside of the security sandbox.
You can see that the URLLoader class dispatches a number of different events, which makes it easy to respond to the errors and to determine the progress of the request. I’ve covered the code that you need to make requests with both the HTTPService and the URLLoader classes, but you might be asking yourself what the difference is between them.
Comparing the HTTPService and URLLoader The HTTPService and URLLoader classes can both be used to make requests and receive responses, optionally passing parameters. You can work with the HTTPService class by using either MXML or ActionScript, whereas you must use ActionScript with the URLLoader class. If you don’t want to write ActionScript or if you’re working with simple content that you want to bind to other controls, the logical choice is the tag.
156
8946Ch06CMP3
11/3/07
4:50 PM
Page 157
WORKING WITH DATA IN FLEX APPLICATIONS
While both the HTTPService and URLLoader classes can return content, the HTTPService allows you to work with more data types than the URLLoader. For example, you can use the HTTPService with XML content and specify that you want to use E4X expressions to locate data. This isn’t possible with the URLLoader, although you can cast the returned response as an XML object. The URLLoader class allows you to monitor the progress of the download by providing access to the bytesLoaded and bytesTotal properties. It provides access to a wider range of events, including httpStatus, ioError, open, progress, and securityError. If you need more complicated error handling, this makes the URLLoader class a better choice. Now that you understand the difference between these two classes, let’s see some simple examples of loading information from text files.
Loading information from text files In this section of the chapter, we’ll see three different ways to load content from an external text file. We’ll see how to load information using the following: The tag ActionScript with the HTTPService class The URLLoader class We’ll start by using the tag.
Using the tag In this example, we’ll request a text file using the tag. This example won’t use any ActionScript, and we’ll bind the loaded content so it displays in a Text component. Start by creating a new MXML Project without specifying the main source folder. Give it the name and location of your choosing and add a new folder called assets. We’ll use this folder for all the external files that we’re going to load. Copy the file textOnly.txt from the resources to the assets folder. Modify the application file to show the following interface: We now need to add an tag above the VBox container, as shown here:
157
8946Ch06CMP3
11/3/07
4:50 PM
Page 158
CHAPTER 6
This tag loads the textOnly.txt file from the assets folder and specifies a resultFormat of text. To load the document, we need to call the send method, as shown in the tag: When the application has been created, the creationComplete event is dispatched and calls the send method of the HTTPService. The final step is to bind the returned text from the textService control to the text property of the Text component: Notice that we specified the lastResult property of the textService HTTPService. Because we specified that the results would be returned as text, we can bind the lastResult directly using curly braces notation. The complete code for this example follows: You can see that this is a very simple way to bind the contents from a text file to display directly in a component. Figure 6-1 shows what happens when you run the application.
Figure 6-1. Simple binding using content loaded from a text file
The text from the file appears within the Text control. You can find the file LoadSimpleTextHttpService. mxml saved with your resources if you want to see my finished example. You’ll need to import the file into a Flex project first before you can run it.
158
8946Ch06CMP3
11/3/07
4:50 PM
Page 159
WORKING WITH DATA IN FLEX APPLICATIONS
Using the HTTPService class with ActionScript The ActionScript equivalent for the preceding example LoadSimpleTextHttpServiceAS.mxml and looks like the following block of code:
is
saved
as
You can see that there’s a lot more work involved in re-creating this example using ActionScript. The code starts with the relevant import statements, referencing the ResultEvent, HTPPService, and FlexEvent classes. It then declares a variable called textService, which is a new HTTPService object. The code includes the loadText function, which is called to handle the creationComplete event of the application. This function sets the relevant properties of the textService object and finishes by calling the send method. The second function, resultHandler, handles the ResultEvent dispatched when a response is received from the server. This function displays the loaded content in the Text control. Running the application shows the same result shown in Figure 6-1. You can see that the first approach took a lot fewer lines to load this text file. However, there are times when you need to use ActionScript instead of MXML. For example, you might create a reusable class file to handle the loading of external data.
159
8946Ch06CMP3
11/3/07
4:50 PM
Page 160
CHAPTER 6
Using the URLLoader class Another approach is to use the URLLoader class to load the text file. The following code re-creates the previous example using this class: The code starts by importing the relevant classes and creating a new URLLoader object. When the application is created, the creationComplete event calls the loadText function. The loadText function loads the text, assigning an event listener and calling the load event, passing a URLRequest object. When the loading completes, the completeHandler function displays the loaded content in the txtLoadedContent control, using the data property of the URLLoader. Running the application will create the same outcome as is displayed in Figure 6-1. You can find the completed code saved in the resource file LoadSimpleTextURLLoader.mxml. The examples covered in this section show three different approaches to loading text content from an external file. While you can use any approach, you can see that using the tag with data binding offered the simplest solution in terms of the amount of code required. Let’s move on to look at loading content stored in a text file using variable pairs.
160
8946Ch06CMP3
11/3/07
4:50 PM
Page 161
WORKING WITH DATA IN FLEX APPLICATIONS
Loading information stored in variable pairs In previous versions of Flash, the LoadVars class required that external content was formatted into name-value variable pairs before it was loaded. It was common to see text files with content similar to the following: label=Country&countries=Australia|England|United States The file contains two variable names: label and countries. The value of the label variable is Country, while the countries variable contains a pipe-delimited set of three values: Australia, England, and United States. Structuring the countries variable this way allows us to pass in the equivalent of an array variable in the text file. In earlier versions of ActionScript, we had to use the split method to separate out these values and assign them to an ActionScript array. If we had many variables to process, we could end up with a large number of arrays or even an array of arrays! Many developers will remember how much work was required to load external data into an application. You can still use variable pairs to load external content into Flex applications, but Flex makes processing a lot easier.
Using variable pairs with the HTTPService class If you want to load name-value pairs using the HTTPService class, you can still use the same external file structures. However, you’ll need to specify the flashvars resultFormat for the external data when loading the content: resultFormat="flashvars" You can then access the variables as properties of the lastResult of the HTTPService. If we use the following external data: label=Country we could access the value Country as follows: service.lastResult.label The value of the label variable is found with the following: service.lastResult.countries We can then use split to separate the countries into an array of country names that might be suitable to be bound as a data provider: var arrCountry:Array = textVars.countries.split("|"); We’ll work through an example shortly.
161
8946Ch06CMP3
11/3/07
4:50 PM
Page 162
CHAPTER 6
Using variable pairs with the URLLoader class If you’re working with the URLLoader class, you can use the URLVariables class to access the variable pairs, by passing in the data property of the URLLoader: var textVars:URLVariables = new URLVariables(loader.data); You can then access the variables using the following: textVars.label textVars.countries As before, you could use split to separate out the individual country names: var arrCountry:Array = textVars.countries.split("|"); If you’re working with numeric data, you may need to cast the data types before using them as they’ll be treated as strings by the loading process. Let’s see some examples of accessing variable pairs with both the HTTPService and URLLoader classes. In the following examples, I’m working with the contents of the resource file variablePairs.txt, which you will need to add to your assets folder. It contains the following content: label=Country&countries=Australia|England|United States Let’s start by using the tag to load this content.
Using the tag In this example, we’ll load a text file containing variable pairs and use it to populate a Label and ComboBox control. Create a new application with the following interface: This application contains a Label and ComboBox control that we’ll populate from the loaded text file. We’ll bind the loaded content directly to the text and dataProvider properties, respectively. Add the following tag: This tag requests the variablePairs.txt file using the resultFormat flashvars as the file contains name-value variable pairs.
162
8946Ch06CMP3
11/3/07
4:50 PM
Page 163
WORKING WITH DATA IN FLEX APPLICATIONS
You’ll need to call the send method of the HTTPService class in the tag, as shown here, so it loads when the application interface is created: The final step is to bind the returned values from the HTTPService to the Label and ComboBox controls. Modify the tags as shown here in bold: We’ve bound the text property of the label using the expression varPairsSvc.lastResult.label. Using the split method inside the second binding allows us to bind the value of the dataProvider property directly to the varPairsSvc.lastResult.countries property of the HTTPService object. The complete code for this example follows: Figure 6-2 shows what happens when you run the application.
Figure 6-2. The ComboBox and Label controls populate from an external text file using variable pairs.
The Label control displays the text Country, and the ComboBox is populated with the loaded countries array.
163
8946Ch06CMP3
11/3/07
4:50 PM
Page 164
CHAPTER 6
I’ve saved this file as LoadVarPairsHttpService.mxml with the other resources if you want to test my version of the file.
Using the HTTPService class with ActionScript The ActionScript equivalent of the previous file follows: In this example, we create the HTTPService object using ActionScript after importing the relevant classes. The creationComplete event of the application calls the loadVarPairs function, which sets the properties of the object, including the url, the resultFormat, and the event listener. It finished by making the request using the send method. When the response is received, the resultHandler function assigns the relevant values to the text property of the txtLabel control and the dataProvider of the cboCountries control. Running the application shows the same result as that shown in Figure 6-2. You can find this example saved as LoadVarPairsHttpServiceAS.mxml with the other resources.
164
8946Ch06CMP3
11/3/07
4:50 PM
Page 165
WORKING WITH DATA IN FLEX APPLICATIONS
Using the URLLoader class Compare the previous example with this one using the URLLoader class: After importing the relevant classes, the code creates a new URLLoader object. The loadVarPairs function sets the event listener and loads the variablePairs.txt file. When the file completes loading, the completeHandler function assigns the data property to a URLVariables object. It then uses these variables to set the text and dataProvider properties of the relevant controls. Notice that we specified the path from the URLVariables object; for example, txtVars.label. I’ve saved this example as LoadVarPairsURLLoader.mxml with the other resource files. Running it produces the same outcome as shown in Figure 6-2.
We could use any of the previous approaches to load results returned by a call to a server-side file. In that case, we'd need to make sure that the file was running through a web server so that it was parsed correctly. To do that, we'd be using a URL similar to http://localhost/FlexApp/getCountries.apx.
So far in the chapter, we’ve worked with text files that store external content. We might want to be able to update these text files or a database by sending data to the server with the request.
165
8946Ch06CMP3
11/3/07
4:50 PM
Page 166
CHAPTER 6
Sending data to the server Flex applications can use exactly the same techniques that we’ve seen so far to send values to serverside scripts. You might do this if you want to save content to a text file or update a database. For security reasons, you can’t use Flex to create, modify, or delete external files so you’ll need to use a server-side file to carry out the work. You can use either the HTTPService class or URLLoader class to send values to a server-side script for processing.
Sending variables with the HTTPService class If you are using the HTTPService class, you can send variables to the server-side page for processing using several different methods. First, you can include parameters in the send method using the following approach: countryLoader.send({continent: 'Europe'}; If you need to send XML content, you can use the tag within an tag: Europe The advantage of this approach is that you can bind the value to be sent with the service request: {txtContinent.text} You can also add the variables in ActionScript using the following: var params:Object = new Object(); params.continent = "Europe"; xmlLoader.request = params;
Sending variables with the URLLoader If you’re working with the URLLoader class, you can use a URLVariables object to send parameters to a server-side page: var serverPage:String = "http://localhost/FlexApp/getCountries.apx"; var request:URLRequest = new URLRequest(serverPage); var params:URLVariables = new URLVariables(); params.continent = "Europe"; request.data = params;
166
8946Ch06CMP3
11/3/07
4:50 PM
Page 167
WORKING WITH DATA IN FLEX APPLICATIONS
If you’re using this method, make sure that you use %26 to encode any & characters in the parameters because this character is used as a delimiter for variable pairs. If you don’t do this, you may get an error message.
Other considerations When you specify the URL for the HTTPService or URLLoader, make sure that you include the full server path so that the server-side file can be correctly processed by the web server: http://localhost/FlexApp/getCountries.apx Parameters are sent using HTTP GET unless you specify something else with the method property. For the HTTPService class, you can also specify POST, HEAD, OPTIONS, PUT, TRACE, or DELETE. You can only specify POST as an alternative for the URLLoader class. You may also need to specify the format of the parameters using the contentType property. As previously mentioned, the default value is application/x-www-form-urlencoded, which equates to namevalue variable pairs. You can also use application/xml if you need to send raw XML data to the server-side page for processing. This explanation will make more sense if we work through an example.
Working through an example Let’s work through a simple example in which we load a news item from a text file using an tag. We’ll use Flex to save a new text file with the same name using a server-side file. The editable text from the file will display in a TextArea, so we can update it prior to sending it server-side for processing. You’ll need to run the server-side scripts in this example through a web server to make it work. I’ll be using the server-side language ASP.NET. You can use any server-side language that you like as an alternative, provided you have the correct web server installed. I’ve also included a PHP version of the file with the resources and I’ll run through it briefly as well. We’ll start by using the tag in an example.
Updating content with the HTTPService class The first step in the example is to create the Flex application. Create a new MXML application file and modify the interface as follows: As with the previous example, the Text control displays text returned by the showCurrency function.
Working through an example Before we start creating ActionScript bindings, let’s work through a more detailed data binding example. We’ll load an external XML document containing country details and bind the list of countries to a ComboBox component. When we choose a country, the interface will show facts about the selected country. We’ll also show the entire XML document in a TextArea control, so you check what’s been loaded. We’ll use the document countryDetails.xml, so copy it from your resources and add it to the assets folder in your project. The file contains three countries and each has the following structure: Australia Southern 20,000,000 approx Canberra 7,692,024 2,969,906 Create a new Flex application and modify the interface to appear as follows:
191
8946Ch06CMP3
11/3/07
4:50 PM
Page 192
CHAPTER 6
We’ll display a list of countries in the ComboBox. When we choose a country, we’ll show further details in the Text controls. Figure 6-9 shows how the interface appears at this point.
Figure 6-9. The application interface
We need to load the external XML document into the application, so add an tag above the VBox container as shown: Notice that I specified that we’ll use the e4x format so we can use E4X expressions to target the loaded XML data. You’ll find out more about these expressions in Chapter 8, but for now, you’ll see that they’re fairly self-explanatory. When we receive a result, we’ll call the showCountries function to populate the interface. We’ll call the send method to make the request in the creationComplete event of the application. Modify the opening tag as shown in bold here: After the interface is created, the application will request the XML document using the countriesService HTTPService component.
192
8946Ch06CMP3
11/3/07
4:50 PM
Page 193
WORKING WITH DATA IN FLEX APPLICATIONS We need a variable to store the loaded content from the XML document. Add a script block below the opening tag containing the following code: The code imports the ResultEvent class and creates a bindable variable called countryXML of the type XML. We’ll populate this variable using the result handler. We now need to add the result handler function showCountries to this script block. Before we do so, add a TextArea above the closing element: We’ll use this to display the loaded content. This technique can be useful to double-check what loads into the application. Add the showCountries function that follows to the script block: private function showCountries(e:ResultEvent):void { countryXML = e.target.lastResult; txtLoadedXML.text = countryXML.toXMLString(); } The function receives a ResultEvent object, passed with the function call. We’ll assign the lastResult property of the target of this event, the HTTPService, to the countryXML variable. Then we use the toXMLString method to display the loaded content in the txtLoadedXML control. Run the application now and you should see the TextArea populated with the details from the external file, as shown in Figure 6-10. Now we need to populate the ComboBox component from the node in the XML variable. We’ll use an E4X expression and bind it to the dataProvider property as shown here: The expression countryXML.country starts by targeting the root node of the loaded XML document, which is equivalent to the variable countryXML. It then finds the country nodes that are children of the root node. There are three of these in the XML document. If you run the application again, you should see that the ComboBox is populated with the three country names. The dataProvider contains all the data from the node downward and includes all child elements. If we bind the selectedItem property from the ComboBox, we can display the selected country details in the other controls by using E4X expressions.
193
8946Ch06CMP3
11/3/07
4:50 PM
Page 194
CHAPTER 6
Figure 6-10. The TextArea displays content from the loaded XML document.
Modify the Text controls as shown in bold. Note that they don’t appear next to each other in the application file:
194
8946Ch06CMP3
11/3/07
4:50 PM
Page 195
WORKING WITH DATA IN FLEX APPLICATIONS In each case, we located the path to the relevant node using dot notation, starting from cboCountry.selectedItem. For example, to find the element, we use cboCountry.selectedItem.hemisphere. If you run the application, you should see that the interface appears, as shown in Figure 6-11. You should be able to choose different countries from the ComboBox and see the details update.
Figure 6-11. The completed application
This example shows how you can bind a loaded XML document to different controls using curly braces notation. I saved the file as Binding1.mxml with your other resources. Let’s see how we can add bindings with ActionScript.
Binding with ActionScript Developers can create bindings entirely in ActionScript by using the mx.binding.utils.bindingUtils ActionScript 3.0 class. The static bindProperty method allows you to create a binding to a property. You can also use the static bindSetter method to bind to a property value set with a method.
Using bindProperty The bindProperty method binds one property to another using ActionScript to create a direct binding. This method has the following structure: bindProperty(site:Object, prop:String, host:Object, chain:Object, ➥ commitOnly:Boolean – default is false):ChangeWatcher
195
8946Ch06CMP3
11/3/07
4:50 PM
Page 196
CHAPTER 6
The site argument specifies the id of the destination control while the prop argument identifies the bound property. The host represents the source control, while the chain provides details of the property to be bound. You would normally use the method this way: BindingUtils.bindProperty(destControlID, "text", srcControlID, "text"); In addition, you can use the chain property to specify an object: {name: propertyName, getter:function(host) {return host[name]}} You can also specify an Array of chained bindable properties from the source, as an array of String properties. For example, the property src.a.b.c would be defined as ["a", "b", "c"]. This approach can be useful for drilling down into a hierarchy of properties. The commitOnly, which is not commonly required, allows you to specify which events cause the event handler to be called. If you set the value to true, the handler is called on committing change events. Otherwise, both committing and noncommitting change events will call the handler. Noncommitting change events are specified with the [NonCommittingChangeEvent()] metatags. When you use the bindProperty method, it returns a ChangeWatcher object that allows you to define an event handler to detect and respond when the binding occurs. Again, it’s not common to use the returned object. You can see an example in the following code block, in which we use ActionScript to create a binding between a TextInput and Text control (we won’t work through this example here):
196
8946Ch06CMP3
11/3/07
4:50 PM
Page 197
WORKING WITH DATA IN FLEX APPLICATIONS
The binding is created in the creationComplete event of the application with the createBinding function. This function uses bindProperty to create the binding from the text property of the sourceTI control to the text property of the destinationText. If you enter text into the TextInput control, it will appear within the Text control because of the binding. You can find the example saved as Binding2.mxml with your resources if you want to run it and see the result yourself.
Using bindSetter As an alternative, you can use bindSetter to specify a method that sets the value of the destination property. You can use this method as follows: bindSetter(setter:Function, host:Object, chain:Object, ➥ commitOnly:Boolean – default is false):ChangeWatcher You’d normally use it in the following way: BindingUtils.bindSetter(setterFunction, srcControlID, "text"); The chain and commitOnly parameters work in the same way as with the bindProperty method. The bindSetter method also returns a ChangeWatcher object. The code that follows shows how to use bindSetter to re-create the previous scripted binding:
197
8946Ch06CMP3
11/3/07
4:50 PM
Page 198
CHAPTER 6
In this example, I imported the entire mx.binding.utils.* package because it also contains the ChangeWatcher class. The createBinding function uses bindSetter to specify the source for the binding, the text property of the sourceTI control. The bindSetter method calls the setTextValue function to set the value of the bound property in the destinationText control. You can find this example saved as Binding3.mxml. The previous two examples are simplistic, so let’s re-create our earlier example of displaying country details using scripted bindings.
Working through a scripted binding example In this example, I’ll use ActionScript to create bindings from data in a loaded document to other user interface controls. You’ll be able to see how to use both the bindProperty and bindSetter methods. If you didn’t previously add the countryDetails.xml file to your assets folder, do so now. Create a new Flex application with the following interface: The interface is identical to the one we used in the earlier example.
198
8946Ch06CMP3
11/3/07
4:50 PM
Page 199
WORKING WITH DATA IN FLEX APPLICATIONS
Add the following tag above the VBox container: The service loads the file countryDetails.xml using the e4x format. When the service receives a result, it calls the showCountries function. We’ll add that function shortly. Call the send method of the service in the creationComplete event of the application, as shown here in bold: Add a script block and import the relevant classes: We’ll also create a private variable to store the content from the loaded document. We must make it bindable, so add the following to the code block: [Bindable] private var countryXML:XML; When we load the document, the response will be processed with the showCountries function. Add it now: private function showCountries(e:ResultEvent):void { countryXML = e.target.lastResult; txtLoadedXML.text = countryXML.toXMLString(); createBindings(); } The function finds the lastResult property of the service and assigns it to the countryXML variable. We then display a string representation in the TextArea control using the toXMLString method. We finish by calling the createBindings function. The createBindings function binds the loaded content to the dataProvider property of the ComboBox control. It specifies the countryName nodes in the countryXML.country path. Add the function to the script block now: private function createBindings():void { BindingUtils.bindProperty(cboCountry, "dataProvider", countryXML, ➥ "country"); cboCountry.labelField = "countryName"; }
199
8946Ch06CMP3
11/3/07
4:50 PM
Page 200
CHAPTER 6
If you run the application now, the TextArea component will display the loaded content, and the ComboBox control will display a list of country names. We can finish by creating bindings that display the details of the selected country in the other controls. Add the following line at the end of the createBindings function before the closing brace: BindingUtils.bindProperty(txtHemisphere, "text", cboCountry, ➥ ["selectedItem", "hemisphere"]); Notice that we needed to specify a chain of bound properties from the ComboBox using array notation. We specify the selectedItem property followed by the hemisphere node. Add the following additional bindings to the createBindings function for the population and capital details: BindingUtils.bindProperty(txtPopulation, "text", cboCountry, ["selectedItem", "population"]); BindingUtils.bindProperty(txtCapital, "text", cboCountry, ➥ ["selectedItem", "capital"]);
➥
We’ll bind the area property a little differently. Using the bindSetter method, we can apply our own transformation to the bound square kilometers area value. Add the following line to the createBindings function: BindingUtils.bindSetter(displayArea, cboCountry, ["selectedItem", "areaSqKM"]);
➥
This method assigns the displayArea function to handle the binding of the areaSqKM property. Add the function now: private function displayArea(areaSqKM:String):void { txtArea.text = areaSqKM + " square kms" } The function accepts the passed property as an argument and assigns it to the text property of the txtArea control, followed by the text square kms. If you run the application, you should see the same outcome as in the previous example, but with one small difference: the area will display only in square kilometers. This example showed how to add bindings using ActionScript. The completed file is saved as Binding4.mxml with the other chapter resources. Once we have bound data in an application, we may need to change the way it displays with a formatter or check for valid entry with a validator.
200
8946Ch06CMP3
11/3/07
4:50 PM
Page 201
WORKING WITH DATA IN FLEX APPLICATIONS
Adding validators and formatters Both formatters and validators are useful Flex tools for working with data-driven applications. Validators allow developers to ensure that anything entered by users matches predetermined requirements such as the correct data type or format. Formatters allow you to change the way bound data displays in the destination control. They are applied during the binding process. Chapter 4 provides an introduction to the built-in validators and formatters. In this chapter, I want to look at how developers can create their own validators and formatters. We’ll start by looking at validators.
Understanding validators Validators check that anything entered by users is valid. This might involve making sure that an e-mail address is constructed in the correct way or that a number in a specific range has been entered where one is required. When building data-driven applications, best practice is to check that user entry is valid before making a call to the server. This approach can reduce the amount of data sent to the server and increase application response time for the user. Flex includes a number of built-in validators and developers can also create their own. The built-in validators include CreditCardValidator, CurrencyValidator, DateValidator, EmailValidator, NumberValidator, PhoneNumberValidator, RegExpValidator, SocialSecurityValidator, StringValidator, and ZipCodeValidator. You can use these validators either as MXML tags or within ActionScript. Basically, all validators extend the Validator base class so they share several common features: whether the input is required, specifying a source for the input, and a trigger for the validation process. In addition, each of the built-in validators has its own properties, including the capability to set custom error messages. Turn to Chapter 4 for a more detailed exploration of the built-in validators. I’d like to focus on custom validation here.
Creating a custom validator Developers can create custom validators that are useful when they need to carry out the same type of validation more than once. All custom validators extend the Validator class and override the doValidation method. They return an array of ValidationResult objects that contain details about each validation error. We’ll create a custom validator that checks a text entry to ensure that it is a valid state or territory in Australia. I would have chosen the U.S. as an example, but in Australia we have a lot fewer states and territories! Start with a new ActionScript class in the com.aip package called AusStateValidator.as. This class will extend the Validator class, as do all custom validators.
201
8946Ch06CMP3
11/3/07
4:50 PM
Page 202
CHAPTER 6
Add the following import statements above the class declaration: package com.aip { import mx.validators.Validator; import mx.validators.ValidationResult; public class AusStateValidator extends Validator { } } Declare the states, results, and booValid variables, as shown in the class: private var states:Array = ["ACT","NSW","NT","QLD","SA","TAS", ➥ "VIC","WA"]; private var results:Array; private var booValid:Boolean; The states array holds a list of valid state and territory abbreviations in Australia. We’ll use the results array to store our ValidationResult objects and the booValid variable will act as a flag, tracking whether an entry is valid. We need to call the super method in the constructor function to call the base class constructor, so add the following code inside the class declaration: public function AusStateValidator() { super(); } Now we need to override the doValidation method from the base class. In addition to calling the doValidation method from that class, the new method must return an array of ValidationResult objects that will provide the details about each custom validation error. Add the following to your class file: override protected function doValidation(value:Object):Array { results = []; results = super.doValidation(value); if (value != null) { for (var i:int=0; i 0) { return stateName; } else { return "" } }
205
8946Ch06CMP3
11/3/07
4:50 PM
Page 206
CHAPTER 6 This method starts by checking for a zero length formatted value. If this is the case, an error message is set and the method returns a zero length string because we don’t want to display a formatted value in this case. If a value is provided, we look it up in the stateDetails associative array, assigning the returned name to the stateName variable. We then check that this variable has a value and return it; otherwise, we return a zero length string. We’ll use this custom formatter in a simple example. Create a new application with the following interface: The application provides a TextInput for a user to enter a state or territory abbreviation. A formatter will be used during binding to display the formatted results in the txtFullStateName control. Add the following namespace to the tag: This will allow us to use the components in the com.aip package by referencing the aip namespace. Add the custom formatter tag: We’ll need to apply the formatter during binding, so add the following text property to the txtFullStateName control: This binding calls the format method of the stateFormatter control. We’ve finished creating the application!
206
8946Ch06CMP3
11/3/07
4:50 PM
Page 207
WORKING WITH DATA IN FLEX APPLICATIONS Run the application and test it by entering an Australian state abbreviation. Figure 6-13 shows the formatted output when I enter the state WA. If you enter a value that isn’t in the associative array, no formatted value will display.
Figure 6-13. Applying a custom formatter to determine a full state name
In this example, we created and applied a simple custom formatter. You can find the saved application file StateFormatting.mxml and ActionScript class AusStateFormatter.as saved with the chapter resources. That ends our look at the Flex tools available for working with data.
Summary In this chapter, you’ve seen several ways to load and update external content from text files. We worked through examples that used both the HTTPService and URLLoader classes. During these examples you saw some simple data binding approaches using curly braces syntax. The chapter also explained the security model within Flash Player 9 so that you’d be aware of restrictions that apply where data exists in a different domain from the compiled Flex application. We saw how to store external data on the client using the tag and ActionScript classes. We finished with a detailed look at data binding and touched on the topic of validators and formatters. The topic of built validators and formatters was covered in more detail in Chapter 4. In this chapter, you saw how to create a custom validator and a custom formatter. Throughout the book, you’ve seen that XML plays an important role in Flex applications. In the next chapter, I want to explore the topic of XML in more detail. Then, in Chapter 8, I’ll show you how you can work with XML in your Flex applications.
207
8946Ch07CMP3
11/6/07
7:55 PM
Page 208
8946Ch07CMP3
11/6/07
7:56 PM
Page 209
Chapter 7
INTRODUCTION TO XML
If you’ve worked through the chapters in order up until now, you’ll see that I have referred to the term Extensible Markup Language (XML) throughout each one. In fact, you’ve been working with XML all along because Multimedia Extensible Markup Language (MXML), the language of Flex applications, is an XML vocabulary. XML is one of the most important technologies underpinning modern web development. Every developer needs to have a sound understanding of the topic and how it affects the building of web applications. As a Flex developer, this is important because XML underpins the way you construct your applications as well as providing a source for external data. In this chapter, I’ll explore the topic of XML in more detail. I want to answer the following questions: What is XML and why is it useful? What can you do with XML? What is an XML document and what does it contain? What are the rules for creating XML documents? If you know the answers to all these questions, please feel free to skip forward to the next chapter, where we’ll look at using XML as an external data source. Otherwise, read on!
209
8946Ch07CMP3
11/6/07
7:56 PM
Page 210
CHAPTER 7
Understanding XML Let’s start by looking at what the term XML means. The term is a little misleading because it stands for Extensible Markup Language. In fact, XML is not a language on its own; instead it is a metalanguage that specifies how to create other languages, called vocabularies, using markup. MXML is a vocabulary of XML because it is created according to the rules of XML. XML creates text-based languages that work with structured content. You might use XML to describe database or document content. In the case of Flex, MXML describes an application interface. The markup can provide descriptive tags for the data and describe how one piece of content relates to another. The MXML tag describes a ComboBox control. It has a visual appearance associated with the tag as well as a set list of properties and methods that are attributes of the tag, for example, the id attribute. The related tag describes how to populate the ComboBox. You can use the XML construction rules to invent tags that describe a particular set of data and the data structures. There are also many standardized XML vocabularies for use in specific industries and situations. Web developers will be most familiar with XHTML, an XML vocabulary used to describe the structure and content in a web page. Other examples include Scalable Vector Graphics (SVG), Structured Graph Format (SGF), and Synchronized Multimedia Integration Language (SMIL).
What is an XML document? Any file containing content marked up by tags following XML rules is called an XML document. This type of file can be a physical document or it can be a stream of digital data, perhaps created from a call to a database or from another software package. A web service or RSS feed is one example of XML data that is provided in a digital stream. At its simplest, an XML document is a way to store data in a text file. At its most complex, XML allows you to describe and structure content so that an XML processor, software that reads an XML document can render it in a specific way. A web browser is an example of an XML parser as it can read and render XHTML content. Similarly, Flex Builder contains an XML processor that renders the MXML tags visually in Design view. There are many rules that surround the construction of an XML document, and we’ll get into those a little later in the chapter. You’ve seen examples of XML documents each time you’ve created a Flex application in Flex Builder.
Understanding the XML framework XML exists within a framework of other recommendations so there are XML-based languages to do the following (to name but a few): Document the rules for an XML language (XML schemas) Specify how to transform an XML document for other purposes (Extensible Stylesheets Language) Identify parts of an XML document (XPath) Consume and provide web services (Simple Object Access Protocol [SOAP] and Web Services Description Language [WSDL])
210
8946Ch07CMP3
11/6/07
7:56 PM
Page 211
INTRODUCTION TO XML You can find out more about these languages at the W3C web site. Let’s see how XML started.
A brief history The World Wide Web Consortium (W3C) released the XML recommendation in 1998. XML is based on Standard Generalized Markup Language (SGML), which was in turn was created out of General Markup Language (GML) in the 1960s. XML is actually a simplified version of SGML. SGML describes how to write languages, specifically those that work with text in electronic documents. SGML is also an international standard: ISO 8879. Interestingly enough, SGML was one of the considerations for HTML when it was first developed so both HTML and XML share a common ancestor. As I’m sure you’re aware, HTML has since been reformulated into XHTML using the rules of XML construction. Since its introduction, XML has been used in many situations and for a variety of purposes. Both human beings and software packages can work with XML documents. Most databases can provide their information in XML format, and Office 2007 uses XML languages as the basis for all Office documents. XML provides one means for software packages to exchange information. The W3C provides the following definition for XML in its glossary at www.w3.org/TR/DOM-Level-2Core/glossary.html.
XML is an extremely simple dialect of SGML. The goal is to enable generic SGML to be served, received, and processed on the Web in the way that is now possible with HTML. XML has been designed for ease of implementation and for interoperability with both SGML and HTML.
You can read more about XML at the W3C’s Web site at http://www.w3c.org/XML/. At the time of writing, the current specification was for XML 1.1, second edition. You can view this specification at http://www.w3.org/TR/xml11/. When it created XML, the W3C published the following goals at www.w3.org/TR/REC-xml/#secorigin-goals:
1. 2. 3. 4. 5. 6. 7. 8. 9. 10.
XML shall be straightforwardly usable over the Internet. XML shall support a wide variety of applications. XML shall be compatible with SGML. It shall be easy to write programs which process XML documents. The number of optional features in XML is to be kept to the absolute minimum, ideally zero. XML documents should be human-legible and reasonably clear. The XML design should be prepared quickly. The design of XML shall be formal and concise. XML documents shall be easy to create. Terseness in XML markup is of minimal importance.
211
8946Ch07CMP3
11/6/07
7:56 PM
Page 212
CHAPTER 7 In other words, XML should be easy to use over the Internet and in a variety of other settings, by both people and software applications. The rules for XML documents should be clear so they are easy to create. XML documents should be easy to work with for both software and human beings and their conciseness isn’t important. The last point is interesting as one of the key criticisms of XML documents is that they can be verbose.
Understanding why you should use XML At this point, you might be asking yourself why XML is so important and what benefits it provides to developers. Some of the benefits are that XML is Simple to construct Flexible for a variety of purposes Both machine and human readable Accessible Platform and vendor independent I want to look at each of these benefits a little more closely.
Simplicity XML documents are relatively simple. It’s easy for both humans and software packages to create XML documents as they are basically text files that follow the XML constructions rules. At a minimum, humans creating XML documents only need a basic text editor. They can also be automatically generated by a variety of different software packages. Reading an XML document is also simple. Tag names are generally descriptive so that humans can easily work out what type of data each element contains. Because you can write the tags in a hierarchy, it’s easy to determine the relationships between each piece of information.
Flexibility One key aspect of XML is its flexibility. Unless you’re working with an existing XML-based language such as XHTML or MXML, you are not restricted to a standard list of tags. As long as you follow some simple rules, you can structure an XML document in any way you like. The choice of tag names, attributes, and structures is completely flexible, so you can tailor it to suit your data. As a metalanguage, XML has created other languages for a variety of purposes. It is so flexible that it can describe topics as diverse as vector graphics to mathematical formulae. Of particular interest to developers is the use of XML to construct languages such as XHTML, MXML, and server-side approaches like ASP.NET. The way XML information can be used is also flexible. You can display any XML document in a web browser to see the structure of elements. You can also use other technologies or software packages to change the display quite dramatically. For example, you can do the following: Create printed representations of data within an XML document Create a web page from an XML document Read out XML content using a screen reader
212
8946Ch07CMP3
11/6/07
7:56 PM
Page 213
INTRODUCTION TO XML
Readability XML documents are often called self-describing because the tag names that surround content are usually descriptive. This makes it easy for humans to interpret the contents in an XML document by looking at the tag names. Because XML documents are standardized in their construction rules, it’s also unambiguous for software packages to read the content. In the case of standard vocabularies, provided that a software package knows the rules or “grammar” for that language (the schema), it can easily interpret the contents of an XML document. The hierarchy in elements means that XML documents show relationships between information in a similar way to a database. It’s easy to create one-to-one and one-to-many relationships by using a hierarchical structure.
Accessibility XML documents are stores of data or content separate from the presentation of that data. The presentation is usually governed by an XML processor or a stylesheet. By separating the data or content from its presentation, developers can repurpose their information for a number of different target audiences. XML documents use Unicode and specify an encoding for their standard character sets, so you can write XML documents in any number of different languages. This allows developers to provide the same content for people or software packages located in different countries
Platform and vendor independence XML is a central standard in a whole family of related standards. These recommendations work together to create an independent framework for managing markup languages. XML is platform-, device-, and vendor-independent. It doesn’t matter if you view an XML document on a PC, Macintosh, handheld computer, or mobile phone. The content is still the same and can be exchanged seamlessly. This independence allows data to be shared among software packages that otherwise couldn’t communicate with each other. People don’t need to rely on a specific software package to work with XML documents. XML content can be created in a basic text editor and can be viewed in a web browser or any other XML processor. In the case of Web Services, XML is an intermediary between a user and a remote database. The XML specification isn’t owned by any company or commercial enterprise. so it’s free to use. In fact, most major software packages either support XML or are moving so that they will support it in the future.
Using XML information Software packages that process XML documents are called XML processors. Many different software packages, including Flex Builder, fall into this category. An XML processor can view, extract, display, and validate XML content.
213
8946Ch07CMP3
11/6/07
7:56 PM
Page 214
CHAPTER 7 XML parsers are one category of XML processors. Parsers can read through the content of an XML document and extract individual elements, attributes, and text. Parsers need to be able to separate the different parts of an XML document. For example, Flex Builder includes an XML parser that allows applications to work through the structure of an XML document to extract different parts for inclusion in the user interface. XML parsers first check to see whether a document is well-formed, and you'll learn more about what this term means a little later in the chapter. XML parsers can’t work with documents that aren’t wellformed and will usually throw an error. XML parsers fall into two categories: nonvalidating and validating. All parsers check to see whether a document is well-formed. In addition, validating parsers also compare the structure of the document with a DTD or schema to check that it is constructed correctly. A document that meets the rules listed within a DTD or schema is considered valid by the validating parser. Flex Builder cannot validate loaded XML content. We’ve covered much of the background so you have an understanding of XML and its place in the world. Now it’s time to start looking at the specifics of working with XML documents.
Understanding the structure of an XML document XML documents are structured in a specific way, made up of a document prolog and a tree. The prolog contains information about the XML document as a whole, while the tree contains the actual data or content within the document. Before we get started, I want to cover two basics. First, it’s important to realize that the content in the document is case sensitive. Second, you can add comments to your XML document in the same way as you would with an XHTML document. Comments begin with the characters : Let’s start by looking at the document prolog.
The document prolog The document prolog sits at the top of an XML document and must appear before any of the data in the document. It usually includes an XML declaration, any processing instructions, and links to other files. It can also include comments, although comments can appear anywhere in the document.
The XML declaration The prolog usually starts with an XML declaration, although this is optional. You’ll notice that MXML files always start with the following declaration:
214
8946Ch07CMP3
11/6/07
7:56 PM
Page 215
INTRODUCTION TO XML If you do include a declaration, it must be on the first line of your XML document, with nothing before it, not even a space. The XML declaration tells software applications and humans that the document contains XML: You can optionally include an XML version in the declaration. The preceding line shows a version of 1.0. Even though the latest recommendation is for XML 1.1, you should continue to use the version="1.0" attribute value for backward compatibility with XML processors, including Flex Builder. The XML declaration can also include an encoding attribute. Encoding determines the character set for the XML document. You can use Unicode character sets UFT-8 and UTF-16; or ISO character sets such as ISO 8859-1, Latin-1 Western Europe. These character sets are all part of the Unicode standard, which is maintained by the Unicode Consortium. You can find out more about this topic at www.unicode.org. If no encoding attribute is included, it is assumed that the document uses UTF-8 encoding. Languages such as Japanese and Chinese need UTF-16 encoding. Western European languages often use ISO 8859-1 to cope with the accents that aren’t part of the English language. If you include the encoding attribute, it must appear after the version attribute: The standalone attribute indicates whether the XML document uses external information such as a Document Type Definition (DTD) to specify the rules for how to construct the document. The attribute takes a value of either yes or no. This attribute is optional but, if used, must appear as the last attribute in the declaration: The preceding line shows a complete XML declaration with all attributes in the correct order.
Processing instructions The prolog of an XML document can also include processing instructions. Processing instructions (PIs) pass information about the XML document to other applications. PIs start with the characters . The first item in a PI is a name, called the PI target. PI names that start with xml are reserved. A common processing instruction is the inclusion of an external XSLT stylesheet. Stylesheets transform the XML document into other types of documents. If included, this PI must appear before the document root. The following line shows how a stylesheet PI might appear: Some processing instructions can also appear at the end of the XML document.
215
8946Ch07CMP3
11/6/07
7:56 PM
Page 216
CHAPTER 7
Document Type Definitions (DTDs) DTDs or DOCTYPE declarations, which appear in the prolog of an XML document, are rules about the elements and attributes within the XML document and provide information about what is valid within the document. The prolog can include a set of declarations about the XML document, a reference to an external DTD, or both. The lines that follow show an external DTD reference:
The document tree All other content within an XML document that isn’t in the prolog is contained within the document tree. The tree equates to the data or content within the XML document, described in elements and attributes. The tree starts with the document root, which contains all of the other content. The content in the document tree contains information and markup. You can divide markup into the following: Elements Attributes Text CDATA
The document root The document root contains all data within the XML document. An XML document can only ever have a single root element. In MXML application files, the document root is often the element: This element contains all the other MXML tags. It’s also possible for the root of an MXML document to be another element; for example, in the case of a custom component.
Elements Each XML document contains one or more elements that are also called nodes. An example of an MXML element is this: All MXML elements that start with the prefix mx: are predetermined by the Flex SDK. You’ll find out more about what the prefix means a little later in the chapter. It’s possible to create your own elements by writing custom ActionScript classes.
216
8946Ch07CMP3
11/6/07
7:56 PM
Page 217
INTRODUCTION TO XML Elements serve many functions in an XML document, including the following: Mark up content Use descriptive tag names to describe the content they mark up Provide information about the order of data in an XML document Indicate the relative importance of pieces of data Show relationships between blocks of information Elements usually have a starting and ending tag, as well as some text or other elements: England XML tags start and end with less than and greater than signs, and the name of the tag appears between these signs: Elements may also include other elements: England In the preceding example, the element is a child element within the element. Some elements are empty; that is, they contain no text or other elements. These can be written in either of the two following ways: Each element has a name that usually describes the content. In the previous lines it’s easy to see that tag describes a label. The mx: portion of the tag is not actually the name; it’s the prefix before the name. Each name must follow a standard naming convention. The names start with either a letter or an underscore and can’t start with a number. Element names can contain any letter or number, but no spaces. Names don’t usually contain colons because, as you have seen, these are usually used for prefixes. If you’re creating your own XML vocabulary, it’s best to give elements a meaningful name that describes the content inside the tags; for example: Sas Jacobs Elements inside other elements are called child elements or child nodes. Not surprisingly, the element that contains the children is called the parent. The parent of the parent is called the grandparent. Elements that share the same parent are siblings.
217
8946Ch07CMP3
11/6/07
7:56 PM
Page 218
CHAPTER 7 You can mix the content of elements so that they contain text as well as child elements: Text being marked up This approach doesn’t normally happen with built-in MXML tags.
Attributes Attributes provide more about an element to clarify or modify the information already provided. For example, it’s common to store an id as an attribute of an element: Attributes appear in the start tag of an element after the element name. They are pairs of names and related values, and each attribute must include both the name and the value: In the preceding example, the RadioButton has two attributes: label and groupName. In MXML, the relevant attributes for each tag are determined by the methods, properties, and events of the ActionScript class corresponding to the element. Attribute values must appear within quotation marks after the attribute name, with an equals sign in between: label="Female" You can use either single or double quotes around the attribute value: label="Female" label='Female' You’re not limited in the number of attributes you can include within an element, but each attribute in a single element has to have a unique name. You couldn’t repeat the label attribute twice in an element. The rules for naming attribute are the same as for elements. You can’t start the name with a number and you can’t include spaces in the name. If you’re creating your own XML content, you can rewrite attributes as nested elements: Sas Jacobs They can also be written as follows: 1 Sas Jacobs
218
8946Ch07CMP3
11/6/07
7:56 PM
Page 219
INTRODUCTION TO XML There is no single correct way to structure elements and attributes. The method you choose depends on your data and the way you’re going to process the XML document
Text Text refers to any information contained between opening and closing element tags. In the following line, the text England is stored between the and tags: England Unless you specify otherwise, the text between the opening and closing tags in an element will always be processed as if it were XML. Suppose that you want to include special characters such as < and >, as follows: England You’ll have to replace them with the entities < and >: England
Entities Character entities are symbols that represent a single character. In XHTML, character entities are used for symbols such as an ampersand & and a nonbreaking space . In XML, you use entities so that reserved text inside elements isn’t processed as XML. For example, the following line would cause an error in an XML parser: 3 < 5 If you want to include a less than sign in text, you must use the entity
