Learning Flex 4

Chapter 1. Getting Up to Speed

IN THIS CHAPTER

What Is Flex?

What About AIR?

Where Flex Fits

Why Use Flex?

How Flex Compares to Other Technologies

When Not to Use Flex

Summary

“Supposing is good, but finding out is better.”

—Mark Twain

This chapter provides a background discussion of Flex, including what it is, what situations it’s suitable for handling, how it compares to other RIA technologies, and when you should not use it.

If you’re not presently concerned with background information, feel free to jump ahead to Chapter 2, where we introduce you to the Flash Builder IDE and have you import your first project.

What Is Flex?

Flex 4 is a software authoring framework designed for rapid development of rich, expressive applications. Depending on your goals for a particular project, Flex applications may be developed for the Web, for the desktop, or for both.

Flex isn’t exactly a single computer language. Really, Flex 4 includes three languages—MXML, ActionScript, and FXG—and each satisfies a special purpose. Let’s briefly consider the three languages and see an example of each.

MXML

MXML is typically used to arrange an application’s user interface (UI), the components making up the application’s visible layout (Example 1-1). Similar to a description of a person’s appearance, MXML defines what for an application.

What Does MXML Mean?

The acronym MXML was never formally defined. Some think it stands for “Maximum eXperience”. Others say it means “Macromedia XML.” Honestly, though, it’s all conjecture. Refer to it however you like.

Note

Don’t worry about fully grasping these examples. While we kept them simple and fairly self-explanatory, we just want you to see some basic MXML, ActionScript, and FXG code blocks.

Example 1-1. MXML: A VGroup container with two TextInput controls and a Button; the Button’s “click” event calls an ActionScript function

<s:VGroup>
    <s:TextInput id="inputTI"/>
    <s:Button label="Refresh" click="refreshOutput()"/>
    <s:TextInput id="outputTI"/>
</s:VGroup>

ActionScript

For now, think of ActionScript as handling an application’s reactive qualities. Use ActionScript to provide step-by-step instructions when user interaction occurs or when something needs to happen (see Example 1-2). ActionScript describes how.

Note

ActionScript 3.0 is a modern object-oriented language, and it’s much more complex than we’re hinting at in this simple description. We’ll discuss the tenets of object-oriented programming later in Chapter 5.

Example 1-2. This ActionScript function takes the text value of one TextInput control and assigns it to the text value of another TextInput

private function refreshOutput():void{
    outputTI.text = inputTI.text;
    inputTI.text = "";
}

Flash XML Graphics (FXG)

Stated simply, FXG is an XML-based standard for sharing graphics between various Adobe products. FXG graphics can be created individually by a programmer, and simple graphics often are (see Example 1-3) However, the real benefit of FXG graphics is realized by creating complex graphics in design software such as Adobe Illustrator or Photoshop, exporting them as FXG files, and then importing them into Flex as reusable graphics objects.

Note

For more information on FXG graphics, jump to Chapter 14 and read the sidebar titled FXG Graphics in FXG Graphics. It won’t hurt to read it out of sequence.

Example 1-3. An FXG Rectangle graphic with both a fill and a stroke creating the background and border for an MXML Group container

<s:Group id="container" horizontalCenter="0" verticalCenter="0">

    <s:Rect height="100%" width="100%">
        <s:fill>
            <s:SolidColor color="#209910"/>
        </s:fill>
        <s:stroke>
            <s:SolidColorStroke color="#000000" weight="2"/>
        </s:stroke>
    </s:Rect>

</s:Group>

Flex Is a Modern, Hybrid Framework

Flex will feel natural to web developers familiar with Hypertext Markup Language (HTML) and JavaScript. Although different architecturally, the similarities should make it easy for experienced developers to get started. MXML is a markup language, and ActionScript is a scripting language. Like modern web design, Flex combines markup and scripting for application development.

What Does Flex Look Like?

Although there is a default appearance, the look and feel of a Flex application is not set in stone. Flex doesn’t have to look like Windows or Mac or anything else; rather, it’s easily styled and fully skinnable.

In Flex development, styling refers to the assignment of basic colors, font characteristics, padding, and the like using Cascading Style Sheets (CSS). Stylesheets are simple, so style values defined in CSS can be reworked quickly.

On the other hand, skinning implies broad change of a component’s look, shape, or behavior. In the Flex 4 designer-developer workflow, skinning often involves collaboration between a graphic designer and a developer to create a unique, “branded” look for an application.

Finally, there are themes. If you do some quick digging on the Web, you can find a number of themes that let you rapidly change the entire look of your application with one fast action. With the right code, you could even let the users of your application select a preferred theme!

Flex Is Flash

Flex applications, like other Flash content, are deployed as SWF files (pronounced “swiff”). SWF files are compiled projects that Flash Player reads and renders onscreen, often in a browser. With Flex, you can create applications that are small enough to download quickly and that will, with few exceptions, look and act the same on any computer or operating system (Figure 1-1).

Figure 1-1. Flash Player reach

Flex Is the Flex SDK

The Flex Software Development Kit (SDK) consists of an extensive library of UI components, a compiler, and documentation tools that facilitate development. To illustrate, creating a Button component no longer requires writing several lines of ActionScript code or dealing with timeline animation; Flex developers can simply type <s:Button/> or use Flash Builder’s Design mode to drag and drop a Button wherever they want in an application.

What’s the Flash Platform?

The Flash Platform is an overall term referring to several technologies composing the Flash “ecosystem,” which Adobe divides into five categories: tools, framework, servers, services, and clients.

In the context of this book, we’ll be using Flash Builder—the tool—to develop applications in Flex—the framework—that will be handled at runtime by either the Flash Player or the AIR client.

Other elements of the Flash Platform include Flash Professional, Flash Catalyst, Flash Media Server, LiveCycle, and BlazeDS. For more information, check out Adobe’s website: http://www.adobe.com/flashplatform.

Thanks to the SDK tools, Flex developers can create applications using any text editor and the free compiler, but Flash Builder—Adobe’s luxury IDE—certainly provides a more comfortable development experience. In other words, it’s not necessary to create Flex applications in Flash Builder, but it helps. Because Adobe provides a 60-day trial of Flash Builder, we recommend using it while you learn Flex. Once you’re comfortable programming MXML and ActionScript, you can always switch to another IDE and/or command-line compiling.

What About AIR?

Adobe Integrated Runtime (AIR) is the solution for bringing Flash and other web-based content to the desktop. With all the benefits of a RIA, why would anyone want to do this? Mainly, browsers have limitations—they don’t support drag-and-drop from the desktop, they have security restrictions, and users can’t access web applications when they don’t have an Internet connection. Also, many users like having an application in their Start menu or Dock for quick access.

Here’s another reason AIR shines: it opens up desktop development to the seasoned web developer. Because of the broad demand for web development, many programmers are already familiar with HTML, JavaScript, and Flash, as well as the architecture of a complex website. With Adobe AIR, there’s no need to learn C# or Java just to create a standalone application; rather, familiar skills can be used to start creating desktop applications with a shorter learning curve. This is especially significant if you intend to make both web and desktop applications.

Finally—and possibly the most compelling reason to use AIR—Flash applications are platform agnostic, which means your desktop application won’t be chained to a particular operating system. You won’t have to worry about developing for Windows, Mac, or Linux; you simply write a program in Flex or JavaScript, and anyone can run it as an AIR application.

Where Flex Fits

The phrase Rich Internet Application (RIA) was coined by Macromedia (now Adobe) in 2002 to describe a trend toward more expressive web applications.

In the beginning, HTML documents on the Web were just that: documents. They were text and, later, images and multimedia. This original client-server paradigm meant a user, by typing a URL in his browser, requested a document. With the Web being so far-reaching, savvy developers quickly learned to create server-based applications, programs anyone could access while online. Think of all the web forms you’ve filled out, where you type your name and address and hit the submit button. After a few moments, you’re greeted with an entirely new page telling you the form was submitted (or that you have errors to fix). This interaction describes the client-server model, where a “thin” client (a browser) gathers content and sends it back to a server for processing. Besides being slow, this approach wasted client resources at the expense of the server.

The advent of JavaScript introduced a new potential—offloading work to the client. For instance, when configuring an item in an online store, it used to be necessary to send all calculations, such as shipping or sales tax, back to the server. With scripting, it became possible to calculate that information right on the client machine and update the page according to user interaction. This new approach marked the beginning of the “thick” client, which describes client-server relationships where the client shares processing responsibilities with the server.

However, for developers wanting animations, transitions, and a richer experience, there was a need to load data without refreshing the entire page. Before Ajax entered the scene, the answer for many was Flash.

Flash got its start as a solution for rendering animations and multimedia on the Web. As it matured, more and more interactive elements were added, and some people learned how to create Flash ads and games.

Because Flash was quick, lightweight, and naturally rich, other developers started using it in complex applications such as data visualizers, product catalogs, and photo viewers. Because the Flash IDE was an animation tool, creating complex interaction was often difficult and a bit messy. The introduction of Flash Professional in 2003 improved the process by adding key features such as reusable components and data connectors, but it still left a lot to be desired, especially for enterprise developments and projects with large teams.

Enter Flex. Building upon the power of Flash Player, Flex made it easy to develop rich user interfaces. With a more developer-centric model, it was easier for Java programmers and others to jump on board and start developing without the “what is this timeline?” confusion. Even better, the markup-based language made it easy to read and share code, which has definitely contributed to its growing success.

Why Use Flex?

“Why use Flex?” Did you ask yourself this question when you picked up this book? Flex was created to simplify development of web applications for Flash Player, but it has evolved into a broadly useful framework that lends itself to both web and desktop application development.

Flex Is for Applications

The Flex framework was built to streamline application development, and as such, it includes a number of robust, customizable components that make designing and developing an application relatively easy. Flex programs can run in a web browser or be deployed as AIR applications, so Flex is ideal for writing an application once and delivering it to anyone.

Web Applications Defined

A desktop application is any software you use on a personal computer, such as a web browser or a word processor. In contrast, a web application is any application you access through a web browser.

Some applications may dually exist on the desktop as well as the Web. Email applications provide a familiar example. The desktop email client makes it easy to read archived email whenever you please, even when you’re offline, but web access creates the advantage of sending and receiving email from any Internet-ready computer, such as those in a classroom, a workplace, or a friend’s house.

Now imagine if the desktop email client and the web portal were nearly identical, having the same look and feel, and even the same code base! Flex makes that possible.

Note

A number of image editing utilities exist as web applications, and you can find several with a quick search. Most of the online editors we found appeared to be built with Flex (they ran in Flash Player), and they had decent user interfaces, but the FXG Editor by 7Jigen Labs stood out as our favorite, not because it had the most graceful UI or the greatest features, but because it provided such a rare, sought-after service—online FXG editing! If you don’t have Adobe Illustrator but want to create FXG graphics, this is the only free option we’ve found.

You can access the FXG Editor by 7Jigen Labs at http://fxgeditor.7jigen.net/.

They also make it available as an AIR application: http://labs.7jigen.net/2010/05/15/fxg-editor-air-app/.

What’s even better? 7Jigen made their source code available. Check it out someday when you’re feeling ambitious: http://www.libspark.org/wiki/seven/fxgeditor/en.

For Easy Interactivity

Flex makes it easy to create a high level of interactivity. It comes with support for data binding, a smooth event architecture, and a set of components with built-in methods for providing user feedback. Add to this the ability to quickly create beautiful effects and transitions, and it’s easy to see why Flex is getting so much attention from new developers.

For Development Speed

There is no faster way to create such rich, interactive, uniquely skinned applications. Although everything you can do in Flex can be done in the Flash IDE, development in Flex reduces the process to a fraction of the time it takes in Flash. And with Flash Builder, development is faster still.

For Speed All Around

Flex components are built in ActionScript 3.0, the latest version of the programming language for Flash Player, and Flash Player 10 was introduced in tandem with the release of Flex 4. Improved performance was one of the goals for Flash Player 10, and it shows. Although you should always make an effort to optimize your programs, you can feel confident that Flex 4 and Flash Player 10 “have your back” when it comes to handling graphically intense routines.

Because It’s Clean

Flex supports separation of content and design by allowing external styling of applications. Because of this, you can quickly restyle an application by referencing a fresh stylesheet or by dropping in one of the many freely available Flex themes.

Proponents of the Model-View-Controller (MVC) design pattern will find that Flex supports that architecture as well. Free libraries are available, such as the Cairngorm framework, which simplifies implementing MVC.

Note

For more information on the Cairngorm framework, start at http://opensource.adobe.com/wiki/display/cairngorm/Cairngorm.

While we’re on the subject of Flex frameworks, the Swiz framework is becoming increasingly popular. Its torch-bearers tout its lightweight simplicity, lack of so-called “boilerplate” code, and techniques for creating components to handle repetitive situations. If you can’t tell, we’re describing advanced Flex development, but in the spirit of learning, we recommend that you to look into it someday: http://swizframework.org/.

Because It’s Free

Although you have to pay for a full copy of Flash Builder, the Flex framework is completely free. Therefore, you have the option of creating and editing code in your favorite text editor and compiling it using the free command-line compiler without paying a dime.

Note

Only standard components are available to you in the free SDK. Fortunately, most Flex components are standard components. In comparison, advanced components, such as the data visualization (i.e., charting) components, require a Flash Builder license.

The scope of this book is for beginners, and because Flash Builder makes it easy to get started, we’ll discuss development, compiling, and debugging using Flash Builder. Luckily, Adobe offers a free 60-day trial, so there’s no reason not to use Flash Builder while you’re learning Flex: http://www.adobe.com/products/flex.

Because It’s Open

Flex is also open source. This means all the component code is yours for the looking (and using and reusing in most cases). As a new developer, having access to the underlying code helps you learn. Open source also means Flex is yours. You can modify and improve the code as well as submit your modifications for inclusion in future versions.

Because it’s open source, a community has grown around extending and improving Flex. Scores of freely available advanced components have been created to extend the base set. As such, it’s usually possible to find special components, as well as tutorials explaining how they’re created from scratch.

For Data (and Fast)

Flex offers built-in support for XML and Java objects, simplifying data exchange using these approaches. Flex also supports Action Message Format (AMF). With Java and ColdFusion servers, you can transmit compressed binary data over the wire to your Flex application, making data submission and retrieval much faster than text-based solutions. And for the freeware folks, you can also combine Flex with AMFPHP to send and receive serialized ActionScript objects to and from server-side PHP scripts.

Because It’s Beautiful

Although Flex comes with a default theme that may suit your needs, an application’s look and feel is limited only by your imagination. Plus, because styles can be established using Cascading Style Sheets, you can change the look of your program with a single line of code.

Flex provides a robust set of UI controls right out of the box, and with the wide variety of third-party components, you can create any interface you desire. With Flex Charting, you have a nice set of data visualization tools at your disposal. You can choose from bar charts, pie charts, high-low-open-close charts—you name it. Moreover, thanks to the ease of development in Flex, the number of third-party data visualization components is growing every day.

How Flex Compares to Other Technologies

Flex is a hybrid technology, taking the best elements from modern programming languages while incorporating standards such as XML and (CSS). Because of this, Flex bears a familiar resemblance to several technologies.

Flash

Like Flash, Flex applications run in Flash Player. However, aside from having the same underlying scripting language—ActionScript—these two technologies have some differences. At its core, Flash was created to run Timeline-based animations. Development features were added later. On the other hand, Flex was designed from the ground up to simplify application development. Users of Flash who have dealt only with the Timeline or simple scripting may find Flex a bit overwhelming at first, whereas Java or C developers will feel more at home.

There’s nothing you can do in Flex that you can’t do in Flash—technically, that is. It’s possible to develop a great application using just the Flash IDE. However, there’s always a right tool for a job, and Flex was engineered to help you create applications. Specifically, Flex supports data management, simple styling using Cascading Style Sheets, and an improved designer-developer workflow for advanced component skinning. Plus, Flex makes it easy to add rich animations and graphical effects to your programs.

A Note About the Term “Flash”

In this book, we’ll frequently mention “Flash,” a term that for many is tough to define. Depending upon the context, Flash can mean many things. For instance, Flash may refer to the Flash Integrated Development Environment (IDE), the animation and development tool that started it all. In other contexts, Flash may refer to the content you find on the Web—the animations, advertisements, or applications, which are compiled SWF files running inside a browser. In yet another capacity, Flash is an umbrella term describing the technology built upon Flash Player, the plug-in that makes it possible to view all this stuff on your computer.

Out in the wild, you"ll hear “Flash” used in various contexts, but in this book, we’ll try to keep things consistent. When we say “Flash,”; we’re referring to the underlying technology requiring Flash Player. When we discuss the development software, we’ll say the “Flash IDE” or the “Flash authoring tool.”

However, Flex is not a drawing framework or animation toolkit. So if you’re looking to create movies or animated cartoons, the Flash IDE is the right tool for the job.

C Languages

Flash Builder is an IDE similar to Visual Studio, and with it you can write code, compile, debug, and deploy applications from a single piece of software. Flex’s MXML markup language may be unfamiliar at first, but it’s intuitive, so you can expect to learn it rapidly. And while everyone is entitled to her own opinion, some might say it’s difficult to beat MXML when it comes to designing an interface.

Though Flex is based on a language different from C++, Objective-C, and so on, developers familiar with scripting languages should feel comfortable learning ActionScript. Because ActionScript is a class-based, object-oriented language, seasoned C++ and .NET developers should adapt quickly to Flex. However, C# developers may find the easiest transition, because that language shares a number of commonalities.

Java/Java FX

Flex is similar to Java and the Java Swing platform. For one, ActionScript is similarly structured—it inherits the concept of packages, and its syntax is nearly identical. MXML poses the biggest difference, but as you’ll discover, it’s easy to learn. Because Flash Builder is built on Eclipse, many Java programmers will already be comfortable using the IDE.

Java, like Flex, also allows for application deployment to either the Web or the desktop. However, the ubiquity and small size of Flash Player compared to the Java SDK makes Flex applications available to a wider audience. A lot of Java developers are learning Flex, and a lot of projects that might have been built in Java are moving to Flex.

HTML/JavaScript/Ajax

Flex was built after the web explosion, and for this reason its design features a number of commonalities to traditional web development. Most notably, Flex couples a tag-based language (MXML) with an ECMA-compliant language (ActionScript). Web programmers with knowledge of HTML and XML will quickly absorb MXML, and because JavaScript syntax is so similar to ActionScript, web developers proficient in JavaScript will transition easily to ActionScript. Behind the scenes, MXML and ActionScript have a different relationship to one another than HTML and JavaScript, but on the surface, their interaction will make sense to most traditional web developers.

Ajax (Asynchronous JavaScript and XML) and Flex have several similarities, and developers of either technology can be downright religious when it comes to identifying the favorite. Both Flex and Ajax allow developers to create responsive web applications that avoid clumsy, full-page reloads. Regarding their differences, Ajax is “leaner” than Flex, as it doesn’t require a framework download before the application is available to the user. However, strict browser settings can cripple Ajax applications, leaving users confused as to why the application isn’t working. Like with Flex, several third-party Ajax libraries have emerged, and the Ajax libraries tend to be more mature than their Flex counterparts; the Google Maps API comes to mind in this respect. In Flex’s favor, MXML/ActionScript code is arguably easier to write and maintain than Ajax code, and the Flash Player provides superior support for graphics and animation, including charting and data visualization. However, Ajax is more suitable for applications that need to load quickly, and this is especially true if the application will be graphically lightweight.

Silverlight/XAML

Silverlight is Microsoft’s answer to Flex; in fact, it shares the XML-based markup paradigm coupled with a choice of programming languages. In this way, knowing Silverlight will definitely help in learning Flex, and vice versa. With Flex, thanks to the Flash plug-in, you can expect your programs to perform almost identically anywhere they’re deployed. Silverlight also attempts to offer cross-platform compatibility using a browser plug-in, and although the Silverlight plug-in is larger, its reach is growing. Like Flex, Silverlight offers several advanced controls and layout containers; however, because Flex is open source, the number of third-party Flex components has the potential to increase at a greater pace.

OpenLaszlo

OpenLaszlo is a popular open source framework using Scalable Vector Graphics (SVG) and XML/JavaScript to build RIAs. As such, developers comfortable with this framework will surely make an easy adjustment to MXML and ActionScript.

When Not to Use Flex

Flex is a great technology, and many will find it solves issues that have plagued past development. However, it’s not for everyone.

How Do I Know It’s a Flex Application?

With the explosion of Web 2.0 and the RIA, the lines have blurred between what’s possible in HTML and what’s reserved for Flash. Just a few years ago, if you saw a fancy transition or animation, you could be sure it was Flash. Now, though, it’s tough to tell just by looking.

One trick to test whether a site or widget was created using Flex is to right-click (Control-click on a Mac) some area of the application. If the content is Flash or Flex, a context menu will appear noting “About Adobe Flash Player” at the bottom. Although this test can guarantee content is running in Flash Player, it doesn’t confirm it was built using Flex. For that, unfortunately, there’s no sure method, because folks have built some pretty sophisticated applications using just the Flash IDE. However, once you get a feel for a few Flex applications and become familiar with the most common components, you can generally spot a Flex application simply by seeing it and interacting with it.

If you’re looking to create simple animations and don’t want to write any code, a Timeline-based animation utility might be a better choice. Because Flex requires a component framework, its applications often result in larger file sizes than custom Flash or ActionScript-only applications. However, in many cases, a slight increase in size may be worth the reduced development time. If you don’t want simple widgets or small applications to be weighed down by the framework, there are some solutions. For instance, it’s not necessary to use the Flex components or even MXML to create Flex widgets. It’s completely possible to create an ActionScript-only project and compile it using the Flex compiler, and if this is your intention, Flash Builder is a great tool for such projects.

If your project requires a lot of richly formatted text and basic user interactions, you might be better off using HTML/Ajax. While Flex has decent support for HTML, it may be insufficient for some projects. However, if you want to reserve the option of deploying to the desktop via Adobe AIR, Flex might become the better choice, as AIR has native support for the full gamut of HTML. If you only intend to develop websites with loads of text, just use HTML.

Summary

Hopefully, now you have a better idea of what Flex is all about. While Flex was created to simplify web application development for Flash Player, Flex has become a key player in the world of rich applications for the Web and the desktop. Since a Flex UI can be created rapidly using MXML and CSS, and because an application’s appearance and scripted functionality are easily separated, Flex helps simplify exchanges between designers and developers working collaboratively. You’ve seen how Flex compares to other technologies, and you’ve learned what Flex is good for as well as when it’s not the best choice. If Flex is the tool you’re looking to learn, the following chapters will get you rolling. The next chapter jumps right into the basics of using Flex and Flash Builder.