連載
» 2009年06月24日 00時00分 公開

App EngineをjQueryでAjax化しBigtableをCRUD操作Google App Engineで手軽に試すJavaクラウド(3)(3/4 ページ)

[清野克行,有限会社サイバースペース]

JavaScript(jQuery)の記述

 JavaScriptのコードでは、Ajax化のためにjQueryを使用しています。jQueryでのイベント処理は、次の2種類の方式が基本となっています。

 1つは、リスト2の(1)以下の関数で、この部分は以下の形になっています。

$(function(){
    処理コード
        :
});

 この関数定義の中にあるコードおよび関数記述は、Webブラウザへの画面ロードが完了したタイミング、つまりタグ上での操作が可能になった時点で評価されます。ただし、$("#data").keydown(asyn);以下の3つは、イベント処理関数なので、関数内の処理は対応するイベント(例えば、キー押下)が発生したときに実行されます。

 ここでは、リスト2で【1】〜【4】の処理が行われ、各処理の概要はコメントに記述してありますが、この中の【3】で特徴的な処理を行っているので、簡単に解説します。

 Ajaxで採用されるイベントリスナ方式のイベント処理では、イベントは各ノードオブジェクト(タグ)を下位ノードから上位ノードに伝搬していきます。

 この例では、登録・更新・参照・削除のラジオボタンのクリックイベントは、上位ノードのID値「crud」を持つタグで検出され、イベントにより匿名関数が呼び出されます。匿名関数の中では、クリックされたラジオボタンのID値が所得されます。

 このように、Ajaxのイベント処理では多くの下位ノード(タグ)で発生したイベントをツリー構造の上位ノード(タグ)1カ所で、まとめて検知し処理できます。

 もう1つは(2)以下の部分で、この部分では関数記述がすべて以下の形式になっており、これらの関数はすべて、ほかの関数からの関数呼び出しによって実行されます。

$(function(引数、……){
    処理コード
        :
});

 この部分での特徴的な処理をいくつか挙げてみます。

  • 【5】read関数の赤線(Xの処理方式によって、サーブレットから受信した社員情報すべてを画面上のフィールドに一気に表示でき、この処理方式は【7】の入力フィールドのクリアでも使用される
  • サーバとの非同期通信は【4】のA、および【6】のBCで行われる

 $.get(引数…)でGETメソッド、$.post(引数…)でPOSTメソッドでサーバとの通信が行われ、それぞれ第1引数にweb.xmlで指定したサーブレットのurl-pattern、第2引数にサーバに送信するクエリ文字列連想配列形式で指定し、第3引数はサーバからのレスポンス受信時の処理関数を指定しています。

 レスポンス受信時の処理関数は、Aのように関数名(read)を指定する形式と、BCのように匿名関数を指定して、その中で受信処理を行う形式の両方を使用できます。関数名指定の場合は、read関数の引数respにサーバからのレスポンスデータがセットされ、匿名関数形式の場合は匿名関数の引数にサーバ受信データがセットされて、それぞれの関数内で表示処理用に使用されます。

JavaサーブレットでBigtableをCRUD処理

 ここからはJavaサーブレットでのBigtableのCRUD処理を見ていきます。登録と参照については、前回紹介したので復習になりますが、ここでもう一度確認しておきしょう。

 前回見てきたように、JDOでBigtableへデータアクセスするためには、リスト3のデータクラスと、リスト4のPM(PersistenceManager)クラスを作成しておく必要があります。

 データクラスの定義では、前回と永続化対象のデータ項目が違うだけでほとんど同じですが、1つだけ異なる項目があります。それは、キー項目の定義です。

 前回は自動生成のキー項目を使用していましたが、このサンプルでは社員番号(empno)をキー項目に指定しています。これは、このサンプルで社員番号をキーにして検索・参照を行うための指定ですが、このようにユーザー指定の任意の項目をキー指定できます。

package erp.emp;
 
import java.util.Date;
import javax.jdo.annotations.IdGeneratorStrategy;
import javax.jdo.annotations.IdentityType;
import javax.jdo.annotations.PersistenceCapable;
import javax.jdo.annotations.Persistent;
import javax.jdo.annotations.PrimaryKey;
 
@PersistenceCapable(identityType = IdentityType.APPLICATION)
public class empmas {
 
    @PrimaryKey
    @Persistent
    private String empno;
    @Persistent
    private String empname;
    @Persistent
    private String depart;
    @Persistent
    private String section;
    @Persistent
    private Date date;
    
    public empmas(String empno, String empname, String depart, String section, Date date) {
        this.empno = empno;
        this.empname = empname;
        this.depart = depart;
        this.section = section;
        this.date = date;
    }
    
    public String getEmpno() { return empno; }
    public String getEmpname() { return empname; }
    public String getDepart() { return depart; }
    public String getSection() { return section; }
    public Date getDate() { return date; }
    
    public void setEmpno(String empno) { this.empno = empno; }
    public void setEmpname(String empname) { this.empname = empname; }
    public void setDepart(String depart) { this.depart = depart; }
    public void setSection(String section) { this.section = section; }
    public void setDate(Date date) { this.date = date; }
}
リスト3 empmas.java

 PMクラスは、package指定を今回の環境に合わせているだけで、後は前回とまったく同じコード記述になっています。

package erp.emp;
 
import javax.jdo.JDOHelper;
import javax.jdo.PersistenceManagerFactory;
 
public final class PMF {
    private static final PersistenceManagerFactory pmfInstance =
        JDOHelper.getPersistenceManagerFactory("transactions-optional");
 
    private PMF() {}
 
    public static PersistenceManagerFactory get() {
        return pmfInstance;
    }
}
リスト4 PMF.java

 以上2つのクラスファイルを準備して、いよいよ次ページでは、CRUD処理を行うサーブレットの内容を見ていきます。

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。