Tutorial - xkp/Doc GitHub Wiki

A typical xs application is first described, then implemented. In most cases your applications will be mapped out without writing a single line of code. This tutorial is intended as an introduction to the language so we'll keep it simple. We'll write an HTML5 application where an image will (animatedly) grow after being clicked by the user.

Lets describe:

<application width="300" height="300">
    <img id="myImg" src="images/kitty.png" x="100" y="100" width="100" height="100"/>
</application>

This is all very HTMLy like, without all the noise. But it is obviously incomplete, we need animation so lets keep describing:

<application width="300" height="300">
    <img id="myImg" src="images/kitty.png" x="100" y="100" width="100" height="100"/>

    <sequence id="growSeq">
         <at t="0">
              <animate property="myImg.width" from="100" to="200" in="2"/>
              <animate property="myImg.height" from="100" to="200" in="2"/>
         </at>
    </sequence>
</application>

At time 0 animate width and height from 100 to 200 in two seconds. Can't say it any clearer than that :) At this point all that's left is to respond to the click event and trigger the animation:

on myImg.click()
{
    growSeq.start();
}

And that's all there is to that. Enjoy.