Dynamic RVML Examples

KineticFusion can supply dynamic data to an RVML document from a number of data sources. Here we will look at using both the Attribute Expression Language and inline templates for accessing external data.

Simple Example Using Command Line Parameters

Each RVML document has implicit access to a global data model. Data in the global model is loaded from a configurated global model file and the data is available to all processed documents.

Command-line Java properties can be used to to define or override a variable in the global model.

java -Dglobal.width=400 com.kinesis.KineticFusion

This makes the global variable 'width' available to all RVML documents. Here is an example of using this variable in a RVML document by rescaling a shape depending on the width variable (note: this has a different effect from using the _scale property as it maintains the actual line widths of the shape):

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<Movie version='7' width='${width}' height='200' rate='23' compressed='Yes'
backgroundColor="grey" xmlns='http://www.kineticfusion.org/RVML/1.0'>
<Definitions>
<Shape id="Rectangle">
<LineStyles>
<LineStyle index='1' width='0.2' color='black' />
</LineStyles>
<FillStyles>
<ColorFill index='1' color='blue' />
</FillStyles>
<Edges>
<SetStyle line='1' mainFill="1" />
<Rect x='0.0' y='0.0' width='${width?number/2}' height='100.0' />
</Edges>
</Shape>
</Definitions>
<Timeline>
<Frame>
<Place name='Rectangle' depth='1' x='${width?number/4}' y="${(movie.height - movie.symbols.Rectangle.height)/2}"/>
</Frame>
</Timeline>
</Movie>

Here is the resulting SWF: Open in New Window

By default, all variables are text values so to use them in numeric expressions they must be explicitly converted to numbers e.g. width?number. Alternatively, model variables can be explicitly specified as numbers by adding an appropriate type suffix to the property e.g. for numeric properties, add a '/n' suffix:

java -Dglobal.width/n=400 com.kinesis.KineticFusion

Now the width variable can be used in an arithmetic expression without conversion e.g.

<Place name='Rectangle' depth='1' x='${width/4}'/>

Also, in this example, you can see how to access the bounds of local movie symbols using the predefined 'movie' variable.

Simple Example Using XML Data Source

The following example illustrates how to use an external XML document to populate the values in a ComboBox component at initialization time. The following sample document is used:

<People>
    <person>
        <surname>Blogs</surname>
        <fullname>Joe Blogs</fullname>
        <job>Coffee maker</job>
    </person>
    <person>
        <surname>Murphy</surname>
        <fullname>Michael Murphy</fullname>
        <job>Sandwich maker</job>
    </person>
    <person>
        <surname>Weston</surname>
        <fullname>Charlie Weston</fullname>
        <job>Hacker</job>
    </person>
</People>

In the following example we will extract all person elements from this document except for those whose job is 'Hacker'. We will then use this information to populate a single ComboBox component:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<Movie version='7' width='${width}' height='200' rate='23' compressed='Yes' 
    backgroundColor="grey" xmlns='http://www.kineticfusion.org/RVML/1.0'>
    <DataSources>
       <XMLDataSource name="people" location="People.xml"/>
   </DataSources>
   <Components>
       <Component id="ComboBox"/>
       <!-- not strictly necessary as already included in ComboBox -->
       <Component id="Label"/> 
   </Components>
    <Timeline>
        <Frame>
            <Place name='ComboBox' depth='3' instanceName='myCombo' x='50.0' y='50.0'>
                <MovieClipActions>
onClipEvent(load)
{
    // This template populates combo box with non-hacker people
    <Template isXML="false"><![CDATA[
        <#list people["*[not(job='Hacker')]"] as person>
            addItem( {label:"${person.surname}", data:"${person.fullname}"});
        </#list>
        ]]>
    </Template>
    // Update the label on selection
    this.addEventListener("change", function ( event)
        {
            _level0.myLabel.text = this.selectedItem.data;
        });
}
                </MovieClipActions>
            </Place>
            <Place name='Label' depth='4' instanceName='myLabel' x='200.0' y='50.0'>
                <MovieClipActions>on(construct){text = "";}</MovieClipActions>        
            </Place>        
    </Frame>
    </Timeline>
</Movie>
          

You can see the resulting combo-box SWF here (about 57K).