Quality Rating:

Currently 0.0 / 5

(0.0 / 5 - 0 votes cast)

Expertise Level:

Currently 0.0 / 5

(0.0 / 5 - 0 votes cast)

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

This page was last modified 00:30, 24 April 2008.

使用Prototype JavaScript库: 在WRT应用中使用Prototype UI库

From Forum Nokia Wiki

1 简介
2 安装prototype和PrototypeUI
3 Prototype UI
4 下载样例应用
5 相关主题
6 参考

简介

总所周知，Prototype是一个著名的跨浏览器JavaScript库，它支持几乎所有当前流行的浏览器，比如： FireFox, Safari, IE, Opera, 等等。 Prototype最新版(1.6.0)，甚至更早版本，也支持AppleWebKit。AppleWebKit是一个有Apple公司开源的Web引擎。（它也是Safari的核心引擎。）

Nokia Web浏览器建立在S60WebKit上，S60WebKit是开源的WebKit项目在S60平台上的移植。Nokia WRT(Web-RunTime)也基于此。

这个部分，我们将在WRT Widget应用中使用基于Prototype的PrototypeUI库来创建窗口。

安装prototype和PrototypeUI

如何安装prototype.js库，请到这里。请浏览 http://script.aculo.us/ 下载最新的Script.aculo.us库。请浏览 http://www.prototype-ui.com/ 下载最新的Prototype UI库。

这两个库的安装步骤与prototype库的安装步骤非常类似，参考上面的链接。也参照下面的代码片段：

/** 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，或PWC(Prototype Window Class)，是一个基于Prototype(1.6)和Script.aculo.us (1.8)的JavaScript库，一个用户界面组件库。注意： Prototype-UI仍在大力开发中，当前候选发行只面向开发人员。

尽管prototypeUI尚未发行，了解一下它能为我们带来的东西仍然是让人激动的。下面我们将使用Prototype-UI库创建简单的窗口，看看这里例子是否能工作。如果这些例子能工作，我们就可以相信Script.aculo.us完全可以用于WRT应用开发。这意味着我们能在生产环境中使用Prototype和Script.aculo.us，因为这二者是稳定的。

创建Mac风格的窗口

创建窗口是相当容易的。这里，我们创建了一个Mac风格的窗口，只用了一行代码。如下：

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

注： Mac风格的窗口在Widget准备好之后将被自动创建。下面是WRT调用的相关代码，当装入时执行runTest方法。

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

runTest定义如下：

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

创建一个"Hello, WRT world!"窗口

在这个用例，我们创建了一个不同风格的窗口，它显示一些文本——"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();
  }

在窗口中动态创建一个HTML表格

这个用例演示了如何使用Template类在一个窗口中动态创建表格，Template类在前面的文章——“字符串操作”中已经做过演示。首先，我们创建一个Cart对象，然后在Cart中放入一些条目。之后，这些条目被格式化为一个HTML字符串（使用模板字符串进行格式化），这个字符串含有表格行。最后，我们使用格式化后的字符串替换窗口内容。

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

下载样例应用

下载本主题样例应用： Image:PrototypeUI.zip。安装时，将后缀.zip改为.wgz。

对于最新版本，请浏览： http://code.google.com/p/prototypewrt/downloads/list

参考

Prototype主页 [1]
Prototype UI主页[2]
样例WRT应用下载[3]

Retrieved from "http://wiki.forum.nokia.com/index.php/%E4%BD%BF%E7%94%A8Prototype_JavaScript%E5%BA%93:_%E5%9C%A8WRT%E5%BA%94%E7%94%A8%E4%B8%AD%E4%BD%BF%E7%94%A8Prototype_UI%E5%BA%93"

Views