Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.

  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL



With the advent of the Flex framework, Adobe provided an application-orientated framework to make the production of rich, immersive solutions aimed at providing end-user benefits beyond just “looking cool.”

To achieve this, Adobe focused on a component-based approach to the Flex framework, making the development of this new breed of Rich Internet Applications (RIAs) easier and faster to develop. However, although there is a veritable chocolate box of components to choose from within the Flex framework, it appeared to be like dabbling in the black arts if you wanted to create your own components.

That’s where this book comes in. It provides you with the knowledge and experience to help you develop new components for Flex 4. So much has changed since Flex 3, and this book makes it so you can speed up your own team’s development processes and understand how you can create, package, and distribute your components to a wider, more public audience.

Audience for This Book

As with all technologies, as they grow in functionality, the desire to develop bigger, brighter, and better solutions with them reaches a tipping point. At that point, two things happen. First, there is a sudden increase in popularity, and second, the roles and responsibilities that existed for the teams who use these technologies start to specialize.

The Flex framework is no different. When Flex first appeared, you were generally just classed as a Flex (or RIA) developer; however, as projects grew in scope and teams expanded, the necessity to specialize in some aspect of RIA development became apparent. To this end, you can now find that most Flex developers will tell you that they are a “Flex developer, but I specialize in Enterprise,” or “I specialize in data visualization.” Personally, I specialize in component development. Not too long ago, I was called in on a Flex project by various clients for just this purpose. They had the core Flex development team in place, but they needed a component specialist to build specific, discrete functionality within a “black box” set of components.

Now, it’s unlikely you are currently specializing in component development. But you are obviously interested in finding out more, if nothing else. And for that, I warmly welcome you to an exciting segment of Flex development.

What type of person do you need to be? Well, beyond the requirements detailed next in the section, “Who Should Read This Book,” you need to think both in the macrocosm and the microcosm. By this, I mean you can understand the entire Flex framework from an operational sense by understanding it from a component level. That way, you can make efficient and generic components that operate in the majority of use cases and situations. By generic, I mean little or no external constraints to function; something that is discussed in Chapter 9, “Manipulating Data.”

Who Should Read This Book

There isn’t one archetypal person who should read this book; you may be a pure ActionScript developer, a Flex application developer, or someone who sits within both camps. See if these questions apply to you:

Are you comfortable with ActionScript 3.0?

Do you understand object-orientated programming?

Do you have experience with the Flex framework and Flash Builder?

Do you have a burning desire to create your own components?

If you answered yes to the majority of these questions, you are the kind of person for whom I wrote this book. Even if you answered yes to only a couple of questions, you might want to look through a few chapters to see if you’re comfortable with the content from both a conceptual and code perspective, just in case.

Who Shouldn’t Read This Book

If you’re not comfortable working with ActionScript 3.0 or rely on the timeline and graphical drawing capabilities of Flash Professional CS5 to create applications, you will probably find this book a bit of a struggle. It’s also not aimed at developers who want to create components to use within Flash Professional CS5 or components that don’t leverage the Flex framework.

Finally, this book isn’t aimed at designers. Although there are visual elements to component development, this is a code-centric book that covers only the visual aspects of component development in Chapter 10, “Skinning and Styling,” and Chapter 11, “Creating Flex Components with Flash Professional CS5,” and even then, it is still code heavy.

What You Need to Know

To get the most out of the concepts and ideas discussed in this book, you must have a good understanding of ActionScript 3.0, object-orientated programming, and be comfortable with the Flex framework. You don’t need to be an advanced ActionScript/Flex developer, but if you don’t understand things like the propagation and bubbling within the event model, or working with collections and arrays, this may be a tough read for you.

You also need Flash Builder 4 and Flash Professional installed. The trial versions of each is fine, and you can find the relevant links to download these products in Appendix A, “Flex Resources.” Although you can create components using nothing more than the Flex SDK and a text editor, I made the decision to use Adobe tools, because they are easier to install and get going with.

If you’re comfortable with ActionScript 3.0 but are still getting up to speed with the Flex framework, I suggest checking out the “Flex in a Week” video tutorials, which are available on ( This gives you a good foundation, especially when it comes to learning the ins and outs of MXML.

How This Book Is Organized

This book is broken into three parts. Part I, “Overview and Installation,” introduces the Flex 4 component architecture and looks at all the components available to use as the basis of, or as an element of, your own components. It also covers installing Flash Builder 4, if you haven’t had the opportunity to already do so.

Part II, “Developing Components,” deals with actually developing your own components. Here, you learn how to create your own events and dispatch them and handle data passed into your components from an external source. You work with view states, transitions, and effects and provide support for styles and skins. You also discover how to harness the timeline and drawing tools of Flash Professional CS5 to easily create even more visually rich components.

Part III, “Distribution,” looks at distribution. It focuses on how to integrate your components with Flash Builder to provide visual feedback, customized property panels, and code hinting, and how to package and deploy your components for public use. Finally, this book closes by looking at how to document your components for both reference and external documentation generation, giving your component the capability to survive in the wild without relying on you to explain how it operates.

The following is a general summary of each chapter:

  • Part I, “Overview and Installation”: This part runs through installing and setting up Flash Builder and gives you the theory and history of the components within Flex. You also learn about the differences between the Halo (Flex 3) and Spark (Flex 4) component frameworks and what actually happens when you declare a component within your application.

    • Chapter 1, “Getting Started”: This chapter, like all first chapters, deals with setting up your development environment. There is a quick overview of Flex and Flash Builder aimed at ActionScript 3.0 developers who use Flash and want to try Flex. This chapter also includes how to install Flash Builder 4 on Mac OS X and Windows.

    • Chapter 2, “The Flex 4 Components”: This chapter introduces both the Halo and Spark components and provides you with a history of how and when components came about in relation to the Flash Platform and, more specifically, to Flex.

    • Chapter 3, “Anatomy of a Component”: This is the last “theory” chapter. Here, you see how a component is structured, the phases it goes through before it is finally rendered to the screen, and the three common development routes for creating components.

  • Part II, “Developing Components”: This part contains the core chapters that deal with developing components. Here, you create your first component and see how you can leverage both ActionScript and MXML in doing so. You also learn how view states, transitions, effects, events, and metadata are implemented within a component. You also learn how you can manipulate and store data within your components when assigned both internally and externally.

    • Chapter 4, “Creating Your First Component”: This chapter enables you to create a component and test it. It also covers creating the component in both ActionScript 3.0 and MXML and explains the benefits of both options.

    • Chapter 5, “Managing States”: You’ve probably used view states many times within your Flex applications, but how do you actually declare a new view state and, more important, how do you implement that within your components?

    • Chapter 6, “Effects and Transitions”: Working with view states is one thing, but to provide a more fluid user experience, you need to know how to harness the power of effects, both in isolation or as a transition between view states.

    • Chapter 7, “Working with Metadata”: Metadata is often overlooked within the Flex framework after you go beyond the core metadata tags. This chapter shows you how to add element- and class-based metadata and how to actually create your own metadata tags.

    • Chapter 8, “Events and Event Handling”: ActionScript 3.0 operates off of an event-based model, as does Flex. This chapter shows you how to implement, dispatch, and handle events within your components, and how to create your own custom events and why these are important.

    • Chapter 9, “Manipulating Data”: Components are generally only as good as the data they are given. In Flex, you can leverage numerous complex data collections within your component. This chapter looks at collections, cursors, data manipulation, and renderers so that you can make your components as flexible as they need to be when it comes to data requirements.

    • Chapter 10, “Skinning and Styling”: The vast majority of components have a visual aspect. In Flex 4, you now have access to FXG, which enables you to declare your skins using MXML style syntax. This chapter shows you how to add skin support to your components, implement skin states, and add styling support. It also shows you how to access various attributes from your component within the skin.

    • Chapter 11, “Creating Flex Components with Flash Professional CS5”: Not every component created for use within the Flex framework needs to be created purely in code. This chapter looks at how you can leverage the drawing tools within Flash Professional CS5 to create components that can communicate and contain normal Flex components.

  • Part III, “Distribution”: This final part deals with how you integrate, package, and distribute your components to other members of your team or to the public at large. We first look at how to integrate your components with Flash Builder; next, you learn how to package your components so that they can be easily distributed without the need to include source code if you choose not to. Finally, we look at documentation and how you can make other developers’ lives more pleasurable by documenting your components.

    • Chapter 12, “The Flex Library Project”: This chapter looks at exposing and setting parameters that tie in to the Flash Builder framework, through manifests, design view extensions and specific metadata you can easily add support for your components to make implementation quicker and more streamlined.

    • Chapter 13, “Component Integration in Flash Builder 4”: The Flex Library project enables you to convert your components in to an easily distributable format, enabling you to package and distribute your components without having to include the source code, among other things.

    • Chapter 14, “Documentation”: The final piece in the distribution jigsaw is documentation. Although it is the last chapter, , you discover why documentation should be the first item on your mind as you code.

    • Appendix A, “Flex Resources”: This appendix includes listings for the resources used in this book, and blogs, articles, and videos that provide additional information.

By the end of this book, you will have the necessary skills and knowledge to create any component that you want. The only limitation will likely be your imagination. Couple these newfound skills with the ability to package your components to provide other developers with a truly professional experience through Flash Builder integration and complete documentation, and you will have truly earned the title of Flex Component Developer!

About the Sample Code

The source code for the projects in this book are available as a downloadable Zip archive (.zip), which you can access by clicking the Resources tab on the book’s catalog page at

The Zip file also contains a README file, along with folders containing the projects for each chapter. To work with the samples, you need Flash Builder 4.0 and Flash Professional CS5 installed. (See Appendix A for the URLs.)

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint