Powered by SmartDoc
<< J2EE II/JSPの作成 >>

JSPの作成

タグライブラリとは

JSPでは、ユーザが自分でJSP内のタグを定義できます。こうしたタグのことを、「カスタム・タグ」と言います。

カスタム・タグによって、これまでスクリプトレットとして書いていたプログラムを、JSPの要素に閉じ込めることができ、HTMLが見やすくなります。

関連する複数のカスタム・タグは、１つの「タグライブラリ」にまとめられます。タグライブラリは、タグの処理を記述するJavaのプログラム(通常はjarファイルにまとめられる)と、タグに関する情報を持つTag Library Descriptor (TLD)というXMLファイルによって構成されています。

JSPを書いてみよう

ここからは自分でJSPを書いてみましょう。今回は簡単なサンプルを紹介します。

JSFでは、タグライブラリを利用してJSPページを作成します。基本的には、タグライブラリ中のカスタムタグがUIコンポーネントに対応することになります。

それでは、JSPの記述方法について見てみましょう。

JSPの例

test.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>
<head>
<link href="style.css" type="text/css" rel="stylesheet" />
<title>JSF: 簡単なJSPのテスト</title>
</head>
<body>

<h1>JSF: 簡単なJSPのテスト</h1>

<f:view>
    <h:form id="searchForm">
        <p>何か入力してね !</p>
        <h:inputText id="word" />
    </h:form>
</f:view>

</body>
</html>

このJSPをWebブラウザで表示すると、図5.1[JSPの画面表示]のようになります。

JSPの画面表示

タグライブラリの利用の宣言

まず、タグライブラリの利用を宣言します。

次の部分は、JSFの"HTML tag"の利用を宣言しています。このタグライブラリは、HTMLの出力に関係するタグを集めたものです。それぞれのタグは"h:"という接頭辞からはじまり、それぞれがUIコンポーネントとして動作します。

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

次に、JSFの"Core tag"の宣言です。Core tagは、HTML出力とは関係しないタグを集めたものです。それぞれのタグは"f:"という接頭辞からはじまります。

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

このJSPには登場していませんが、MyFacesを利用している場合は、MyFaces独自のタグを利用することもできます。MyFaces独自のタグは、"Tomahawk"というライブラリにまとめられています。Tomahawk中のそれぞれのタグは"t:"という接頭辞からはじまります。

<%@ taglib uri="http://myfaces.apache.org/tomahawk" prefix="t" %>

f:view タグ

JSPにはf:viewというタグが出てきます。

JSFのタグは、すべてf:viewタグの中に記述します。f:viewタグは、言わばJSFのタグの「コンテナ」としての働きをするのです。"f:"という接頭辞ではじまることから、このタグはCore Tagに属していることがわかります。

<f:view>
    <h:form>
        ……
    </h:form>
</f:view>

h:form タグ

f:view要素の中に、h:form要素が出てきます。これは、HTMLのフォームを表すUIコンポーネントです。HTMLのformタグに対応します。"h:"という接頭辞ではじまることから、このタグはHTML Tagに属していることがわかります。

<f:view>
    <h:form>
        ……
    </h:form>
</f:view>

h:input タグ

h:inputタグは、テキスト入力用のUIコンポーネントです。HTMLの<input type="text">に対応します。

<h:form>
    <h:inputText id="word" />
</h:form>

id 属性

UIコンポーネントには、id属性を付けることができます。idはf:view要素の中でそれぞれ違っている必要があります。また、idは省略することもできます。その場合はJSFにより自動的にidが付けられます。

<h:form id="searchForm">
    <p>何か入力してね !</p>
    <h:inputText id="word" />
</h:form>

生成されたHTMLのソース

このJSPをWebブラウザ上に表示させると、次のようなHTMLが生成されることがわかります。

<form id="searchForm" method="post"
      action="/jsf-test01/jsp/test.jsp;
             jsessionid=0DF696E1084D276D5841AF0EE3DA9D66"
      enctype="application/x-www-form-urlencoded">
    <p>何か入力してね !</p>
    <input id="searchForm:word" type="text" 
        name="searchForm:word" />
    <input type="hidden" name="searchForm" 
        value="searchForm" />
</form>

JSPを表示させよう

必要な環境

ここでは、J2SE 5とTomcat 5.5.xの環境下でJSFを動かします。

必要なファイルのダウンロード

まず、MyFacesのページ (http://myfaces.apache.org/)より、次のファイルをダウンロードします。

myfaces-1.1.1.zipは、MyFacesの実行環境とドキュメントが含まれているパッケージです。myfaces-1.1.1-examples.zipは、MyFacesのサンプルプログラムです。

必要なファイルの抽出

次の手順で、必要なjarファイルを抽出します。

  1. ダウンロードした２つのzipファイルを展開します。
  2. 適当な名前のディレクトリを作成します。
  3. myfaces-1.1.1ディレクトリに入り、blank.warを2.で作成したディレクトリにコピーします。
  4. 2.で作成したディレクトリに移動します。
  5. jarコマンドを使って、blank.warを展開します。(例: jar xvf blank.war)
  6. WEB-INF/libディレクトリにjarファイルが展開されています。このjarファイルを利用します。

必要なライブラリ

前項で抽出したjarファイルのうち、myfaces*.jarという名前「ではない」ファイルを、作成したいWebアプリケーションのWEB-INF/libディレクトリにコピーします。

続いて、myfaces-1.1.1.zipを展開し、展開先のディレクトリにあるmyfaces-all.jarをWEB-INF/libにコピーします。

faces-config.xmlの作成

次に、faces-config.xmlというファイルを作成します。このfaces-config.xmlに、JSFで作るWebアプリケーションのさまざまな情報を記述します。

<?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>

</faces-config>

このファイルでは、faces-config要素がルート要素になります。今回はまだ空のままです。

web.xmlの作成

次に、web.xmlです。

<?xml version='1.0' encoding='UTF-8'?>

<!DOCTYPE web-app PUBLIC
  "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
  "http://java.sun.com/dtd/web-app_2_3.dtd">

<web-app>

	<display-name>JSF: 最初のサンプル</display-name>
	<description>
		JSF:  最初のサンプル
	</description>

	(中略)

    <!-- Faces Servlet -->
    <servlet>
        <servlet-name>Faces Servlet</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>Faces Servlet</servlet-name>
        <url-pattern>*.jsf</url-pattern>
    </servlet-mapping>

    <!-- Welcome files -->
    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
        <welcome-file>index.html</welcome-file>
    </welcome-file-list>

</web-app>

servlet要素では、Controllerで使うServletとしてjavax.faces.webapp.FacesServletを指定します。また、load-on-startup要素は、この(JSFを使った) Webアプリケーションの起動時に、１つのServletが動作することを示します。

JSFでは、Webブラウザからの要求は、すべてFacesServletが処理をします。JSPの表示も例外ではありません。

        <url-pattern>*.jsf</url-pattern>

JSPを表示するときは、この".jsf"という拡張子をもった名前でアクセスする必要があります。

最終的なファイル構成

最終的なファイル構成は次のようになります。ここでは、Webアプリケーションの名前をjsf-test01としています。

jsf-test01 --- test.jsp
               |- WEB-INF/ ---- web.xml
                            |-- faces-config.xml
                            |-- lib/
                                   |- commons-beanutils.jar
                                   |- commons-codec.jar
                                   |- commons-collections.jar
                                   |- commons-digester.jar
                                   |- commons-el.jar
                                   |- commons-fileupload.jar
                                   |- commons-lang.jar
                                   |- commons-logging.jar
                                   |- commons-validator.jar
                                   |- jakarta-oro.jar
                                   |- myfaces-all.jar
                                   |- portlet-api.jar
                                   |- struts.jar

JSPを呼び出すURL

ファイルの配置が終わったら、Tomcatを起動します。

このとき、次のURLにアクセスします。

(正しいURL)
http://localhost:8080/jsf-test01/test.jsf

jsf-test01の直下にあるからといって、

(間違ったURL)
http://localhost:8080/jsf-test01/test.jsp

にアクセスしてもエラーになります。なぜなら、JSPの表示もすべてFacesServletを経由する必要があるからです。

<< J2EE II/JSPの作成 >>