Hello, World Part 3: Dealing with State

  • Article

In the last post, we looked at a very simple (and useless) animation. Today we will look at state and how that can be used to trigger slightly more useful animations. We'll also move from simple "Hello, World" text to have something a bit more practical on screen, like some buttons.

Hello.xmu

Here's a completely new file, since we've now graduated from white text on a blue background. I've included several new things here (not just state management), so we'll go through them one by one.

<?xml version="1.0"?> prefix="o" ?>

<root xml:lang="en" xmlns="https://www.dvdforum.org/2005/ihd"

  xmlns:style="https://www.dvdforum.org/2005/ihd#style"

  xmlns:state="https://www.dvdforum.org/2005/ihd#state">

  <head>

    <styling>

      <style select="//button" style:backgroundColor="rgba(0,0,255,255)"

             style:position="absolute" style:width="200px" style:height="100px" />

    </styling>

    <timing clock="page">

      <par>

        <cue begin="//button[state:focused()=true() and style:backgroundColor()='rgba(0,0,255,255)']"

             end="//button[state:focused()=false() and style:backgroundColor()='rgba(255,0,0,255)']">

          <set style:backgroundColor="rgba(255,0,0,255)" />

        </cue>

      </par>

    </timing>

  </head>

 

  <body>

    <div style:position="absolute" style:x="0px" style:y="0px"

         style:width="1920px" style:height="1080px" style:backgroundColor="black">

      <button style:x="100px" style:y="100px" />

      <button style:x="400px" style:y="100px" />

      <button style:x="700px" style:y="100px" />

      <button style:x="100px" style:y="300px" />