Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Archived:Use prototype JavaScript library - Prototype UI in Symbian Web Runtime

From Wiki
Jump to: navigation, search

Archived.pngArchived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}.

Article Metadata
Code ExampleCompatibility
S60 3rd Edition FP2
Created: dougcn (25 Mar 2008)
Last edited: hamishwillee (02 Jul 2012)



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 Archived:Use prototype JavaScript library in Symbian Web Runtime for how to install prototype javascript library.

Please navigate to to download the latest library. Please navigate to 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 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 (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 is ready to use under WRT application. That means we will be able to use them in a production environment because both Prototype and 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() {

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>");;

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>';

Download Sample Application

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

For the latest version, please go to

Related topics


  • Prototype Homepage[1]
  • Prototype UI Homepage[2]
  • Sample WRT applications Download [3]
This page was last modified on 2 July 2012, at 05:17.
56 page views in the last 30 days.