JSFプログラミング（更新停止）

本ラボでは2009年以降使わなくなりましたが、過去は四苦八苦してました。とりあえずその残骸です。このページはもう更新することはないです。

JSFとは

MVC Web開発において主にView層を対象としたフレームワークです．特徴は，ウェブアプリケーションをイベントドリブンなアプローチで開発することができる点です．

従来のServlet/JSPプログラミングの枠組みでは，

• • ＪＳＰからServletを呼び出す（JSP側）

  • JSPからのHTTPリクエストを受け取る。（Servlet側）

  • 然るべき処理をし、データをbeanに格納してsessionまたはrequest領域に保存する（Servlet側）

  • sessionまたはrequest領域からbeanを呼び出し、JSPタグに埋め込む（JSP側）

ということを意識する必要がありました。まず、この一連の処理は面倒で、この手間を省くた めStrutsなどのフレームワークが生まれました。ただし、Strutsにおいても上記の流れは変わりません。Servletの存在は無視できず、 JSPからの入力内容にしたがって処理内容の分岐をServlet内でする必要があります。

JSFの特徴

簡単に書くと以下の特徴を持ちます．

• • • Managed beanからJSF要素の呼び出しが可能

    • JSPから Managed bean (Backing bean）のメソッドを呼び出し可能．

    • ページ間の遷移は，XMLで管理

ＪＳＦ ではウェブインタフェース上でのユーザイベントに対して，どのクラスのメソッドを呼び出すかというを意識することになります．実際には，内部でサーブレッ トを呼び出してるようですが，開発時にはそれを意識する必要はありません．言い方をかえると，ウェブアプリケーションを従来のＧＵＩアプリ開発（イベント ドリブン開発）の感覚で開発できます．

Managed beanの管理とJSPからの呼び出し

JSFでは、原則としてServletの存在を意識しません。基本的には，ＪＳＰに対応するJavaクラス（Mangaged bean）を作成することになります．Manged Beanに関する情報は設定ファイル（ＸＭＬ形式）で定義します．Netbeansを利用すればこれらの記述は自動でしてくれます．

JSFでもServletプログラミングと同様に，beanをセッションなどで管理できます．同様にそのスコープも

• • request

  • session

  • Application

の３種類を設定できます．なお，Netbeansではbeanを新規作成するときに，これらの種別を選ぶことができます．

managed-beans.xml ファイルの記述

<faces-config>

<managed-bean>

<managed-bean-name>インスタンス名</managed-bean-name>

<managed-bean-class>クラス名</managed-bean-class>

<managed-bean-scope>スコープ</managed-bean-scope>

</managed-bean>

</faces-config>

managed beanからjavaファイルで呼び出す際には、以下のように記述します。

(クラス名)getBean("インスタンス名");

jspファイルで呼び出す際には、以下のように記述します。

<h:outputText value="#{インスタンス名.プロパティ"/>

上記のプロパティというのは、getter/setterを実装したprivate 変数の呼び出し定義をしていることが前提です。

ページナビゲーションの管理（navigation.xml）

JSFでは、ページ遷移の情報についてもXMLで管理します。このことにより、システムの設計モデルとページの実体の依存性をなくすことができます。

navigation.xml ファイルの記述

以下は、page1.jsp から page2.jsp への遷移を定義しています。

<faces-config>

<navigation-rule>

<from-view-id>/page1.jsp</from-view-id> 遷移元のページ

<navigation-case>

<from-outcome>case1</from-outcome> 遷移するケース名

<to-view-id>/page2.jsp</to-view-id> 遷移先のページ

</navigation-case>

</navigation-rule>

</faces-config>

<navigation-case>は複数設定することができます。よって、Mangaed bean内でのプログラムの処理結果次第で遷移条件（<from-outcome>）を変更し、遷移先のページを変更することができます。

ドロップダウンリストの使い方

標準（Standard）のドロップリストについてです。初期状態では、ドロップリストの項目は

• • dropdown1SelectItems

に格納されることになっています。原則としてこれにリストの項目を格納すればいいわけです。

通常のHTMLのドロップダウンリストは【内部データ(value値)】と【表示されるデータ】の1セットを必要とします。

標準（Standard）のドロップリストのデフォルトの状態では、この2つのペアを格納できないような気がしますが、

実際には以下のように記述することで【内部データ(value値)】と【表示されるデータ】を分けることができます。

＃以前はこれができないような気がして、Woodstockコンポーネントを使ってましたが、その必要はなさそうです。

ドロップダウンリストの項目設定

ArrayList list = new ArrayList();

list.add( new SelectItem("1", "項目１") );// Value値（1）と表示値（項目1）のペア

list.add( new SelectItem("2", "項目２") );

list.add( new SelectItem("3", "項目３") );

// ドロップダウンリストにバインドする

dropdown1SelectItems.setValue(list);

ドロップダウンリストの初期状態を設定する

ドロップダウンリストの初期状態を設定するには、以下のように設定します。

dropdown1.setValue("2"); //Value値により指定する

テーブルの利用

１．JSP（page1.jsp）にデータ表（dataTable）を作る。

２．データ表のカラム構造に対応する表Bean（tblData）を定義する。

３．page1.jspのManagedbeanである page1.javaに、表にバインドするデータのリスト(tblDataList)を定義する。このリストに行数分のtblDataのインスタンスを格納していくことになる。

４．JSPのデータ表にバインドの記述を行う

テーブルでのラジオボタンとセレクトボックスの利用について

ここでは、動的なテーブルにおいてのコツを説明します。ちょっとクセがあるので注意しましょう。

テーブル用のbeanでの設定

このBeanは、テーブルの1行分に相当するデータを管理するクラスです。セレクトボックスやラジオボタンは boolean型の変数で管理します。

public class tableBeans {

private boolean checkSelected; //セレクトボックスのための変数

private boolean radioSelected; //ラジオボタンのための変数

public boolean getCheckSelected() {

return checkSelected;

}

public void setCheckSelected(boolean checkSelected) {

this.checkSelected = checkSelected;

}

public boolean getRadioSelected() {

return radioSelected;

}

public void setRadioSelected(boolean radioSelected) {

this.radioSelected = radioSelected;

}

JSPでの記述

チェックボックスは標準（standard）を利用しました。

ラジオボタンは、基本（Basic）を利用しました。

<h:dataTable binding="#{Page1.dataTable1}“ id="dataTable1"value="#{Page1.rowList}" var="currentRow" width="312">

<h:column binding="#{Page1.column1}" id="column1">

<h:selectBooleanCheckbox binding="#{Page1.checkbox1}" id="checkbox1"value="#{currentRow.checkSelected}"/>

<webuijsf:radioButton binding="#{Page1.radioButton2}" id="radioButton2" label="Radio Button" name="radioButton-group-form1" selected="#{currentRow.radioSelected}"/>

</h:column>

・・・・・

選択結果を取り出す方法

Iterator に変換して前から順番に、選択されているかどうか確認する。もし、trueだったら、該当する行（tableBeans）からほしい情報を取ってくればよい

List rowList; //テーブルに対応しているListのこと

tableBeans temp;

Iterator it = this.rowList.iterator(); // rowListをIteratorに変換

while(it.hasNext()){

temp = (tableBeans)it.next(); //表の上から順番に行情報を取り出している

//ラジオボタンが選択されていたらtrueが返ってきます

System.out.println("ラジオボタン=" + temp.getRadioSelected());

// チェックボックスが選択されていたら trueが返ってきます

System.out.println("チェックボックス=" + temp.getCheckSelected());

}

ただし、ここで注意事項があります。上記の rowListの情報をどうやって管理するかです。具体例から説明しましょう。チェックボックスなどから値をとってくる操作というのは、通常、ボタンなどを押したアクション内で行われます。ＪＳＦでのボタンを押すという行為は、実際にはページ移動が発生します。そこで、ユーザによって操作されたチェックの情報を再度 rowListに読み込ませる必要があります。JSFではこれを自動化してくれるはずですが、コンストラクタで rowListのインスタンスを生成しておく必要があります。