Create a composite application tile

Composite application tiles are Spark applications (<s:Application>) or modules (<s:Module>), compiled as SWF files, that can be included in composite applications. Similar to Flex applications and modules, Composite application tiles can contain static and dynamic content, as well as custom Flex and ActionScript components. In this tutorial, you create a static composite application tile that displays values in a data grid object. In other tutorial modules, you create tiles that display dynamic content.

Tiles that you add in your project automatically update the catalog (CXML file) associated with your project. For example, your project-specific catalog will be automatically updated with a reference to the tile you create.

Create a composite application tile:

  1. In Flash Builder, select your project in package manager, and then click File > New > Composite Application Tile.

  2. Enter a unique name for the tile, such as MyWatchedFunds, and then click Finish.

    Note: The option to create a module tile is selected by default. Modules provide better use of runtime resources and therefore provide superior performance. Use of Modules is recommended. Module tiles are based on the Spark Module class (spark.modules.module), whereas non-module tiles are based on the Spark Application class (spark.components.application). See ActionScript 3.0 Reference for the Adobe Flash Platform.
    View full size graphic
    New Composite Application tile wizard

  3. Add the following data grid object to your tile’s MXML:

    <?xml version="1.0" encoding="utf-8"?> 
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:mc="com.adobe.mosaic.core.*"> 
 
    <fx:Declarations> 
        <!-- Place non-visual elements (e.g., services, value objects) here --> 
    </fx:Declarations> 
 
    <fx:Metadata> 
        // This module is a Composite application tile 
        [Tile] 
    </fx:Metadata>  
 
    <s:DataGrid x="0" y="10" width="300" height="400" requestedRowCount="4"> 
        <s:columns> 
            <s:ArrayList> 
                <s:GridColumn dataField="security" headerText="Securities"></s:GridColumn> 
            </s:ArrayList> 
        </s:columns> 
        <s:typicalItem> 
            <fx:Object security="Sample Data"></fx:Object> 
        </s:typicalItem> 
        <s:ArrayList> 
            <fx:Object security="DOW JONES INDUS. AVG"></fx:Object> 
            <fx:Object security="S&amp;P 500 INDEX"></fx:Object> 
            <fx:Object security="NASDAQ COMPOSITE INDEX"></fx:Object> 
            <fx:Object security="S&amp;P/TSX COMPOSITE INDEX"></fx:Object> 
        </s:ArrayList> 
    </s:DataGrid> 
</s:Module>

  4. Select File > Save to save the tile.

  5. In the package explorer, open the project-specific catalog (CXML) file, such as the CompositeApplicationTutorialCatalog.cxml file that you created earlier, and click the Source view.

    A new tile:TileClass element has been automatically created for your tile:

     <tile:TileClass fitContent="true" 
    height="400" 
    width="300" 
    label="MyWatchedFunds" 
    name="MyWatchedFunds"> 
 
    <ct:Metadata> 
        <ct:Description>A data grid displaying a list of funds in an index portfolio.</ct:Description> 
    </ct:Metadata> 
 
    <tile:Content contentType="application/x-shockwave-flash" 
        flexSDKVersion="4.5.0" 
        loadAs="module" 
        uri="${catalogURL}/tiles/MyWatchedFunds/MyWatchedFunds.swf" /> 
 
</tile:TileClass>
    Note: The uri attribute of the tile:Content element uses the ${catalog} reference shortcut. This short form used to reference the catalog currently associated with the project. To reference assets from multiple catalogs, you would replace the ${catalog} reference with the URI of a catalog

Next you create an HTML tile to display with this composite tile.