Hello, World in iHD

  • Article

It's traditional to introduce any new programming language or environment with a "Hello, World" program, so we'll do something similar here for iHD. Writing applications in iHD is a bit like writing web pages; the basic layout and styling is described in an HTML-like dialect of XML, and the behaviour of the application is coded in ECMAScript (aka JScript or JavaScript). In addition to the markup-plus-script model of basic HTML, iHD includes a rich animation engine based on SMIL (Synchronised Multimedia Integration Language) that enables dynamic changes in layout to be described declaratively.

So without further ado, let's look at a very basic iHD application. Now, unfortunately you folks at home won't be able to play along with the code samples here because there aren't any tools available yet... but at least you can get an idea for what it's like. And maybe if you're a web developer looking for something new, you embark on a new career! :-)

[Note: I apologise for the poor formatting; I'll try to fix it soon]

Hello.xmu

An XMU is an "XML Mark Up File" and contains the markup portion of an iHD application. Here's one way "Hello, World" could look:

 

<?xml version="1.0"?>

<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 />

    <timing clock="page"/>

  </head>

 

  <body>

    <div style:position="absolute" style:x="822px" style:y="551px"

         style:width="250px" style:height="50px" style:backgroundColor="blue">

 

      <p style:font="Verdana.ttf" style:fontSize="48px"

         style:color="white">Hello, World</p>

 

    </div>

  </body>

</root>

This will place the white text "Hello, World" on a blue background in the middle of a 1920 x 1080 screen.

 

Looking at the Elements

Let's look at the elements one by one; anyone familiar with HTML should be able to see the resemblance already.

xml

 

<?xml version="1.0"?>

This standard tag identifies the version of XML used in this file.

root

 

<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">

 

</root>

This is the root node of the document; think of it like the <html> element in HTML. We declare three namespaces that we're going to use (this is a standard XML practice):

  • The default namespace, ihd, which contains the elements and many of the attributes we will use
  • The style: namespace, for stylistic attributes like width, height, and colour
  • The state: namespace, for stateful things that we won't get to in this example :-)

 

  <head>

    <styling />

    <timing clock="page"/>

  </head>

This is similar to the <head> element in HTML in that it defines things that aren't part of the visible document. For now, we won't worry about the two child elements, <styling> and <timing>; suffice it to say that the former is for defining styles (similar in concept to CSS) and the latter is for performing animations. The clock="page" attribute simply tells iHD that if we have any times listed for our animations, they are based on the lifetime of his page, not on the timecode of the underlying video. But we'll get to that later...

body

 

  <body>

 

  </body>

Again, this is similar to <body> in HTML in that it defines the things that are visible in the document. In this case, the text "Hello, World" and its background.

div

 

    <div style:position="absolute" style:x="822px" style:y="551px"

         style:width="250px" style:height="50px" style:backgroundColor="blue">

 

    </div>

Once more, we find a familiar HTML-like element, <div>. It is a container for other elements, and we have given it a blue background. We have chosen to position the container at co-ordinates (822, 551) with a width of (250, 50), which will place it in the middle of a high-def screen. This is very similar to what you might do with CSS inside an HTML element, but we are using an XML syntax instead of the CSS syntax.

p

 

      <p style:font="Verdana.ttf" style:fontSize="48px"

         style:color="white">Hello, World</p>

And, our final HTML-alike element, <p>. It defines a paragraph of text (in this case, "Hello, World") that will be in 48-pixel-high white Verdana.

Next time...

And that's it, for now. Next time, we'll add some simple animation.