Agile Enterprise Application Development with Flex

Basic Modularization: Image

The essence of Flex application modularization is dynamic loading of the byte code.

Consider the following two lines of code:

<mx:Image source="@Embed('assets/logo.png')"/>
<mx:Image source="assets/logo.png"/>

The first line illustrates image embedding. It increases the size of the application by the size of the image. As a result, the application carries the image as a part of the SWF file. The loading of such applications takes longer, but the actual rendering of the image will be faster, as there is no need to make a network call just to bring the image to the client.

The second line of code illustrates runtime loading of the image bytes. This time the application’s .swf does not include the image logo.png and loads faster than the embedded one. The download of logo.png will need additional time, but that time will be deferred until the view that contains the image is displayed.

Now consider an alternative, explicit way of image embedding:

<mx:Script>
   <![CDATA[
      [Embed(source="assets/farata_logo.png")]
      [Bindable] private var logoClass:Class;
   ]]>
</mx:Script>

<mx:Image source="{logoClass}"/>
<mx:Button icon="{logoClass}"/>

This method explicitly exposes the variable logoClass of type Class. In fact, the Flex compiler generates an instance of mx.core.BitmapAsset that is a wrapper around the ByteArray of the actual image. The similar variable is generated when you use the @Embed meta tag, although explicit embedding lets you reuse it multiple times. The resource ...