Programming Flex 2

Chapter 1. Introducing Flex

Flex is a collection of technologies that enables you to rapidly build applications deployed to Flash Player, a runtime environment for delivering sophisticated user interfaces and interactivity. Flex leverages existing, matured technologies and standards such as XML, web services, HTTP, Flash Player, and ActionScript. Even though Flex allows you to create complete rich Internet applications, it does so in a relatively simple and intuitive manner. While Flex does allow you to get under the hood for more granular control over all the elements, it significantly lowers the learning curve in that it allows you to compose applications rapidly by assembling off-the-shelf components, including UI controls, layout containers, data models, and data communication components.

In this chapter, we’ll introduce Flex and Flex technologies in more detail so that you can better understand what Flex is and how you can best get started working with it. You’ll learn what elements a Flex application uses and how they work together. We’ll also compare and contrast Flex with other technologies for creating both standard and rich Internet applications.

Understanding Flex Application Technologies

If you’re new to Flex, you may not yet have a clear understanding of what a Flex application is, how it works, and what benefits it has over alternative technologies and platforms. You build Flex applications utilizing the Flex framework, and you deploy them using Flash Player. In the following sections, you’ll learn more about Flash Player, the Flex framework, and additional technologies that may be part of a Flex application.

Flash Player

Flex is part of the Adobe Flash Platform, which is a set of technologies with Flash Player at the core. Flex applications are intended to be deployed to Flash Player, meaning Flash Player runs all Flex applications. With nearly every computer connected to the Internet having some version of Flash Player installed, and an increasing number of mobile devices being Flash-enabled, Flash Player is one of the most ubiquitous pieces of software anywhere. Adobe estimates that each new version of Flash Player has adoption rates reaching 80% in less than 12 months (Flash Player 8 reached 86% within 9 months). The reasons for such quick adoption rates are debatable, but there are a few factors that are almost certainly causative:

• Flash Player content is potentially more compelling and engaging than static HTML content.

• Flash Player is capable of providing integrated solutions that utilize data services, interactive UI design, media elements such as audio and video, and even real-time communications.

• Well-made Flash Player content can provide a refreshing user experience that utilizes metaphors from desktop computing, such as drag-and-drop and double-click. Flash Player frees the UI design from scrolling pages of text and images.

• Flash Player is a relatively small (one-time) download. Even with the multitude of new features added with every release, the Flash Player download is less than 1 MB. And with built-in features such as Express Install, upgrading Flash Player versions is very simple.

• Stability and security are important considerations. Flash Player is a stable program that has been around for nearly a decade. Adobe is very careful with Flash Player security as well. Flash Player has very little access to the client’s local system. It cannot save arbitrary files to the local system, and it cannot access Internet resources unless they meet very strict requirements.

• Flash Player is cross-platform (and cross-browser) compatible. Flash Player runs on Windows, OS X, and Linux, and on all major browsers, including Firefox, Internet Explorer, Safari, and Opera.

Flex 2 content relies on features of Flash Player 9, meaning that users must be running Flash Player 9 or higher to correctly view Flex 2 content. You can read more about deploying Flex applications and detecting player versions in Chapter 2.

Using the Flex framework you can build and compile to the .swf format. The compiled .swf file is an intermediate bytecode format that Flash Player can read. Flash Player 9 introduces a new virtual machine called AVM2. AVM2 is written from the ground up, and it functions in a fundamentally different way than previous versions of Flash Player. With AVM2, .swf content is no longer interpreted. Rather, it is compiled (the equivalent of just-in-time compilation) and run such that it can take advantage of lower-level computing power. This is very similar to how Java and .NET applications work.

AVM2 brings the best of both worlds. Since .swf content is compiled to bytecode that the ActionScript virtual machine can understand, the .swf format is platform-independent. That also means that Flash Player ultimately dictates the functionality allowed by a Flex application. As mentioned previously, that means that Flash Player can guarantee certain security safeguards so that you can deploy applications that users can trust. Yet at the same time, AVM2 compiles the content so that it runs significantly faster and more efficiently than previous versions of Flash Player.

The Flex Framework

The Flex framework is synonymous with the Flex class library and is a collection of ActionScript classes used by Flex applications. The Flex framework is written entirely in ActionScript classes, and defines controls, containers, and managers designed to simplify building rich Internet applications.

The Flex class library is the subject of much of this book. It consists of the following categories:

Form controls

Form controls are standard controls such as buttons, text inputs, text areas, lists, radio buttons, checkboxes, and combo boxes. In addition to the standard form controls familiar to most HTML developers, the Flex class library also includes controls such as a rich text editor, a color selector, a date selector, and more.

Menu controls

Flex provides a set of menu controls such as pop-up menus and menu bars.

Media components

One of the hallmarks of Flex applications is rich media support. The Flex class library provides a set of components for working with media such as images, audio, and video.

Layout containers

Flex applications enable highly configurable screen layout. You can use the layout containers to place contents within a screen and determine how they will change over time or when the user changes the dimensions of Flash Player. With a diverse set of container components you can create sophisticated layouts using grids, forms, boxes, canvases, and more. You can place elements with absolute or relative coordinates so that they can adjust correctly to different dimensions within Flash Player.

Data components and data binding

Flex applications are generally distributed applications that make remote procedure calls to data services residing on servers. The data components consist of connectors that simplify the procedure calls, data models to hold the data that is returned, and data binding functionality to automatically associate form control data with data models.

Formatters and validators

Data that is returned from remote procedure calls often needs to be formatted before getting displayed to the user. The Flex class library includes a robust set of formatting features (format a date in a variety of string representations, format a number with specific precision, format a number as a phone number string, etc.) to accomplish that task. Likewise, when sending data to a data service from user input, you’ll frequently need to validate the data beforehand to ensure it is in the correct form. The Flex class library includes a set of validators for just that purpose.

Cursor management

Unlike traditional web applications, Flex applications are stateful, and they don’t have to do a complete screen refresh each time data is sent or requested from a data service. However, since remote procedure calls often incur network and system latency, it’s important to notify the user when the client is waiting on a response from the data service. Cursor management enables Flex applications to change the cursor appearance in order to notify the user of such changes.

State management

A Flex application will frequently require many state changes. For example, standard operations such as registering for a new account or making a purchase usually require several screens. The Flex class library provides classes for managing those changes in state. State management works not only at the macro level for screen changes, but also at the micro level for state changes within individual components. For example, a product display component could have several states: a base state displaying just an image and a name, and a details state that adds a description, price, and shipping availability. Furthermore, Flex provides the ability to easily apply transitions so that state changes are animated.

Effects

Flex applications aren’t limited by the constraints of traditional web applications. Since Flex applications run within Flash Player, they can utilize the animation features of Flash. As such, the Flex class library enables an assortment of effects such as fades, zooms, blurs, and glows.

History management

As states change within a Flex application, the history management features of the Flex class library enable you to navigate from state to state using the back and forward buttons of the web browser.

Drag and drop management

The Flex class library simplifies adding drag and drop functionality to components with built-in drag and drop functionality on select components and a manager class that allows you to quickly add drag and drop behaviors to components.

Tool tips

Use this feature of the Flex class library to add tool tips to elements as the user moves the mouse over them.

Style management

The Flex class library enables a great deal of control over how nearly every aspect of a Flex application is styled. You can apply style changes such as color and font settings to most controls and containers directly to the objects or via CSS.

Flex Builder 2

Flex Builder 2 is the official Adobe IDE for building and debugging Flex applications. Built on the popular Eclipse IDE, Flex Builder has built-in tools for writing, debugging, and building applications using Flex technologies such as MXML and ActionScript.

The Flex framework ships as part of Flex Builder. However, Flex Builder and the Flex framework are not synonymous. You do not have to use Flex Builder to use the Flex framework. Instead, you can opt to install the free Flex SDK, which includes the compiler and the Flex framework. You can then integrate the Flex framework with a different IDE, or you can use any text editor to edit the MXML and ActionScript files, and you can run the compiler from the command line.

Tip

Flex Builder is a commercial product. See http://www.adobe.com/go/flexbuilder for more information.

Integrating with Data Services

Data services are an important aspect of most Flex applications. They are the way in which the Flex application can load and send data originating from a data tier such as a database (we discuss the concept of tiers in the section “Understanding the Differences Between Traditional (HTML) and Flex Web Applications” later in this chapter). Flash Player supports any text data, XML, a binary messaging format called AMF, and persistent socket connections, allowing for real-time data pushed from the server to the client.

Each data format Flex supports may or may not require special server resources. For example, a Flex application can request XML data from a static resource or from a dynamic resource such as a PHP page. AMF is a binary messaging format that Flash Player understands natively, but for a server to interact with Flash Player via AMF, it requires an AMF translator on the server, such as the remote object services that are part of Flex Data Services.

Flex simplifies working with data services by way of classes and components that are part of the framework. Working with data services is discussed in more detail in Chapter 14.

Integrating with Media Servers

Since Flex applications are deployed using Flash Player, they can leverage the media support for Flash video and audio. Although Flash Player can play back Flash video and MP3 audio as progressive downloads, you can benefit from true streaming media by way of a technology such as Flash Media Server.

Additional Flex Libraries and Components

At the time of this writing there is just one official add-on Flex library, the Flex Charting Components. As time goes on, it is expected that many additional Flex libraries will become available. Additional Flex libraries such as the Flex Charting Components are not part of the standard component sets that ship with the Flex framework. Rather, you must acquire the software and licenses, and add them to the Flex classpath. Add-on libraries enable more rapid application development because they provide prebuilt functionality. For example, with the addition of the charting component set, you can quickly and simply add robust charting and graphing features to Flex applications.

Tip

You can find many extensions, such as Flex libraries and components, at the Adobe Exchange (http://www.adobe.com/exchange).

Using Flex Elements

The Flex framework includes a core set of languages and libraries that are the basis of any Flex application. Using MXML, ActionScript, and the Flex class library you can construct and compile .swf content that you can then deploy to Flash Player.

MXML

MXML is an XML-based markup language that primarily describes screen layout. In that respect it is much like HTML. Using MXML tags, you can add components such as form controls and media playback components to layout containers such as grids.

In addition to screen layout, you can use MXML to describe effects, transitions, data models, and data binding. MXML is robust enough that it is possible to build many applications entirely with MXML. Flex Builder enables you to construct MXML with a WYSIWYG approach, which allows you to build basic Flex applications without writing any code.

While the WYSIWYG approach is helpful for basic prototypes and simple applications, writing MXML code is still necessary for more complex tasks. Additionally, sophisticated Flex applications generally require both MXML and ActionScript.

MXML is a declarative way to create Flex content, but the simplicity should not fool you into thinking that MXML is not powerful. MXML provides a fast and powerful way to create layout and UI content. However, MXML documents get compiled in several steps, the first of which converts the MXML to an ActionScript class. This means that MXML documents provide you with all the power of object-oriented design, but with the convenience of a markup language. Furthermore, MXML documents are treated as ActionScript classes at runtime.

ActionScript

ActionScript is the programming language understood by Flash Player and is the fundamental engine of all Flex applications. MXML simplifies screen layout and many basic tasks, but all of what MXML does is made possible by ActionScript, and ActionScript can do many things that MXML cannot do. For example, you need ActionScript to respond to events such as mouse clicks.

Although it is possible to build an application entirely with MXML or entirely with ActionScript, it is more common and more sensible to build applications with the appropriate balance of both MXML and ActionScript. Each offers benefits, and they work well together. MXML is best suited for screen layout and basic data features. ActionScript is best suited for user interaction, complex data functionality, and any custom functionality not included in the Flex class library.

ActionScript is supported natively by Flash Player, and does not require any additional libraries to run. All the native ActionScript classes are packaged in the flash package or in the top-level package. In contrast, the Flex framework is written in ActionScript, but those classes are included in a .swf file at compile time. All the Flex framework classes are in the mx package.

Working with Data Services (Loading Data at Runtime)

Flex applications are generally distributed applications. That means that several computers work in conjunction to create one system. For example, all Flex applications have a client tier (discussed shortly) that runs on the user’s computer in the form of a .swf running in Flash Player. In most cases, the client tier communicates with a server or servers in order to send and retrieve data. The servers provide what are called data services, which are essentially programs that have public interfaces (APIs) whereby a client can make a request to a method of that program. When a client makes such a request, it is called a remote procedure call, or RPC.

There are many types of data services. In its simplest form a data service could consist of a static text file or XML document served from a web server. A slightly more sophisticated data service might be a dynamic XML document generated via a server-side script or program, such as a PHP or ASPX page. Many data services require greater sophistication. One of the most common types of such a sophisticated data service is the web service. Web services use XML (generally in the form of SOAP) as a messaging format, and they enable RPCs using the HTTP protocol for requests and responses. Although a SOAP web service is an example of a standards-based data service, many types of data services don’t necessarily conform to a particular standard set by the W3C. Many programs on the Web, for example, expose primitive data services that use arbitrary messaging formats and protocols. One such program is used by MapQuest, a popular mapping web site. For instance, you would use the following URL to view a MapQuest page with a map of Los Angeles:

http://www.mapquest.com/maps/map.adp?country=US&city=Los+Angeles&state=CA

Notice that the query string uses arbitrary parameters to determine what to map. Therefore, if you wanted to display a map of New York, you would change the city and state parameter values in the URL as follows:

http://www.mapquest.com/maps/map.adp?country=US&city=New+York&state=NY

Flash Player is capable of making RPCs to many types of data services. For example, Flash Player can make requests to any web resource using HTTP, which means it can make requests to many primitive data services such as a static or a dynamic XML document, or the MapQuest example mentioned previously. That also means it can make requests to web services. Moreover, the Flex class library simplifies requests to most data services.

In addition to the types of data services previously mentioned, Flex applications can also make calls to methods of classes on the server, using a technology called Flash Remoting. Flash Remoting uses the AMF binary messaging format, which is supported natively by Flash Player. AMF has all the benefits of SOAP, but since it is binary, the bandwidth overhead is greatly reduced. And since AMF is natively supported by Flash Player, no special coding is necessary to use Flash Remoting data services from the client tier. However, for a Flash Remoting data service to be available to the client tier, it must be made accessible via a piece of software that resides on the server, and can read and write AMF packets and delegate the requests to the correct services. Flex Data Services provides an implementation of Flash Remoting that integrates easily with components in the Flex framework. That means that if you use Flex Data Services, you can quickly configure applications to utilize Flash Remoting without writing ActionScript. However, you’re not locked into using Flex Data Services in order to use Flash Remoting. There are many Flash Remoting server products, including open source options such as OpenAMF (http://www.openamf.org) and AMFPHP (http://www.amfphp.org).

Understanding the Differences Between Traditional (HTML) and Flex Web Applications

Many applications deployed on the Web use an HTML user interface. Flex applications are similar in many respects, but they have distinct differences. If you’re used to building applications that use an HTML UI, it’s important to take a few moments to shift how you approach building applications when you start working with Flex. What works for HTML-based applications may or may not work for Flex applications.

Both traditional and Flex applications are generally n-tiered. The exact number and types of tiers an application has depend on many factors. Most traditional applications have, at a minimum, a data tier, a business tier, and a presentation tier. Flex applications have a data tier and a business tier; however, as noted earlier, they also introduce a client tier, which is what strongly differentiates them from traditional web applications. The client tier of Flex applications enables clients to offload computation from the server, freeing up network latency and making for responsive and highly interactive user interfaces.

Data tiers generally consist of databases or similar resources. Business tiers consist of the core application business logic. As an example, a business tier may accept requests from a client or presentation tier, query the data tier, and return the requested data.

In traditional applications the presentation tier consists of HTML, CSS, JavaScript, JSP, ASP, PHP, or similar documents. Typically a request is made from the user’s web browser for a specific presentation tier resource, and the web server runs any necessary interpreters to convert the resource to HTML and JavaScript, which is then returned to the web browser running on the client computer. Technically the HTML rendered in the browser is a client tier in a traditional web application. However, since the client tier of a traditional web application is stateless and fairly nonresponsive, it is generally not considered a full-fledged tier. (The exception to that generalization is the case of Ajax applications, which use client-side JavaScript and XML to build responsive and sophisticated client tiers.)

Flex applications generally reside embedded within the presentation tier. In addition, Flex applications can integrate with the presentation tier to create tightly coupled client-side systems. Flex applications use Flash Player to run sophisticated client-tier portions of the application. The Flex application client is stateful, which means that it can make changes to the view without having to make a request to the server. Furthermore, the Flex application client is responsive. For example, Flash Player can respond to user interaction such as mouse movement, mouse clicks, and keyboard presses, and it can respond to events such as notifications from the business tier when data is returned or pushed to the client. Flash Player also can respond to timer events. Since Flash Player is a smart client, it is capable of saving on network overhead and bandwidth usage by managing client-side logic without having to consult the business tier. For example, Flex applications can walk the user through a step-based or wizard-like interface, collect and validate data, and allow the user to update and edit previous steps, all without having to make requests to the business tier until the user wants to submit the data. All this makes Flex clients potentially far more compelling, responsive, and engaging than traditional web applications.

Because the Flex application client tier is so much more sophisticated than the presentation tier of a traditional web application, the Flex client tier requires significantly more time and resources to build successfully. A common mistake is to assume that Flex client tiers require the same time and resources as a traditional web application presentation tier. Successful Flex client tiers often require the same time and resources during design, implementation, and testing phases as the business tier.

Understanding How Flex Applications Work

Flex applications deployed on the Web work differently than HTML-based applications. It’s important to understand how Flex applications work in order to build them most effectively. When you understand how Flex applications work, you can know what elements are necessary for an application and how to build the application for the best user experience. Figure 1-1 summarizes the basic concepts discussed in this section.

Figure 1-1. Understanding Flex application source-compile-deploy workflow

Every Flex application deployed on the Web utilizes Flash Player as the deployment platform. That means that a fundamental understanding of Flash Player is essential to understanding Flex. Additionally, all Flex applications use the Flex framework at a minimum to compile the application. As such, it’s important to understand the relationship between the source code files, the compiler, and Flash Player.

All Flex applications require at least one MXML file or ActionScript class file, and most Flex applications utilize both MXML and ActionScript files. The MXML and ActionScript class files comprise the source code files for the application. Flash Player does not know how to interpret MXML or uncompiled ActionScript class files. Instead, it is necessary to compile the source code files to the .swf format, which Flash Player can interpret. A typical Flex application compiles to just one .swf file. You then deploy that one .swf to the server, and when requested, it plays back in Flash Player. That means that unlike HTML-based applications, the source code files remain on the development machine, and you do not deploy them to the production server.

Asset files such as MP3s, CSS documents, and PNGs can be embedded within a .swf, or they can be loaded at runtime. When an asset is embedded within a .swf, it is not necessary to deploy the file to the production server, because it is compiled within the .swf file. However, since embedding assets within the .swf often makes for a less streamlined downloading experience and a less dynamic application, it is far more common to load such assets at runtime. That means that the asset files are not compiled into the .swf, and much like an HTML page, the assets are loaded into Flash Player when requested by the .swf at runtime. In that case, the asset files must be deployed to a valid URL when the .swf is deployed.

Data services are requested at runtime. That means that the services must be available at a valid URL when requested at runtime. For example, if a Flex application utilizes a web service, that web service must be accessible from the client when requested. Media servers and Flex Enterprise Services must also be accessible when used by Flex applications.

Understanding Flex and Flash Authoring

Many developers first learning about Flex 2 may still be unclear as to the relationship between Flex and Flash authoring, the traditional tool for creating content for Flash Player. First, you do not have to understand Flash authoring in order to work with Flex. In fact, you can get started with Flex without any prior knowledge of or experience in Flash authoring.

Flash authoring is a product that was first created in 1996 as a vector animation tool primarily aimed at creating animation content for the Web. In the many versions since that time, both Flash authoring and Flash Player (the deployment platform for Flash authoring content) have enabled greater and greater capabilities, and developers began to create rich Internet applications with the tools. However, while Flash authoring is a fantastic tool for creating animations, it is not the ideal tool for creating applications. The metaphors that Flash authoring uses at its core (such as timelines) are simply not applicable to application development.

Flex 2 is a product aimed primarily at creating applications. The framework includes a rich set of layout and user interface components, and the technology uses metaphors such as states and transitions that are appropriate to application development.

Both Flex and Flash authoring allow you to create .swf content that runs in Flash Player. In theory you can achieve the same things using both products. However, Flash is a tool that allows you to create timeline-based animations and to use drawing tools best suited for expressiveness, while Flex allows you to much more rapidly assemble screens of content with transitions and data communication behaviors. As with any craft, it is advisable to use the best tool for the job. Up until now, Flash authoring was one of the only tools for creating .swf content. But with Flex 2, we now have a tool with a more specific focus.

Although many people may initially try to frame the Flex and Flash authoring debate as a winner-takes-all scenario, it is rather naive to think of them as competing technologies. Rather, they are two complementary technologies that allow all Flash platform developers to utilize specialized tools when creating rich Internet content. In fact, Flex and Flash authoring can work very well together. As you’ll see in this book, Flex can import content created in Flash authoring, allowing you to create rich Internet applications that use timeline-based content.

Understanding Flex 1.5 and Flex 2

If you are familiar with earlier versions of Flex (Flex 1 and Flex 1.5), you may be interested in the relationship between Flex 2 and those earlier versions. While Flex 2 continues to utilize MXML and ActionScript (both supported in earlier versions of Flex), it is vastly different from Flex 1 and Flex 1.5 in other respects. Flex 2 allows you to compile and deploy independent .swf files without any sort of expensive server-side services as was required by Flex 1 and 1.5 (though the ability to compile .swf files on the server at request time is still available in Flex Data Services). Flex 2 requires Flash Player 9, which allows for (and requires) the use of ActionScript 3. This latest ActionScript version introduces significant changes to the Flash Player API that offers a much improved way to add and remove display objects (including components) to the view.

Summary

In this chapter, we introduced the basics of what Flex is and what technologies and products are used to create Flex applications. You learned that Flex 2 consists of a framework (a class library) and a compiler that allow you to rapidly create Flex applications. These applications are .swf files, which you can then run in Flash Player 9.