Prototype JavaScript Libraryの使用：WRTアプリケーション中でのPrototype UIの使用
Article Metadata
Code Example
Article
原文（英語）: Use prototype javascript library : Prototype UI in WRT application
Contents |
概論
ご存知かもしれませんが、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);
}
サンプルアプリケーションをダウンロードする
本トピックのサンプルアプリケーションのダウンロード：File: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)
(no comments yet)