Flex Article

Flex Application Performance: Tips and Techniques for Improving Flex Server Performance

Precompiling MXML Pages

The earlier section on caching discusses how, for best performance, you must recompile the MXML files and load them into the cache after a server restart. Another option is to precompile your MXML pages with the headless compiler, mxmlc, and create your own HTML shell to load the SWF files into the browser. This option enables you to deploy bytecode, but is somewhat more involved than letting Flex build your HTML wrappers for you on the fly. Many of the things, such as player detection and history management will no longer be generated automatically. You must code them into your HTML wrapper to provide those features.

The following code demonstrates an example of precompiling an MXML file that creates an HTML wrapper. It has a TabNavigator container with four tabs. If you put this code in an MXML file and invoke it through a browser, you can click the tabs and use the browser's Back and Forward buttons to move through the Flex application.

<?xml version="1.0"?>
 <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
 <mx:Panel title="My Application">
 <mx:TabNavigator borderStyle="solid">
 <mx:VBox label="Pane1" width="300" height="150" >
 <mx:TextArea text="Hello World" />
 </mx:VBox>
 <mx:VBox label="Pane2" width="300" height="150" >
 </mx:VBox>
 <mx:VBox label="Pane3" width="300" height="150" >
 </mx:VBox>
 <mx:VBox label="Pane4" width="300" height="150" >
 </mx:VBox>
 </mx:TabNavigator>
 </mx:Panel>
 </mx:Application>

To prevent this file from compiling each time the server restarts, you can use mxmlc to precompile the file as follows:

{flex-root}bin\mxmlc ..\jrun4\servers\default\flex\TabNav.mxml

For complete details on using mxmlc, see the Flex documentation.

Note: Please read the Flex end-user license agreement for details on distributing SWF files created with mxmlc. In the trial and development versions of Flex, all SWF files created with mxmlc expire one day after compilation. With the full version of Flex, they will not expire.

In the following example, mxmlc creates the SWF file in the same directory as the MXML. The next step is to build the HTML shell and integrate the SWF file into the HTML, JSP, or CFML files, or in a servlet. The easiest approach is to use a shell that an MXML file within the same Flex application generated. By using a Flex-generated shell, you retain the Flex history management features. All you need to do is replace the file.mxml.swf entry with the file.swf entry in four locations. For example:

<script language='javascript' charset='utf-8' src='/flex/flex-internal?action=js'></script>
 <noscript>
   <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,14,0' width='100%' height='100%'>
     <param name='flashVars' value=''>
     <param name='src' value='TabNav.swf'>
     <embed pluginspage='http://www.macromedia.com/go/getflashplayer' width='100%' height='100%' flashVars='' src='TabNav.swf'/>
   </object>
 </noscript>
 <script language='javascript' charset='utf-8'>
	 document.write("<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,14,0' width='100%' height='100%'");
	 document.write(">");
	 document.write(" <param name='flashVars' value='historyUrl=%2Fflex%2Fflex%2Dinternal%2Fhistory%2Fhistory%2Ehtml&lconid=" + lc_id +"'>");
	 document.write(" <param name='src' value='TabNav.swf'>");
	 document.write(" <embed pluginspage='http://www.macromedia.com/go/getflashplayer' width='100%' height='100%'");
	 document.write(" flashVars='historyUrl=%2Fflex%2Fflex%2Dinternal%2Fhistory%2Fhistory%2Ehtml&lconid=" + lc_id +"'");
	 document.write(" src='TabNav.swf'");
	 document.write(" />");TabNav.swf
	 document.write("</object>");
 </script>
 <script language='javascript' charset='utf-8'>
 	document.write("<br><iframe src='/flex/flex-internal/history/history.html' name='_history' frameborder='0' scrolling='no' width='22' height='0'></iframe></br>");
 </script>

For history management to work, you must ensure that the context-root of the application is correct. If you deploy Flex with a context root of /flex, then you must prefix all URLs in the HTML wrapper with /flex. In the previous example, the context-root is /flex. Using the information provided, you can improve the startup time of the first request for your application, because Flex does not need to compile the MXML files. Precompiling the application also enables you to distribute applications without the source code. Using ant, or another build tool, you could wrap up the mxmlc functionality and build HTML shells into an automated process.

You can find more information on building your own HTML wrappers in the Flex documentation. The documentation also describes the steps for adding player detection to your HTML wrappers.

Page 6 of 9

Previous Page

Next Page