What is a widget? Basically, it’s webpage(s) that runs on your phone independently without the need of web browser.
A simple widget comprises of at least 3 files. They are:
- Info.plist [contains meta data]
- main.html [main contents in the HTML page]
- main.js [JavaScript file which is the core of your application]
In additional, you can include:
- main.css [Style sheet that beautifies you GUI]
- Icon.png [logo of your application]
In order to demonstrate how we can create a widget, I will go through the steps of creating a temperature converter widget.
1. Create Info.plist
Above is the format you need to follow. The string tag that follows DisplayName tells WRT the name of your application.
Identifier is similar to the java’s terminology of a package. Lastly, MainHTML determines the page to be called during the execution.
2. Create ImbaTemp.html
3. Create imbatemp.js
CEL_VAL = 100;
FAH_VAL = 101;
var convToCel = null;
var convToFah = null;
var choice = 1;
window.onload = createMenu;
function createMenu()
{
convToCel = new MenuItem(”TO CEL”,CEL_VAL);
convToFah = new MenuItem(”TO FAH”,FAH_VAL);
convToCel.onSelect = getChoice;
convToFah.onSelect = getChoice;
window.menu.append(convToCel);
window.menu.append(convToFah);
}
function getChoice(command)
{
switch(command)
{
case CEL_VAL:
choice = 1;
break;
case FAH_VAL:
choice = 2;
break;
default:
choice = 1;
break;
}
}
function getCalculation(myvalue)
{
switch(choice)
{
case 1:
myvalue = (myvalue - 32) / 1.8;
break;
case 2:
myvalue = (myvalue * 1.8) + 32;
break;
default:
myvalue = (myvalue - 32) / 1.8;
break;
}
return myvalue;
}
function getResult(form)
{
var returnval = getCalculation(form.inputbox.value);
form.output.value = returnval;
}
Create imbatemp.css
.header{
text-align: center;
font-size: 15pt;
color: red;
font-weight: bold;
}
.content{
font-size: 12pt;
font-weight: bold;
color: blue;
}
.input{
border: 1pt dotted;
width: 20pt;
}
.output{
width: 200;
height: 50;
}
.submit{
color: blue;
font-weight: bold;
background: yellow;
border: 1px solid black;
}
4. Create Icon.png
You can use Microsoft Paint if you are using windows, otherwise use any image editing software that allows you to create PNG image.
Do take note that the image that you are going to create has to be a 88×88 pixel image.
5. Compiling
Put all the files that you have created in a folder and name the folder after the name of your application. Use WinRar to create a zip out of the folder and rename the extension from zip to wgz.
If you do not have a symbian S60 phone to test out your application, you can always download a S60 3rd Edition Feature pack 2 emulator off official symbian website. However, you are required to register as a member before any actual downloading can take place.
You are advised to visit official Nokia widget API page for the latest updates and developments. I have provided the link below and feel free to browse through it.
http://wiki.forum.nokia.com/index.php/Category:Web_Runtime_(WRT)











