Categories: S60 3rd Edition, Feature Pack 2 | Web Runtime (WRT)

This page was last modified 07:18, 28 March 2008.

From Forum Nokia Wiki

Introduction

As you may know, Prototype is a famous cross-web-browser javascript library. It supports almost all current popular web browsers, such as FireFox, Safari, IE, Opera, etc. With the latest version(Prototype 1.6.0), it also supports AppleWebKit, an open source web engine provided by Apple Inc.

The Nokia Web Browser is built upon S60WebKit, a port of the open source WebKit project to the S60 platform. Nokia WRT(Web-RunTime) is based on it.

In this section, we will see how to create windows using prototypeUI library, a prototype-based library in WRT widget application.

Install prototype and prototypeUI

Please go to here for how to install prototype javascript library.

Please navigate to http://script.aculo.us/ to download the latest Script.aculo.us library. Please navigate to http://www.prototype-ui.com/ to download the latest Prototype UI library.

The installation steps for these two libraries are very similar to those steps in the installation of prototype library. Just follow the directions in the above link. Also refer to code snippets below:

/** effects.js comes from Script.aculo.us library. */
  <script src="lib/effects.js" tyce="text/javascript"></script>
 
  /** The unpacked version of windows.js is used here. */
  <script src="dist/window.js" type="text/javascript"></script>

Prototype UI

Prototype UI, or PWC(Prototype Window Class), is a javascript library based on Prototype (1.6) and Script.aculo.us (1.8). It's a library of User Interface components. Warning: Prototype-UI is still under deep development, the current release candidate is targeted to developers only.

Although prototypeUI is not in a released state, it is exciting to know what it can provide for us. Below we will create simple windows using Prototype-UI library to see whether or not those samples will work. If those samples work, we can believe that Script.aculo.us is ready to use under WRT application. That means we will be able to use them in a production environment because both Prototype and Script.aculo.us are stable.

Create a Mac-styled Window

It's fairly easy to create a window. Here we created a Mac-styled window just using one line of code as follows:

function openMacWindow() {      
    new UI.Window({theme: "mac_os_x", shadow: true, width:75, height:100, title: "Hello, PWC!"}).show();
  }

Note that a Mac-styled window will be created automatically after this widget is ready. Below is the magic code which WRT calls to execute runTest function when loaded.

Event.observe(window, "load", runTest);

The runTest function is defined as follows:

function runTest() {
    CSS.preloadImages();
    openMacWindow();
  }

Create a "Hello, WRT world!" window

In this case, we created a window in a different style which displays some text -- "Hello, WRT world!".

function openHelloWindow()
  {
	var win = new UI.Window({className: "hello", title: "Sample", width:200, height:150, destroyOnClose: true, recenterAuto:false}); 
	win.setPosition(100, 10);
	win.setContent("<h2>Hello, WRT world !!</h2>"); 
	win.show();
  }

Create a HTML table in window dynamically

This case shows how to create a table dynamically in a window using Template class which has been already demonstrated in previous article -- "String manipulation". At first, we create a cart object, and then put some items into the cart. After that, those items are formatted into a HTML string holding table rows using a template string. In the end, we change the window content using the formatted string.

function openTableWindow() {
    var w = new UI.Window({width: 200, height: 250, top: 40, left: 10, minWidth: 100, minHeight: 80, maxWidth: 300, maxHeight: 400}).show();  
//    w.content.update("min size: 100x80<br>max size: 300x400")
	
	var cart = new Object();
	cart.items = [ ];
	//putting some sample items in the cart
	cart.items.push({product: 'Book 123', price: 24.50, quantity: 1});
	cart.items.push({product: 'Set of Pens', price: 5.44, quantity: 3});
	cart.items.push({product: 'Gift Card', price: 10.00, quantity: 4});
	
	//here we create our template for formatting each item
	var itemFormat = new Template(
			'<tr> <td>#{product}</td> <td>#{quantity} </td> <td>$#{price} </td>'
			);
	var formatted = '<table border=1> <th>Product</th> <th>Quantity</th> <th>Price</th>';
	
	for(var i=0; i<cart.items.length; i++){
		var cartItem = cart.items[i];
		formatted += itemFormat.evaluate(cartItem) + '\n';
	}
	
	formatted += '</table>';
	
	w.content.update(formatted);
  }

Download Sample Application

Download sample widget of this topic: Image:PrototypeUI.zip. To install it, just rename the suffix .zip to .wgz.

For the latest version, please go to http://code.google.com/p/prototypewrt/downloads/list

Related topics

• Use prototype javascript library : Summary in WRT application
• Use prototype javascript library : basic operations (Utility fucntions, etc) in WRT application
• Use prototype javascript library : string manipulation in WRT application
• Use prototype javascript library : Object Creation in WRT application
• Use prototype javascript library : Prototype UI in WRT application
• Use prototype javascript library : Form and AJAX(JSON) in WRT application

References

• Prototype Homepage[1]
• Prototype UI Homepage[2]
• Sample WRT applications Download [3]