Using Runtime Shared Libraries

The Basics

The best way for you to learn about RSLs is to build several copies of the same application with and without various permutations of RSL settings. Follow these steps:

1. Create Info.mxml, a small MXML component that displays its initialization time:

   <?xml version="1.0" encoding="iso-8859-1"?>
   <mx:Button xmlns:mx="http://www.macromedia.com/2003/mxml" 
             backgroundColor="#ffffff"
             width="250" height="150"
             initialize="go()">
     <mx:Script>
       var name:String = "?";
       function go()
       {
           var start:Number = 0;
           if (_global.startTime != undefined)
               start = _global.startTime;
   
           var dt:Number = (getTimer() - start) / 1000;
           label = name + " initialized in " + dt + " s." ;
       }
     </mx:Script>
   </mx:Button>

2. Create app1.mxml, a trivial little application that you use as the basis for the experiments:

   <?xml version="1.0" encoding="iso-8859-1"?>
   <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml"
                   xmlns="*"
                   width="300" height="200">
     <Info name="{className}" />
   </mx:Application>

3. Load app1.mxml in your browser. You will see a button similar to Figure 1.

   

   Figure 1. Browsing app1.mxml, a simple Flex application

The size of the generated SWF file is fairly large, because simply using the Application and Button classes causes much of the Flex application model to be linked into your application. If you have the <keep-generated-swfs> option enabled in your Flex configuration file, Flex writes a copy of the SWF file to the application directory as app1.swf (not to be confused with the URL used to download the SWF file, which is actually app1.mxml.swf):

% ls -l app1.swf
-rw-------    1 rg       129899 Oct 18 07:14 app1.swf

Each Flex application starts from a similar baseline size, because each contains most of the same components. Clearly, if you have multiple Flex applications on your server, it is wasteful (of users time and your bandwidth) for users to have to download so much redundant information!

Wouldn't it be nice to factor shared components and assets in your application into libraries that could be loaded at runtime? You can!

The following steps show you how to convert your baseline application to use RSLs:

1. Specify what goes into the library. Create a file named shared.sws with the following content:

   <library>
     <component name="Application" 
                uri="http://www.macromedia.com/2003/mxml" />
     <component name="Info" uri="*" />
   </library>

2. Copy app1.mxml to app2.mxml. Edit app2.mxml to look like this:

   <?xml version="1.0" encoding="iso-8859-1"?>
   <mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" 
                   xmlns="*"
                   width="300" height="200"
                   rsl="shared.sws">
     <Info name="{className}" />
   </mx:Application>

3. Load app2.mxml in your browser, and if you haven't made any typos, it should look virtually identical to app1 (Figure 1).

Congratulations, you've now converted a statically linked Flex application (all components and assets defined internally) to a dynamically linked Flex application (some components and assets loaded at runtime). Observe the file sizes:

-rw-------    1 rg       129899 Oct 18 07:14 app1.swf
-rw-------    1 rg         9127 Oct 18 07:23 app2.swf

You've decreased the SWF file size by 117K—quite an improvement! I'll explain where the bits went in the next section. On the surface, it might appear from your SWS file that you were only going to import the Application and Button components. However, you are actually also importing all their dependencies. In general, you will see an immediate improvement in download size by building a SWS file that just references Application, but you get the best improvement by carefully setting up your SWS specification to include all referenced shared components.

Currently, there is no straightforward way to know the optimal set of components to include in your SWS file. However, you can get some hints by perusing the compile report generated when you build your application (and have the appropriate setting enabled in your Flex server configuration file). Any symbol definition marked "external" is imported from a RSL. All other symbols are linked into the application itself. Don't worry too much if a few stray classes get linked in; if you just list the MXML elements that you use, you are guaranteed to get a highly effective RSL.

Page 2 of 6

Previous Page

Next Page