Flex Test Drive: Deploy your application to a web server
Download the Test Drive solution files (ZIP, 14 MB)
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.
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).
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.
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.
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
+
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.
More Like This
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Modify the database
- Flex Test Drive: Add charts and graphs
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Build an application in an hour
- Flex Test Drive: Change the appearance of your application
- Flex Test Drive: Change the appearance of your application
- Flex Test Drive: Add charts and graphs
- Flex Test Drive: Modify the database
