Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

Javaで軽快に使える「軽量フレームワーク」特集
~小さなライブラリ1つで動くStripes Framework(3)

第19回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2010/07/16 14:00

 小さなライブラリ1つで動くJavaの軽量フレームワーク「Stripes Framework」の3回目。今回は、Ajaxとの連携と、プラグインで拡張される機能についていくつか紹介していきましょう。

目次

はじめに

 Stripesを利用して本格的な開発を行おうとすると、いろいろと必要となってくる機能が出てくるでしょう。例えば、Ajaxからのアクセスや、セッションの利用などです。今回は、Stripesを利用したWeb開発で役立つさまざまな機能をピックアップして紹介していくことにしましょう。

対象読者

  • Javaで手ごろなフレームワークを探している技術者。
  • 最近のフレームワークをごくざっと理解しておきたい方。
  • Web開発の手法がどうも気に入らない、と常々考えているJavaプログラマ。

jQueryによる非同期通信

 まずは、Ajax関連のライブラリとの連携についてです。現在、Webの開発ではJavaScriptのライブラリが非常に重要になってきています。こうしたAjax関連のライブラリとStripesとの連携について考えてみましょう。

 この種のライブラリは、<script>タグでライブラリをロードし、JavaScriptのスクリプトを記述して利用します。それだけならば、別にStripesとは関係なくコードを書いて使えばいいだけです。両者の連携を考えなければならないのは、Ajax通信を利用する場合でしょう。

 Ajaxでは、JavaScriptのスクリプト内から非同期にサーバに問い合わせを行い、サーバ側でその対応をするようになっています。ということは、Ajaxによってアクセスする際の処理を、何らかの形で用意する必要があるわけです。これをどのようにStripesで実装するかがポイントとなります。一般的なアクセスの場合、StripesではJSPでページを用意し表示します。

 もちろん、AjaxでもJSPページにアクセスし表示させることは可能ですが、Ajaxは大抵の場合、サーバ側で何らかの処理を行った結果を返送し、表示させるのに用います。やはりActionBean内などで処理を用意できるようにしておきたいところです。

 では、実際にやってみましょう。ここでは例として、jQueryによるAjax通信を行うサンプルを考えてみます。まず、jQueryのライブラリファイルをThe jQuery ProjectのJavaScript Libraryページからダウンロードし、用意しておきましょう。そして、プロジェクトのWebContent内に「js」というフォルダを用意し、ここに「jquery.js」というファイル名で保管します。これを読み込み、Ajax通信を行います。

JSPファイルの用意

 まずは、WebページとなるJSPファイルから用意しましょう。前回までのサンプル「helo.jsp」を、ここでも再利用します。次のようにコードを書き換えてください。

<%@ page language="java" contentType="text/html; charset=utf8"
    pageEncoding="utf8"%>
<%@ taglib prefix="stripes"
    uri="http://stripes.sourceforge.net/stripes.tld"%>

<stripes:layout-render name="/layout/default.jsp">
  <stripes:layout-component name="html_head">
    <title>Helo Sample</title>
  <script type="text/javascript"
           src="${pageContext.request.contextPath}/js/jquery.js"></script>
  <script type="text/javascript">
  function invoke(form) {
    if (!form.onsubmit) { form.onsubmit = function(){ return false } };
    var params = $(form).serialize();
    $.get(form.action,params,callback);
  }
  function callback(result){
    $('#msg').text(result);
  }
  </script>
  </stripes:layout-component>
  <stripes:layout-component name="contents">
    ※これは、レイアウトを使ったページの表示です。
    <div id="msg">please send...</div>
    <stripes:form beanclass="jp.codezine.HeloActionBean">
      <stripes:text name="input1" />
      <stripes:submit name="submit" value="Submit" 
                   onclick="invoke(this.form);"/>
    </stripes:form>
  </stripes:layout-component>
</stripes:layout-render>

 前回、default.jspというレイアウトを用意し、レイアウトを使ってページ表示を行う方法について説明したので、ここでもレイアウトをそのまま利用する形にしてあります。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 掌田 津耶乃(ショウダ ツヤノ)

    三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆活動をする傍ら、ログハウスの普及活動にいそしんでいる。(掌田津耶乃のWebサイトはこちら) ※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開中。またGoogle+プロフ...

バックナンバー

連載:Javaで軽快に使える「軽量フレームワーク」特集

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5