×
Namespaces

Variants
Actions

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

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata

代码示例
兼容于
文章
dougcn 在 23 Apr 2008 创建
最后由 hamishwillee 在 09 May 2012 编辑

Contents

简介

总所周知,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);
}

下载样例应用

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

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

相关主题

参考

  • Prototype主页 [1]
  • Prototype UI主页[2]
  • 样例WRT应用下载[3]
This page was last modified on 9 May 2012, at 08:05.
43 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.

×