In this part we will start building a simple Nokia WRT widget for the mobile mini blogging site – woofim.com. First, I would like to have the following functionality:
- Have a simple menu to navigate
- Be able to see the latest photos woof, video woofs and text posts on the site;
- See a larger image of the photos
- Use the soft keys to navigate and have a simple about screen
As I previously noted, Nokia WRT widgets are basically html, css and javascript pages but unlike standard web pages where you use multiple pages, Nokia WRT uses a single html page where you turn on and off various sections of the page to show different content.
Lets see a practical example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Woofim WRT Widget - tutorial</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="WRTKit/WRTKit.js"></script>
<script language="javascript" type="text/javascript" src="basic.js"></script>
<link rel="stylesheet" href="basic.css" type="text/css">
<META NAME="Generator" CONTENT="Nokia WRT plug-in for Aptana Studio 2.0.0" />
</head>
<body onload="init()">
<!-- woofim.com logo -->
<div id="logo">
<img src="images/woofim_logo_356px.png" width="220"/>
</div>
<span style="color: #008000;"><!-- main menu section --> </span>
<div id="mainMenuDiv">
<div id="menuLatestPhotos">
<h2><a href="#">Latest Photos</a></h2>
</div>
<div id="menuLatestVideos">
<h2><a href="#">Latest videos</a></h2>
</div>
<div id="menuLatestTexts">
<h2><a href="#">Latest Text Woofs</a></h2>
</div>
</div>
<!-- content sections -->
<div id="latestPhotos"></div>
<div id="latestVideos"></div>
<div id="latestTexts"></div>
<center>
<div id="woofItemMedia"></div>
</center>
</body>
</html>
Which creates the following main screen:
- WRT woofim.com main screen
As you can see things are a bit messy here – all the divs are shown as a long single list. This is where the css file kicks in. We need basically to hide all the elements except for the logo and main menu. As you can see in the html above, I assigned to all the main sections the same class “mainSections” – so I just need to hide all the items which are assigned the same class:
basic.css:
.mainSections {
display:none;
}
The result is better:
- main screen with css implemented
As you can see I divided the html body into main 3 parts:
- upper logo area;
- main menu section – where I display the menu;
- the content section at the bottom where I will load the actual content to when I press the menu items (which are now hidden).
Next, I want to show the content of the different main sections when I click the relevant link. When I click the link “latest photos” I want to show the content of the div with the id “latestPhotos” and so on. Since the entire widget is built as a single page I cant just link to another page but I need to un-hide the relevant div. To do that I will use jquery (you can also use plain javascript but why should you when you can do this with jquery in a much simpler way?).
As we said before, we place all javascript code in basic.js – so open the file and and just delete its entire content (the existing code is just Nokia’s hello sample widget which we don’t need) and add the following jquery code just below the existing code:
$(function() {
$("#menuLatestPhotos").click(function () {
$("#mainMenuDiv").hide();
$("#latestPhotos").show();
});
$("#menuLatestVideos").click(function () {
$("#mainMenuDiv").hide();
$("#latestVideos").show();
});
$("#menuLatestTexts").click(function () {
$("#mainMenuDiv").hide();
$("#latestTexts").show();
});
});
As you can see (and I’m assuming that you are at least familiar with jquery), the code is basically has 3 similar parts. Each part tells the WRT engine to listen to “click” event on the object with the id specified in the quotes and execute the code between the brackets when the object is clicked. Taking a closer look at the first of the three you can see that when the div with the id “menuLatestPhotos” is clicked, the WRT engine will hide the div with the id “mainMenuDiv” which will hide the main menu, and will show the div with the id “latestPhotos”. A similar process happens when clicking “menuLatestVideos” and “menuLatestTexts”.
When clicking the “show latest photos” link you should be the following screen:
- empty latest photos view
Problem – how I return back to the main menu? One option is to click “Exit” and restart the widget – but this is not a great solution for a real-life application. OK – then we need to create a “Main menu” option under the “Options” menu (assigned to the left soft key).
What we need to do is to tell the app to create a menu item under “Options” immediately when the app is started. To do that we will use the javascript init() function which is called immediately when the body is loaded.
So, lets consider the following javascript code:
basic.js:
function init() {
var mainMenuItem = new MenuItem("Main Menu", 1000);
mainMenuItem.onSelect = menuItemSelected;
menu.append(mainMenuItem);
// set tab-navigation mode and show softkeys
// (only if we are in the WRT environment)
if (window.widget) {
widget.setNavigationEnabled(false);
menu.showSoftkeys();
}
}
function menuItemSelected(id) {
switch (id) {
case 1000:
$(".mainSections").hide();
$("#mainMenuDiv").show();
break;
}
}
As you can see these are two functions – the first is called init() which is executed when the page is loaded and the second one menuITemSelected() is called within init() when a menu item is selected.
var mainMenuItem = new MenuItem(”Main Menu”, 1000); – this line defines a new menu item with the label “Main Menu” and a relative position of 1000. This means that menu items with lower relative position will appear before this item in the menu and items with a higher relative position will appear after this item. The number 1000 is arbitrary and you can use any other number so long as you remember that these are relative positioning numbers.
mainMenuItem.onSelect = menuItemSelected; – this line says that when the mainMenuItem is selected execute the function menuItemSelected;
menu.append(mainMenuItem); – tells the WRT engine to append the menu item to the menu of the app.
The rest of the init() function tells the WRT engine to allow menu navigation and show the soft keys.
The function menuItemSelected(id) receives a parameter (id) from the onSelect property and performs the following task in case the value of id is 1000 (which means that we selected the “Main menu” option) – again, I’m using the jquery syntax to simplify the code:
$(”.mainSections”).hide(); – this line hides all divs which are assigned with the class “mainSections”.
$(”#mainMenuDiv”).show(); – this line shows the div with the id “mainMenuDiv” which is our main menu.
Now we have a menu navigation which brings back the main menu when I need it.
- WRT tutorial – main screen with soft key menu
Right now, we have the scaffold of the widget working. We have a simple main menu which shows different content when the user presses menu items and we have a soft key menu item which returns us back to the main menu.
In the next section, we will load “real” data into the different sections from woofim.com using jquery ajax capabilities.
Select “New Nokia Web Runtime Widget” – which will show the next screen:
Click NEXT and enter the project name (e.g. woofim) -> NEXT -> NEXT -> Finish. This will create a basic WRT project with the framework for css, javascript and html files.
The popular Adobe Dreamweaver has also a plugin which simplifies the development of WRT widgets which can be downloaded from 
Web developers who have chosen Microsoft Visual Studio 2008 as their development platform, can now plug-in features that dramatically simplify the process of creating WRT widgets. The Nokia WRT Plug-in adds tools to create or import, edit, preview, debug, validate, package, and deploy WRT widgets. To simplify coding Web Runtime 1.0 API is supported in Visual Studio’s code completion feature.
WRT or S60 Web Runtime “Widgets” is a portable and lightweight application framework that makes mobile web apps easy. It is an extension to the 
