プログラムリスト
このサンプルではJavaBeansからデータストアにアクセスしているので、そこから見ていきたいところですが、図1構成のアクセスの順序に従って、view機能に対応するWebクライアント（HTML＋JavaScript）から見ていきます。ただし、Webクライアントとサーブレットはデータストア・アクセスには直接関係しない部分なので簡単に見ていきます。
1. HTML＆JavaScript View -> Controller
リスト1 HTML&JavaScript（itemInfoCrud1.htm）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>App Engine Cloud SQL 部品情報管理</title>
<script type="text/javascript" src="../jslib/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
var mode = "add";
var query = {};
query["table"] = "item_info";
$(function(){
$("#item_no").focus();
$("#exe").click(function(e){ //（1）
query["mode"] = mode = $('input[name="op"]:checked').val(); //（2）
query["item_no"] = $("#item_no").val();
if(mode=="rev"){ //（3）
$.get("/bomsvlt", query, function(json){
var dat = $.parseJSON(json);
$("#status").text(dat.status);
$("#item_name").val(dat.item_name);
$("#final_flag").val(dat.final_flag);
$("#vendor_no").val(dat.vendor_no);
$("#vendor_name").val(dat.vendor_name);
});
}else if (mode=="add" || mode=="upd"){ //（4）
query["item_name"] = $("#item_name").val();
query["final_flag"] = $("#final_flag").val();
query["vendor_no"] = $("#vendor_no").val();
query["vendor_name"] = $("#vendor_name").val();
$.post("/bomsvlt", query, function(resp){
$("#status").html(resp);
});
}else if(mode=="del"){ //（5）
$.post("/bomsvlt", query, function(resp){
$("#status").text(resp);
});
}
});
});
</script>
</head>
<body>
<table width="350" border="1" cellpadding="0" class="b1" bgcolor="#eeeeff">
<thead id="crud">
<tr height="23"><th class="t4" colspan="2">App Engine Cloud SQL 部品情報管理</th></tr>
<tr height="23">
<th colspan="2">
<input type="radio" name="op" value="add" checked="checked" />登録
<input type="radio" name="op" value="rev" />参照
<input type="radio" name="op" value="upd" />更新
<input type="radio" name="op" value="del" />削除
<input type="button" id="exe" value=" 実行 "/>
</th>
</tr>
</thead>
<tbody id="data">
<tr>
<th width="150">部品番号</th>
<td><input type="text" size="12" id="item_no"/></td>
</tr>
<tr><th>部品名</th><td><input type="text" id="item_name"/></td></tr>
<tr><th>ファイナル</th><td><input type="text" size="2" id="final_flag"/></td></tr>
<tr><th>ベンダNO</th><td><input type="text" size="24" id="vendor_no"/></td></tr>
<tr><th>ベンダ名</th><td><input type="text" size="34" id="vendor_name"/></td></tr>
<tr><th height="23">ステータス</th><td id="status"> </td></tr>
</tbody>
</table>
</body>
</html>
リスト1のitemInfoCrud1.htmはCloud SQL用のCRUD処理画面ですが、サーバへの非同期通信などで、jQueryを使用しています。ラジオボタンから処理内容を指定した後、画面データを入力し、「実行」ボタンをクリックすると（1）の匿名関数が起動されます。匿名関数内では、（2）でCRUD処理モードを取得し、その値に従って（3）で参照、（4）で登録または更新、（5）で削除処理のリクエストをjQueryの非同期通信（$.getおよび$.post）を使用してサーバに送信しています。
Bigtableアクセス用の画面もこれとまったく同じものを使用していますが、サーブレット側で処理の切り分けを行うために、ラジオボタンのvalue値を、add_kv2、rev_kv、upd_kv2、del_kvのように変えてあります。
