Subscribe to this blog's feed

« Writing a simple widget | Main | Playing videos and opening links in Joost widgets »

Using Javascript with Joost Widgets

To get some real interactivity in your widget you'll probably want to use some Javascript. Joost Widgets use Javascript in just the same way as web pages do, except that you only have to code for one browser (the Joost player, based on Mozilla) rather than several.

Let's suppose you've done the first tutorial and made a 'hello world' widget. You can put Javascript straight into your HTML file like this:

<html>
    <head>
        <style type="text/css">
          * { color:white }
        </style>
        <script>
        //your Javascript here
        </script>
    </head>
    <body>
        <div id="output"><p>My first widget</p></div>
    </body>
</html>

(I've put an extra div in there for more fun later).

Or you can link to it in another file like this:

<html>
    <head>
        <style type="text/css">
          * { color:white }
        </style>
        <script src="hello.js"></script>
    </head>
    <body>
        <div id="output"><p>My first widget</p></div>
    </body>
</html>

Where 'hello.js' needs to be in the same folder as your index.html.

With Javascript you can use all the usual DOM methods to change values, for example:

        <script>
        var div = document.getElementById("output");
        div.innerHTML="<p>This is my new output</p>";
        </script>

This means that once you've zipped it up and run it inside Joost as usual the text in your hello widget will look like this:

This is my new output

instead of

My first widget

Once you've got the hang of some simple Javascript you might like to try some of the Joost-specific methods. So how about this:

        <script>
        var div = document.getElementById("output");
        div.innerHTML="<p>Hello "+Joost.firstName+"</p>";
        </script>

(see here for the API calls in the Joost class; and note that the user can prevent you seeing this information).

If, like me, you're something of a copy-and-paste coder, you might want to look at Dive Into Greasemonkey, an excellent place to look for Javascript examples for common things you want to do, including DOM manipulation, or the Mozilla Javascript reference which is useful for looking up API calls. There are Joost Widget code examples available for you to reuse as you wish (there's a BSD-like license).

The Joost API is here, and as always we welcome suggestions about that or about these blogposts.

Posted by Libby Miller on Jan 8, 08 |

TV Anywhere, anytime


Recent Posts