Creating a simple wrapper

You can write your own wrapper for your SWF files rather than use the wrappers generated by Flex Builder or the Flex module for Apache and IIS. Your own wrapper can be simple HTML, or it can be a JavaServer Page (JSP), a PHP page, an Active Server Page (ASP), or anything that can return HTML that is rendered in your client's browser. Typically, you integrate wrapper logic into your website's own HTML templates.

This section describes how to write the simplest wrapper possible to get your Flex application running on a web server. It does not include features such as deep linking and Express Install. These features improve the user experience and should be omitted only after careful consideration. Instructions for adding these features, which can make creating a wrapper more complex, are described in later sections.

A basic wrapper consists of the following files:

HTML page This is the file that the client browser requests. It typically defines two possible experiences (one for users with JavaScript enabled and one for users without JavaScript enabled). This page also references a separate JavaScript file. In the provided HTML templates, a basic version of this page is included at /templates/no-player-detection/index.template.html.

JavaScript file The JavaScript file referenced by the <script> tag in the HTML page includes the following:

<object> tag This tag embeds the SWF file for Internet Explorer.
<embed> tag This tag embeds the SWF file for Netscape-based browsers.

In the provided HTML templates, the JavaScript file is named AC_OETags.js. This JavaScript file contains a great deal of logic that is unnecessary for a basic wrapper, so you will probably want to write your own when developing a basic wrapper.

The client first requests the HTML page. If the user's browser has JavaScript enabled, the HTML page then references the JavaScript file. The JavaScript file embeds the Flex application's SWF file.

To make your Flex application respond immediately without user interaction, use a <script> tag to load the JavaScript file that contains the <object> and <embed> tags. Do not write the <object> and <embed> tags directly in the HTML file. Controls that are directly loaded by the embedding page require activation before they will run in Microsoft Internet Explorer 6 or later. If you load the controls directly in the HTML page, users will be required to activate those controls before they can use them by clicking on the control or giving it focus. This is undesirable because you want your Flex application to run immediately when the page loads, not after the user interacts with the control.

If the client disabled JavaScript in their browser, you typically embed the Flex application directly in the <noscript> tag. You can add warnings that they should enable JavaScript or else they will have a less than ideal experience.

The following example illustrates the minimum number of requests that the client browser makes when JavaScript is enabled:

The requests that a client browser makes when JavaScript is enabled.

The following example shows the minimum requirements of the HTML page and JavaScript file to embed a Flex application named MyApp:

<!-- index.html -->
<!-- saved from url=(0014)about:internet -->
<html>
    <body>
        <script src="mysource.js"></script>
    </body>
</html>
<!-- mysource.js -->
document.write("<object id='MyApp' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0' height='100%' width='100%'>");
document.write("<param name='movie' value='MyApp.swf'/>");
document.write("<embed name='MyApp' src='MyApp.swf' pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash' height='100%' width='100%'/>");
document.write("</object>");

Adding the Mark of the Web (MOTW) to your wrapper is optional. However, if you do not add the MOTW to your wrapper, your application might not open in the expected security zone within Internet Explorer. The following example MOTW forces Internet Explorer to open the page in the Internet zone:

<!-- saved from url=(0014)about:internet -->

In general, add a MOTW when you are previewing pages locally before publishing them on a server. For more information about the MOTW, see http://msdn.microsoft.com/workshop/author/dhtml/overview/motw.asp.

To support browsers that do not have scripting enabled, you can add a <noscript> block to the wrapper. The tags in this block of code usually mirrors the output of the document.write() methods in the embedded JavaScript file. The following example adds the <noscript> block:

<!-- index.html -->
<!-- saved from url=(0014)about:internet -->
<html>
    <body>
        <script src="mysource.js"></script>
        <noscript>
            <object id='MyApp' classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
                codebase='http://download.macromedia.com
                /pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0'
                height='100%' width='100%'>
                <param name='src' value='MyApp.swf'/>
                <embed name='MultipleButtons' pluginspage='http://
                    www.macromedia.com/shockwave/download/index.cgi
                    ?P1_Prod_Version=ShockwaveFlash' src='MyApp.swf' height='100%'
                    width='100%'/>
            </object>
        </noscript>
    </body>
</html>

Adobe Flex 3 Help

Creating a simple wrapper