×
Namespaces

Variants
Actions

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

From Nokia Developer 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
Platform(s):
S60 3rd Edition FP2
Article
Created: dougcn (25 Mar 2008)
Last edited: hamishwillee (02 Jul 2012)


Contents

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 Archived:Use prototype JavaScript library in Symbian Web Runtime 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: File: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

References

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

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×