<xi:include href="../../../bindings/www.backbase.com.2006.btl/codeHighlighter/codeHighlighter.xml"></xi:include>

Animation Using SMIL

Introduction

This example demonstrates how to incorporate SMIL (pronounced smile) into a Backbase Client Framework web application.

Prerequisites and Intended Audience

This example is intended for web developers interested to implement SMIL in their Backbase Client Framework web applications. To work through this example you need the Backbase Client Framework 4.1.2, and intermediate level experience developing with BTL, XEL, and JavaScript.

Overview

SMIL is a W3C Recommended XML markup language for describing multimedia presentations, which includes markup for timing, layout, animations, visual transitions, and media embedding. In the Backbase Client Framework, Backbase implements the BasicAnimation and BasicInlineTiming modules of the SMIL 2.1 specification:

  • BasicAnimation, Simple animation functions defined by sets of points to be visited in sequence, with the function defined between those using discrete, linear or paced interpolation.
  • BasicInlineTiming, This module defines the attributes that make up basic timing support for adding timing to XML elements

The namespace used for SMIL is http://www.w3.org/2005/SMIL21

Animation

In this example SMIL is used to animate an airplane over a map to indicate a flight path.

This can be done very easily using XEL and SMIL, as demonstrated in the following listing:

<b:codeHighlighter class="epage-snippet"> <b:button xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">Fly to Amsterdam <e:handler event="click"> <smil:animate with="id('plane')" attributeName="top" to="50px" dur="500ms"></smil:animate> <smil:animate with="id('plane')" attributeName="left" to="330px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">Fly to San Francisco <e:handler event="click"> <smil:animate with="id('plane')" attributeName="top" to="90px" dur="500ms"></smil:animate> <smil:animate with="id('plane')" attributeName="left" to="100px" dur="500ms"></smil:animate> </e:handler> </b:button>... </b:codeHighlighter>

Listing: Simple animation implemented using XEL and SMIL.

NOTE: the SMIL engine works on HTML (view) nodes, meaning that the nodes you target with SMIL are not required to be Backbase controller nodes.

The result is shown in the following live demo:

<xi:include xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:b="http://www.backbase.com/2006/btl" xmlns:e="http://www.backbase.com/2006/xel" xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" href="../../../bindings/config.xml"></xi:include> <p xmlns:b="http://www.backbase.com/2006/btl" xmlns:e="http://www.backbase.com/2006/xel" xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <b:button>Fly to Amsterdam <e:handler event="click"> <smil:animate with="id('plane')" attributeName="top" to="50px" dur="500ms"></smil:animate> <smil:animate with="id('plane')" attributeName="left" to="330px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button>Fly to San Francisco <e:handler event="click"> <smil:animate with="id('plane')" attributeName="top" to="90px" dur="500ms"></smil:animate> <smil:animate with="id('plane')" attributeName="left" to="100px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button>Fly to Cape town <e:handler event="click"> <smil:animate with="id('plane')" attributeName="top" to="210px" dur="500ms"></smil:animate> <smil:animate with="id('plane')" attributeName="left" to="355px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button>Fly to Bejing <e:handler event="click"> <smil:animate with="id('plane')" attributeName="top" to="80px" dur="500ms"></smil:animate> <smil:animate with="id('plane')" attributeName="left" to="535px" dur="500ms"></smil:animate> </e:handler> </b:button> </p> <div xmlns:b="http://www.backbase.com/2006/btl" xmlns:e="http://www.backbase.com/2006/xel" xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" style="background-image: url(map.png); height:333px; background-color: blue; position:relative;"> <img src="airplane.gif" width="40" height="34" alt="airplane" id="plane" style="position:absolute; top:50px; left:330px;" /> </div>

Live Demo: Simple animation implemented using XEL.

JavaScript API

As an alternative to XEL, you can use the JavaScript API provided by Backbase to implement animation with SMIL. This can be useful in case of animating something in a widget or if you prefer to use JavaScript instead of declarative XML:

<b:codeHighlighter class="epage-snippet"> <b:button xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">Fly to Amsterdam <e:handler event="click" type="text/javascript"> bb.smil.animate(bb.document.getElementById('plane'), {'attributeName': 'top', 'to': '50px', 'dur': '500ms'}); bb.smil.animate(bb.document.getElementById('plane'), {'attributeName': 'left', 'to': '330px', 'dur': '500ms'}); </e:handler> </b:button>... </b:codeHighlighter>

Listing: Simple animation implemented using the Backbase JavaScript API and SMIL.

NOTE: the JavaScript call to SMIL is asynchronous, so that if some additional behavior is implemented after the animation has finished, a callback function is required.

Slide-in, Slide-out, and Opacity

SMIL can animate CSS properties simultaneously, meaning that the combinations you can create are almost infinite:

<b:codeHighlighter class="epage-snippet"> <b:button xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">Slide-out the world <e:handler event="click"> <smil:animate with="id('world')" attributeName="left" to="-666px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">Slide-in the world <e:handler event="click"> <smil:animate with="id('world')" attributeName="left" to="0px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">Fade the world <e:handler event="click"> <smil:animate with="id('world')" attributeName="opacity" to="0.0" dur="500ms"></smil:animate> <smil:animate with="id('world')" attributeName="opacity" begin="1s" to="1.0" dur="500ms"></smil:animate> </e:handler> </b:button> <div xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" style="position:relative;width:666px;height:333px;overflow:hidden;"> <div style="background-image: url(map.png); height:333px; width:666px; position:absolute;top:0px;left:0px;" id="world"> </div> </div> </b:codeHighlighter>

Listing: Simultaneous animation of CSS properties using XEL and SMIL.

The result is shown in the following live demo:

<p xmlns:b="http://www.backbase.com/2006/btl" xmlns:e="http://www.backbase.com/2006/xel" xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"> <b:button>Slide-out the world <e:handler event="click"> <smil:animate with="id('world')" attributeName="left" to="-666px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button>Slide-in the world <e:handler event="click"> <smil:animate with="id('world')" attributeName="left" to="0px" dur="500ms"></smil:animate> </e:handler> </b:button>  <b:button>Fade the world <e:handler event="click"> <smil:animate with="id('world')" attributeName="opacity" to="0.0" dur="500ms"></smil:animate> <smil:animate with="id('world')" attributeName="opacity" begin="1s" to="1.0" dur="500ms"></smil:animate> </e:handler> </b:button> </p> <div xmlns:b="http://www.backbase.com/2006/btl" xmlns:e="http://www.backbase.com/2006/xel" xmlns:smil="http://www.w3.org/2005/SMIL21/BasicAnimation" xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" style="position:relative;width:666px;height:333px;overflow:hidden;"> <div style="background-image: url(map.png); height:333px; width:666px; position:absolute;top:0px;left:0px;" id="world"> </div> </div>

Live Demo: Simultaneous animation of CSS properties using XEL and SMIL.

Closure

This example page has demonstrated how to implement SMIL in your Backbase Client Framework web applications.

Additional Resources

For more information, please refer to the following:

  • Backbase Client Framework Application Development Guide (PDF)
  • Backbase Client Framework Reference (CHM)