Programming Flex 3: Chapter 20, Embedding Flex Applications in a Browser
Pages: 1, 2, 3, 4, 5, 6, 7, 8, 9

Compiling an application using a runtime shared library

Once you've compiled an .swc file containing a runtime shared library and extracted the .swf file, you next need to compile the application that uses the library. To accomplish that you'll use mxmlc in much the same way as you'd compile an application that uses only static linking. However, when you use a runtime shared library, you need to dynamically link the relevant classes in the main application and tell the application where to find the runtime shared library .swf file at runtime. The external-library-path option specifies the .swc file or files that tell the compiler which classes to dynamically link. Use the runtime-shared-libraries option to tell the compiler where it can find the runtime shared library file(s) at runtime. The following tells the compiler to compile the application using example.swc for dynamic linking and example.swf as the URL for the shared library:

mxmlc -external-library-path=example.swc
-runtime-shared-libraries=example.swf Example.mxml

You can use configuration files for these purposes as well. The following configuration file achieves the same result as the preceding command:

<flex-config>
  <compiler>
    <external-library-path>
      <path-element>example.swc</path-element>
    </external-library-path>
  </compiler>
  <file-specs>
    <path-element>RSLClientTest.mxml</path-element>
  </file-specs>
  <runtime-shared-libraries>
    <url>example.swf</url>
  </runtime-shared-libraries>
</flex-config>

When you deploy the application, you must also deploy the runtime shared library .swf file. You do not need to deploy the .swc file along with the rest of your application.

Using Ant to build runtime shared library applications

As you've seen, building an application that uses a runtime shared library requires quite a few steps. To summarize:

1. Compile the .swc.
2. Extract the .swf.
3. Move the .swf.
4. Compile the application.

Using Ant can simplify things because you can write just one script that will run all the tasks. The following is an example of such a script:

<?xml version="1.0"?>
<project name="RSLExample" basedir="./">

  <property name="mxmlc" value="C:\FlexSDK\bin\mxmlc.exe"/>
  <property name="compc" value="C:\FlexSDK\bin\compc.exe"/>

  <target name="compileRSL">
    <exec executable="${compc}">
      <arg line="-load-config+=rsl/configuration.xml" />
    </exec>
    <mkdir dir="application/rsl" />
    <move file="example.swc" todir="application/rsl" />
    <unzip src="application/rsl/example.swc" dest="application/rsl/" />
  </target>

  <target name="compileApplication">
    <exec executable="${mxmlc}">
      <arg line="-load-config+=application/configuration.xml" />
    </exec>
  </target>

  <target name="compileAll" depends="compileRSL,compileApplication">
  </target>

</project>

Using Flex Builder to Build Runtime Shared Libraries

Flex Builder automates a lot of the tasks and provides dialog boxes for steps to create and use runtime shared libraries. Working with runtime shared libraries in Flex Builder comprises two basic steps: creating a Flex Library Project and linking your main application to the library project.

Creating a Flex Library Project

The first step in creating a Flex Library Project is to create the project by selecting File→New→Flex Library Project. Every Flex Library Project needs to have at least one element—generally a class. You can add classes to the project as you would any standard Flex project. Once you've defined all the files for the project, you'll next need to tell Flex Builder which of those classes to compile into the .swc file. You can do that by way of the project properties. You can access the properties by selecting Project→Properties. Then select the Flex Library Build Path option from the menu on the left of the dialog. In the Classes tab you should select every class that you want to compile into the library. This is all that is necessary to create a Flex Library Project.

This excerpt is from Programming Flex 3. If you want to try your hand at developing rich Internet applications with Adobe's Flex 3, and already have experience with frameworks such as .NET or Java, this is the ideal book to get you started. Programming Flex 3 gives you a solid understanding of Flex 3's core concepts, and valuable insight into how, why, and when to use specific Flex features. Learn to get the most from this amazing and sophisticated technology.

Linking an application to a library

When you want to use a library from a Flex application, you need to tell Flex Builder to link to the corresponding Flex Library Project. You can accomplish this by selecting Project→Properties for the Flex project. Then select the Flex Build Path option from the menu in the dialog, and select the "Library path" tab. Within the "Library path" tab you click the Add Project button. This opens a new dialog that prompts you to select the Flex Library Project you want to link to your application. When you select the library project and click OK, the project will show up in the "Library path" tab list. By default, libraries are statically linked rather than dynamically linked. You must tell Flex Builder to dynamically link the library by expanding the library project icon in the list, selecting the Link Type option and then selecting the Runtime Shared Library (RSL) option from the menu.

When you add a library project to the library path for a Flex project, the application can use any of the classes defined in the library project.

Adding Nonclass Assets to Runtime Shared Libraries

Runtime shared libraries do not directly allow you to dynamically link anything other than classes. That means you cannot directly add a dynamic link to an asset such as an image, a sound, or a font. However, if you can embed an asset in an ActionScript class, you can add indirect dynamic linking. (See Chapter 11 for more details on general embedding.) The following example embeds an image using a class constant:

package com.oreilly.programmingflex {
  public class Images {

      [Embed(source="image.jpg")]
      public static const IMAGE_A:Class;

  }
}

You can compile such a class into a runtime shared library, and the asset (an image in this case) is also embedded into the runtime shared library. The following example illustrates how you could use the dynamically linked image from an application:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

  <mx:Script>
    <![CDATA[

      import com.oreilly.programmingflex.Images;

    ]]>
  </mx:Script>
  <mx:VBox>
    <mx:Image source="{Images.IMAGE_A}" scaleContent="true"
              width="100" height="100" />
  </mx:VBox>
</mx:Application>

Section 20.5: Summary

In this chapter, you learned how to embed Flex applications in HTML pages. You learned how to use the industry-standard SWFObject to embed Flex applications using the static publishing method employing standards-compliant nested object tags. You also learned how to enable deep linking within Flex applications and how to integrate an application with the browser's Back and Forward buttons using BrowserManager. Furthermore, you learned how to work with cross-domain loading issues, and you learned about creating runtime shared libraries to improve loading times on applications sharing common libraries and assets.

Comment on this article
You must be logged in to the O'Reilly Network to post a talkback.