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

This page was last modified 06:33, 6 June 2008.

From Forum Nokia Wiki

原文（英語）: Use prototype javascript library : Prototype UI in WRT application

概論

ご存知かもしれませんが、Prototypeは、クロスWebブラウザ対応の有名なJavaScriptライブラリです。Firefox, Safari, IE, Operaなどといった、現在よく知られたWebブラウザの大半をサポートします。また、最新バージョン(Prototype 1.6.0)では、Appleが提供するオープンソースWebエンジンのAppleWebKitもサポートします。

Nokia Web Browserは、S60プラットフォームのオープンソースWebKitの一部であるS60WebKit上で動いています。Nokia WRT(Web Runtime)は、このS60WebKitをベースにしています。

本トピックでは、Web Runtime Widgetアプリケーションにおいて、PrototypeベースのPrototype UIライブラリを使用して、ウィンドウを作成する方法を確認することができます。

PrototypeとPrototypeUIのインストール

Protptype JavaScript Libraryをインストールする方法については、こちらをご参照ください。

最新のScript.aclo.usライブラリをダウンロードするには、Webサイト http://script.aculo.us/ をご覧ください。 最新のPrototype UIライブラリをダウンロードするには、Webサイト http://www.prototype-ui.com/ をご覧ください。

これら2つのライブラリのインストール手順は、Prototype Libraryのインストール手順と大変似ています。上記リンクにある手順に従ってください。また、以下に示す部分コードもご参照ください。

/** 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 Libraryの1つで、 ユーザインタフェース(UI)コンポーネントのライブラリです。注意点：Prototype UIは今もまだ開発中です。現在のリリース候補版(Release Candidate)は、開発者のみを対象にしています。

Prototype UIはまたリリースされていないので、それが提供できる機能を知ることは興味深いことといえます。下記にて、Prototype UIライブラリを使用して簡単なウィンドウを作成し、サンプルコードが動作するかどうか確認します。サンプルコードが動作する場合、Script.aculo.usはWRTアプリケーションで使用する準備ができたといえます。すなわち、開発環境の中でそれらを使用できることを意味します。PrototypeとScript.aculo.usは不変だからです。

Macスタイルのウィンドウを作成する

ウィンドウを作成するのはとても簡単です。ここでは、Macスタイルのウィンドウを作成します。以下に示す通り、コードは1行です。

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

注意すべきことは、Macスタイルのウィンドウは、Widgetの準備が済んだ後に自動的に生成されることです。下記に示すのは、ロードした時にWeb Runtimeが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テーブルを動的に作成する

ここでは、前の記事"String manipulation"で既に示したテンプレートクラスを使用して、ウィンドウ中に動的テーブルを作成する方法を示します。最初に、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に変更します。

最新バージョンについては、Webサイト http://code.google.com/p/prototypewrt/downloads/list でご確認ください。

関連トピック

• WRTアプリケーションでPrototype JavaScript Libraryを使用する
• Prototype JavaScript Libraryの使用：WRTアプリケーションにおける基本操作(ユーティリティ機能など)
• Prototype JavaScript Libraryの使用：WRTアプリケーションにおける文字列操作
• Prototype JavaScript Libraryの使用：WRTアプリケーション中でのオブジェクト作成
• Prototype JavaScript Libraryの使用：WRTアプリケーション中でのPrototype UIの使用
• Prototype JavaScript Libraryの使用：WRTアプリケーションにおけるFormとAJAX(JSON)

参照リンク

• Prototype Webサイト[1]
• Prototype UI Webサイト[2]
• サンプルWRTアプリケーションのダウンロード [3]