2003年度データベース論

JSPの作成
JSFによるWebアプリケーション開発
第4回
1
ここでの内容

JSFでのJSPの作り方と動かし方について
学ぶ。
2
JSFでのJSPの記述
3
概要


タグライブラリを利用してJSPページを作成
する。
基本的には、タグライブラリ中のカスタムタ
グがUIコンポーネントに対応する。
4
簡単なJSPのサンプル
<%@ page contentType="text/html; charset=Shift_JIS" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
……
<f:view>
<h:form id="searchForm">
<p>何か入力してね !</p>
<h:inputText id="word" />
</h:form>
</f:view>
……
5
タグライブラリの利用を宣言
<%@ taglib uri="http://java.sun.com/jsf/html"
prefix="h" %>
 HTML tag  HTML 出力に関係するタグ
<%@ taglib uri="http://java.sun.com/jsf/core"
prefix=“f” %>
 Core tag  HTML出力とは関係ないタグ
6
f:view 要素
<f:view>
<h:form>
……
</h:form>
</f:view>

JSF のタグは、すべて f:view
タグの中に記述する。

JSFのタグの「コンテナ」としての
働き
7
h:form 要素
<f:view>
<h:form>
……
</h:form>
</f:view>


フォームを表すUIコンポーネン
ト
HTMLのformタグを表す
8
h:input 要素
<h:form>
<h:inputText id="word" />
</h:form>


テキスト入力用のUIコンポーネント
HTMLでは <input type=“text”> となる
9
id 属性
<h:form id="searchForm">
<p>何か入力してね !</p>
<h:inputText id="word" />
</h:form>


id は f:view 要素の中でそれぞれ違っている
必要がある。
id は省略できる。その場合は JSF により自
動的に id がつけられる。
10
JSP全体 (再掲)
<%@ page contentType="text/html; charset=Shift_JIS" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<html>
……
<f:view>
<h:form id="searchForm">
<p>何か入力してね !</p>
<h:inputText id="word" />
</h:form>
</f:view>
……
11
生成されたHTMLソース
<form id="searchForm" method="post"
action="/jsftest01/jsp/test.jsp;jsessionid=0DF696E1084D276
D5841AF0EE3DA9D66" enctype="application/xwww-form-urlencoded">
<p>何か入力してね !</p>
<input id="searchForm:word" type="text"
name="searchForm:word" />
<input type="hidden" name="searchForm"
value="searchForm" />
12
</form>
JSP を動かす
13
Tomcat への配置
jsf-test01 --- test.jsp
|- WEB-INF/ ---- web.xml
|-- faces-config.xml
|-- lib/
|- (ライブラリ)
14
必要なライブラリ (1)

JSFの lib フォルダ中にある jar ファイルを
コピー






commons-beanutils.jar
commons-collections.jar
commons-digester.jar
commons-logging.jar
jsf-api.jar
jsf-impl.jar
15
必要なライブラリ (2)

JSTL の lib フォルダ中にある jar ファイル
をコピー


jstl.jar
standard.jar
16
faces-config.xml の作成
<?xml version="1.0"?>
……
<faces-config>
</faces-config>


faces-config 要素を用意する。
今回はまだ空
17
web.xml の編集 (1)
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>
javax.faces.webapp.FacesServlet
</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/jsp/*</url-pattern>
</servlet-mapping>
18
web.xml の編集 (2)
servlet 要素


Controller で使う Servlet を指定する。
load-on-startup 要素は、この (JSFを使っ
た) Webアプリケーションの起動時に、１つ
の Servlet が動作することを示す。
19
web.xml の編集 (3)
servlet-mapping 要素
<url-pattern>/jsp/*</url-pattern>



JSF では、Webブラウザからの要求は、す
べて FacesServlet が処理をする。
JSP の表示も例外ではない。
JSP を表示するときは、この /jsp を含めた
名前でアクセスする。
20
JSPを呼び出すURL



http://localhost:8080/jsf-test01/jsp/test.jsp
jsf-test01 の直下にあるからといって、
http://localhost:8080/jsf-test01/test.jsp にア
クセスしてもエラーになる。
なぜなら、JSPの表示もすべて FacesServlet を
経由する必要があるから。
21

Download Report