×
Namespaces

Variants
Actions

Prototype JavaScript Libraryの使用:WRTアプリケーション中でのPrototype UIの使用

From Nokia Developer Wiki
Jump to: navigation, search
Article Metadata
Code ExampleCompatibility
Platform(s):
S60 3rd Edition FP2
Article
Translated:
By morisawafnj
Last edited: hamishwillee (09 May 2012)

原文(英語): 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 でご確認ください。

関連トピック

参照リンク

  • Prototype Webサイト[1]
  • Prototype UI Webサイト[2]
  • サンプルWRTアプリケーションのダウンロード [3]
This page was last modified on 9 May 2012, at 08:05.
56 page views in the last 30 days.
×