【ハウツー】サーバサイドでDOMを活用! 自由度が高いAjaxフレームワーク「ItsNat」 (2) "エコーアプリケーション"で作法をつかむ | エンタープライズ

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

エンタープライズ

急上昇ワード

[

]

【ハウツー】

サーバサイドでDOMを活用! 自由度が高いAjaxフレームワーク「ItsNat」

2 "エコーアプリケーション"で作法をつかむ

竹添直樹　 [2009/03/04]

印刷

先頭
前へ
- 1
- 2
- ／2

ItsNatでアプリケーションを作ってみよう

続いて実際に簡単なアプリケーションを作成しながらItsNatの使い方を見ていこう。作成するのは図4のようなエコーアプリケーションだ。テキストフィールドに文字列を入力してボタンをクリックするとメッセージが表示される。

図4: 作成するアプリケーション

まずはリクエストを受け付けるためのサーブレットを作成する(リスト1)。サーブレットはorg.itsnat.core.http.HttpServletWrapperクラスを継承し、init()メソッドをオーバーライドする。init()メソッドではItsNatの初期設定や、HTMLテンプレートの登録といった処理を行う。

リスト1: MyServlet.java

public class MyServlet extends HttpServletWrapper {

  public void init(ServletConfig config) throws ServletException {
    super.init(config);

    // ItsNatの初期設定
    ItsNatHttpServlet itsNatServlet = getItsNatHttpServlet();
    ItsNatServletConfig itsNatConfig = itsNatServlet.getItsNatServletConfig();

    itsNatConfig.setDebugMode(false);
    itsNatConfig.setClientErrorMode(
      ClientErrorMode.SHOW_SERVER_AND_CLIENT_ERRORS);
    itsNatConfig.setLoadScriptInline(true);
    itsNatConfig.setFastLoadMode(true);
    itsNatConfig.setDefaultSyncMode(SyncMode.ASYNC_HOLD);
    itsNatConfig.setAJAXTimeout(-1);
    itsNatConfig.setOnLoadCacheStaticNodes("text/html", true);
    itsNatConfig.setOnLoadCacheStaticNodes("text/xml", false);
    itsNatConfig.setNodeCacheEnabled(true);
    itsNatConfig.setAddFrameworkScriptFiles(true);
    itsNatConfig.setFrameworkScriptFilesBasePath("js");
    itsNatConfig.setDefaultEncoding("UTF-8");
    itsNatConfig.setUseGZip(UseGZip.SCRIPT);
    itsNatConfig.setDefaultDateFormat(
        DateFormat.getDateInstance(DateFormat.DEFAULT, Locale.US));
    itsNatConfig.setDefaultNumberFormat(NumberFormat.getInstance(Locale.US));
    itsNatConfig.setEventDispatcherMaxWait(0);
    itsNatConfig.setAJAXEnabled(true);
        itsNatConfig.setScriptingEnabled(true);
    itsNatConfig.setUsePatternMarkupToRender(false);
    itsNatConfig.setAutoCleanEventListeners(true);

    ItsNatServletContext itsNatCtx = itsNatConfig.getItsNatServletContext();
    itsNatCtx.setMaxOpenDocumentsBySession(-1);

    // テンプレートの登録
    String pathPrefix = getServletContext().getRealPath("/");
    pathPrefix += "WEB-INF/pages/manual/";

    ItsNatDocumentTemplate docTemplate;
    docTemplate = itsNatServlet.registerItsNatDocumentTemplate(
        "manual.core.example","text/html", pathPrefix + "sample.html");

    // リスナの登録
    docTemplate.addItsNatServletRequestListener(new SampleListener());  
  }

}

サーブレットで登録しているHTMLの内容はリスト2の通りだ。NetBeans上では/itsnat/Webページ/WEB-INF/pages/manualの配下にsample.htmlとして作成しておく。

リスト2:sample.html

<html>
  <head>
    <title>ItsNatのサンプル</title>
  </head>
  <body>
    <div itsnat:nocache="true" xmlns:itsnat="http://itsnat.org/itsnat">
      お名前をどうぞ：
      <input type="text" id="name"/>
      <input type="button" id="click" value="クリック！"/>
      <div id="result"></div>
    </div>
  </body>
</html>

続いてリスト1の最後で登録しているリスナのソースコードを見てみよう(リスト3)。実際の処理はSampleProcessorに移譲していることがわかる。

リスト3:SampleListener.java

public class SampleListener implements ItsNatServletRequestListener {
  public void processRequest(ItsNatServletRequest request,
      ItsNatServletResponse response) {
    ItsNatHTMLDocument itsNatDoc = 
      (ItsNatHTMLDocument) request.getItsNatDocument();
    new SampleProcessor(itsNatDoc);
  }
}

SampleProcessorのソースコードはリスト4の通りだ。テキストフィールドと結果表示用のdiv要素をあらかじめ取得しておき、ボタンのclickイベントにリスナを登録している。ボタンがクリックするとここで登録しているリスナのhandleEvent()メソッドが呼び出され、div要素にメッセージが挿入されるという仕組みだ。

リスト4:SampleProcessor.java

public class SampleProcessor {

  private ItsNatHTMLDocument itsNatDoc;
  private ItsNatHTMLInputText input;
  private Element result;

  public SampleProcessor(ItsNatHTMLDocument itsNatDoc) {
    this.itsNatDoc = itsNatDoc;

    // テキストフィールドを取得
    this.input = (ItsNatHTMLInputText) 
      itsNatDoc.getItsNatComponentManager().addItsNatComponentById("name");

    // 結果を表示するdiv要素を取得
    this.result = itsNatDoc.getDocument().getElementById("result");

    // ボタンクリック時に呼び出されるリスナを登録
    Element element = itsNatDoc.getDocument().getElementById("click");  
    itsNatDoc.addEventListener((EventTarget) element, "click", 
      new EventListener() {
        public void handleEvent(Event evt) {
          // メッセージを挿入
          result.setTextContent("こんにちは、" + input.getText() + "さん！");
        }
      }, false);
  }

}

以上でアプリケーションは完成だ。プロジェクトを実行後、ブラウザからhttp://localhost:8080/itsnat/MyServlet?itsnat_doc_name=manual.core.example^※1にアクセスして動作を確認してみよう。

※1 URLはサーブレットを/MyServletにマッピングしている場合。またitsnat_doc_nameパラメータにはサーブレット内でテンプレートを登録する際に指定したキーを指定する

クラスの関連や処理の流れは少々複雑だが、実質的な処理を行っているのはSampleProcessorだけなので、そこだけ見れば特に難しいことはないだろう。

サーバーサイドの複雑な処理にも対応可能

ItsNatはサンプルで紹介した機能以外にもサーバサイドでの非同期処理、タイマー、COMET対応などAjaxアプリケーションを開発するための豊富な機能が用意されている。サーバサイドでDOMを活用するというやや風変りなフレームワークではあるものの、自由度が高くサーバーサイドでの複雑な処理にも対応可能だ。

ただし、冒頭でも述べた通り、ライセンスがGNU Affero General Public License v3 となっているため、採用にあたっては注意してほしい。