SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

第19回

  • X ポスト
  • このエントリーをはてなブックマークに追加

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

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

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Ajax通信処理の流れを整理する

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
Javaで軽快に使える「軽量フレームワーク」特集連載記事一覧

もっと読む

この記事の著者

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

三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/5261 2010/07/16 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング