Flex Article

Using Flash Player 8 Features in Your Flex 1.5 Application

Macromedia Flash Player 8 is here and packed with useful and innovative features. Performance and memory consumption are also significantly improved in the new player, and you will notice the improvement without changing a line of code or recompiling.

As a Flex developer, you will probably spot immediate opportunities to use some of the new features in Flash 8:

• File upload and download—a frequent request from developers
• The new ActionScript/JavaScript API, which allows you to call JavaScript functions from your ActionScript code and ActionScript from your JavaScript code, and exposes innovative ways to combine HTML and even AJAX interfaces with Flex interfaces
• A new ActionScript API to allow developers to directly manipulate the Input Method Editor (IME). Using this feature, you have direct control over the conversion mode used at any particular point in your application, and conversion modes can dynamically change as a user navigates around the application. So, for example, you can switch between hiragana and katakana, while the user has the Japanese IME enabled.
• For more information about the key Flash Player 8 features you might want to incorporate into your Flex 1.5 application, see Flash Player 8 and Flex 1.5.

So, Flash Player 8 provides a lot of great features. How do you take advantage of these features in Flex 1.5? This article explains how you can take advantage of the new features in Flash Player 8 by building content for it using the Flash 8 authoring tool and then loading the resulting SWF file into a Loader component in your Flex application. The process is simple and straightforward. You continue to build all your application interface and logic in Flex and simply leverage a small library of Flash Player 8 functions. Better yet, for the file upload and download feature, we provide a code example in this article that you can drop into your Flex 1.5 applications without needing to use the Flash authoring tool.

Requirements

To complete this tutorial you will need to install the following software and files:

Flex 1.5

• Try
• Buy

Flash Player 8

• Download Flash Player 8 Beta

Flash 8

As of the writing of this article, Flash 8 is not yet available. When it becomes available, you will be able to use it to extend the example provided here and create Flash 8 content to integrate into your Flex applications. Find out more about the Flash 8 authoring tool.

Tutorials and sample files:

• FileIO.zip (ZIP, 9k)

Leveraging Flash Player 8 in Flex 1.5

Flash Player 8 delivers a host of new features and capabilities. While it’s tempting to access the APIs directly in ActionScript and compile and run your Flex 1.5 application leveraging those features, this won’t work for several reasons. Primarily, the Flex 1.5 compiler won’t recognize the new ActionScript statements. It is hard-coded to produce Flash Player 7 SWF files. An upcoming release of Flex will give full support for Flash Player 8.

Don’t despair, however, you can still leverage many of the features in Flash Player 8 using a different method. First, you can build small blocks of Flash Player 8 SWF files using the Flash 8 authoring tool, producing libraries of Flash Player 8 classes that you can use in your Flex 1.5 applications. Then, you can load Flash Player 8 SWF files into your Flex 1.5 applications using a Loader component and gain access to them in your Flex 1.5 application through ActionScript. The approach is simple and gives you access to many of the Flash Player 8 features most requested by Flex developers.

There are a couple of ways of achieving this. You can create Flash Player 8 SWF files that have no user interface and just provide a set of classes and methods to use in your Flex 1.5 application. Or, you can build whole interfaces in Flash Player 8 content that display and run in your Flex application. Regardless of the approach you choose, you can communicate events, properties, and call methods in the SWF or the Flex application easily.

Through all of this, remember the Flash Player 8 security model. Be careful about loading SWF files and accessing information from other domains. For more information on the Flash Player 8 security model, see the Flash Player Developer Center.

File Upload and Download Example

File upload and download is a frequent request from many Flex developers. Now you can do it natively in the Flash Player instance without using the old method of calling the browser’s JavaScript to pass files around. This has a lot of benefits, primarily greater control over the user experience. Luckily, leveraging file upload and download in your Flex application is very simple. You can reuse the library of file transfer classes provided with this article so you don’t even have to write a line of Flash Player 8 code.

For this example, you learn how to use a small Flash Player 8 SWF file loaded into your Flex application. This Flash Player 8 content was created using the Flash 8 authoring tool. It has no user interface, so effectively it only provides you with a library of classes to use for file transfer; you continue to use Flex to build the entire interface and logic of your application.

There are actually two examples here. The first example is the simplest way to include file upload functionality in your Flex application and illustrates how you can include this feature in your applications. The second example elaborates on the simple file upload functionality and integrates the feature into a typical enterprise Flex architecture. It also gives you event logging, progress monitoring, and other useful features. Use the second example if you have a sophisticated, architected application.

This article provides several files for use with both examples:

• SWF file transfer library: This is a simple file transfer library created using the Flash 8 authoring tool. The fileIO.fla file with the code is in the ZIP file under the /flash directory. That FLA file is compiled into the fileIO.SWF file. The code in this SWF file simply exposes a function for each activity you might want to perform on a file: browse, upload, download, and cancel. When you load the SWF file into a Flex application using a Loader component, those functions become available to you. The SWF file is only 1K, and therefore adds very little to the size of your Flex application. You can load it at any time when or after your Flex application instantiates. You may use this example code in any application without changing a line of the code.
• Server-side processing: This article provides a very simple one-line ColdFusion file, upload.cfm, to receive the uploaded file and store it into the /upload directory. You can place this file anywhere on your ColdFusion server as long as you reference that location in the config.xml file provided. Of course, you can use the technology of your choice on the back end whether that be Java, ASP, PHP, or anything else. We simply provide this ColdFusion file as an example. If you want to build your own action page, you will have to process the HTTP POST data sent by the Flash Player.

Simple File Upload Example

In the simplest case, you can use the fileIO.swf file to give a user the functionality to select a file and then upload that file to the server. The ColdFusion file receives the file and stores it in the /upload directory. Use the SWF and ColdFusion files exactly as provided. The simpleFileTransfer.mxml file is as follows:

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
  <mx:Button label="Browse" click="myLoader.content.browse('myFile')" id="browseButton" />
  <mx:Button label="Upload" click="myLoader.content.upload('http://localhost:8300/upload.cfm')" id="uploadButton" />
  <mx:Loader source="fileIO.swf" height="10" width="10" id="myLoader" />
</mx:Application>

This example simply shows how you can add a Loader component, which loads the SWF file, fileIO.swf. The two buttons execute a function in the loaded SWF file using the content parameter of the Loader component:

loader.content.function(parameters)

So, you can add basic file upload functionality to your Flex 1.5 application today using the fileIO.swf file provided in the Requirements section.

More Complex File Transfer Example

The second file transfer example provides a lot more functionality, and fits into best practices for Flex architecture. In this example, there are three MXML files in addition to the SWF and ColdFusion files. The three MXML files are as follows:

LibLoader.mxml: This is an MXML component that essentially wraps the Loader component with a few extra capabilities to manage the loaded event. You can use this component as a base class for your own projects.

FileIO.mxml: This is an MXML component that extends the LibLoader component with special browse, upload, download, and cancel methods. These methods are just wrappers that call the same functions in the fileIO.swf file. This file also adds a set of event listeners to catch status and error events.

main.mxml: This is a Flex application that includes the FileIO component and the rest of the Flex user interface to allow the user to select, upload, and download files; cancel them; and see the progress of the file transfer. In this file, the FileIO component is the Loader with the new capabilities added mainly in the FileIO.mxml file. Instead of calling functions in the loaded SWF file using loader.content, this file simply executes methods of the FileIO component.

This example illustrates that you can reuse a single SWF file with a library of Flash Player 8 functions for a wide range of needs in a wide range of applications. Use this SWF file for your file transfer implementations and choose a level of architectural sophistication that matches your application.

Once you are comfortable with this approach, you can use Flash 8 to create your own SWF files that leverage all sorts of great new features of Flash Player 8. You'll be able to leverage the ActionScript/JavaScript APIs and the expressiveness features to extend your Flex application using the same simple techniques.

Many thanks to Joan Tan, who is a quality assurance engineer on the Flex team. Joan contributed technical information and reviewed this article based on her background in working on Flex. Joan has also worked in quality assurance on Macromedia Central and Macromedia Flash.

About the authors