libro
www.tuyano.com
Google App Engine for Java(GAE/J)プログラミング入門

データストアとオブジェクト検索 (5/7)

作成:2010-05-03 14:55
更新:2010-05-03 14:55

■index.htmlの作成

では、最後になりましたが、index.htmlを作成しましょう。ここでは、ページにアクセスすると、Ajaxを利用してサーブレットにアクセスし、データの一覧をテーブルに表示するようにしています。

テーブルでは、ID番号、タイトル、それに「Edit」「Del」といったリンクを用意してあります。ID番号をクリックすると、そのデータの詳細が表示されます。またタイトルをクリックすると、そのURLにジャンプします。（Edit,Delは、それぞれデータの編集・削除をするためのリンクで、次回作成します）

ここでは、<body onload="getData(null);">というようにして、ロード時にgetDataを呼び出しています。そしてcallback関数で、返されたJSONデータから値を取り出してテーブルを生成し表示しています。全データを表示する場合と、指定のIDのデータ１つだけを表示する場合で表示の仕方を変えてありますが、そう難しいものではありません。実際に試してみるとすぐに仕組みはわかるでしょう。


というわけで、今回はJDOを使ったデータ検索（データの取得）についてのみ説明しました。

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

●プログラム・リスト●

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>データの表示</title>
    <script type="text/javascript" src="lib.js"></script>
		<script type="text/javascript">
		<!--
		function callback(request){
			var json = eval(request.responseText);
			var res = '';
			if (json.length == 1){
				res += '<tr><td>' + json[0].id +'</td></tr>';
				res += '<tr><td>' + json[0].title +'</td></tr>';
				res += '<tr><td>' + json[0].url +'</td></tr>';
				res += '<tr><td>' + json[0].comment +'</td></tr>';
			} else {
				for (var i = 0;i < json.length;i++){
					res += '<tr><td><a href="javascript:return false;" onclick="getData(' + json[i].id +');">' + json[i].id + '</a></td>';
					res += '<td><a href="' + json[i].url + '">' + json[i].title + '</a></td>' +
					'<td><a href="edit.html?id=' + json[i].id + '">Edit</td>' +
					'<td><a href="del.html?id=' + json[i].id + '">Delete</td></tr>';
				}
			}
			var obj = document.getElementById("datatable");
			obj.innerHTML = res;
		}
		//-->
		</script>
  </head>
  <body onload="getData(null);">
    <h1>データの表示</h1>
	
    <table id="datatable" border="1">
      <tr>
        <td>wait...</td>
      </tr>
    </table>
    <br>
    <div><a href="add.html">データの新規追加</a></div>
  </body>
</html>
※関連コンテンツ

「Google App Engine for Java(GAE/J)プログラミング入門」に戻る