Using Flex Builder Trademarks ActiveEdit, ActiveTest, Add Life to the Web, Afterburner, Aftershock, Andromedia, Allaire, Animation PowerPack, Aria, Attain, Authorware, Authorware Star, Backstage, Blue Sky Software, Blue Sky, Breeze, Bright Tiger, Captivate, Clustercats, ColdFusion, Contents Tab Composer, Contribute, Design In Motion, Director, Dream Templates, Dreamweaver, Drumbeat 2000, EDJE, EJIPT, Extreme 3D, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flex, Flex Builder, Fontographer, FreeHand, Generator, Help To Source, HomeSite, Hotspot Studio, HTML Help Studio, JFusion, JRun, Kawa, Know Your Site, Knowledge Objects, Knowledge Stream, Knowledge Track, LikeMinds, Lingo, Live Effects, MacRecorder Logo and Design, Macromedia, Macromedia Action!, Macromedia Central, Macromedia Flash, Macromedia M Logo and Design, Macromedia Spectra, Macromedia xRes Logo and Design, MacroModel, Made with Macromedia, Made with Macromedia Logo and Design, MAGIC Logo and Design, Mediamaker, Movie Critic, Open Sesame!, RoboDemo, RoboEngine JFusion, RoboHelp, RoboHelp Office, RoboInfo, RoboInsight, RoboPDF, 1-Step RoboPDF, RoboFlash, RoboLinker, RoboScreenCapture, ReSize, Roundtrip, Roundtrip HTML, Shockwave, Sitespring, Smart Publishing Wizard, Software Video Camera, SoundEdit, Titlemaker, UltraDev, Web Design 101, what the web can be, WinHelp, WinHelp 2000, WinHelp BugHunter, WinHelp Find+, WinHelp Graphics Locator, WinHelp Hyperviewer, WinHelp Inspector, and Xtra are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally. Third-Party Information This guide contains links to third-party websites that are not under the control of Macromedia, and Macromedia is not responsible for the content on any linked site. If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites. Copyright © 2004 Macromedia, Inc. All rights reserved. This manual may not be copied, photocopied, reproduced, translated, or converted to any electronic or machine-readable form in whole or in part without written approval from Macromedia, Inc. Notwithstanding the foregoing, the owner or authorized user of a valid copy of the software with which this manual was provided may print out one copy of this manual from an electronic version of this manual provided with the software for the sole purpose of learning to use such software by such owner or authorized user; provided, that no part of this manual may be printed out, reproduced, distributed, resold or transmitted for any other purposes, including without limitation, commercial purposes, such as selling copies of this documentation or for providing paid for support services Acknowledgments Senior Management: Sheila McGinn Project Management: Charles Nadeau Writing: Charles Nadeau Editing: Lisa Stanziano, Mary Ferguson, Rosana Francescato, Linda Adler Production Management: Patrice O'Neill Media Design and Production: John Francis, Adam Barnett, Aaron Begley Special thanks to Heidi Bauer-Williams, Gabe Chua, Larry McLister, Paul Gubbay, Brad Becker, David Lenoe, Lucian Beebe, Lori Hylan-Cho, Mark Shepherd, Tanya Dimalsky, Matthew Hoffberg, Jon Varese, Dave George, Brandon Purcell, Stephen Gilson and the Flex IMD team, the beta testers, and the entire Flex Builder engineering and QA teams. Second Edition: December 2004 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 CONTENTS CHAPTER 1: Getting Started with Flex Builder . . .......................... 5 Exploring the authoring environment . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Starting a new application in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Defining a site for the Flex Sample Apps application . . . . . . . . . . . . . . . . . . . . . . . 12 Getting help in Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 What you need to build Flex applications . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Typographical conventions of this guide . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 CHAPTER 2: Flex Builder Tutorials. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Tutorial: Setting up a development environment . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Tutorial: Creating a layout with Flex Builder . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 Tutorial: Building custom components with Flex Builder . . . . . . . . . . . . . . . . . . . 34 Tutorial: Binding components to data with Flex Builder . . . . . . . . . . . . . . . . . . . . 58 Next steps . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 CHAPTER 3: Creating, Coding, and Debugging Flex Files . . . . . . . . . . . . . . . . . . 75 Creating MXML or ActionScript files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Working with the code in Flex files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76 Testing and debugging Flex files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 CHAPTER 4: Building a Flex User Interface Visually . . . . . . . . . . . . . . . . . . . . . . 95 Customizing the Document window. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Laying out your user interface with MXML containers . . . . . . . . . . . . . . . . . . . . . 97 Adding Flex components to the user interface . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Repositioning Flex components. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99 Resizing Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100 Cutting, copying, and pasting Flex components . . . . . . . . . . . . . . . . . . . . . . . . . 100 Editing Flex component properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Applying CSS styles to Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102 Applying effects to Flex components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Assigning event handlers to components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114 3 CHAPTER 5: Working with Components . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117 Inserting controls and containers in an MXML file . . . . . . . . . . . . . . . . . . . . . . . 117 Creating MXML component files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 121 Synchronizing with custom components on the server . . . . . . . . . . . . . . . . . . . . 125 CHAPTER 6: Working with Data . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 127 129 129 136 Binding a control or container. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Editing a binding visually . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Working with Flex data models . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Working with Flex data services. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . APPENDIX A: Basic Flex Concepts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 About the Flex application model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Typical application development steps. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 About Flex files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 About Flex containers, components, and controls . . . . . . . . . . . . . . . . . . . . . . . . 148 About Flex data bindings. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 INDEX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 4 Contents CHAPTER 1 Getting Started with Flex Builder This chapter provides an overview of Macromedia Flex Builder and steps to get started developing Flex applications. Flex Builder is an integrated development environment (IDE) for Flex developers. Because it's tightly integrated with the Macromedia Flex server, the Flex application model, and the Flex programming languages, Flex Builder can improve the productivity of all members of your development team. This guide focuses on Flex Builder. If you're new to Flex, you may want to review Appendix A, "Basic Flex Concepts," on page 145. For in-depth information about Flex (as opposed to Flex Builder), see Developing Flex Applications Help and the Flex ActionScript and MXML API Reference Help. The following topics are covered in this chapter: · · · · · · "Exploring the authoring environment" on page 5 "Starting a new application in Flex Builder" on page 9 "Defining a site for the Flex Sample Apps application" on page 12 "Getting help in Flex Builder" on page 17 "What you need to build Flex applications" on page 18 "Typographical conventions of this guide" on page 20 Exploring the authoring environment The Flex Builder IDE lets you write, edit, debug, and preview MXML and ActionScript files, and includes the following features: The Start page provides links to quickly define a site, create and open files, and access useful information about Flex Builder. For example, you can take a quick tour, explore Flex samples, take tutorials, and learn about debugging in Flex Builder. 5 Design view (View > Design) lets you lay out and edit an MXML user interface visually. Design view has two modes: Expanded and Standard. In Expanded mode, you can easily insert, edit, position, or resize MXML components because Flex Builder adds temporary borders and padding around objects. In Standard mode, Flex Builder removes the borders and padding to give you a more accurate picture of how the MXML file will look in Macromedia Flash Player. Code view (View > Code) lets you work with code. MXML and ActionScript syntax is colorcoded and code hints assist you as you type. Design view tools such as the Insert bar, Tag inspector, and Data panel are also fully functional in Code view. The ActionScript debugging panels help you debug your code after setting breakpoints and switching to debug mode. The debugging panels include the Variables panel, the Watch panel, the Output panel, and the Call Stack panel. For more information, see "Debugging ActionScript" on page 87. The Network Monitor panel helps you monitor network traffic and data going back and forth between the client and the Flex server. For more information, see "Debugging applications by monitoring interactions with the server" on page 91. The Insert bar lets you rapidly insert Flex containers and components in Design view by clicking or dragging. The Insert bar also lets you rapidly insert their tags in Code view. Note: The Favorites tab found in Macromedia Dreamweaver is not supported in Flex Builder. 6 Chapter 1: Getting Started with Flex Builder The Tag inspector lets you set the properties of containers and components in the file. You can also use it to apply effects, specify event handlers, modify CSS styles, and create data bindings. The Tag inspector replaces the traditional Property inspector in Dreamweaver. While you can still use the Property inspector for editing HTML and other document types in Flex Builder, it is disabled when you work on MXML or ActionScript files. The Bindings panel in the Tag inspector lets you visually bind components, Flex data models, and Flex data services to other components, data models, and data services. After creating the binding, data can pass between the objects at runtime. Exploring the authoring environment 7 The Data panel lets you inspect the data services (such as web services) and data models in the current MXML file, as well as insert or delete services in the file. You can work in Design view, Code view, or both. To switch between Design and Code views: 1. Open any MXML file in Flex Builder by double-clicking the file in the Files panel (Window > Files). 2. If you're in Code view and you want to work in Design view, do one of the following: Click the Design button on the Document toolbar. Select View > Desig ...