スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

SAStruts入門(21) Ajaxその3 目次

今回も前回と同じように、jQueryを使ったAjaxで画面をリロードせずに更新させる。
ただし、今回はjQueryの「Ajax」メソッドではなく「load」メソッドを使用する。
  1. アクションフォーム
  2. アクションクラス
  3. JSP
  4. JavaScript

画面の初期状態。

20130318-1.png


親カテゴリを選択した状態。

20130318-2.png


子カテゴリを選択した状態。

20130318-3.png
スポンサーサイト

テーマ : プログラミング
ジャンル : コンピュータ

SAStruts入門(21) Ajaxその3 JavaScript

JavaScriptファイルの編集


「index.jsp」ファイルに「script」タグを追加し、jQueryの「load」メソッドを使った
Ajaxのロジックを記述する。

<script type="text/javascript">

</script>

親カテゴリの変更イベントの記述


親カテゴリが選択されたら、jQueryの「load」メソッドを使って、選択された親カテゴリに
紐付く子カテゴリ一覧を取得、子カテゴリセレクトボックスに格納する。

$('#parentCategory').change(function() {

});

パラメータの設定


アクションクラスへ渡すパラメータを設定する。
パラメータ用の「Object」を生成し、「parentCategoryCode」フィールドに選択された
親カテゴリのコードをセットする。

var param = new Object();
param.parentCategoryCode = $('#parentCategory').val();

「load」メソッドの使用


jQueryの「load」メソッドを使って、アクションクラスのメソッドを呼び出す。
メソッドの第1引数には「f:url」を使ったメソッド名を、
第2引数にはパラメータ用Objectをセットする。

load("${f:url('メソッド名')}, パラメータ用Object);

「load」メソッドは読み込みたいセレクタに対して使用する。
今回の場合は子カテゴリセレクトボックスがあるTRタグに指定したIDの「categoryList」を
セレクターにする。

$('#categoryList').load("${f:url('sendCategoryList')}", param);

子カテゴリの変更イベントの記述


子カテゴリが変更された時に呼び出すための関数「changeGoodsList」を記述する。

function changeGoodsList() {

}

パラメータの設定


親カテゴリの変更イベントと同様にパラメータを設定する。
「categoryCode」フィールドに選択された子カテゴリのコードをセットする。

var param = new Object();
param.categoryCode = $('#category').val();

「load」メソッドの使用


jQueryの「load」を使って、アクションクラスの「sendGoodsList」メソッドを呼び出す。
商品一覧テーブルに指定したIDの「goodsList」をセレクターにする。

$('#goodsList').load("${f:url('sendGoodsList')}", param);

ソースのダウンロード

テーマ : プログラミング
ジャンル : コンピュータ

SAStruts入門(21) Ajaxその3 JSP

JSPファイルの編集


loadメソッド画面へのリンク作成


loadメソッド画面を開くためのリンクを追加する。
開く先の画面用JSPは「load」フォルダに用意し、画面表示用のメソッドは「index」とする。
最終的なURLは「/load/index」となる。
「index.jsp」を開いて以下のコードを追加する。

<s:link href="/load/index">loadメソッド</s:link>

loadメソッド画面用JSPの作成


loadメソッド画面用JSPファイルを格納する「load」フォルダを追加する。
loadメソッド画面用JSPファイル「index.jsp」を追加する。
画面構成は前回とほぼ同じだが、JavaScriptのロジックはこのファイルに直接記述する。
理由はファイルを切り分けるとSAStruts用のタグが動かないようで、「f:url」が使用できないため。

また、「jQuery」の「load」メソッドを使用する際の読み込む場所を指定するために、
子カテゴリセレクトボックスがあるTDタグに「categoryList」というIDを設定する。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dolteng Auto Generated</title>
<script src="${f:url('/js/jquery-1.9.1.min.js')}" type="text/javascript"></script>
</head>
<body>
<s:form>
<table>
<tr>
<td>親カテゴリ</td>
<td>
<html:select property="parentCategoryCode" styleId="parentCategory">
<c:forEach var="data" items="${parentCategoryList}">
<html:option value="${f:h(data.categoryCode)}">${f:h(data.categoryName)}</html:option>
</c:forEach>
</html:select>
</td>
</tr>
<tr>
<td>子カテゴリ</td>
<td id="categoryList">
<html:select property="categoryCode" styleId="category">
</html:select>
</td>
</tr>
</table>
<table border="1" id="goodsList">
</table>
<s:link href="../">戻る</s:link>
</s:form>
</body>
</html>

子カテゴリセレクトボックス用JSPの作成


子カテゴリセレクトボックス用JSPファイル「categoryList.jsp」を追加する。
このJSPファイル部分を追加で読み込むためか、「ready」内に「change」イベントを
記述しても呼び出してくれない。
そこで、Ajaxのロジックは関数に記述しておいて、セレクトボックスの「onchange」から
記述した関数を呼び出すようにする。

<select id="category" onchange="changeGoodsList()">
<c:forEach var="data" items="${categoryList}">
<option value="${f:h(data.categoryCode)}">${f:h(data.categoryName)}</option>
</c:forEach>
</select>

商品一覧テーブル用JSPの作成


商品一覧テーブル用JSPファイル「goodsList.jsp」を追加する。

このJSPファイルには商品一覧テーブルの部分のみを記述する。

<c:forEach var="data" items="${goodsList}">
<tr>
<td>${f:h(data.goodsCode)}</td>
<td>${f:h(data.goodsName)}</td>
</tr>
</c:forEach>

「index.jsp」のダウンロード
「categoryList.jsp」のダウンロード
「goodsList.jsp」のダウンロード

テーマ : プログラミング
ジャンル : コンピュータ

SAStruts入門(21) Ajaxその3 アクションクラス

アクションクラスの編集


loadメソッド画面用のアクションクラスを用意する。
「ajax.action」に新規クラス「LoadAction」を追加する。

アクションフォームの宣言



@ActionForm
@Resource
protected LoadForm loadForm;

サービスの宣言



@Resource
protected CategoryService categoryService;
@Resource
protected GoodsService goodsService;

インポート



import javax.annotation.Resource;
import org.seasar.struts.annotation.ActionForm;
import org.seasar.struts.annotation.Execute;
import ajax.form.LoadForm;
import ajax.service.CategoryService;
import ajax.service.GoodsService;

画面表示用メソッド「index」の編集


「index」メソッド内で「CategoryService」の「getParentCategoryList」メソッドを使用し、
取得した親カテゴリ一覧を「parentCategoryList」にセットする。

loadForm.parentCategoryList = categoryService.getParentCategoryList();

取得した親カテゴリ一覧に、セレクトボックスの初期選択値として、空のカテゴリデータを先頭に追加する。

Category nullCategory = new Category();
nullCategory.categoryCode = "";
nullCategory.categoryName = "";
loadForm.parentCategoryList.add(0, nullCategory);

子カテゴリデータ送信用メソッド「sendCategoryList」の編集


「LoadAction」に子カテゴリ一覧取得用メソッドを用意する。
値の検証は行わないので、「@Execute」アノテーションには
「validator = false」を指定する。

@Execute(validator = false)
public String sendCategoryList() {

子カテゴリ一覧の取得


セレクトボックスから選択された親カテゴリに紐付く子カテゴリ一覧を取得し、
アクションフォームにセットする。
選択された親カテゴリのコードは「LoadForm」の「parentCategoryCode」にDIされる。

loadForm.categoryList = categoryService.
getCategoryList(loadForm.parentCategoryCode);

取得した子カテゴリ一覧に、セレクトボックスの初期選択値として、空のカテゴリデータを先頭に追加する。

Category nullCategory = new Category();
nullCategory.categoryCode = "";
nullCategory.categoryName = "";
loadForm.categoryList.add(0, nullCategory);

戻り値の設定


子カテゴリセレクトボックス部分だけを切り出したJSPファイルを用意し、
メソッドの戻り値としてはそのJSPファイル名を帰す。
子カテゴリセレクトボックス用JSPファイルの名前は「categoryList.jsp」とし、それを戻り値として返す。

return "categoryList.jsp";

商品一覧データ送信用メソッド「sendGoodsList」の編集


「LoadAction」に商品一覧取得用メソッドを用意する。
値の検証は行わないので、「@Execute」アノテーションには
「validator = false」を指定する。

@Execute(validator = false)
public String sendGoodsList() {

商品一覧の取得


セレクトボックスから選択された子カテゴリに紐付く商品一覧を取得し、
アクションフォームにセットする。
選択された子カテゴリコードは「LoadForm」の「categoryCode」にDIされる。

loadForm.goodsList = goodsService.
getGoodsListByCategoryCode(loadForm.categoryCode);

戻り値の設定


商品一覧テーブル部分だけを切り出したJSPファイルを用意し、
メソッドの戻り値としてはそのJSPファイル名を帰す。
商品一覧テーブル用JSPファイルの名前は「goodsList.jsp」とし、それを戻り値として返す。

return "goodsList.jsp";

インポート



import ajax.entity.Category;

ソースのダウンロード

テーマ : プログラミング
ジャンル : コンピュータ

SAStruts入門(21) Ajaxその3 アクションフォーム

アクションフォームの編集


loadメソッド画面用のアクションフォームを用意する。
「ajax.form」に新規クラス「LoadForm」を追加する。

「IndexForm」で用意したフィールドに加えて、「商品一覧」を用意する。

項目一覧
フィールド名日本語フィールド名フィールド型
parentCategoryList親カテゴリ一覧List<Category>
categoryList子カテゴリ一覧List<Category>
goodsList商品一覧List<Goods>
parentCategoryCode選択された親カテゴリコードString
categoryCode選択された子カテゴリコードString

インポート



import java.util.List;
import ajax.entity.Category;
import ajax.entity.Goods;

ソースのダウンロード

テーマ : プログラミング
ジャンル : コンピュータ

ブログランキング

FC2Blog Ranking

最新記事
月別アーカイブ
カテゴリ
DB (3)
カウンター
ブックマーク
  • 子午線の星
    スピーカーやUTAUなどのオーディオネタブログ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。