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 and desktop applications, it does so in a relatively simple and intuitive manner. Although 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 (RIAs). Additionally, we’ll review the changes and additions to Flex 3 from earlier versions.
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 run or view 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.
Note
Adobe has a new open source initiative, and Flex is included. As of this writing, the Flex framework and compiler are open source. You can learn more about this at http://opensource.adobe.com/flex.
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 nine 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 more than 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 3 content relies on features of Flash Player 9, meaning that users must be running Flash Player 9 or later to correctly view Flex 3 content. You can read more about deploying Flex applications and detecting player versions in Chapter 20.
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 has two virtual machines for running Flash and Flex content. These virtual machines are called AVM1 and AVM2. AVM1 is used to run legacy content and Flash content designed for older versions of Flash Player. AVM2 is written from the ground up, and it functions in a fundamentally different way than AVM1. 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. Flex applications always run in AVM2, meaning that Flex applications make use of the most advanced features of Flash Player.
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 Flash Player ultimately dictates the functionality allowed by a Flex application. As mentioned previously, that means 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 is synonymous with the Flex class library and is a collection of ActionScript classes used by Flex applications. (ActionScript is the programming language used by Flash Player. We discuss it in more detail later in this chapter.) The Flex framework is written entirely in ActionScript classes and defines controls, containers, and managers designed to simplify building RIAs.
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 that 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 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.
- Deep linking and browser back and forward button integration
The browser integration features of Flex allow for deep linking (unique URLs for different application states allowing for linking directly to a state) as well as allowing the browser’s back and forward buttons to correctly navigate through states of the Flex application.
- 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 Cascading Style Sheets (CSS).
- Localization
Using Flex you can localize applications by way of the resource management part of the Flex framework. This allows you to use resource bundles containing localized text, images, and other resources.
Flex Builder 3 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. Flex Builder and the Flex framework, however, are not synonymous. You don't 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.
Note
Flex Builder is a commercial product. See http://www.adobe.com/go/flexbuilder for more information.
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 Differences Between Traditional 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 that 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 LiveCycle Data Services.
Flex simplifies working with data services by way of classes and components that are part of the framework. We discuss working with data services in more detail in Chapter 17.
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 (http://www.adobe.com/go/fms) or Red5 (http://www.osflash.org/red5).
Additional Flex libraries and components are available for you to use when building Flex applications. The most obvious of these are the additional components available with the Professional edition of Flex Builder 3. The advanced data grid and the charting component set are available only with the Professional edition of Flex Builder 3, and they're not included with the free Flex SDK or with the Standard edition of Flex Builder 3.
However, the advanced data grid and charting components are far from the only examples of add-on libraries and components for Flex. There are many such examples, available both commercially and free. A good list of available libraries and components is available at http://www.flex.org/components.
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.
Get Programming Flex 3 now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
