JSFのサンプルアプリ作成

JSF

サンプルアプリの概要
「金額を入力し、入力した金額に応じて返す画面を切り替えるJSFサンプルアプリです。」

[開発環境]

  • JDK1.5.0_13
  • eclipse3.2
  • Tomcat5.5.25
  • JSF1.1(JSF1.2(JSP2.1準拠)にTomcat5.5が対応していないと思われるので、JSF1.1を使用)

[用意するもの]

  • WEB-INF/judge.jsp(初期表示画面：金額を入力)
  • WEB-INF/rank/poor.jsp(金額が低いときに返す画面)
  • WEB-INF/rank/middle.jsp(金額が普通のときに返す画面)
  • WEB-INF/rank/rich.jsp(金額が高いときに返す画面)
  • WEB-INF/classes/sample/Bank.class(バッキングビーン)
  • WEB-INF/faces-config.xml(JSFの設定ファイル)
  • WEB-INF/web.xml((FacesServletを登録。URLのマッピングパターンは任意)

[処理の流れ]

http://localhost:8080/JsfSample1/samplefaces/judge.jspにアクセス。
1.judge.jspで金額を入力し、「資産審査をする」ボタンを押下します。
↓
2.web.xmlの設定によりJSFサーブレットが呼び出されます。
↓
3.JSFサーブレットがその金額（リクエストの値）を受け取り、judge.jspに対応するコンポーネントツリーを構築します。
↓
4.コンポーネントツリーはバッキングビーンと呼ばれるビーンと対応しているので、そのビーンにユーザが入力した金額がセットされます。
↓
5.バッキングビーンのjudgeメソッドが呼び出され、金額に応じた判定がなされます。
↓
6.judgeメソッドは戻り値として"upper"、もしくは"middle"、もしくは"low"を返します。
↓
7.faces-config.xmlが上記戻り値"upper"、"middle"、"low"に基づいて返す画面(jsp)を決定します。
↓
8.レスポンス

judge.jsp

<%@ page language="java" contentType="text/html; charset=windows-31j" pageEncoding="windows-31j"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>JSF judge page</title>
スタイルシートの定義は省略
</head>
<body>
<span>資産査定</span>
	<f:view>
		<h:form>
			<div class="next">
			銀行による資産審査です。<br />
				手持ちの全財産を入力してください<br />
				<h:inputText id="inputMoney" value="#{MoneyBank.money}">
					<f:validateLongRange maximum="3000"/>
				</h:inputText>
				<h:commandButton value="資産審査する" action="#{MoneyBank.judge}"/>
				
				<p><span>ご不明点があればこちらまで(イベントドリブン実験用)</span>

				★ここでバッキングビーンのjudgeメソッドを指定<h:commandButton action="#{MoneyBank.judge}" value="help"
				   actionListener="#{BankEventHandler.helpCalled}" /></p>
			</div>
		<h:message for="inputMoney" styleClass="alerting"/>
		</h:form>
	</f:view>
</body>
</html>

rich.jsp middle.jspもpoor.jspも構造は同じ。文面だけを変える。

<%@ page language="java" contentType="text/html; charset=windows-31j" pageEncoding="windows-31j"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>
<%@ taglib prefix="f" uri="http://java.sun.com/jsf/core" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>JSF recipent page</title>
CSS定義は省略
</head>
<body>
<span>富裕層窓口</span>
	<div class="next">
	<f:view>
		<h:form>
			富裕層向け窓口です。
			あなたの資産は<h:outputText id="output" value="#{MoneyBank.money}" />円です。
			<h:commandButton value="Back" action="success" />
		</h:form>
	</f:view>	
	</div>
</body>
</html>

sample.Bank.class（バッキングビーン）

package sample;

public class Bank implements Serializable {

	private int money  = 0;
	
	public void setMoney(int money) {
		this.money = money;
	}
	
	public int getMoney() {
		return this.money;
	}

	/**
	 * jspとのメソッドバインディングで呼び出されるメソッド
	 * 
	 * [規約]
	 * 引数なし、戻り値はString型
	 * 
	 * 金額の多寡によりランクを審査する
	 */
	public String judge() {
		
		if (this.money >= 1000) {
			System.out.println("[Bankクラス判定]upperクラス");
			return "upper";
		} else if (this.money >= 500) {
			System.out.println("[Bankクラス判定]middleクラス");
			return "middle";
		} else {
			System.out.println("[Bankクラス判定]lowクラス");
			return "low";
		}		
	}
}

faces-config.xml

<?xml version="1.0"?>
<!DOCTYPE faces-config PUBLIC 
 "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>
	
	<!-- routing -->
	<navigation-rule>
		
		<from-view-id>/judge.jsp</from-view-id>
		<navigation-case>
			<from-outcome>success</from-outcome>
			<to-view-id>/rank/rich.jsp</to-view-id>
		</navigation-case>
		
		★金額によって遷移先jspを決定。基準値は"upper"もしくは"middle"もしくは"low"
		<navigation-case>
			<from-action>#{MoneyBank.judge}</from-action>
			<from-outcome>upper</from-outcome>			
			<to-view-id>/rank/rich.jsp</to-view-id>
		</navigation-case>
		<navigation-case>
			<from-action>#{MoneyBank.judge}</from-action>
			<from-outcome>middle</from-outcome>
			<to-view-id>/rank/middle.jsp</to-view-id>
		</navigation-case>
		<navigation-case>
			<from-action>#{MoneyBank.judge}</from-action>
			<from-outcome>low</from-outcome>
			<to-view-id>/rank/poor.jsp</to-view-id>
		</navigation-case>
	</navigation-rule>

	★バッキングビーンの指定
	<managed-bean>
		<managed-bean-name>MoneyBank</managed-bean-name>
		<managed-bean-class>sample.Bank</managed-bean-class>
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>
	
	<!-- Event Handler -->
	★イベントドリブンの設定
	<managed-bean>
		<managed-bean-name>BankEventHandler</managed-bean-name>
		<managed-bean-class>event.listener.BankListener</managed-bean-class>★イベントを受け取るリスナクラス
		<managed-bean-scope>session</managed-bean-scope>
	</managed-bean>
</faces-config>

web.xml

  <!-- Faces Servlet -->
  <servlet>
    <servlet-name>FacesServlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup> 1 </load-on-startup>
  </servlet>

  <!-- Faces Servlet Mapping -->
  <servlet-mapping>
    <servlet-name>FacesServlet</servlet-name>
    
    ★例えばjudge.jspにアクセスする場合なら、URLはhttp://localhost:8080/JsfSample1/samplefaces/judge.jspになります。
      "samplefaces"を間に必ず挟んでください。
    <url-pattern>/samplefaces/*</url-pattern>
  </servlet-mapping>