Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

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

From 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 05:05.
204 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.

×