EclipseではじめるJSF 2.0 - しんさんの出張所はてなブログ編

セットアップは前回を参照に。

今回はJSF 2.0をEclipseで開発、実行できるところまで。

JSF 2.0についての新機能はこちらを参照。

まずはAJAXをつかわない、シンプルなものを。faces-config.xmlもまったく使わない。

プロジェクトの作成。動的Webプロジェクトで。

続いてプロジェクトをサーバーに関連付け。忘れないように。

web.xmlの設定。JSFのサーブレットを「/faces/*」へマッピングする。ついでに、ルートをfaces/index.xhtmlに設定する。servlet2.5でも気にしない。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
	id="WebApp_ID" version="2.5">
	<display-name>jsf2test</display-name>

	<!-- 以下を修正 -->
	<welcome-file-list>
		<welcome-file>faces/index.xhtml</welcome-file>
	</welcome-file-list>

	<!-- 以下を追加 -->
	<servlet>
		<servlet-name>JSFServlet</servlet-name>
		<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
	</servlet>

	<servlet-mapping>
		<servlet-name>JSFServlet</servlet-name>
		<url-pattern>/faces/*</url-pattern>
	</servlet-mapping>

</web-app>

テンプレートにはXHTMLを使うように。最初に作成されているindex.jspを削除し、index.xhtmlを作成する。

テンプレートを修正する。入力フィールド1つと出力１つ、ボタン1つ。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JSF 2.0 test</title>
</head>
<body>
	<span jsfc="h:outputText" />
	<form jsfc="h:form">
		名前を入力するのじゃ
		<input type="text"  jsfc="h:inputText"/>
		<input type="submit"  value="はろー" jsfc="h:commandButton"/>
	</form>
</body>
</html>

この時点で実行。以下のようになる。

ロジックを作る。今までは管理Beanの作成のほか、設定ファイルへの各種登録が必要だったがJSF 2は通常のクラス作成だけでよい。

ここではHelloというクラス名にしておく。

入出力1つ、出力1つ、ボタン1つに対するコードは以下のようになる。

package managed;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class Hello {

	//出力テキスト用
	private String out;

	//入力テキスト用
	private String name;

	//----------------------------------------------------------
	//アクセサメソッド
	public String getOut() {
		return out;
	}

	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	//----------------------------------------------------------


	//ボタンクリック
	public String click(){
		out = "はろー「" + name + "」さん";
		return null;
	}
}

入力用プロパティ「name」はセッターとゲッターが必要なのに対して出力専用「out」はゲッターのみでよい。

あとはロジックを実行するメソッド。戻り値がStringであればよい。nullであれば画面遷移なしを表す。voidでもうまく動くみたいだけれども、それは実装依存かもしれないのでやめておいた。

このコードを先ほどのテンプレートにマッピングする。修正箇所は以下の3箇所。

<span jsfc="h:outputText" value="#{hello.out}"/>

<input type="text"  jsfc="h:inputText" value="#{hello.name}"/>

<input type="submit"  value="はろー" jsfc="h:commandButton" action="#{hello.click()}"/>

全体は以下のようになる。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>JSF 2.0 test</title>
</head>
<body>
	<span jsfc="h:outputText" value="#{hello.out}"/>
	<form jsfc="h:form">
		名前を入力するのじゃ
		<input type="text"  jsfc="h:inputText" value="#{hello.name}"/>
		<input type="submit"  value="はろー" jsfc="h:commandButton" action="#{hello.click()}"/>
	</form>
</body>
</html>

入力と出力のプロパティにマッピングす場合はvalue属性にセットする。ボタンクリックの場合action属性に。

実行。名前を入れてボタンを押すとそれが加工されてoutで出力されているのがわかる。

ELの「hello」という部分はHelloのクラス名の先頭小文字にしたものが使われている。これは省略した場合だ。

クラスのアノテーションを以下のように記述しておけば

@ManagedBean(name="HOGE")
public class Hello {

ELには

#{HOGE.name}

のように書くことができる。