Mix CreateFromXAML and Timer Sample

  • Article

I've posted the CreateFromXAML and Timer sample from my Mix talk. You can run the sample here and get the source here. The sample uses the downloader component to retrieve a ZIP archive that contains a set of XAML files. To do this, in the onLoad event, I kick-off a download of the ZIP archive:

 

  function onLoad(sender, args, root) {

    // Download big file sender, "assets.zip"

    download(sender, "assets.zip");

  }

 

  function download(host, file) {

    var dl = host.createObject("downloader");

    dl.addEventListener("completed", downloadComplete);

    dl.open("get", file, true);

    dl.send();

  }

 

This download is asynchronous and calls the downloadComplete event when finished. In this event I then use CreateFromXAML to instance the XAML files and then add them to the main Canvas. I also add an animation timer but talk about that in more detail in the next paragraph:

 

  function downloadComplete(sender, args) {

   

    var main = sender.findName("main");

    cfx(main, sender.getResponseText("Camera.xaml"));

    cfx(main, sender.getResponseText("Coffee.xaml"));

    cfx(main, sender.getResponseText("Glasses.xaml"));

    cfx(main, sender.getResponseText("Grass3.xaml"));

    cfx(main, sender.getResponseText("Landscape.xaml"));

    cfx(main, sender.getResponseText("Popcan.xaml"));

   

    // Show first

    main.children.getItem($idx).visibility = "Visible";

    

    // Start timer

    var timer = sender.findName("timer");

    timer.addEventListener("completed", timerCompleted);

    timer.begin();

  }

 

Finally, I setup an animation timer to cycle through the newly created instances. The timer is creating by defining a named "dummy" animation in the main XAML file.  The key part here is the “Duration” – this defines the amount of time before the timer fires it’s completed event (e.g. times out). I need to target some object for this animation and in this case I created a dummy Rectangle named “_timer” (shown below). In the sample below, I’ve set the Duration to 2 seconds:

 

  <!-- Animation Timer -->

  <Canvas.Resources>

    <Storyboard x:Name="timer">

      <DoubleAnimation Duration = "00:00:2"/>

    </Storyboard>

  </Canvas.Resources>

 

For the animation target, I createda dummy Rectangle named "_timer" and hide it from the scene by setting it's Opacity to 0:

 

  <Rectangle x:Name="_timer" Opacity="0"/>

 

To start the timer in JavaScript, I use FindName to retrieve the Storyboard and call Begin(). After 2 seconds (the duration), this will fire the “completed” event (timerCompleted):

 

    // Start timer

    var timer = sender.findName("timer");

    timer.addEventListener("completed", timerCompleted);

    timer.begin();

 

In the timerCompleted event, I do the work to cycle through the previously added instances and then re-start the timer:

 

    function timerCompleted(sender, args) {

      var main = sender.findName("main");

     

      // Hide current

      main.children.getItem($idx).visibility = "Hidden";

     

      $idx++;

      if ($idx >= main.children.count) {

        $idx = 0;

      }

     

      // Show next

      main.children.getItem($idx).visibility = "Visible";

     

      // Restart the timer

      sender.begin();

    }

 

Here's a less than fascinating screen shot:

 

CreateFromXAML sample