Chapter 20: Embedding Flex Applications in a Web Browser

Although it is possible to build Flex applications to deploy on the desktop (see Chapter 22), the vast majority of Flex applications today are deployed on the Web. To deploy a Flex application on the Web you should embed it in an HTML page. Although this may seem like a fantastically simple task (and it can be), it has larger implications. In this chapter, we'll look at these implications and the options available to you for embedding a Flex application in HTML and how a Flex application can interact with the web browser environment.

Section 20.1: Embedding a Flex Application in HTML

By now, you should be aware that Flex applications get compiled to .swf files. When you deploy a Flex application to the Web, you must place the .swf file for the Flex application on the web server. At a minimum, this one file is always required. However, in almost all cases you will need to provide at least one additional file: an HTML file that embeds the .swf. Although it is possible for users to access an .swf file directly in a web browser, such an approach is inadvisable. Keep in mind that when users access a Flex application in a browser, you will still want the browser to display basic information such as a title, information that only an HTML page can provide. Furthermore, by using an HTML page, it is possible to do much more with a Flex application than if the user was accessing the application's .swf file directly in the browser. For example, using an HTML page you can utilize JavaScript. And by embedding a Flex application in HTML, you can place the application alongside other non-Flex content. Not only that, but by using JavaScript and HTML, you can detect whether the user even has Flash Player installed. Therefore, embedding Flex applications in HTML is a fundamental skill for creating Flex applications. In the next few sections, we will look at various ways in which you can embed Flex content in HTML pages.

Note: Any technology that writes HTML to a browser can be used interchangeably with HTML files, as we describe in this chapter. For example, you can use the same principles described in this chapter with PHP, .NET, and Ruby to embed a Flex application.

Using HTML Tags to Embed Flex Content

Flex applications are .swf files that must be run by an ActiveX control or a browser plug-in. Therefore, you embed Flex applications in HTML pages in much the same way that you can embed other types of applications or media that requires an ActiveX control or a browser plug-in.

Note: Flash Player runs as an ActiveX control in Internet Explorer and as a plug-in for Firefox and other browsers.

Two tags allow you to embed content in an HTML page: object and embed. There is much debate among developers as to which is better and how they should and shouldn't be used. For instance, the embed tag is supported in all modern browsers, and that might sound like a good enough reason to use it exclusively. However, there are drawbacks to using the embed tag. For one, the embed tag is not standards-compliant; it is not the W3C-recommended way in which to embed content. This is because the embed tag is proprietary and is covered by patents. Furthermore, there is the issue of alternative content. Although some popular search engines (notably Google) are capable to some degree of indexing Flash and Flex content, it is still customary (and recommended) that you provide alternative content whenever you have a Flex application. This allows you to create content that will be visible not only to users who do not have Flash Player, but also to search engines, allowing you greater control over how search engines index the site. The embed tag simply doesn't allow this to happen. Although the embed tag does allow alternative content using a noembed tag, only users using a browser that doesn't support the embed tag can view the alternative content, and this doesn't include search engines. For these reasons, we recommend that you use only the object tag, which is the W3C recommendation. Also, the object tag allows you to specify alternative content that is indexable.

Although there is one W3C recommendation for how to embed such content using an object tag, as we'll see not all browsers are designed to work according to the same specification. One of the strengths of Flex is that it shields application developers from the majority of browser inconsistencies. However, the only time you'll have to deal with these issues is when you embed the Flex application in an HTML page.

All browsers are consistent in that when you use the object tag, you must specify width and height attributes, indicating the dimensions (in pixels) of the content to embed in the page. However, beyond that they differ on two important points:

• How the object tag determines which control or plug-in to use
• How the object tag determines which .swf to load into the control or plug-in

Microsoft Internet Explorer determines the control to use by way of an attribute called classid. The classid value for Flash Player is a long value that you are unlikely to memorize. Instead, you'll simply want to copy and paste it from one document to another. Therefore, an object tag that will embed a Flash Player control in a page for Internet Explorer (at 400 by 400 pixels) looks like the following:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="400" height="400">
</object>

Note: The classid value is case-insensitive.

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.

Internet Explorer relies on a nested param tag with a name of movie to specify the .swf that should be loaded into the control. The following example will load an .swf file called example.swf:

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
        width="400" height="400">
    <param name="movie" value="example.swf">
</object>

Note: You can also specify a codebase attribute for Internet Explorer to tell the browser where it can go to download the control if it's not already installed. This is generally not advised because it interferes with alternative content and there are better ways to allow users to install Flash Player. The HTML templates that ship with the Flex SDK (and Flex Builder) use the codebase attribute. However, as you'll read later in this chapter, we advise against using the Flex HTML templates for this and other reasons.

Internet Explorer is alone in its answers to these questions. All other major browsers take a different approach and have standardized on specifying the plug-in to use via the MIME type as indicated by the value of a type attribute. They also have standardized on specifying the content to load into the plug-in via an attribute called data.

The following is an example of an object tag that accomplishes the same thing as the preceding example, except that it works for all browsers excluding Internet Explorer:

<object type="application/x-shockwave-flash" data="example.swf"
width="400" height="400" />

The obvious question is how can you support all browsers at the same time if different browsers require different implementations? One of the preferred answers to this question is to nest the object tags with the Internet Explorer version on the outside. Browsers that don't use the classid attribute will ignore the outer object tag, using only the inner tag. Internet Explorer has a bug with nested object tags, but to resolve this you can use Internet Explorer conditional statements to effectively hide the inner tag. The result looks like the following:

<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]-->
</object>

You can improve this further by adding alternative content, as in the following example:

<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]-->
        <p>Alternative Content</p>
    <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
</object>

Any additional parameters that you'd like to pass to the object tag you should place inside the nested object tag but outside the conditional statements, right next to the alternative content. When using the object tag to embed Flex content, you can specify a lot of different parameters, all of which are listed at the Adobe web site (http://livedocs.adobe.com/flex/3/html/help.html?content=wrapper_13.html). You'll see an example of how to use one such parameter in the next section.

Note: The Flex HTML templates use an object tag for Internet Explorer and a nested embed tag for all other browsers. Although that approach does work, it is not ideal because the embed tag is a proprietary tag that is not part of the W3C recommendation for standards.

Passing Values to Flex Applications from HTML

In earlier chapters, you learned the various ways in which a Flex application loads data. For example, you learned how to use the WebService component to load data from web services. However, a Flex application can acquire data at runtime in yet another way: you can pass values to the Flex application from HTML. Just as web services have their uses and purposes, this technique of passing values from HTML to Flex has its uses and purposes, which are generally different from those of web services (or any other remote procedure call [RPC] techniques). Typically, you will want to pass only small amounts of data to a Flex application from HTML, and the data is typically . For example, you may pass values to a Flex application telling it where the web services can be found on a specific environment (i.e., testing versus ).

Note: One major advantage to passing data to the Flex application from HTML over other techniques is that the data is available immediately when the application starts.