“Supposing is good, but finding out is better.”
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.
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 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.
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.
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.
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.
<s:Groupid="container" horizontalCenter="0" verticalCenter="0"
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).
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.
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.
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.
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.
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?” 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.
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.
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.
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.
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.
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.
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.
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/.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.