Subscribe to this blog's feed

« Widgetarianism | Main | Using Javascript with Joost Widgets »

Writing a simple widget

Why might you want to write a Joost Widget?

Personally, I write them to enhance my own use of Joost. For example, lately I've been writing Greasemonkey scripts that allow me to bookmark Joost links on the web, and use a widget to find those bookmarks later inside Joost. So when I want some entertainment, I've got a bunch of things lined up to watch. I'll show you some of what's possible in later posts, but first, you'll need to know the basics.

Widgets are basically web pages packaged as zips.

The best thing to do is to create a new directory (a new folder in Windows) and write a little HTML file in your favourite editor, e.g.

<html>
    <body>
        <p>My first widget</p>
    </body>
</html>

Save that as index.html.

Then write a little congfiguration file:

<widget-manifest>
        <id>http://nicecupoftea.org/widgets/hello</id>
        <website>http://nicecupoftea.org/</website>
        <name>Hello World</name>
</widget-manifest>

Save that as config.xml.

Zip up those two files together using your favourite zip tool. On Windows you select them and add them to a zip. For me it's the command-line zip on the Mac:

sh-2.05b$ cd hello
sh-2.05b$ ls
config.xml      index.html
sh-2.05b$ zip -r hello.zip *
  adding: config.xml (deflated 42%)
  adding: index.html (deflated 18%)

If you have access to a web server it's nice to put it up on there - then you can start Joost, go into my Joost / Widget Menu / Widget Manager and simply add the widget by putting the URL for it into the box at the bottom. There are other reasons to put it on a web server, which we'll come to in a later post.

If you don't have access to a server, you'll need to create a .joda - which is still a zip file but with a different suffix - and load it from your hard drive using the same 'add widget' button. Creating a .joda on the Mac you can do this:

sh-2.05b$ zip -r hello.joda *

While on windows you'll need to add the files to a zip archive and then change the suffix to .joda.

If this all sounds a bit involved, we do have some tools for Windows that we'll make available soon to speed up the development cycle - I'll let Colm 'baby' O'Connor talk you through those in a later post.

Once installed you should be able to see a small black box with a title pane of 'Hello World' which it gets from config.xml and the words 'my first widget' in black in the box. Since the default text is black on slightly-less-opaque-black you might want to add a bit of css to make it more visible, e.g.

<html>
    <head>
        <style type="text/css">
          * { color:white }
        </style>
    </head>
    <body>
        <p>My first widget</p>
    </body>
</html>

A few more tips:

  • Widgets have a default size - but you can specify your own using height and width tags in config.xml, e.g.
  <width>450</width>
  <height>30</height>

The values are in pixels.

  • You can specify a specific file as your main file if you don't want it to be called index.html. Do this in config.xml like this:
  <main-file>hello.html</main-file>
  • main-files can be HTML or XML, and it picks this up from the suffix. Normally you are probably better off using html, but be warned that the HTML parser we use doesn't like self-closing tags and there are some other "gotchas" if you are used to XML or XHTML. I'll post separately about migrating from our old widget format to this new one.
  • You can add any tag you like into config.xml and Joost will just ignore it. I use <description> to help manage widgets in our developer area.
Posted by Libby Miller on Dec 24, 07 |

TV Anywhere, anytime


Recent Posts