by Adobe
adobe_logo

Created

2 May 2011

 

Include your application on a web page

 
 

Code

No code changes.
 

Tutorial

In the previous three modules, you learned to build and debug a Flex application. In this module, you learn to deploy your application to a web server.
 
First, you create a release version of the application. Next, you examine the code you need to use to have a web page load your Flex application. Finally, you see what additional files you need to place on the web server along with the SWF file.
 

 
Step 1: Create a release build.

Select Project > Export Release Build. In the Export Release Build wizard, select your project and application and specify where you want the release build saved (see Figure 1).
 
When you are developing your application, a debug version of your application is created and stored in the project's bin-debug.
 
Create a release build.
Figure 1. Create a release build.
If you look in the Package Explorer, you will now see a bin-release folder in your project, which is a pointer to the export folder you just specified (see Figure 2).
 
View the bin-release folder.
Figure 2. View the bin-release folder.
The bin-debug and bin-release folders contain many files in addition to the SWF file. You examine these different files in subsequent steps.
 

 
Step 2: Compare SWF application file sizes.

Right-click the SWF file in the bin-debug directory and select Properties to view its location and size. Repeat for the SWF file in the bin-release folder.
 
The release SWF file is typically ~100 KB or less in size.
 

 
Step 3: Look at the html-template files.

Look at the files used to generate your browser-embedded application (see Figure 3).
 
The files you see in this folder will depend upon your project settings.
 
View the html-template files.
Figure 3. View the html-template files.
By default, when you build your application, these template files are used to generate the HTML file and other files that get put in the bin-debug and bin-release folders. They contain variables that are populated by project properties or Application tag attributes. The purpose of each file is discussed in the next two steps.
 

 
Step 4: Open FlexWebTestDrive.html.

Look at the generated code for embedding the Flex application.
 
In order to view your application, the user needs Flash Player—more specifically, a particular version of Flash Player. This means that the web page that embeds your application must also contain code to check for the presence of the minimum required version of Flash Player and code to help users upgrade or get Flash Player if they do not meet the requirements. The primary code for checking for the presence and minimum version of Flash Player is provided by SWFObject2, a standards-based library for embedding SWF files in HTML pages. The library is included in the web page:
 
<script type="text/javascript" src="swfobject.js"></script>
And your SWF file is embedded by calling the embed() method of swfobject:
 
swfobject.embedSWF( "FlexWebTestDrive.swf", "flashContent", "100%", "100%", swfVersionStr, xiSwfUrlStr, flashvars, params, attributes);
The first argument is the location of the SWF file. The second argument is the name of alternate content (the id of a div tag defined further down in the code) to display if Flash Player is not available. The third and fourth arguments specify the height and width of the application. By default, these are set to 100% in the generated HTML wrapper so the application takes up the entire browser window. To change the application's size—or example, to take up a certain amount of space in an existing HTML page—change these arguments to other absolute or relative values.
 
The fifth argument specifies the minimum required version of Flash Player. Flex 4.5 applications require Flash Player 10.2.0 or later. The sixth argument adds Express Installation, a quick, seamless way for users to upgrade their version of Flash Player if it does not meet the minimum requirements. This argument is set equal to an empty string (for no Express Installation) or to the location of the SWF file providing this functionality: playerProductInstall.swf. Both of these values were set in JavaScript code before the embed() call.
 
The last three arguments are used to pass data to the application and set properties for the application. Use the flashvars object to pass data to the Flex application from the containing web page. Use the params and attributes objects to set parameters for how the SWF file should appear in the browser, including its quality, alignment, scale, transparency, and more.
 
Finally, take a look at the noscript tag which is executed in JavaScript disabled browsers. It contains two object tags that provide a non-JavaScript way to embed a SWF file.
 
<noscript> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="FlexWebTestDrive"> <param name="movie" value="FlexWebTestDrive.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="FlexWebTestDrive.swf" width="100%" height="100%"> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> <!--<![endif]--> <!--[if gte IE 6]>--> <p>Either scripts and active content are not permitted to run or Adobe Flash Player version 10.2.0 or greater is not installed. </p> <!--<![endif]--> <a href="/go/getflashplayer"><img src="http://adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" /></a> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </noscript>
The object tag with the classid is used by Internet Explorer and browsers that implement Flash Player as an Flash ActiveX control. The second object tag is used by browsers that implement Flash Player as a plug-in such as Firefox, Safari, or Chrome. Use param tags to set SWF parameters for both.
 
If you want to change SWF properties, make sure you set identical parameter values for the swfobject and both of the noscript object tags.
 
If you want to embed your application in an existing web page and not use the default wrapper, you need to make sure all this code (or equivalent functionality) exists in that web page.
 

 
Step 5: Look at the bin-release files

When you deploy your application to a web server, to be on the safe side, you could just move all the files located in the bin-release folder to the production server. Take a look at each of these files now, though, so you can determine if you actually need them all.
 
View the bin-release folder.
Figure 4. View the bin-release folder.
PHP developers using Flash Builder for PHP: You will also have a FlexWebTestDrive.php file.
 
Every Flex application uses at least part of the Flex framework. In order to minimize your SWF file size and download times, the framework code is not compiled into your application. Instead it is provided separately as a group of Adobe authenticated RSLs (Runtime Shared Libraries), which only have to be downloaded once, are cached by Flash Player, and can be used with any Flex application. These are all the SWZ files you see in the projects's bin folders.
 
When a user requests an application that uses Adobe RSLs (which all Flex 4 or later applications do by default), if Flash Player already has the appropriate version of the framework files cached locally, it uses them. If it does not, it downloads them from the Adobe website and then caches them locally. This means that you do not have to deploy these SWZ files to your web server. You can, though, if you want them on your server for fail-over or if deploying an application to an Internet-restricted environment.
 
The table below lists and includes a description for each of the files in the bin folders.
 
File
 
Description
 
Deploy?
 
FlexWebTestDrive.html
 
The HTML page that embeds the Flex application
 
Deploy this file or another web server page that embeds the SWFfile and checks for the minimum required version of Flash Player
 
FlexWebTestDrive.php
 
A PHP page that embeds the Flex application
 
Deploy this file or another web server page that embeds the SWF file and checks for the minimum required version of Flash Player
 
FlexWebTestDrive.swf
 
Your application!
 
Always
 
framework_x.swz
 
RSL for core Flex framework
 
No, provided on Adobe servers
 
history folder
 
Includes JavaScript, CSS, and HTML pages that are used for deep-linking which lets users navigate the app interactions with the browser's Forward and Back buttons and enables the creation of custom URLs for bookmarking
 
If your app uses deep-linking
 
mx_x.swz
 
RSL for the MX components
 
No, provided on Adobe servers
 
PlayerProductInstall.swf
 
The SWF file used with swfobject for Express Installation—a quick, seamless way for users to upgrade Flash Player
 
Always, unless you disable Express Installation
 
rpc_x.swz
 
RSL for data services that make HTTP, web service, or Flash Remoting calls
 
No, provided on Adobe servers
 
spark_x.swz
 
RSL for Spark components
 
No, provided on Adobe servers
 
sparkskins_x.swz
 
RSL for skins for MX components
 
No, provided on Adobe servers
 
swfobject.js
 
SWFObject2 code for detecting Flash Player and embedding a SWF file in a web page
 
Always, unless do not use swfobject to embed your SWF file in a web page
 
textLayout_x.swz
 
RSL for the Text Layout Framework used by the spark Text controls
 
No, provided on Adobe servers
 

 
Step 6: Change the project settings so history files are not generated.

Select Project > Properties, go to Flex Compiler, and uncheck Enable integration with browser navigation.
 
Take a look at the bin-debug folder again. You should no longer see the history folder.
 
In this tutorial, you learned how to create a release version of your application, how to embed your Flex application in a web page, and what accompanying files are needed when deploying it to a web server. In the next tutorial, you will learn where you need to place your service code, your server-side class files, so the Flex application can call them.
 

 
Learn more

Refer to the following resources to learn more about this topic:
 
 
Documentation: Using Flash Builder 4.5
 
Documentation: Using Flex 4.5