Widgetarianism
As promised at our London developer workshop, over the next few weeks we will use this blog to let you know about some of the features of the Joost widget API, and also the data services which provide the information environment in which widgets live. You'll be hearing a lot about Joost widgets; the hows and whys of creating and publishing them, alongside tips and tricks for making a richer, more social and connected way of watching television.
Our high level overview of Joost Widgets says:
"Built from simple, powerful, and standardised Web technologies, widgets are independently developed software components that run in the Joost software."
We'll be diving into widget details more in later posts. But before we do that, we should say a few words about Joost itself. Joost's desktop client, underneath that glossy exterior, is in fact a highly customised web browser (Firefox, in fact). But this is no ordinary web browser! Rather than browsing traditional web pages, it fetches video content from the network and presents it to users in a TV-like manner. Right now Joost provides on-demand streaming access to thousands of professionally-produced videos, films and TV shows. As a developer, you'll primarily work with widgets within the Joost UI, and with web-based data services for search, information lookup and storage.
A Joost Widget is basically a special kind of web page that's packaged up and so viewers can load it into Joost. It can have access to information about Joost content, as well as having "remote control"-like powers for navigating within and between shows. The facilities we expose to you as third-party developers are based on those we've used ourselves to build Joost. With a little HTML, Javascript and CSS, you can create Joost add-ons that provide additional interactive features, connect users with external websites, or provide recommendation and community features.
We're big fans of standards; the Joost client simply wouldn't exist without HTML, SVG, XML, CSS, Javascript and other Web standards. But we also want to let you make use of some of the unique features of the Joost environment, such as the ability to display sprites on the screen, to access content protected by the Joost P2P network, and to make the most of new Joost features as we unveil them. So we expect to see a variety of widgets. Some may work with little or no changes from other widget platforms, while others will be integrated tightly into the shiny, video-filled world of Joost, and may not make sense outside of Joost. But in all cases they'll be using the same underlying web standards, and we hope that as a potential widget-maker you'll find Joost to be a uniquely engaging environment to show off and develop your skills.
As we evolve the widget platform, we really value your feedback and suggestions. We'll be watching for blog posts that link here, as well as participating via our public joost-dev discussion list. We want it to be as easy as possible for you to make fun and useful Joost extensions, and to link your sites and tools into Joost.
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.
TV Anywhere, anytime
