Because Pieter talked about “the mobile landscape” earlier, I’m going to talk about my first experiences with making a WRT widget for the Nokia N97. The widget is a simple RSS reader but was really fun to make. Making widgets with the WRT framework is quite simple actually. WRT widgets are small HTML and Javascript mini sites that run on the S60 software platform used in loads of Nokia phones.
What do you need?
Actually, you don’t need much to get started. You only need a IDE like Dreamweaver or so. There are a couple tools available for Dreamweaver, Aptana and Visual Studio but they are not necessary to make widgets. I used the Aptana plugin in Eclipse. The good thing about these plugins is that you can test your widget in your IDE in stead of deploying it to the device with each change you make. And that is probably the only reason I would use such a plugin, because debugging a widget can be quite a pain in the *** (even with the plugin). For example: if you have a javascript error, you won’t know about it unless your widget just doesn’t work anymore.
Getting started!
You’ve got your IDE and are ready to go? Download this empty WRT widget template and get started! WRT widgets are just a couple of files, zipped up, and have the extension renamed to ‘wgz’. So if you download the empty WRT template widget, rename the extension to ‘zip’ en unpack it, you can see the contents. WRT widgets have to contain an info.plist file that declares the specs of your widget: the widget’s name, the HTML page is should load by default and all other widget-specs like for example if the miniview should be enabled. The HTML page has to have a special doctype and a meta tag with a “viewport” setting but that’s the only thing that’s special about that page I guess.
Development.
All your actions are declared in javascript. Because a WRT widget is just a HTML page you can use javascript libraries like jQuery, MooTools or the prototype framework. These are not necessary but can be quite useful and a time-saver in the development process. The rest of it is just plain old HTML and CSS. You can use libraries like the WRTKit, but you don’t need them to get started.
Troubles.
One thing I quickly noticed was that animations in a WRT widget are in fact “not done”. I tried using the typical jQuery animations like the slideDown effect and the animate effect but it just didn’t work very well. A setInterval method worked best for animating DOM elements but I ended up deleting all animations because it just sucked bigtime! That’s really a bummer, but if you really want animations in your widget, I would advice to switch over to Flash lite.
Hi,
for animations in nokia’s wrt browser try:
window.widget.prepareForTransition(‘fade’);
/* Some animation */
window.widget.performTransition();
This makes a transition between what was before the ‘prepareForTransition’ call and what is after.