Integrating Flash and Other Components

From Frontal Wiki

Jump to: navigation, search

Contents

Introduction

There's an active Flash community that's constantly producing new and interesting components and libraries for use in your Flash movies. Frontal provides many ways to integrate these offerings.


External SWFs

The most straightforward integration is to load a standalone, graphical SWF into the Frontal environment. This is done using the 'img' tag. Please see this tag's documentation for more details.


External Resource SWFs

Another integration approach is to load an external SWF that contains compiled ActionScript, which may then be used in your Frontal document's scripts. An example of how to do this can be found at include#Including External Resource SWFs.


Integrating Components

In input#How Inputs are Defined, we saw how Flash UI components may be easily integrated into Frontal forms. The approach taken there can be used as a general way to integrate Flash and other components into your Frontal document.

In this example, we integrate the Flash DataGrid component into Frontal. Run the following code sample. 

<style><![CDATA[
    .dataGrid
        {
            @onFirstDocumentPreRender
                {
                    dynamic.component = new fl.controls.DataGrid ( );
                    var data = com.frontalcode.ActionScriptInterpreter.evaluate ( "return " + com.frontalcode.Util.trim ( node.text ( ).toString ( ) ) + ";" );
                    dynamic.component.dataProvider = new fl.data.DataProvider ( data );
                    var columns = [ ];
                    if ( dynamic.component.dataProvider.length > 0 )
                    {
                        for ( var key in dynamic.component.dataProvider.getItemAt ( 0 ) ) columns.push ( key );
                    }
                    dynamic.component.columns = columns;
                    movie.addChildAt ( dynamic.component, 0 );
                }
            @onCustomRender
                {
                    if ( dynamic.component != null )
                    {
                        dynamic.component.width = width;
                        dynamic.component.minColumnWidth = width / dynamic.component.columns.length;
                        var styles = { "custom-row-count": "rowCount" };
                        for ( var style in styles ) if ( gS ( style ) != null ) dynamic.component [ styles [ style ] ] = gS ( style );
                        if ( dynamic.component.stage != null ) dynamic.component.drawNow ( );
                    }
                }
            @onAddedToStage
                {
                    if ( dynamic.component != null ) dynamic.component.drawNow ( );
                }
        }
]]></style>
 
<div style="processes-own-content: true; custom-row-count: 4; width: 100%;" class="dataGrid">
    <![CDATA[
        [
            { Name:"John Alpha",     Number:"555-123-0101", Email:"jalpha@fictitious.com" },
            { Name:"Mary Bravo",     Number:"555-372-3322", Email:"mbravo@fictitious.com" },
            { Name:"Trevor Gamma",   Number:"555-485-1212", Email:"tgamma@fictitious.com" },
            { Name:"Susan Delta",    Number:"555-987-3434", Email:"sdelta@fictitious.com" }
        ]
    ]]>
</div>

Notice in the above example how we interpret the contents of the DataGrid's associated 'div' element, and then use the result as a data provider for the DataGrid.


Custom Elements

For more advanced customizations you may to download the source code to build your own Frontal Renderer here. You can extend the Frontal classes to create your own elements with their own graphical presentation. See Adding Interactions#Document Interactions to see how these may be integrated into your Frontal document. Or you may use the "custom" attribute as described here.


previous | next
Retrieved from "http://www.frontalcode.com/wiki/index.php/Integrating_Flash_and_Other_Components"
Personal tools
Get Adobe Flash player