G E T T I N G S T A R T E D W I T H Adobe Flex Amitava Kundu, Charu Agarwal, Anushka Chandrababu, Mukul Kumar, Karthik Ramanarayanan, Raul F. Chong F I R S T E D I T I O N A book for the community by the community 4 Getting Started with Adobe Flex First Edition (May 2010) © Copyright IBM Corporation 2010. All rights reserved. IBM Canada 8200 Warden Avenue Markham, ON L6G 1C7 Canada Notices This information was developed for products and services offered in the U.S.A. IBM may not offer the products, services, or features discussed in this document in other countries. Consult your local IBM representative for information on the products and services currently available in your area. Any reference to an IBM product, program, or service is not intended to state or imply that only that IBM product, program, or service may be used. Any functionally equivalent product, program, or service that does not infringe any IBM intellectual property right may be used instead. However, it is the user's responsibility to evaluate and verify the operation of any non-IBM product, program, or service. IBM may have patents or pending patent applications covering subject matter described in this document. The furnishing of this document does not grant you any license to these patents. You can send license inquiries, in writing, to: IBM Director of Licensing IBM Corporation North Castle Drive Armonk, NY 10504-1785 U.S.A. For license inquiries regarding double-byte character set (DBCS) information, contact the IBM Intellectual Property Department in your country or send inquiries, in writing, to: Intellectual Property Licensing Legal and Intellectual Property Law IBM Japan, Ltd. 3-2-12, Roppongi, Minato-ku, Tokyo 106-8711 The following paragraph does not apply to the United Kingdom or any other country where such provisions are inconsistent with local law: INTERNATIONAL BUSINESS MACHINES CORPORATION PROVIDES THIS PUBLICATION "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF NON-INFRINGEMENT, MERCHANTABILITY OR FITNESS FOR A PARTICULAR PURPOSE. Some states do not allow disclaimer of express or implied warranties in certain transactions, therefore, this statement may not apply to you. This information could include technical inaccuracies or typographical errors. Changes are periodically made to the information herein; these changes will be incorporated in new editions of the publication. IBM may make improvements and/or changes in the product(s) and/or the program(s) described in this publication at any time without notice. Any references in this information to non-IBM Web sites are provided for convenience only and do not in any manner serve as an endorsement of those Web sites. The materials at those Web sites are not part of the materials for this IBM product and use of those Web sites is at your own risk. IBM may use or distribute any of the information you supply in any way it believes appropriate without incurring any obligation to you. 6 Getting Started with Adobe Flex The licensed program described in this document and all licensed material available for it are provided by IBM under terms of the IBM Customer Agreement, IBM International Program License Agreement or any equivalent agreement between us. Any performance data contained herein was determined in a controlled environment. Therefore, the results obtained in other operating environments may vary significantly. Some measurements may have been made on development-level systems and there is no guarantee that these measurements will be the same on generally available systems. Furthermore, some measurements may have been estimated through extrapolation. Actual results may vary. Users of this document should verify the applicable data for their specific environment. Information concerning non-IBM products was obtained from the suppliers of those products, their published announcements or other publicly available sources. IBM has not tested those products and cannot confirm the accuracy of performance, compatibility or any other claims related to non-IBM products. Questions on the capabilities of non-IBM products should be addressed to the suppliers of those products. All statements regarding IBM's future direction or intent are subject to change or withdrawal without notice, and represent goals and objectives only. This information contains examples of data and reports used in daily business operations. To illustrate them as completely as possible, the examples include the names of individuals, companies, brands, and products. All of these names are fictitious and any similarity to the names and addresses used by an actual business enterprise is entirely coincidental. COPYRIGHT LICENSE: This information contains sample application programs in source language, which illustrate programming techniques on various operating platforms. You may copy, modify, and distribute these sample programs in any form without payment to IBM, for the purposes of developing, using, marketing or distributing application programs conforming to the application programming interface for the operating platform for which the sample programs are written. These examples have not been thoroughly tested under all conditions. IBM, therefore, cannot guarantee or imply reliability, serviceability, or function of these programs. The sample programs are provided "AS IS", without warranty of any kind. IBM shall not be liable for any damages arising out of your use of the sample programs. References in this publication to IBM products or services do not imply that IBM intends to make them available in all countries in which IBM operates. If you are viewing this information softcopy, the photographs and color illustrations may not appear. Adobe product screenshot(s) reprinted with permission from Adobe Systems Incorporated. Trademarks IBM, the IBM logo, and ibm.com are trademarks or registered trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at “Copyright and trademark information” at www.ibm.com/legal/copytrade.shtml. Adobe, the Adobe logo, Flex, Flex Builder, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. UNIX is a registered trademark of The Open Group in the United States and other countries. Other company, product, or service names may be trademarks or service marks of others. 9 Table of Contents Preface 14 Who should read this book? 14 How is this book structured? 14 A book for the community 15 Conventions 15 What’s next? 15 About the Authors 17 Contributors 19 Acknowledgements 19 Chapter 1 – Introduction to Adobe Flex 20 1.1 A brief history of Adobe Flex 20 1.2 Pros and cons of Flex applications 25 1.3 Versions and editions of Adobe Flex 26 1.3.1 Adobe Flex 3 SDK 26 1.3.2 Adobe Flex Builder 3 26 1.3.3 Adobe Data Services 27 1.4 The Flex Community 27 1.4.1 Developer Resources 27 1.4.2 Discussion Forums 28 1.4.3 Adobe Flex Blogs 28 1.5 Comparing Adobe Flex with similar products 28 1.5.1 Adobe Flex and HTML/JavaScript/Ajax 28 1.5.2 Adobe Flex and Flash IDE 29 1.5.3 Adobe Flex and Java/JavaFX 29 1.5.4 Adobe Flex and Java Server Faces (JSF) 29 1.5.5 Adobe Flex and Microsoft Silverlight 30 1.6 Summary 30 1.7 Review questions 30 Chapter 2 – Installing Flex 32 2.1 Installing Flex: The big picture 32 2.2 Installing Flex using the setup wizard 33 2.2.1 Installing Eclipse 33 2.2.2 Installing Flex Builder 33 2.3 Launching Flex Builder 38 2.4 Developing your first Flex application 40 2.4.1 Building and running the "Hello Flex" application 40 2.4.2 Debugging the Flex application 50 2.5 Exercises 53 2.6 Summary 53 2.7 Review questions 53 Chapter 3 - Introduction to MXML and ActionScript 55 3.1 MXML and ActionScript – the Big Picture 55 3.2 MXML 57 10 Getting Started with Adobe Flex 3.2.1 XML 57 3.2.2 Anatomy of an XML tag 58 3.2.3 Namespaces in MXML 59 3.3 ActionScript 3 59 3.3.1 Inline ActionScript 59 3.3.2 MXML Scripts 60 3.3.3 ActionScript Variables and data types 60 3.3.4 ActionScript Classes and Objects 61 3.3.5 Functions and Access modifiers 63 3.3.6 [Bindable] Tag 64 3.3.7 MXML and ActionScript mapping 65 3.3.8 Events 67 3.4 Exercises 69 3.5 Summary 72 3.6 Review Questions 72 Chapter 4 - Working with Flex components 75 4.1 Working with Flex components: The big picture 75 4.2 Components 78 4.3 Containers 79 4.3.1 Application containers 79 4.3.2 Layout containers 80 4.3.3 Navigation containers 81 4.4 Controls 83 4.4.1 Text-based controls 83 4.4.2 Basic controls 85 4.4.3 Menu-based controls 89 4.4.4 Data-driven controls 89 4.5 Exercises 90 4.6 Summary 94 4.7 Review questions 94 Chapter 5 - Binding data between controls 97 5.1 Data binding – The big picture 97 5.2 Ways to achieve data binding 98 5.2.1 Curly braces ({}) syntax 98 5.2.2 ActionScript expressions in curly braces ({}) 98 5.2.3 <mx:binding> tag in MXML 99 5.2.4 Bindings in ActionScript 99 5.3 Data storage structures and mechanisms 100 5.3.1 Array 100 5.3.2 XML 101 5.3.3 XMLList 101 5.3.4 Flex data management classes 102 5.4 Data Driven UI Controls 103 5.4.1 Scrolling List controls 104 5.4.2 DataGrid control 106 [...]... 26 Getting Started with Adobe Flex 1.3 Versions and editions of Adobe Flex As indicated in an earlier section, Adobe Flex started with version 1.0, then it moved to 1.5, 2.0 and 3.0 In this book we focus on Adobe Flex 3.0 There are multiple components which make up Adobe Flex 3.0 1.3.1 Adobe Flex 3 SDK You can create and deploy Flex applications using only the Open Source Flex 3 SDK or the Free Adobe. .. and great information  Flex Search – http://flexsearch.org: This is a custom Flex search engine for the Flex community 28 Getting Started with Adobe Flex 1.4.2 Discussion Forums The following list is a list of discussion forums for Adobe Flex These discussion forums can help in resolving issues which are commonly faced  Flex Coders – http://www .adobe. com/go/flexcoders  Flex Component Development... platform to build RIAs, similar to Adobe Flex With Adobe Flex, we can still use Java as the backend and use the more popular Flash for the frontend Being familiar with XML and JavaScript, Web Developers will find it easy to work with Adobe Flex Java developers familiar with Eclipse should also find it easy to work with Adobe Flex builder as it is based on Eclipse Java, like Flex, allows an application to... to the free ebook Getting Started with Eclipse, which is also part of this book series 2.2.2 Installing Flex Builder Follow these steps to install Flex Builder: 1 You can either install Flex Builder plug-in from the setup CD/DVD or download the 60 days trial version from 34 Getting Started with Adobe Flex http://www .adobe. com/cfusion/entitlement/index.cfm?e=flexbuilder3.To install Flex Builder plug-in,... accessed at http://www .adobe. com/support/documentation/en /flex/ 1.4.1 Developer Resources The following list provides popular developer resources for Adobe Flex:  Flex. org – http:/ /flex. org/ This is the community site for Flex Developers and has links to great resources for developers  Adobe Flex Developer Center – http://www .adobe. com/devnet /flex/ This is the official Adobe Flex Community center... capable of sending and receiving XML data In this chapter you will learn about:  A brief history of Adobe Flex  Versions and releases of Adobe Flex  The Adobe Flex community and resources  Products competing with Adobe Flex 1.1 A brief history of Adobe Flex Before describing the history of Adobe Flex, you need to understand the evolution of application development that led to the development of... http://tech.groups.yahoo.com/group/flexcomponents  Flex Support Forums – http://www .adobe. com/cfusion/webforums/forum/index.cfm?forumid=60  Flex Components – http://www .adobe. com/go/flexcomponents  Flex Builder 3 Adobe Forum – http://www .adobe. com/cfusion/webforums/forum/categories.cfm?forumid=72&catid= 651&entercat=y 1.4.3 Adobe Flex Blogs With the number of Flex developers growing significantly... plug-in for Eclipse Adobe Flex 2.0 offered a way to create RIAs without incurring expensive licensing fees In February 2008 Adobe Flex 3 was released Adobe Flex 3 added more functionality to Flex Builder, such as refactoring and enhanced styling support as well as new data visualization components in the Flex Framework Adobe Flex 3 is also the official opensource release of the Flex SDK and Flex compiler... variable name has more than one word, it is joined with an underscore For example: CREATE TABLE table_name What’s next? We recommend you to review the following books in this book series for more details about related topics:  Getting started with DB2 Express-C  Getting started with IBM Data Studio for DB2  Getting started with Eclipse  Getting started with Web 2.0 The following figure shows all the... Edition 3 Adobe Flex Builder 3 Standard Edition Chapter 1 – Introduction to Adobe Flex 27 Coding Tools Working with Data Browser Integration Table 1.1 – Feature Comparision for different Editions of Adobe Flex Note: In this book all the examples and code snippets are created and tested using Adobe Flex Builder 3.0 Professional Edition and Eclipse SDK version 3.3.2 1.3.3 Adobe Data Services Adobe offers . Introduction to Adobe Flex 20 1.1 A brief history of Adobe Flex 20 1.2 Pros and cons of Flex applications 25 1.3 Versions and editions of Adobe Flex 26 1.3.1 Adobe Flex 3 SDK 26 1.3.2 Adobe Flex Builder. about related topics:  Getting started with DB2 Express-C  Getting started with IBM Data Studio for DB2  Getting started with Eclipse  Getting started with Web 2.0 The following figure. brief history of Adobe Flex  Versions and releases of Adobe Flex  The Adobe Flex community and resources  Products competing with Adobe Flex 1.1 A brief history of Adobe Flex Before describing