Introduction

In March 2002, Macromedia coined the term rich Internet application. Back then, the idea felt somewhat futuristic, but all that has changed. Rich Internet applications (RIAs) are today’s reality.

Macromedia introduced Flex in 2004 so that developers could write web applications for the nearly ubiquitous Flash platform. These applications benefited from the improved design, usability, and portability that Flex made possible, dramatically changing the user experience. These features are a cornerstone of Web 2.0, a new generation of Internet applications focused on creativity and collaboration.

Since the introduction of Flex, Macromedia—and now Adobe—has released versions 1.5, 2, 3, and 4 of Flex. With each subsequent version, creating rich, compelling, intuitive applications has gotten easier, and the bar has been raised on users’ expectations of web applications. Countless organizations have discovered the benefits of Flex and have built and deployed applications that run on the Flash platform.

But Flex 1 and 1.5 were most definitely not mass market products. The pricing, lack of IDE, limited deployment options, and other factors meant that those early versions of Flex were targeted specifically for large and complex applications as well as for sophisticated developers and development. However, with the new releases of the Flex product line, all this has changed.

Flex 2 was released in 2006 and made Flex development a possibility for many more people, as it included a free software development kit (SDK). With the open sourcing of Flex 3, and the announcement of free versions of Flash Builder for students, Flex development is within the grasp of any developer with enough foresight to reach for it. The release of Flex 4 has made it even easier to build rich, efficient, cutting-edge applications. Among the many improvements of Flex 4 is the streamlining of the workflow between designer and developer, greatly easing the process of bringing intuitive, compelling designs to even more Flex applications.

Getting started with Flex is easy. Flex itself is composed of two languages: MXML, an XML-based markup language; and ActionScript, the language of Flash Player. MXML tags are easy to learn (especially when Flash Builder writes them for you). ActionScript has a steeper learning curve, but developers with prior programming and scripting experience will pick it up easily. But there is more to Flex development than MXML and ActionScript.

To be a successful Flex developer, you will need to understand a number of concepts, including the following:

• How Flex applications should be built (and how they should not)

• What the relationships between MXML and ActionScript are, and when to use each

• How to load data into a Flex application

• How to use the Flex components, and how to write your own

• What the performance implications are of the code you write

• Which practices you should employ to write code that is scalable, manageable, and reusable

Developing these skills is where this book comes in. As the authors, we have distilled our hard-earned Flex expertise into a series of lessons that will jump-start your own Flex development. Starting with the basics, and then incrementally introducing additional functionality and know-how, the author team guides your journey into the exciting world of RIAs, ensuring success every step of the way.

Flex is powerful, highly capable, fun, and incredibly addictive. And Adobe Flex 4: Training from the Source is the ideal tour guide on your journey to the next generation of application development.

Adobe Flex 4: Training from the Source is an update to the popular Adobe Flex 3: Training from the Source. It is our sincere intention that readers of the earlier book, as well those who are first exploring Flex with this book, will find this content compelling. Since the release of our previous book, the Flex SDK has been completely reworked. Among the many improvements are:

• Much greater efficiencies at run time from Flex applications

• A new component model that removes a lot of unnecessary code from applications, allowing them to be much smaller

• A greatly improved designer and developer workflow

• And much more

It’s an incredible time to be an RIA developer, and we hope that this book provides you with all the tools you need to get started with Flex.

Prerequisites

To make the most of this book, you should at the very least understand web terminology. This book isn’t designed to teach you anything more than Flex, so the better your understanding of the World Wide Web, the better off you’ll be. This book is written assuming that you are comfortable working with programming languages and that you are probably working with a server-side language such as Java, .NET, PHP, or ColdFusion. Although knowledge of server-side technologies is not required to succeed with this book, we invoke many comparisons and analogies to server-side web programming. This book is not intended as an introduction to programming or as an introduction to object-oriented programming (OOP). Experience with OOP is not required, although if you have no programming experience at all, you might find the materials too advanced.

Outline

As you’ll soon discover, this book mirrors real-world practices as much as possible. Where certain sections of the book depart from what would be considered a real-world practice, every attempt has been made to inform you. The exercises are designed to get you using the tools and the interface quickly so that you can begin to work on projects of your own with as smooth a transition as possible.

This curriculum should take approximately 28–35 hours to complete and includes the following lessons:

Lesson 1: Understanding Rich Internet Applications

Lesson 2: Getting Started

Lesson 3: Laying Out the Interface

Lesson 4: Using Simple Controls

Lesson 5: Handling Events

Lesson 6: Using Remote XML Data

Lesson 7: Creating Classes

Lesson 8: Using Data Binding and Collections

Lesson 9: Breaking the Application into Components

Lesson 10: Using DataGroups and Lists

Lesson 11: Creating and Dispatching Events

Lesson 12: Using DataGrids and Item Renderers

Lesson 13: Using Drag and Drop

Lesson 14: Implementing Navigation

Lesson 15: Using Formatters and Validators

Lesson 16: Customizing a Flex Application with Styles

Lesson 17: Customizing a Flex Application with Skins

Lesson 18: Creating Custom ActionScript Components

Who Is This Book For?

All the content of this book should work well for users of Flash Builder on any of its supported platforms.

The Project Application

Adobe Flex 4: Training from the Source includes many comprehensive tutorials designed to show you how to create a complete application using Flex 4. This application is an online grocery store that displays data and images and takes a user through the checkout process, ending just before the data would be submitted to a server.

By the end of the book, you will have built the entire application using Flex. You will begin by learning the fundamentals of Flex and understanding how you can use Flash Builder in developing the application. In the early lessons, you will use Design mode to begin laying out the application, but as you progress through the book and become more comfortable with the languages used by Flex, you will spend more and more time working in Source mode, which gives you the full freedom and flexibility of directly working with code. By the end of the book, you should be fully comfortable working with the Flex languages and may even be able to work without Flash Builder by using the open source Flex SDK and its command-line compiler.

Errata

Although we have made every effort to create a flawless application and book, occasionally we or our readers find problems. The errata for the book will be posted at www.flexgrocer.com.

Standard Elements in the Book

Each lesson in this book begins by outlining the major focus of the lesson at hand and introducing new features. Learning objectives and the approximate time needed to complete all the exercises are also listed at the beginning of each lesson. The projects are divided into exercises that demonstrate the importance of each skill. Every lesson builds on the concepts and techniques learned in the previous lessons.

Boldface text: Words that appear in boldface are terms that you must type while working through the steps in the lessons.

Boldface code: Lines of code that appear in boldface within code blocks help you easily identify changes in the block to be made in a specific exercise step.

Code in text: Code or keywords appear slightly different from the rest of the text so you can identify them.

Code block: To help you easily identify ActionScript, XML, and HTML code within the book, the code has been styled in a special font that’s different from the rest of the text. Single lines of ActionScript code that are longer than the margins of the page are wrapped to the next line. They are designated by an arrow at the beginning of the continuation of a broken line and are indented under the line from which they continue. For example:

Italicized text: Italics are used to show emphasis or to introduce new vocabulary.

Italics are also used for placeholders, which indicate that a name or entry may change depending on your situation. For example, in the path driveroot:/flex4tfs/flexgrocer, you would substitute the actual name of your root drive for the placeholder.

Menu commands and keyboard shortcuts: There are often multiple ways to perform the same task in Flash Builder. The different options will be pointed out in each lesson. Menu commands are shown with angle brackets between the menu names and commands: Menu > Command > Subcommand. Keyboard shortcuts are shown with a plus sign between the names of keys to indicate that you should press the keys simultaneously; for example, Shift+Tab means that you should press the Shift and Tab keys at the same time.

CD-ROM: The CD-ROM included with this book includes all the media files, starting files, and completed projects for each of the lessons in the book. These files are located in the start and complete directories. Lesson 1, “Understanding Rich Internet Applications,” does not include exercises. If you need to return to the original source material at any point, you can restore the FlexGrocer project. Some lessons include an intermediate directory, which contains files in various stages of development in the lesson. Other lessons may include an independent directory, which is used for small projects intended to illustrate a specific point or exercise without impacting the FlexGrocer project directly.

Anytime you want to reference one of the files being built in a lesson to verify that you are correctly executing the steps in the exercises, you will find the files organized on the CD-ROM under the corresponding lesson. For example, the files for Lesson 4 are located on the CD-ROM in the Lesson04 folder, in a project named FlexGrocer.fxp.

The directory structure of the lessons you will be working with is as follows:

Directory structure

Adobe Training from the Source

The Adobe Training from the Source and Adobe Advanced Training from the Source series are developed in association with Adobe and reviewed by the product support teams. Ideal for active learners, the books in the Training from the Source series offer hands-on instruction designed to provide you with a solid grounding in the program’s fundamentals. If you learn best by doing, this is the series for you. Each Training from the Source title contains hours of instruction on Adobe software products. They are designed to teach the techniques that you need to create sophisticated professional-level projects. Each book includes a CD-ROM that contains all the files used in the lessons, completed projects for comparison, and more.

What You Will Learn

You will develop the skills you need to create and maintain your own Flex applications as you work through these lessons.

By the end of the book, you will be able to:

• Use Flash Builder to build Flex applications

• Understand MXML, ActionScript 3.0, and the interactions of the two

• Work with complex sets of data

• Load data using XML

• Handle events to allow interactivity in an application

• Create your own event classes

• Create your own components, either in MXML or ActionScript 3.0

• Apply styles and skins to customize the look and feel of an application

• And much more . . .

Minimum System Requirements

Windows

• 2 GHz or faster processor

• 1 GB of RAM (2 GB recommended)

• Microsoft Windows XP with Service Pack 3, Windows Vista Ultimate or Enterprise (32 or 64 bit running in 32-bit mode), Windows Server 2008 (32 bit), or Windows 7 (32 or 64 bit running in 32-bit mode)

• 1 GB of available hard-disk space

• Java Virtual Machine (32 bit): IBM JRE 1.5, Sun JRE 1.5, IBM JRE 1.6, or Sun JRE 1.6

• 1024×768 display (1280×800 recommended) with 16-bit video card

• Flash Player 10 or later

Macintosh

• Intel processor based Mac

• OS X 10.5.6 (Leopard) or 10.6 (Snow Leopard)

• 1 GB of RAM (2 GB recommended)

• 1 GB of available hard-disk space

• Java Virtual Machine (32 bit): JRE 1.5 or 1.6

• 1024×768 display (1280×800 recommended) with 16-bit video card

• Flash Player 10 or later

The Flex line of products is extremely exciting, and we’re waiting to be amazed by what you will do with it. With a strong foundation in Flex, you can expand your set of skills quickly. Flex is not difficult to use for anyone with programming experience. With a little bit of initiative and effort, you can fly through the following lessons and be building your own custom applications and sites in no time.

Additional Resources

Flex Community Help

Flex Community Help brings together active Flex users, Adobe product team members, authors, and experts to give you the most useful, relevant, and up-to-date information about Flex. Whether you’re looking for a code sample or an answer to a problem, have a question about the software, or want to share a useful tip or recipe, you’ll benefit from Community Help. Search results will show you not only content from Adobe, but also from the community.

With Adobe Community Help you can:

• Fine-tune your search results with filters that let you narrow your results to just Adobe content, community content, just the ActionScript Language Reference, or even code samples.

• Download core Adobe Help and ActionScript Language Reference content for offline viewing via the new Community Help AIR application.

• See what the community thinks is the best, most valuable content via ratings and comments.

• Share your expertise with others and find out what experts have to say about using your favorite Adobe product.

Community Help AIR Application

If you have installed Flex 4 or any Adobe CS5 product, then you already have the Community Help application. This companion application lets you search and browse Adobe and community content, plus you can comment and rate on any article just like you would in the browser. However, you can also download Adobe Help and reference content for use offline. You can also subscribe to new content updates (which can be automatically downloaded) so that you’ll always have the most up-to-date content for your Adobe product at all times. You can download the application from http://www.adobe.com/support/chc/index.html.

Community Participation

Adobe content is updated based on community feedback and contributions: You can contribute content to Community Help in several ways: add comments to content or forums, including links to web content; publish your own content via the Community Publishing System; or contribute Cookbook Recipes. Find out how to contribute. http://www.adobe.com/community/publishing/download.html

Community Moderation and Rewards

More than 150 community experts moderate comments and reward other users for helpful contributions. Contributors get points: 5 points for small stuff like finding typos or awkward wording, up to 200 points for more significant contributions like long tutorials, examples, cookbook recipes, or Developer Center articles. A user’s cumulative points are posted to their Adobe profile page and top contributors are called out on leader boards on the Help and Support pages, Cookbooks, and Forums. Find out more: www.adobe.com/community/publishing/community_help.html

Frequently Asked Questions

For answers to frequently asked questions about Community Help see http://community.adobe.com/help/profile/faq.html

Adobe Flex and Flash Builder Help and Support www.adobe.com/support/flex/ where you can find and browse Help and Support content on adobe.com.

Adobe TV http://tv.adobe.com is an online video resource for expert instruction and inspiration about Adobe products, including a How To channel to get you started with your product.

Adobe Developer Connection www.adobe.com/devnet is your source for technical articles, code samples, and how-to videos that cover Adobe developer products and technologies.

Cookbooks http://cookbooks.adobe.com/home is where you can find and share code recipes for Flex, ActionScript, AIR, and other developer products.

Resources for educators www.adobe.com/education includes three free curriculums that use an integrated approach to teaching Adobe software and can be used to prepare for the Adobe Certified Associate exams.

Also check out these useful links:

Adobe Forums http://forums.adobe.com lets you tap into peer-to-peer discussions, questions and answers on Adobe products.

Adobe Marketplace & Exchange www.adobe.com/cfusion/exchange is a central resource for finding tools, services, extensions, code samples and more to supplement and extend your Adobe products.

Adobe Flex product home page www.adobe.com/products/flex

Adobe Labs http://labs.adobe.com gives you access to early builds of cutting-edge technology, as well as forums where you can interact with both the Adobe development teams building that technology and other like-minded members of the community.

Adobe Certification

The Adobe Certified program is designed to help Adobe customers and trainers improve and promote their product-proficiency skills. There are four levels of certification:

• Adobe Certified Associate (ACA)

• Adobe Certified Expert (ACE)

• Adobe Certified Instructor (ACI)

• Adobe Authorized Trainer (AATC)

The Adobe Certified Associate (ACA) credential certifies that individuals have the entry-level skills to plan, design, build, and maintain effective communications using different forms of digital media.

The Adobe Certified Expert program is a way for expert users to upgrade their credentials. You can use Adobe certification as a catalyst for getting a raise, finding a job, or promoting your expertise.

If you are an ACE-level instructor, the Adobe Certified Instructor program takes your skills to the next level and gives you access to a wide range of Adobe resources.

Adobe Authorized Training Centers offer instructor-led courses and training on Adobe products, employing only Adobe Certified Instructors. A directory of AATCs is available at http://partners.adobe.com.

For information on the Adobe Certified program, visit www.adobe.com/support/certification/main.html.