Programming Flex 3: Chapter 20, Embedding Flex Applications in a Browser
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

This technique of passing values to a Flex application from HTML is sometimes referred to as using flashvars because the object tag parameter used to pass the values to the Flex application is called flashvars. Values passed to a Flex application using the flashvars parameter must be in URL-encoded name-value pairs delimited by equals signs and ampersands exactly as they would be in a URL query string. For example, the following code embeds a Flex .swf file and uses flashvars to pass in two variables called variable1 and variable2:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="400" height="400">
    <param name="movie" value="example.swf">
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="example.swf"
width="400" height="400">
    <!--<![endif]-->
        <param name="flashvars" value="variable1=a&variable2=b" />
        <p>Alternative Content</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

When values are passed to a Flex application via flashvars, they are available via using the parameters property of the Application instance. You can access this property from anywhere in a Flex application using . The parameters property is an associative array where the keys correspond to the names of the variables passed in through flashvars.

For example, you could use the following code to output the values passed in via the preceding HTML example:

trace(Application.application.parameters.variable1);
trace(Application.application.parameters.variable2);

Detecting Flash Player

Flex applications require that the user has Flash Player installed if he is to use the application. Not only do Flex applications require that the user has Flash Player in general, but they specifically require that the user has Flash Player 9 or later. Therefore, it is important that you account for users who might not have Flash Player installed (according to Adobe's studies, this accounts for just around 1% of users) as well as users who might have Flash Player installed, but don't have the necessary version (i.e., they need to update their Flash Player to Version 9 or later). Additionally, for users connecting via devices that don't support Flash Player (e.g., some mobile devices), you can display alternative content.

You can detect Flash Player and/or the Flash Player version in a variety of ways, ranging from client-side JavaScript to server-side scripting to ActionScript. Adobe has a Detection Kit (http://www.adobe.com/products/flashplayer/download/detection_kit) that is available as a free download (all the necessary files are also included in the Flex SDK with the HTML templates, as you'll read in " later in this chapter). The Flash Player Detection Kit is Adobe's current official solution to Flash Player detection, and it is worth downloading the kit just to read the documentation that is included because it provides a helpful context and a fair amount of useful information. However, plenty of criticisms have been leveled at the Flash Player Detection Kit, most of which are warranted. The key criticisms are as follows:

• The kit relies on non-standards-compliant markup code because it uses both the object and the embed tags.
• It requires that you define alternative content twice instead of once, and in two different ways.
• It is difficult to customize the code.

There is nothing necessarily wrong with using the Flash Player Detection Kit. However, for the reasons just mentioned, we do not recommend it as the best solution. Instead, we recommend using SWFObject, which we describe in "Using SFWFObjact" later in this chapter.

Although we don't recommend its use outright, the Flash Player Detection Kit is not without value. It contains one component that highlights an important feature of Flash Player, called Express Install. Express Install is available in Flash Player 6.0.65 and later, and it allows Flash Player to download and install the latest version of itself. That means that if a user has Flash Player 6.0.65 or later installed but she doesn't have the latest version required by your Flex application, it is possible to allow the user to download and install the latest version from within your site. The user will never have to leave the site, and once the installation is complete, the browser will restart and open to the same page the user was just on (the page with the Flex application).

Technically, Express Install is a feature of Flash Player, and it doesn't require the Flash Player Detection Kit. However, practically speaking, the detection kit provides an Install .swf file that you can use to trigger Express Install if necessary. You'd need the Flash IDE to create a custom Express Install .swf file, and for most purposes the version that is included in the detection kit is all you need.

This excerpt is from Programming Flex 3. If you want to try your hand at developing rich Internet applications with Adobe's Flex 3, and already have experience with frameworks such as .NET or Java, this is the ideal book to get you started. Programming Flex 3 gives you a solid understanding of Flex 3's core concepts, and valuable insight into how, why, and when to use specific Flex features. Learn to get the most from this amazing and sophisticated technology.

The general process for using Express Install is as follows:

1. Use a detection method (client-side, server-side, or Flash-based) to detect whether the user has Flash Player installed. If the user has no version of Flash Player or a version prior to 6.0.65, direct the user to alternative content.
2. If the user has the version of Flash Player required by your Flex application, simply display the application. However, if the user has a version that is earlier than what your application requires, load the Express Install .swf file into Flash Player. This will automatically prompt the user to download and install the latest version of Flash Player right from within the browser.
3. Once the installation is complete, the browser will restart and will open to the page that was open prior to installation. This time the detection method will detect that the user has the necessary version of Flash Player.

In the templates directory of the Flex 3 SDK or in the Flash Player Detection Kit, the Express Install .swf is called playerProductInstall.swf.

Using the Standard Templates

Flex ships with a variety of standard templates that you can use. The templates are located in the templates directory of the SDK. These templates include the following:

• No player detection
• Client-side detection
• Express Installation
• No player detection with history
• Client-side detection with history
• Express Installation with history

All of these templates use the same JavaScript file and the same markup as the Flash Player Detection Kit, which puts the templates in the same boat with the detection kit as far as the previously mentioned criticisms are concerned. Therefore, we do not recommend using the templates, except perhaps in the early stages of application development, while testing applications locally using Flex Builder.

Note: By default, when you run or debug an application in Flex Builder, you are using the templates.

Using SWFObject

SWFObject is a method for embedding Flash and Flex content in an HTML page. It uses JavaScript for Flash Player detection and for a variety of other features. SWFObject is the unofficial standard for embedding Flash and Flex content, and it is the method we recommend in this book. SWFObject is easy to use, and it uses standards-compliant markup and unobtrusive JavaScript. You can download SWFObject from http://code.google.com/p/swfobject.

The SWFObject documentation is excellent at explaining both how and why to use SWFObject, and we won't attempt to repeat too much of that here in this book. However, we'll give you a brief introduction that will provide you with enough information to get started, and you can consult the documentation for further details.

SWFObject 2.0 (the current version as of this writing) provides two ways for you to embed content: static publishing and dynamic publishing. Static publishing uses markup directly in the HTML, and it uses JavaScript to resolve issues that cannot be dealt with by markup (such as player detection). The biggest advantage of static publishing is that because it doesn't rely on JavaScript to embed the content, your Flex application will be available to browsers that don't support JavaScript or that have JavaScript disabled; devices that have poor JavaScript support; and automated tools. Dynamic publishing, on the other hand, uses JavaScript to write the Flex application to the page. The advantage to this is that it sidesteps click-to-activate issues related to the Eolas patent (note that this primarily affected Internet Explorer, and Microsoft has since reversed this change) and it allows for easier integration with scripted applications. Dynamic publishing works only if enough JavaScript support is available. Otherwise, the user will see only alternative content.