flex2 devguide
TRANSCRIPT
-
8/14/2019 flex2 devguide
1/1853
Flex2DevelopersGuide
Adobe
F
lex
2
-
8/14/2019 flex2 devguide
2/1853
2006 Adobe Systems Incorporated. All rights reserved.
Flex 2 Developers Guide
If this guide is distributed with software that includes an end-user agreement, this guide, as well as the software described in it, isfurnished under license and may be used or copied only in accordance with the terms of such license. Except as permitted by anysuch license, no part of this guide may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means,electronic, mechanical, recording, or otherwise, without the prior written permission of Adobe Systems Incorporated. Please note
that the content in this guide is protected under copyright law even if it is not distributed with software that includes an end-userlicense agreement.
The content of this guide is furnished for informational use only, is subject to change without notice, and should not beconstrued as a commitment by Adobe Systems Incorporated. Adobe Systems Incorporated assumes no responsibility or liabilityfor any errors or inaccuracies that may appear in the informational content contained in this guide.
Please remember that existing artwork or images that you may want to include in your project may be protected under copyrightlaw. The unauthorized incorporation of such material into your new work could be a violation of the rights of the copyrightowner. Please be sure to obtain any permission required from the copyright owner.
Any references to company names in sample templates are for demonstration purposes only and are not intended to refer to anyactual organization.
Adobe, the Adobe logo, Flex, Flex Builder and Flash Player are either registered trademarks or trademarks of Adobe SystemsIncorporated in the United States and/or other countries. ActiveX and Windows are either registered trademarks or trademarks ofMicrosoft Corporation in the United States and/or other countries. Linux is a registered trademark of Linus Torvalds. Solaris is aregistered trademark or trademark of Sun Microsystems, Inc. in the United States and other countries. All other trademarks arethe property of their respective owners.
This product includes software developed by the Apache Software Foundation (http://www.apache.org/). Macromedia Flash 8video is powered by On2 TrueMotion video technology. 1992-2005 On2 Technologies, Inc. All Rights Reserved. http://
www.on2.com. This product includes software developed by the OpenSymphony Group (http://www.opensymphony.com/).Portions licensed from Nellymoser (www.nellymoser.com). Portions utilize Microsoft Windows Media Technologies. Copyright(c) 1999-2002 Microsoft Corporation. All Rights Reserved. Includes DVD creation technology used under license from SonicSolutions. Copyright 1996-2005 Sonic Solutions. All Rights Reserved. This Product includes code licensed from RSA DataSecurity. Portions copyright Right Hemisphere, Inc. This product includes software developed by the OpenSymphony Group(http://www.opensymphony.com/).
Sorenson Spark video compression and decompression technology licensed from Sorenson Media, Inc.
Adobe Systems Incorporated, 345 Park Avenue, San Jose, California 95110, USA
Notice to U.S. government end users. The software and documentation are Commercial Items, as that term is defined at 48C.F.R. 2.101, consisting of Commercial Computer Software and Commercial Computer Software Documentation, as suchterms are used in 48 C.F.R. 12.212 or 48 C.F.R. 227.7202, as applicable. Consistent with 48 C.F.R. 12.212 or 48 C.F.R.227.7202-1 through 227.7202-4, as applicable, the Commercial Computer Software and Commercial Computer SoftwareDocumentation are being licensed to U.S. Government end users (a) only as Commercial items and (b) with only those rights asare granted to all other end users pursuant to the terms and conditions herein. Unpublished-rights reserved under the copyrightlaws of the United States. Adobe Systems Incorporated, 345 Park Avenue, San Jose, CA 95110-2704, USA. For U.S.Government End Users, Adobe agrees to comply with all applicable equal opportunity laws including, if appropriate, theprovisions of Executive Order 11246, as amended, Section 402 of the Vietnam Era Veterans Readjustment Assistance Act of
1974 (38 USC 4212), and Section 503 of the Rehabilitation Act of 1973, as amended, and the regulations at 41 CFR Parts 60-1through 60-60, 60-250 ,and 60-741. The affirmative action clause and regulations contained in the preceding sentence shall beincorporated by reference.
-
8/14/2019 flex2 devguide
3/1853
iii
Contents
Chapter 1: About Flex Documentation . . . . . . . . . . . . . . . . . . . . . . 15
PART 1: USING FLEX PROGRAMMING LANGUAGES
Chapter 2: Developing Applications in MXML . . . . . . . . . . . . . . . 21
About MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21Developing applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
Chapter 3: MXML Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Basic MXML syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Setting component properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Chapter 4: Using ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
Using ActionScript in Flex applications. . . . . . . . . . . . . . . . . . . . . . . . . . 55
Working with Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Comparing, including, and importing ActionScript code. . . . . . . . . . . 68
Techniques for separating ActionScript from MXML . . . . . . . . . . . . . .72Creating ActionScript components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .75
Performing object introspection . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
Chapter 5: Using Events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
About events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Using events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .87
Manually dispatching events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109
Event propagation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Event priorities . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
Using event subclasses. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121
About keyboard events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123
http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/http://part1_partname.pdf/ -
8/14/2019 flex2 devguide
4/1853
iv Contents
PART 2: BUILDING USER INTERFACES FOR FLEX APPLICA-TIONS
Chapter 6: Using Flex Visual Components . . . . . . . . . . . . . . . . . 133
About visual components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 133
Class hierarchy for visual components . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Using the UIComponent class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Sizing visual components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141
Handling events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146
Using styles. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .151
Using behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Applying skins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
Changing the appearance of a component at run time . . . . . . . . . . . . 155
Extending components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Chapter 7: Using Data Providers and Collections. . . . . . . . . . . . 161
About data providers and collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . 161
Using IList interface methods and properties . . . . . . . . . . . . . . . . . . . . 174
Using ICollectionView interface methods and properties. . . . . . . . . . 176
Using events and update notifications . . . . . . . . . . . . . . . . . . . . . . . . . . 189
Using hierarchical data providers. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
Using remote data providers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 213
Chapter 8: Sizing and Positioning Components . . . . . . . . . . . . . 221
About sizing and positioning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221
Sizing components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .228Positioning and laying out controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . .248
Using constraint-based layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .255
Chapter 9: Using Controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 259
About controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 260
Working with controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266
Button control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .269
PopUpButton control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273
ButtonBar and ToggleButtonBar controls . . . . . . . . . . . . . . . . . . . . . .276
LinkBar control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
TabBar control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .283CheckBox control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .287
RadioButton control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .288
NumericStepper control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
DateChooser and DateField controls . . . . . . . . . . . . . . . . . . . . . . . . . . .296
-
8/14/2019 flex2 devguide
5/1853
Contents v
LinkButton control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307
HSlider and VSlider controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .310
SWFLoader control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319
Image control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
VideoDisplay control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
ColorPicker control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Alert control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .351
ProgressBar control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356
HRule and VRule controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .361
ScrollBar control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 365
Chapter 10: Using Text Controls . . . . . . . . . . . . . . . . . . . . . . . . . 369
About text controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 369
Using the text property . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371
Using the htmlText property. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 376
Selecting and modifying text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 387
Label control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 392
TextInput control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 393
Text control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 395
TextArea control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397
RichTextEditor control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 398
Chapter 11: Using Menu-Based Controls . . . . . . . . . . . . . . . . . . 407
About menu-based controls. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 407
Defining menu structure and data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 408
Handling menu-based control events . . . . . . . . . . . . . . . . . . . . . . . . . . .415
Menu control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427
MenuBar control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .431
PopUpMenuButton control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433
Chapter 12: Using Data-Driven Controls . . . . . . . . . . . . . . . . . . 439
List control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 440
HorizontalList control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 450
TileList control. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 454
ComboBox control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 458
DataGrid control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 467
Tree control . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 479
Chapter 13: Introducing Containers . . . . . . . . . . . . . . . . . . . . . . .491
About containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .491
Using containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 493
-
8/14/2019 flex2 devguide
6/1853
vi Contents
Using scroll bars. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .507
Using Flex coordinates. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 510
Creating and managing component instances at run time. . . . . . . . . 516
Chapter 14: Using the Application Container . . . . . . . . . . . . . . 529
Using the Application container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 529
About the Application object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 537
Showing the download progress of an application . . . . . . . . . . . . . . 542
Chapter 15: Using Layout Containers. . . . . . . . . . . . . . . . . . . . . 553
About layout containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Canvas layout container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 554
Box, HBox, and VBox layout containers . . . . . . . . . . . . . . . . . . . . . . . 559
ControlBar layout container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .562
ApplicationControlBar layout container . . . . . . . . . . . . . . . . . . . . . . . . .564DividedBox, HDividedBox, and VDividedBox layout containers . . .567
Form, FormHeading, and FormItem layout containers. . . . . . . . . . . .570
Grid layout container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 594
Panel layout container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 601
Tile layout container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 606
TitleWindow layout container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 609
Chapter 16: Using Navigator Containers . . . . . . . . . . . . . . . . . . .627
About navigator containers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .627
ViewStack navigator container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .628
TabNavigator container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .634Accordion navigator container . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .639
PART 3: CUSTOMIZING THE USER INTERFACE
Chapter 17: Using Behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
About behaviors. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 649
Applying behaviors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 659
Working with effects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 674
Chapter 18: Using Styles and Themes . . . . . . . . . . . . . . . . . . . . .697
About styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .697
Using external style sheets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 726
Using local style definitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 727
Using the StyleManager class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .730
-
8/14/2019 flex2 devguide
7/1853
Contents vii
Using the setStyle() and getStyle() methods . . . . . . . . . . . . . . . . . . . . 737
Using inline styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 742
Loading style sheets at run time . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 744
Using filters in Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 753
About themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 756
Chapter 19: Using Fonts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763
About fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 763
Using device fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 766
Using embedded fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 767
Using multiple typefaces. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 781
About the font managers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786
Setting character ranges . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 786
Embedding double-byte fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 789
Embedding fonts from SWF files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 791
Troubleshooting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 802
Chapter 20: Using Skins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805
About skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805
Graphical skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 807
Using SWF files as skins . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .814
Programmatic skinning . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .816
Creating themes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 849
Chapter 21: Using Item Renderers and Item Editors. . . . . . . . . . 851
About item renderers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 851Creating an item renderer and item editor. . . . . . . . . . . . . . . . . . . . . . . 860
Creating drop-in item renderers and item editors . . . . . . . . . . . . . . . . 870
Creating inline item renderers and editors . . . . . . . . . . . . . . . . . . . . . . 875
Creating item renderers and item editor components . . . . . . . . . . . . 883
Working with item renderers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 892
Chapter 22: Working with Item Editors . . . . . . . . . . . . . . . . . . . 903
The cell editing process . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 903
Creating an editable cell . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 904
Returning data from an item editor. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 905
Sizing and positioning an item editor . . . . . . . . . . . . . . . . . . . . . . . . . . . 909Making an item editor that responds to the Enter key . . . . . . . . . . . . . 911
Using the cell editing events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .912
Item editor examples . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 920
Examples using item editors with the list controls . . . . . . . . . . . . . . . . 934
-
8/14/2019 flex2 devguide
8/1853
viii Contents
Chapter 23: Using ToolTips. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 943
About ToolTips. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 943
Creating ToolTips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 944
Using the ToolTip Manager. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 952
Using error tips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .962
Chapter 24: Using the Cursor Manager. . . . . . . . . . . . . . . . . . . .967
About the Cursor Manager . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .967
Using the Cursor Manager. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .968
Creating and removing a cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 969
Using a busy cursor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .970
Chapter 25: Localizing Flex Applications . . . . . . . . . . . . . . . . . 975
About localized Flex applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .975
Creating a localized application . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .976
PART 4: FLEX PROGRAMMING TOPICS
Chapter 26: Dynamically Repeating Controls and Containers 995
About Repeater components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 995
Using the Repeater component . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 996
Considerations when using a Repeater component . . . . . . . . . . . . . 1017
Chapter 27: Using View States. . . . . . . . . . . . . . . . . . . . . . . . . . 1019
About view states . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1019
Defining and applying view states . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1022
Building applications by using view states . . . . . . . . . . . . . . . . . . . . . .1045
Creating your own override classes. . . . . . . . . . . . . . . . . . . . . . . . . . . .1048
Chapter 28: Using Transitions . . . . . . . . . . . . . . . . . . . . . . . . . . 1051
About transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1051
Defining transitions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1053
Handling events when using transitions . . . . . . . . . . . . . . . . . . . . . . . .1060
Using action effects in a transition. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1061
Filtering effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1065
Transition tips and troubleshooting . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1077
Chapter 29: Using the Drag and Drop Manager. . . . . . . . . . . . 1081
About the Drag and Drop Manager. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1081
Using drag-and-drop with list-based controls . . . . . . . . . . . . . . . . . .1082
Manually adding drag-and-drop support . . . . . . . . . . . . . . . . . . . . . . .1090
Programming a drag-and-drop operation . . . . . . . . . . . . . . . . . . . . . . 1098
-
8/14/2019 flex2 devguide
9/1853
Contents ix
Drag-and-drop techniques and considerations. . . . . . . . . . . . . . . . . .1109
Chapter 30: Embedding Assets . . . . . . . . . . . . . . . . . . . . . . . . . .1113
About embedding assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1113Syntax for embedding assets . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1116
Embedding asset types. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1121
Chapter 31: Creating Modular Applications. . . . . . . . . . . . . . . . .1131
Modular applications overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1131
Creating modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1134
Compiling modules. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1135
Loading and unloading modules . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1136
Using ModuleLoader events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1140
Chapter 32: Using the History Manager . . . . . . . . . . . . . . . . . . 1147About history management . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1148
Using standard history management . . . . . . . . . . . . . . . . . . . . . . . . . . . 1148
Using custom history management . . . . . . . . . . . . . . . . . . . . . . . . . . . .1150
How the HistoryManager class saves and loads states. . . . . . . . . . . 1156
Using history management in a custom wrapper . . . . . . . . . . . . . . . . 1157
Chapter 33: Printing. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1161
About printing by using Flex classes . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162
Using the FlexPrintJob class . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1162
Using a print-specific output format . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1167
Printing multipage output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1171
Chapter 34: Communicating with the Wrapper . . . . . . . . . . . . .1181
About exchanging data with Flex applications. . . . . . . . . . . . . . . . . . . 1181
Passing request data to Flex applications. . . . . . . . . . . . . . . . . . . . . . . 1186
Accessing JavaScript functions from Flex . . . . . . . . . . . . . . . . . . . . . . 1192
Accessing Flex from JavaScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1205
About ExternalInterface API security in Flex . . . . . . . . . . . . . . . . . . . . 1211
Chapter 35: Using Shared Objects. . . . . . . . . . . . . . . . . . . . . . . 1213
About shared objects. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1213
Creating a shared object. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1215
Destroying shared objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1217
SharedObject example . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1217
-
8/14/2019 flex2 devguide
10/1853
x Contents
Chapter 36: Creating Accessible Applications . . . . . . . . . . . . . 1219
Accessibility overview. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1219
About screen reader technology . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1221
Configuring Flex applications for accessibility . . . . . . . . . . . . . . . . . .1223Accessible components and containers. . . . . . . . . . . . . . . . . . . . . . . . 1224
Creating tab order and reading order . . . . . . . . . . . . . . . . . . . . . . . . . . 1227
Creating accessibility with ActionScript . . . . . . . . . . . . . . . . . . . . . . . . 1232
Accessibility for hearing-impaired users. . . . . . . . . . . . . . . . . . . . . . . . 1233
Testing accessible content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1233
PART 5: FLEX DATA FEATURES
Chapter 37: Representing Data . . . . . . . . . . . . . . . . . . . . . . . . . 1237
About data representation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1237
Chapter 38: Binding Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1245
About data binding . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1245
Binding data with curly braces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1247
Binding data with the tag. . . . . . . . . . . . . . . . . . . . . . . . . 1252
About the binding mechanism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1258
Using binding for moving related data . . . . . . . . . . . . . . . . . . . . . . . . . 1266
Chapter 39: Storing Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1269
About data models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1269
Defining a data model. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1270Specifying an external source for an tag or tag . .1274
Using validators with a data model . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1276
Using a data model as a value object . . . . . . . . . . . . . . . . . . . . . . . . . . 1277
Binding data into an XML data model . . . . . . . . . . . . . . . . . . . . . . . . . 1279
Chapter 40: Validating Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1281
Validating data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1281
Using validators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1286
General guidelines for validation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1303
Working with validation errors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1306Working with validation events. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1310
Using standard validators . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1313
-
8/14/2019 flex2 devguide
11/1853
Contents xi
Chapter 41: Formatting Data . . . . . . . . . . . . . . . . . . . . . . . . . . . .1327
Using formatters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1327
Writing an error handler function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1329
Using the standard formatters. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1331
PART 6: DATA ACCESS AND INTERCONNECTIVITY
Chapter 42: Accessing Server-Side Data . . . . . . . . . . . . . . . . 1345
About Flex data access . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1345
About RPC services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1346
About the Data Management Service . . . . . . . . . . . . . . . . . . . . . . . . . 1348
About messaging . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1349
Using Flex Data Services with Flex Builder . . . . . . . . . . . . . . . . . . . . 1349
Chapter 43: Configuring Data Services . . . . . . . . . . . . . . . . . . . 1351
About service configuration files. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1352
Configuring message channels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1360
Serializing data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1366
Securing destinations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1379
Configuring server-side service logging . . . . . . . . . . . . . . . . . . . . . . . 1384
Working with session data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1387
Using software clustering . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1388
Managing services . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1390
Using custom error handling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1392
About Data Services class loading. . . . . . . . . . . . . . . . . . . . . . . . . . . . 1394
Using the factory mechanism . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1396
Chapter 44: Understanding RPC Components. . . . . . . . . . . . 1399
About RPC components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1399
Comparing the Flex RPC services feature to other technologies . 1403
Chapter 45: Using RPC Components. . . . . . . . . . . . . . . . . . . . .1407
Declaring an RPC component. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1407
Configuring a destination . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1411
Calling a service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1413
Setting properties for RemoteObject methods or WebService opera-tions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1424
Handling service results . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1428
Using a service with binding, validation, and event listeners . . . . . 1438
Handling asynchronous calls to services . . . . . . . . . . . . . . . . . . . . . . 1439
-
8/14/2019 flex2 devguide
12/1853
xii Contents
Using features specific to RemoteObject components . . . . . . . . . .1442
Using features specific to WebService components . . . . . . . . . . . .1444
Chapter 46: Configuring RPC Services. . . . . . . . . . . . . . . . . . . 1451
Understanding destination configuration. . . . . . . . . . . . . . . . . . . . . . . 1451
Configuring destination properties . . . . . . . . . . . . . . . . . . . . . . . . . . . .1454
Configuring the Proxy Service . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1457
Chapter 47: Understanding Flex Messaging. . . . . . . . . . . . . . .1459
About messaging. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1459
Understanding the Flex messaging architecture . . . . . . . . . . . . . . . . 1461
Chapter 48: Using Flex Messaging . . . . . . . . . . . . . . . . . . . . . .1465
Using messaging in a Flex application . . . . . . . . . . . . . . . . . . . . . . . . .1465
Working with Producer components . . . . . . . . . . . . . . . . . . . . . . . . . .1466Working with Consumer components . . . . . . . . . . . . . . . . . . . . . . . . . 1472
Using subtopics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1476
Using a pair of Producer and Consumer components in an application .1480
Chapter 49: Configuring the Message Service. . . . . . . . . . . . . 1483
Understanding Message Service configuration . . . . . . . . . . . . . . . . . 1483
Configuring Message Service destinations . . . . . . . . . . . . . . . . . . . . . 1486
Creating a custom Message Service adapter . . . . . . . . . . . . . . . . . . .1494
Chapter 50: Understanding the Flex Data Management Service. .1497
About the Data Management Service feature. . . . . . . . . . . . . . . . . . . 1497
Chapter 51: Distributing Data in Flex Applications. . . . . . . . . . 1501
Creating a distributed data application . . . . . . . . . . . . . . . . . . . . . . . . . 1501
Mapping client-side objects to Java objects . . . . . . . . . . . . . . . . . . . . 1510
Handling data synchronization conflicts. . . . . . . . . . . . . . . . . . . . . . . . 1514
Chapter 52: Configuring the Data Management Service . . . . 1517
About Data Management Service configuration . . . . . . . . . . . . . . . . 1518
Configuring Data Management Service destinations . . . . . . . . . . . .1520
Working with data adapters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1525
Managing hierarchical collections . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1556
Pushing data changes from the server to clients . . . . . . . . . . . . . . . .1569
-
8/14/2019 flex2 devguide
13/1853
Contents xiii
PART 7: CHARTING COMPONENTS
Chapter 53: Introduction to Charts. . . . . . . . . . . . . . . . . . . . . . .1573
About charting. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1573Using the charting controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1575
About the axes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1583
About charting events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1584
Creating charts in ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1585
Defining chart data. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1592
Chapter 54: Chart Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1623
Using area charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1624
Using bar charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1627
Using bubble charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1629
Using candlestick charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1631Using column charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1635
Using HighLowOpenClose charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1642
Using line charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1646
Using pie charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1657
Using plot charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1667
Using multiple data series. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1671
Using multiple axes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1673
Chapter 55: Formatting Charts. . . . . . . . . . . . . . . . . . . . . . . . . . 1681
Applying chart styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1682
Adding ChartElement objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1690Setting padding properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1693
Working with axes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1698
Using strokes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1728
Using fills . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1735
Using filters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .1747
Adding grid lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1753
Using DataTips . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1761
Skinning ChartItem objects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1773
Using Legend controls . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1781
Stacking charts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1793
Chapter 56: Using Events and Effects in Charts. . . . . . . . . . . . 1801
Handling user interactions with charts. . . . . . . . . . . . . . . . . . . . . . . . . . 1801
Using effects with charts. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1819
-
8/14/2019 flex2 devguide
14/1853
xiv Contents
Index . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .i
-
8/14/2019 flex2 devguide
15/1853
15
1CHAPTER 1
About Flex Documentation
Flex 2 Developers Guideprovides the tools for you to develop Internet applications by using
Adobe Flex 2. This book is intended for application developers who are learning Flex or
want to extended their Flex programming knowledge. It provides a solid grounding in the
tools that Flex provides to develop applications.
Contents
Using this manual . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
Accessing the Flex documentation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
Using this manualThis manual can help anyone who is developing Flex applications. However, this manual is
most useful if you have basic experience using Flex, or have read Getting Started with Flex 2.
Getting Started with Flex 2provides an introduction to Flex and helps you develop the basic
knowledge that makes using this manual easier.Flex 2 Developers Guideis divided into the following parts:
Part Description
Part 1, Using Flex Programming
Languages
Describes how to use MXML and ActionScript.
Part 2, Building User Interfaces
for Flex Applications
Describes how to use Flex components to build the user
interface to your application.
Part 3, Customizing the User
Interface
Describes how to improve the user experience by adding
additional functionality to your application.
Part 4, Flex ProgrammingTopics
Describes some advanced programming techniques thatyou can use to make your applications more interactive
and expressive.
-
8/14/2019 flex2 devguide
16/1853
16 About Flex Documentation
Accessing the Flex documentationThe Flex documentation is designed to provide support for the complete spectrum of
participants.
Documentation set
The Flex documentation set includes the following titles:
Part 5, Flex Data Features Describes how to use Flex data representation and data
features.
Part 6, Data Access and
Interconnectivity
Describes the Flex features that let you work with
external data. IncludesAdobe Flex Data Servicesfeatures.
Part 7, Charting Components Describes how to use charting components.
Book Description
Flex 2 Developers Guide Describes how to develop your dynamic web
applications.
Getting Started with Flex 2 Contains an overview of Flex features and application
development procedures.
Building and Deploying Flex 2
Applications
Describes how to build and deploy Flex applications.
Creating and Extending Flex 2
Components
Describes how to create and extend Flex components.
Migrating Applications to Flex 2 Provides an overview of the migration process, as well as
detailed descriptions of changes in Flex and
ActionScript.
Using Flex Builder 2 Contains comprehensive information about all Adobe
Flex Builder 2 features, for every level of Flex Builder
users.
Adobe Flex 2 Language Reference Provides descriptions, syntax, usage, and code
examples for the Flex API.
Part Description
-
8/14/2019 flex2 devguide
17/1853
Typographical conventions 17
Viewing online documentation
All Flex documentation is available online in HTML and Adobe Portable Document Format
(PDF) files from theAdobewebsite. It is also available from the Adobe Flex Builder Help
menu.
Typographical conventionsThe following typographical conventions are used in this book:
Italic fontindicates a value that should be replaced (for example, in a folder path).
Code fontindicates code.
Code font italic indicates a parameter.
Boldface font indicates a verbatim entry.
http://www.adobe.com/go/flex_documentationhttp://www.adobe.com/go/flex_documentation -
8/14/2019 flex2 devguide
18/1853
18 About Flex Documentation
-
8/14/2019 flex2 devguide
19/1853
19
1PART 1
Using Flex ProgrammingLanguages
This part describes how to use MXML and ActionScript, the Adobe Flex 2
programming languages.
The following topics are included:
Chapter 2: Developing Applications in MXML . . . . . . . . . . . . . . . . 21
Chapter 3: MXML Syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
Chapter 4: Using ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .55
Chapter 5: Using Events . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .83
-
8/14/2019 flex2 devguide
20/1853
-
8/14/2019 flex2 devguide
21/1853
21
2CHAPTER 2
Developing Applicationsin MXML
MXML is an XML language that you use to lay out user-interface components for Adobe Flex
applications. You also use MXML to declaratively define nonvisual aspects of an application,
such as access to server-side data sources and data bindings between user-interface
components and server-side data sources. This topic describes MXML and how you use
MXML to develop Flex applications.For information on MXML syntax, see Chapter 3, MXML Syntax, on page 41.
Contents
About MXML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Developing applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
About MXMLYou use two languages to write Flex applications: MXML and ActionScript. MXML is an
XML markup language that you use to lay out user-interface components. You also useMXML to declaratively define nonvisual aspects of an application, such as access to data
sources on the server and data bindings between user-interface components and data sources
on the server.
Like HTML, MXML provides tags that define user interfaces. MXML will seem very familiar
if you have worked with HTML. However, MXML is more structured than HTML, and it
provides a much richer tag set. For example, MXML includes tags for visual components such
as data grids, trees, tab navigators, accordions, and menus, as well as nonvisual components
that provide web service connections, data binding, and animation effects. You can also
extend MXML with custom components that you reference as MXML tags.
One of the biggest differences between MXML and HTML is that MXML-definedapplications are compiled into SWF files and rendered by Adobe Flash Player, which
provides a richer and more dynamic user interface than page-based HTML applications
provide.
-
8/14/2019 flex2 devguide
22/1853
22 Developing Applications in MXML
You can write an MXML application in a single file or in multiple files. MXML also supports
custom components written in MXML and ActionScript files.
Writing a simple applicationBecause MXML files are ordinary XML files, you have a wide choice of development
environments. You can write MXML code in a simple text editor, a dedicated XML editor, or
an integrated development environment (IDE) that supports text editing. Flex supplies a
dedicated IDE, called Adobe Flex Builder, that you can use to develop your applications.
The following example shows a simple Hello World application that contains just an
tag and two child tags, the tag and the tag. The
tag defines theApplication container that is always the root tag of a Flex
application. The tag defines a Panel container that includes a title bar, a title, a
status message, a border, and a content area for its children. The tag represents aLabel control, a very simple user interface component that displays text.
Save this code to a file named hello.mxml. MXML filenames must end in a lowercase .mxml
file extension.
The following image shows the Hello World application rendered in a web browser
window:
-
8/14/2019 flex2 devguide
23/1853
About MXML 23
About XML encoding
The first line of the document specifies an optional declaration of the XML version. It is good
practice to include encoding information that specifies how the MXML file is encoded. Many
editors let you select from a range of file encoding options. On North American operatingsystems, ISO-8859-1 is the dominant encoding format, and most programs use that format
by default. You can use the UTF-8 encoding format to ensure maximum platform
compatibility. UTF-8 provides a unique number for every character in a file, and it is
platform-, program-, and language-independent. If you specify an encoding format, it must
match the file encoding you use. The following example shows an XML declaration tag that
specifies the UTF-8 encoding format:
About the tag
In addition to being the root tag of a Flex application, the tag representsanApplication container. Acontaineris a user-interface component that contains other
components and has built-in layout rules for positioning its child components. By default, an
Application container lays out its children vertically from top to bottom. You can nest other
types of containers inside an Application container, such as the Panel container shown above,
to position user-interface components according to other rules. For more information, see
Chapter 6, Using Flex Visual Components, on page 133.
About MXML tag properties
The properties of an MXML tag, such as the text, fontWeight, and fontSize properties of
the tag, let you declaratively configure the initial state of the component. You
can use ActionScript code in an tag to change the state of a component at run
time. For more information, see Chapter 4, Using ActionScript, on page 55.
Compiling MXML to SWF Files
You can deploy your application as a compiled SWF file or, if you have Adobe Flex Data
Services, you can deploy your application as a set of MXML and AS files.
If you are using Flex Builder, you compile and run the compiled SWF file from within Flex
Builder. After your application executes correctly, you deploy it by copying it to a directory on
your web server or application server. Users then access the deployed SWF file by making anHTTP request in the form:
http://hostname/path/filename.swf
-
8/14/2019 flex2 devguide
24/1853
24 Developing Applications inMXML
The Flex also provides a command-line MXML compiler, mxmlc, that lets you compile
MXML files. You can use mxmlc to compile hello.mxml from a command line, as the
following example shows:
cd flexInstallDir/binmxmlc --show-actionscript-warnings=true --strict=true
c:/appDir/hello.mxml
In this example,flexInstallDiris the Flex installation directory, and appDiris the directory
containing hello.mxml. The resultant SWF file, hello.swf, is written to the same directory as
hello.mxml.
For more information about mxmlc, see Chapter 9, Using the Flex Compilers, in Building
and Deploying Flex 2 Applications. For more information about the debugger version of Flash
Player, see Chapter 11, Logging, in Building and Deploying Flex 2 Applications.
The relationship of MXML tags to ActionScriptclasses
Adobe implemented Flex as an ActionScript class library. That class library contains
components (containers and controls), manager classes, data-service classes, and classes for all
other features. You develop applications by using the MXML and ActionScript languages with
the class library.
MXML tags correspond to ActionScript classes or properties of classes. Flex parses MXML
tags and compiles a SWF file that contains the corresponding ActionScript objects. For
example, Flex provides the ActionScript Button class that defines the Flex Button control. In
MXML, you create a Button control by using the following MXML statement:
When you declare a control using an MXML tag, you create an instance object of that class.
This MXML statement creates a Button object, and initializes the label property of the
Button object to the string Submit.
An MXML tag that corresponds to an ActionScript class uses the same naming conventions as
the ActionScript class. Class names begin with an uppercase letter, and uppercase letters
separate the words in class names. Every MXML tag attribute corresponds to a property of the
ActionScript object, a style applied to the object, or an event listener for the object. For a
complete description of the Flex class library and MXML tag syntax, see theAdobe Flex 2
Language Reference.
http://../buildapps/compilers.pdfhttp://../buildapps/logging.pdfhttp://../buildapps/logging.pdfhttp://../buildapps/compilers.pdf -
8/14/2019 flex2 devguide
25/1853
Developing applications 25
Understanding a Flex application structure
You can write an MXML application in a single file or in multiple files. You typically define a
main file that contains the tag. From within your main file, you can then
reference additional files written in MXML, ActionScript, or a combination of the two
languages.
A common coding practice is to divide your Flex application into functional units, or
modules, where watch module performs a discrete task. In Flex, you can divide your
application into separate MXML files and ActionScript files, where each file corresponds to a
different module. By dividing your application into modules you provide many benefits,
including the following:
Ease of development Different developers or development groups can develop and debug
modules independently of each other.
Reusability You can reuse modules in different application so that you do not have toduplicate your work.
Maintainability You can isolate and debug errors faster than you could if you application
was developed in a single file.
In Flex, a module corresponds to a custom component implement either in MXML or in
ActionScript. These custom components can reference other custom components. There is no
restriction on the level of nesting of component references in Flex. You define your
components as required by your application.
Developing applicationsMXML development is based on the same iterative process used for other types of webapplication files such as HTML, JavaServer Pages (JSP), Active Server Pages (ASP), and
ColdFusion Markup Language (CFML). Developing a useful Flex application is as easy as
opening your favorite text editor, typing some XML tags, saving the file, requesting the files
URL in a web browser, and then repeating the same process.
Flex also provides tools for code debugging; for more information, see Chapter 12, Using the
Command-Line Debugger, in Building and Deploying Flex 2 Applications.
http://../buildapps/debugging.pdfhttp://../buildapps/debugging.pdfhttp://../buildapps/debugging.pdfhttp://../buildapps/debugging.pdf -
8/14/2019 flex2 devguide
26/1853
26 Developing Applications in MXML
Laying out a user interface using containers
In the Flex model-view design pattern, user interface components represent the view. The
MXML language supports two types of user interface components: controls and containers.
Controls are form elements, such as buttons, text fields, and list boxes. Containers are
rectangular regions of the screen that contain controls and other containers.
You use container components for laying out a user interface, and for controlling user
navigation through the application. Examples of layout containers include the HBox
container for laying out child components horizontally, the VBox container for laying out
child components vertically, and the Grid container for laying out child components in rows
and columns. Examples of navigator containers include the TabNavigator container for
creating tabbed panels, the Accordion navigator container for creating collapsible panels, and
the ViewStacknavigator container for laying out panels on top of each other.
The Container class is the base class of all Flex container classes. Containers that extend the
Container class add their own functionality for laying out child components. Typical
properties of a container tag include id, width, and height. For more information about the
standard Flex containers, see Chapter 13, Introducing Containers, on page 491.
The following image shows an example Flex application that contains a List control on the left
side of the user interface and a TabNavigator container on the right side. Both controls are
enclosed in a Panel container:
Use the following code to implement this application:
List control TabNavigator container
Panel container
-
8/14/2019 flex2 devguide
27/1853
Developing applications 27
Item 1Item 2Item 3
The List control and TabNavigator container are laid out side by side because they are in an
HBox container. The controls in the TabNavigator container are laid out from top to bottom
because they are in a VBox container.
For more information about laying out user-interface components, see Chapter 6, Using Flex
Visual Components, on page 133.
Adding user interface controls
Flex includes a large selection of user interface components, such as Button, TextInput, and
ComboBox controls. After you define the layout and navigation of your application by using
container components, you add the user interface controls.
The following example contains an HBox (horizontal box) container with two child controls,
a TextInput control and a Button control. An HBox container lays out its children
horizontally.
-
8/14/2019 flex2 devguide
28/1853
28 Developing Applications in MXML
Typical properties of a control tag include id, width, height, fontSize, color, event
listeners for events such as click and change, and effect triggers such as showEffect androllOverEffect. For information about the standard Flex controls, see Chapter 9, Using
Controls, on page 259.
Using the id property with MXML tags
With a few exceptions (see MXML tag rules on page 54), an MXML tag has an optional id
property, which must be unique within the MXML file. If a tag has an id property, you can
reference the corresponding object in ActionScript.
In the following example, results from a web service request are traced in the writeToLog
function:
...
trace(myText.text);}
]]>
This code causes the MXML compiler to autogenerate a public variable named myText that
contains a reference to that TextInput instance. This autogenerated variable lets you access the
component instance in ActionScript. You can explicitly refer to the TextInput controls
instance with its id instance reference in any ActionScript class or script block. By referring to
a components instance, you can modify its properties and call its methods.
Because each id value in an MXML file is unique, all objects in a file are part of the same flat
namespace. You do not qualify an object by referencing its parent with dot notation, as in
myVBox.myText.text.For more information, see Referring to Flex components on page 60.
-
8/14/2019 flex2 devguide
29/1853
Developing applications 29
Using XML namespaces
In an XML document, tags are associated with a namespace. XML namespaces let you refer to
more than one set of XML tags in the same XML document. The xmlns property in an
MXML tag specifies an XML namespace. To use the default namespace, specify no prefix. To
use additional tags, specify a tag prefix and a namespace. For example, the xmlns property in
the following tag indicates that tags in the MXML namespace use the
prefix mx:. The Universal Resource Identifier (URI) for the MXML namespace is http://
www.adobe.com/2006/mxml.
XML namespaces give you the ability to use custom tags that are not in the MXML
namespace. The following example shows an application that contains a custom tag called
CustomBox. The namespace value containers.boxes.* indicates that an MXML
component called CustomBox is in the containers/boxes directory.
The containers/boxes directory can be a subdirectory of the directory that contains the
application file, or it can be a subdirectory of one of the ActionScript source path directoriesassigned in the flex-config.xml file. If copies of the same file exist in both places, Flex uses the
file in the application file directory. The prefix name is arbitrary, but it must be used as
declared.
When using a component contained in a SWC file, the package name and the namespace
must match, even though the SWC file is in the same directory as the MXML file that uses it.
A SWC file is an archive file for Flex components. SWC files make it easy to exchange
components among Flex developers. You need only exchange a single file, rather than the
MXML or ActionScript files and images and other resource files. Also, the SWF file inside a
SWC file is compiled, which means that the code is obfuscated from casual view. For more
information on SWC files, see Chapter 9, Using the Flex Compilers, in Building andDeploying Flex 2 Applications.
http://../buildapps/compilers.pdfhttp://../buildapps/compilers.pdf -
8/14/2019 flex2 devguide
30/1853
30 Developing Applications inMXML
Using MXML to trigger run-time code
Flex applications are driven by run-time events, such as when a user selects a Button control.
You can specifyevent listeners, which consist of code for handling run-time events, in the event
properties of MXML tags. For example, the tag has a click event property in
which you can specify ActionScript code that executes when the Button control is clicked at
run time. You can specify simple event listener code directly in event properties. To use more
complex code, you can specify the name of an ActionScript function defined in an
tag.
The following example shows an application that contains a Button control and a TextArea
control. The click property of the Button control contains a simple event listener that sets
the value of the TextArea controls text property to the text Hello World.
The following image shows the application rendered in a web browser window:
The following example shows the code for a version of the application in which the event
listener is contained in an ActionScript function in an tag:
private function hello():void {textarea1.text="Hello World";}
]]>
-
8/14/2019 flex2 devguide
31/1853
Developing applications 31
For more information about using ActionScript with MXML, see Chapter 4, Using
ActionScript, on page 55.
Binding data between components
Flex provides simple syntax for binding the properties of components to each other. In the
following example, the value inside the curly braces ({ }) binds the text property of a
TextArea control to the text property of a TextInput control. When the applicationinitializes, both controls display the text Hello. When the user clicks the Button control, both
controls display the text Goodbye.
The following image shows the application rendered in a web browser window after the user
clicks the Submit button:
As an alternative to the curly braces ({ }) syntax, you can use the tag, in which
you specify the source and destination of a binding. For more information about data
binding, see Chapter 39, Storing Data, on page 1269.
-
8/14/2019 flex2 devguide
32/1853
32 Developing Applications in MXML
Using RPC services
Remote-procedure-call (RPC) services let your application interact with remote servers to
provide data to your applications, or for your application to send data to a server.
Flex is designed to interact with several types of RPC services that provide access to local and
remote server-side logic. For example, a Flex application can connect to a web service that uses
the Simple Object Access Protocol (SOAP), a Java object residing on the same application
server as Flex using AMF, or an HTTP URL that returns XML. AMF is the protocol used in
Flash Remoting MX.
The MXML components that provide data access are called RPC components. MXML
includes the following types of RPC components:
WebService provides access to SOAP-based web services
HTTPService provides access to HTTP URLs that return data
RemoteObject provides access to Java objects using the AMF protocol (Flex Data Servicesonly)
The following example shows an application that calls a web service that provides weather
information, and displays the current temperature for a given ZIP code. The application
binds the ZIP code that a user enters in a TextInput control to a web service input parameter.
It binds the current temperature value contained in the web service result to a TextArea
control.
{zip.text}
-
8/14/2019 flex2 devguide
33/1853
Developing applications 33
The following image shows the application rendered in a web browser window:
For more information about using RPC services, see Chapter 44, Understanding RPCComponents, on page 1399.
Storing data in a data model
You can use a data model to store application-specific data. Adata modelis an ActionScript
object that provides properties for storing data, and optionally contains methods for
additional functionality. Data models provide a way to store data in the Flex application
before it is sent to the server, or to store data sent from the server before using it in the
application.
-
8/14/2019 flex2 devguide
34/1853
34 Developing Applications inMXML
You can declare a simple data model that does not require methods in an ,
, or tag. The following example shows an application that contains
TextInput controls for entering personal contact information and a data model, represented
by the tag, for storing the contact information:
{homePhoneInput.text}{cellPhoneInput.text}{emailInput.text}
Validating dataYou can use validator components to validate data stored in a data model, or in a Flex user-
interface component. Flex includes a set of standard validator components. You can also
create your own.
The following example uses validator components for validating that the expected type of data
is entered in the TextInput fields. Validation is triggered automatically when the users edits a
TextInput control. If validation fails, the user receives immediate visual feedback.
-
8/14/2019 flex2 devguide
35/1853
Developing applications 35
{homePhoneInput.text}{cellPhoneInput.text}{emailInput.text}
The following image shows the application rendered in a web browser window:
For more information about using data models, see Chapter 39, Storing Data, on
page 1269. For more information on validators, see Chapter 40, Validating Data, on
page 1281.
Formatting data
Formatter components are ActionScript components that perform a one-way conversion of
raw data to a formatted string. They are triggered just before data is displayed in a text field.
Flex includes a set of standard formatters. You can also create your own formatters. Thefollowing example shows an application that uses the standard ZipCodeFormatter component
to format the value of a variable:
-
8/14/2019 flex2 devguide
36/1853
36 Developing Applications in MXML
]]>
The following image shows the application rendered in a web browser window:
For more information about formatter components, see Chapter 41, Formatting Data, on
page 1327.
Using Cascading Style Sheets (CSS)
You can use style sheets based on the Cascading Style Sheets (CSS) standard to declare stylesto Flex components. The MXML tag contains inline style definitions or a
reference to an external file that contains style definitions.
The tag must be an immediate child of the root tag of the MXML file. You can
apply styles to an individual component using a class selector, or to all components of a
certain type using a type selector.
The following example defines a class selector and a type selector in the tag. Both
the class selector and the type selector are applied to the Button control:
.myClass { color: Red } /* class selector */Button { font-size: 18pt} /* type selector */
-
8/14/2019 flex2 devguide
37/1853
Developing applications 37
A class selector in a style definition, defined as a label preceded by a period, defines a new
named style, such as myClass in the preceding example. After you define it, you can apply the
style to any component using the styleName property. In the preceding example, you apply
the style to the Button control to set the font color to red.
A type selector applies a style to all instances of a particular component type. In the preceding
example, you set the font size for all Button controls to 18 points.
The following image shows the application rendered in a web browser window:
For more information about using Cascading Style Sheets, see Chapter 18, Using Styles and
Themes, on page 697.
Using skins
Skinningis the process of changing the appearance of a component by modifying or replacing
its graphical elements. These graphical elements can be made up of images or the output of
drawing API methods. They are known as symbols. You can reskin Flex components without
changing their functionality. A file that contains new skins for use in your Flex applications is
known as a theme.
There are two types of skins in Flex: graphical and programmatic. Graphical skinsare Adobe
Flash symbols that you can change directly in the Macromedia Flash Professional 8 from
Adobe authoring environment. You drawprogrammatic skinsby using ActionScript
statements and define these skins in class files. Sometimes it is more advantageous to reskin a
component graphically, and in some cases it makes more sense to reskin a component
programmatically. You cannot combine graphical and programmatic skins in a single theme
file.
For more information about using skins, see Chapter 20, Using Skins, on page 805.
-
8/14/2019 flex2 devguide
38/1853
38 Developing Applications in MXML
Using effects
An effectis a change to a component that occurs over a brief period of time. Examples of
effects are fading, resizing, and moving a component. An effect is combined with a trigger,
such as a mouse click on a component, a component getting focus, or a component becoming
visible, to form a behavior. In MXML, you apply effects as properties of a control or container.
Flex provides a set of built-in effects with default properties.
The following example shows an application that contains a Button control with its
rollOverEffect property set to use theWipeLeft effect when the user moves the mouse over
it:
For more information about effects, see Chapter 17, Using Behaviors, on page 649.
Defining custom MXML components
Custom MXML components are MXML files that you create and use as custom MXML tags
in other MXML files. They encapsulate and extend the functionality of existing Flex
components. Just like MXML application files, MXML component files can contain a mix of
MXML tags and ActionScript code. The name of the MXML file becomes the class name
with which you refer to the component in another MXML file.
The following example shows a custom ComboBox control that is prepopulated with list
items:
NOTE
You cannot access custom MXML component URLs directly in a web browser.
-
8/14/2019 flex2 devguide
39/1853
Developing applications 39
DogsCatsMice
The following example shows an application that uses the MyComboBox component as a
custom tag. The value * assigns the localnamespace to the current directory.
The following image shows the application rendered in a web browser window:
For more information about MXML components, see Chapter 7, Creating Simple MXML
Components, in Creating and Extending Flex 2 Components.
You can also define custom Flex components in ActionScript. For more information, see
Chapter 9, Creating Simple Visual Components in ActionScript, in Creating and Extending
Flex 2 Components.
http://../createcomps/mxmlcomponents.pdfhttp://../createcomps/mxmlcomponents.pdfhttp://../createcomps/ascomponents.pdfhttp://../createcomps/mxmlcomponents.pdfhttp://../createcomps/mxmlcomponents.pdfhttp://../createcomps/ascomponents.pdf -
8/14/2019 flex2 devguide
40/1853
40 Developing Applications inMXML
-
8/14/2019 flex2 devguide
41/1853
41
3CHAPTER 3
MXML Syntax
MXML is an XML language that you use to lay out user-interface components for Adobe Flex
applications. This topic describes basic MXML syntax.
Contents
Basic MXML syntax. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41Setting component properties. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Basic MXML syntaxMost MXML tags correspond to ActionScript 3.0 classes or properties of classes. Flex parses
MXML tags and compiles a SWF file that contains the corresponding ActionScript objects.
ActionScript 3.0 uses syntax based on the ECMAScript edition 4 draft language specification.
ActionScript 3.0 includes the following features:
Formal class definition syntax
Formal packages structure
Typing of variables, parameters, and return values (compile-time only)
Implicit getters and setters that use the get and set keywords
Inheritance
Public and private members
Static members
Cast operator
For more information about ActionScript 3.0, see Chapter 7, Using ActionScript, on
page 91.
http://../getstarted/usingas.pdfhttp://../getstarted/usingas.pdfhttp://../getstarted/usingas.pdfhttp://../getstarted/usingas.pdf -
8/14/2019 flex2 devguide
42/1853
42 MXML Syntax
Naming MXML files
MXML filenames must adhere to the following naming conventions:
Filenames must be valid ActionScript identifiers, which means they must start with aletter or underscore character (_), and they can only contain letters and numbers and
underscore characters after that.
Filenames must not be the same as ActionScript class names, component id values, or the
word application. Do not use filenames that match the names of MXML tags that are in
the mx namespace.
Filenames must end with a lowercase .mxml file extension.
Using tags that represent ActionScript classes
An MXML tag that corresponds to an ActionScript class uses the same naming conventions as
the ActionScript class. Class names begin with a capital letter, and capital letters separate the
words in class names. For example, when a tag corresponds to an ActionScript class, its
properties correspond to the properties and events of that class.
Setting component propertiesIn MXML, a component property uses the same naming conventions as the corresponding
ActionScript property. A property names begins with a lowercase letter, and capital letters
separate words in the property names.
You can set most component properties as tag attributes, in the form:
You can set all component properties as child tags, in the form:
5025Hello World
You often use child tags when setting the value of a property to a complex Object because it is
not possible to specify a complex Object as the value of tag attribute. In the following
example, you use child tags to set the data provider of a ComboBox control of an
ArrayCollection object:
AK
-
8/14/2019 flex2 devguide
43/1853
Setting component properties 43
ALAR
The one restriction on setting properties that use child tags is that the namespace prefix of a
child tag, mx: in the previous example, must match the namespace prefix of the component
tag.
Each of a components properties is one of the following types:
Scalar properties, such as a number or string
Array of scalar values, such as an array of numbers or strings
ActionScript object
Array of ActionScript objects
ActionScript properties XML data
Adobe recommends that you assign scalar values using tag attributes, and that you assign
complex types, such as ActionScript objects, by using child tags.
Setting scalar properties
You usually specify the value of a scalar property as a property of a component tag, as the
following example shows:
Setting properties using constants
The valid values of many component properties are defined by static constants, where these
static constants are defined in an ActionScript class. In MXML, you can either use the static
constant to set the property value, or use the value of the static constant, as the following
example shows:
...
...
-
8/14/2019 flex2 devguide
44/1853
44 MXML Syntax
The HBox container defines a property named horizontalScrollPolicy which defines the
operation of the containers horizontal scroll bar. In this example, you explicitly set the
horizontalScrollPolicy property to disable the horizontal scroll bar.
In the first example, you set the horizontalScrollPolicy property using a static constantnamed OFF, which is defined in the ScrollPolicy class. In MXML, you must use data binding
syntax when setting a property value to a static constant. The advantage of using the static
constant is that the Flex compiler recognizes incorrect property values, and issues an error
message at compile time.
Alternatively, you can set the value of the horizontalScrollPolicy property to the value of
the static constant. The value of the OFF static constant is "off". When you use the value of
the static constant to set the property value, the Flex compiler cannot determine if you used
an unsupported value. If you incorrectly set the property, you will not know until you get a
run-time error.
In ActionScript, you should always use static constants to set property values, as the followingexample shows:
var myHBox:HBox = new HBox();myHBox.horizontalScrollPolicy=ScrollPolicy.OFF;
Setting the default property
Many Flex components define a single default property. The default propertyis the MXML tag
property that is implicit for content inside of the MXML tag if you do not explicitly specify a
property. For example, consider the following MXML tag definition:
anything here
If this tag defines a default property named default_property, the preceding tag definition
is equivalent to the following code:
anything here
It is also equivalent to the following code:
-
8/14/2019 flex2 devguide
45/1853
Setting component properties 45
The default property provides a shorthand mechanism for setting a single property. For a
ComboBox, the default property is the dataProvider property. Therefore the two
ComboBox definitions in the following code are equivalent:
AKALAR
AKALAR
Not all Flex components define a default property. SeeAdobe Flex 2 Language Referencefor
each component to determine its default property.
You can also define a default property when you create a custom component. For moreinformation, see Chapter 5, Using Metadata Tags in Custom Components, in Creating and
Extending Flex 2 Components.
Escaping characters using the backslash character
When setting a property value in MXML, you can escape a reserved character by prefixing it
with the backslash character, \, as the following example shows:
http://../createcomps/metadata.pdfhttp://../createcomps/metadata.pdf -
8/14/2019 flex2 devguide
46/1853
46 MXML Syntax
In this example, you want to use literal curly brace characters ({ }) in a text string. But Flex
uses curly braces to indicate a data binding operation. Therefore, you prefix each curly brace
with the backslash character to cause the MXML compiler to interpret them as literal
characters.
Setting String properties using the backslashcharacter
The MXML compiler automatically escapes the backslash character in MXML when the
character is part of the value specified to a property of type String. Therefore, it always
converts "\" to "\\".
This is necessary because the ActionScript compiler recognizes "\\" as the character sequence
for a literal "\" character, and strips out the leading backslash when it initializes the property
value.
Including a newline character in a String value
For properties of type String, you can insert a newline character in the String in two ways:
By inserting the code in your String value in MXML
By inserting "\n" in an ActionScript String variable used to initialize the MXML property
To use the code to insert a newline character, include that code in the property value inMXML, as the following example shows:
To use an ActionScript String variable to insert a newline character, create an ActionScript
variable, and then use data binding to set the property in MXML, as the following example
shows:
[Bindable]public var myText:String = "Display" + "\n" + "Content";
]]>
In this example, you set the text property of the TextArea control to a value that includes a
newline character.
NOTE
Do not use the backslash character (\) as a separator in the path to an application asset.
You should always use a forward slash character (/) as the separator.
-
8/14/2019 flex2 devguide
47/1853
Setting component properties 47
Notice that this example includes the [Bindable] metadata tag before the property
definition. This metadata tag specifies that the myText property can be used as the source of a
data binding expression. Data binding automatically copies the value of a source property of
one object to the destination property of another object at run time when the sourceproperty changes.
If you omit this metadata tag, the compiler issues a warning message specifying that the
property cannot be used as the source for data binding. For more information, see Chapter
38, Binding Data, on page 1245.
Setting Arrays of scalar values
When a class has a property that takes an Array as its value, you can represent the property in
MXML using child tags. The component in the following example has a dataProvider
property that contains an Array of numbers:
940621485053402
The and tags around the Array elements are optional. Therefore,
you can also write this example as the following example shows:
940621485053402
In this example, since the data type of the dataProvider property is defined as Array, Flex
automatically converts the three number definitions into a three-element array.
Component developers may have specified additional information within the component
definition that defines the data type of the Array elements. For example, if the developer
specified that the dataProvider property only supports String elements, then this examplewould cause a compiler error because you specified numbers to it. TheAdobe Flex 2 Language
Referencedocuments the Array properties that define a required data type for the Array
elements.
-
8/14/2019 flex2 devguide
48/1853
48 MXML Syntax
Setting Object properties
When a component has a property that takes an object as its value, you can represent the
property in MXML using a child tag with tag attributes, as the following example shows:
The following example shows an ActionScript class that defines an Address object. This object
is used as a property of the PurchaseOrder component in the next example.
class Address{
public var name:String;public var street:String;
public var city:String;public var state:String;public var zip:Number;
}
The following example shows an ActionScript class that defines a Purcha