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

This page was last modified 09:35, 21 April 2008.

From Forum Nokia Wiki

原文（英語）: Use prototype javascript library : Form and AJAX(JSON) 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アプリケーションでPrototype Libraryを使用したAJAX処理の実装方法について触れます。

Prototypeのインストール

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

FormとAJAX(JSON)のデモ

Prototype LibraryのAJAX機能を利用した例として、4つの事例を紹介します。AJAXについての詳しい情報は、Webサイト http://www.prototypejs.org/api/ajax または http://www.prototypejs.org/learn/introduction-to-ajax にアクセスしてご確認ください。

準備しておくもの

サンプルのWidgetアプリケーションで使用した、サーバサイドPHPスクリプトファイルがいくつかあり、サイト http://www.ibomobi.com にてホスティングされます。 base_url(demo.jsファイルで定義済)のデフォルト値は "http://www.ibomobi.com/demo/symbian/wrt/" です。

自前のWebサーバーでスクリプトを設定したい場合、必要に応じて、以下の手順に従ってください。

• Webサーバ中でアクセス可能なURLの下に、"ajax"という名前のフォルダを作成する
• この例題のルートフォルダにある"phpscript"フォルダ中のコンテンツを、今作成した"ajax"フォルダに、コピーまたはアップロードする
• ベースURL(base_url)を変更するために"demo.js"ファイルを開き、自前のWebサーバーのベースURLを指すようにする

注意: ベースURLは、"ajax"フォルダを含まないものにします。

Welcome

タブ1の "Welcome" では、AJAXのリクエストを生成し、divタグのID "welcome" として識別されるコンテナを更新するための戻り値の使用方法を示します。"Welcome"ボタンをクリックした後、ajaxUpdater関数を実行します。これは、'ajax/welcome.php'へリクエストを送り、レスポンス文字列を受取り、その文字列をコンテナに置きます。受取った文字列は以下のように表示されます。

 Welcome to WRT widget world! 
 It's 2008-03-27 22:28:39 now.

表示時間は、再びボタンをクリックすると変更されます。

main.htmlファイル(クライアントサイド)中の部分HTMLコード

<div id="tab1"> 
<p>
<input type="button" value="Welcome" onClick="ajaxUpdater('welcome', 'ajax/welcome.php')" />  
</p>
  <hr /> 
<div id="welcome"> -- </div>
  <hr />
  // omitted 
  // ...
</div>

demo.jsファイル(クライアントサイド)中の部分JavaScriptコード

function ajaxUpdater(id, path) {
  var this_url = base_url + path;
  new Ajax.Updater(id, this_url, {asynchronous:true});
}

ajax/welcome.phpファイル(サーバーサイド)のPHPスクリプト

<?
echo "Welcome to WRT widget world!<br/>";
echo "It's ".date('Y-m-d H:i:s')." now.";
?>

Say Hi

タブ2の "sayHi" では、"hi-name"フィールド中の入力データを取得し(デフォルト値は"Tom")、sayHello関数中で、"ajax/hi.php"スクリプトを経由し、サーバーサイドに送信されます。そして、応答として返ってきたコンテンツが "hi" コンテナ中で表示されます。そのデフォルト値は "Hi, Tom!" です。

main.htmlファイル中の部分HTMLコード

<div class="tab" id="tab2">  
<p>
<div>
     <label for="hi-name">Enter your name:</label>
     <input id="hi-name" name="hi-name" type="text" value="Tom" />
     </div>
     <input type="button" value="Hi" onClick="sayHello('hi', 'ajax/hi.php')" /> <br/>
</p>
<hr />
<p>
<div id="hi"> -- </div>
</p>
  // omitted...
</div>
 
demo.jsファイル中の部分JavaScriptコード
<code javascript>
function sayHello(id, path){
  var this_url = base_url + path;
  var pars = 'hi-name='+escape($F('hi-name'));
  var myAjax = new Ajax.Updater(id, this_url, {method: 'get', parameters: pars});
}

ajax/hi.phpファイルのPHPスクリプト

<?php
     $name = htmlspecialchars($_GET['hi-name']);
     echo "<b>Hi, $name!</b>";
?>

Form and AJAX

タブ3の "AJAX" では、ログイン用のフォームデータを取得し、AJAXログインを行います。ユーザ名(username)とパスワード(password)のデフォルト値はそれぞれ "Bob" と "Secret" です。ユーザ名とパスワードが一致した場合、ログインできたことを示す "Welcome, <ユーザ名>!" メッセージが表示されます。一致しなかった場合のメッセージは "username or password error!" です。

main.htmlファイル中の部分HTMLコード

<div class="tab" id="tab3">
  <p>
<form id="loginForm">
   UserName: <input id="username" name="username" value="Bob" /><br />
   Password: <input id="password" name="password" type="password" value="Secret" /><br/>
   <input type="button" value="Login" onClick="sendAjaxLogin('loginForm', 'loginResult');" /> 
</form>
</p>
   <hr />
   <div id="loginResult"> -- Not Logged in -- </div>
   <hr />
   // omitted...
</div>

demo.jsファイル中の部分JavaScriptコード

function sendAjaxLogin(form, id)
{
  var this_url = base_url + "ajax/ajax_login.php";
  var pars = $(form).serialize();
  alert(pars);  // show parameters
  var myAjax = new Ajax.Updater(id, this_url, {method: 'get', parameters: pars});
}

ajax/ajax_login.phpファイルのPHPスクリプト

<?PHP
if (count($_GET) == 0) {
  die ("ERROR:  This page has been improperly accessed.");
}
 
$username = $_GET['username'];
$password = $_GET['password'];
 
if (strcmp ($username, 'Bob') == 0 && strcmp($password, 'Secret') == 0)
    echo "Welcome, ".$username."!";
else
    echo "<b>Username or password error</b>!";
?>

JSONデモ

タブ4は、JSONのデモンストレーションです。サーバー側ではJSONデータを生成します。クライアント側でJSONデータを受取った後は、データはHTMLテーブル形式でフォーマットされます。

main.htmlファイル中の部分HTMLコード

<div class="tab" id="tab4">
<p>
<input type="button" value='test JSON' onclick='test_json();' />
</p>
<hr />
<div>JSON Result: <br /><span id="tab4_result">This data will be replaced.</span></div>
<hr />
<p>
 
<div style="display:none;">
<textarea id="table_template">
<table border="1">
<thead><tr>#{heads}</tr></thead>
<tbody>
  #{rows}
</tbody>
</table>
</textarea>
</div>
 
<div style="display:none;">
<textarea id="headcell_template">
<th>#{hname}</th>
</textarea>
</div>
 
<div style="display:none;">
<textarea id="row_template">
<tr><td>#{product}</td><td>#{price}</td><td>#{quantity}</td></tr>
</textarea>
</div>
 
// ...
</div>

上記コードには、3つの隠された(hidden)テキスト領域があり、そこには、テンプレートオブジェクトを生成するために使用するテンプレート文字列を含みます。各テキスト領域のIDが示す通り、最初のはテーブルテンプレート、次のはヘッドセルテンプレート、最後のは行テンプレートです。JavaScriptで書かれた固定文字列を使用する代わりに、これらのテンプレートを用いてHTMLテーブルを作成します(「文字列操作」の記事では、テンプレートのパラメータとして、固定文字列を使用している)。

demo.jsファイル中の部分JavaScriptコード

function test_json()
{
  var this_url = base_url + "ajax/test_json.php";
  // show progress animation gif
  $('waitpic').style.display = 'block';
  new Ajax.Request(this_url,   
    {
	  method:'get',     
	  onSuccess: getResponse, 
	  onFailure: function(){ 
	    // hide progress animation gif
        $('waitpic').style.display = 'none';
	    alert('Something went wrong...');
	  }   
    }); 
}
 
function getResponse(transport, json)
{ 
  var data = transport.responseText.evalJSON(true);  
//  var data = eval(transport.responseText);
//  alert(data);
 
  // show raw json data.
//  $('tab4_result').innerHTML = transport.responseText; 
 
  // clear result area
  $('tab4_result').innerHTML = ''; 
  
  // build table body
  var templ = new Template($('row_template').value);  // not $('row_template').innerHTML
  var bodyFormatted = "";
  //populate the list
  for (var i = 0; i < data.length; i++) {
    // 
    var item = data[i][0];
//	alert(item.product);
    bodyFormatted += templ.evaluate(item) + '\n';
  }
  // build table header
  var item0 = data[0][0];
  var keys = Object.keys(item0);
  templ = new Template($('headcell_template').value);
  var headFormatted = "";
  for (var i=0; i<keys.length; i++) {
    headFormatted += templ.evaluate({"hname": keys[i]});
  }
  // assembly table.  
  var tableTemplateString = $('table_template').value;
  var pars = {"heads": headFormatted, "rows": bodyFormatted};  
  $('tab4_result').innerHTML = tableTemplateString.mixin(pars);
  
  // hide progress animation gif
  $('waitpic').style.display = 'none';
}

Stringクラスにミックスイン関数が追加されています。

Object.extend(String.prototype, {
  mixin: function(obj) {
    return new Template(this).evaluate(obj);
  }
});

ajax/test_json.phpファイルのPHPスクリプト

<?PHP
 
// ref: http://www.pastebin.ca/611218
if (!function_exists('json_encode')){ 
// now its portable to php ver. < 5.2.0 where you would otherwise 
// have to install the php-json c-extension first
    include_once('Services_JSON.php');
    $json = new Services_JSON();
    function json_encode($value){
        global $json;
        return $json->encode($value);
    }
    function json_decode($value){
        global $json;
        return $json->decode($value);
    }
}
 
$_array1[] = array(
	'product' => 'WRT Internals',
	'price' => 24.5,
	'quantity' => 1
	);
$_array2[] = array(
	'product' => 'The Prototype world',
	'price' => 5.44,
	'quantity' => 3
	);
$_array3[] = array(
	'product' => 'WRK Reference',
	'price' => 10.00,
	'quantity' => 4
	);
	
header('Content-type: application/x-json');
$data = array($_array1, $_array2, $_array3);
//encode and return json data...
echo json_encode($data); 
 
?>

上記コードにおいて、PHPのバージョンが5.2.0未満の場合、JSONデータを生成するため、Service_JSON.phpファイルが必要になります。

サンプルアプリケーションをダウンロードする

本トピックのサンプルアプリケーションのダウンロード：Image:PrototypeFormAndAjaxDemo.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]