はじめに
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というレイアウトを用意し、レイアウトを使ってページ表示を行う方法について説明したので、ここでもレイアウトをそのまま利用する形にしてあります。
