As the scope of your applications grows, sooner or later you will need a better way to organize all their different components. One principle that is known to be effective in this task is the component-based development principle.
This chapter focuses on application components. Application components are logically modular elements (not to be confused with Flex modules) within an application that you typically define using MXML and that behave in a manner similar to the components we have been exposed to throughout this book.
Component-based development allows a developer to divide an application into components. Doing so provides several benefits:
It helps to promote many object-oriented design principles, including code reuse, loose coupling, encapsulation, and reduced bugs.
It allows you to simplify a large problem into smaller ones.
It allows different team members to focus on their own components, which allows teams to be more efficient.
Traditionally when developers think of components, they think of prepackaged components that have been developed by a third party. In component-based development, third-party components are important, but so are user-developed components. Instead of allowing application development using just third-party components, an effective component-based development platform should allow you to mix third-party and user-developed components. In earlier chapters, we discussed how Flex and MXML allow rapid application development using several components. In this chapter, we’ll discuss the reasons application components are important and useful. We’ll also discuss how to write application components.
To understand the importance of application components, let’s examine where they would be helpful. In this example, we'll study a typical application: a contact manager. Figure 9-1 shows the completed contact manager application.
This application is considered to be simple, but even a simple application can benefit from application components. If you were to build this application while making sure to separate your presentation code from your data communication and business logic, you would typically structure the application using many Flex components. The result would be one large MXML file, with many event handlers, associated UI code, and many ActionScript class files.
Note
Although this book does not cover the popular Model-View-Controller (MVC) design pattern, it is assumed that you understand the benefits of separating the data access and business logic outside your presentation code. Flex allows you to rapidly develop applications using MXML. However, if application architecture is important, ideally you should use MXML mainly for the view, and use ActionScript for the model and controller. This does not mean that all applications should have such a structure, but if you are working on a large application, we recommend that you consider separating different parts of your application appropriately. We will touch upon some of these concepts in Chapter 22.
Although such a structure isn’t bad, imagine if you were working on a team and one team member was responsible for the contact details area. Working on such an application would not be ideal because it would be built with one large MXML file that is difficult to manage. Taking this one step further, imagine if the contact details were used by other applications. You would ideally want to be able to write such code as a component once, and not have to rewrite it. The component would encompass the highlighted area in Figure 9-2.
There are even more benefits to creating an application out of many components. Imagine how large and unmanageable this single MXML file would become. You would have to have different event handlers for when a user selects a group, selects a contact, attempts to edit the user details, adds and deletes a user, and so on. This doesn’t even include the complexity involved with nesting containers. It could easily become confusing to keep track of everything. Instead, this application would be simpler to manage if you could focus on the contact details alone as one component that almost lives in its own world. This is where application components come in.
You can develop application components in MXML or ActionScript. This chapter covers application component development with MXML because it’s easier to build such components from existing components using MXML than it is using ActionScript. That does not mean you cannot develop application components in ActionScript. However, ActionScript-based components tend to be more advanced and more ideal for custom components, which we cover in Chapter 19, whereas MXML-based components are typically ideal for application components.