このチュートリアルでは、JavaServer Faces（JSF）2.0のHello Worldサンプルを開発する方法を示し、JSF 2.0の依存関係のリスト、基本的なアノテーションおよび設定を示します。

プロジェクト環境

このJSF 2.0の例は、次のツールとテクノロジで構築されています

  1. JSF 2.1.7

  2. Maven 3

  3. Eclipse 3.6

  4. JDK 1.6

  5. Tomcat 6.0.26

最初に、後で対応するファイルやフォルダを作成する場所を混乱させる場合に備えて、最終的なプロジェクト構造を確認してください。


jsf2-hello-world-example、title = "jsf2-hello-world-example"、width = 273、height = 367

1. JSF 2.0の依存関係

...

<依存関係>
  <依存関係>
    <groupId> javax.faces </groupId>
    <artifactId> jsf-api </artifactId>
    <version> 2.0 </version>
    <scope>提供された</scope>
  </dependency>
</dependencies>
<リポジトリ>
  <リポジトリ>
    <id> java.net.m2 </id>
    <name> java.net m2 repo </name>
    <url> http://download.java.net/maven/2 </url>
  </repository>
</リポジトリ>
...

  • Tomcatのような単純なサーブレットコンテナの場合+これはちょっと面倒です。以下の依存関係をダウンロードする必要があります。


File:pom.xml
 

<project xmlns="http://maven.apache.org/POM/4.0.0"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0
        http://maven.apache.org/maven-v4__0__0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.mkyong.common</groupId>
    <artifactId>JavaServerFaces</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>JavaServerFaces Maven Webapp</name>
    <url>http://maven.apache.org</url>

    <dependencies>

        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.7</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.7</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>servlet-api</artifactId>
            <version>2.5</version>
        </dependency>

        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.1</version>
        </dependency>
                <!-- Tomcat 6 need this -->
        <dependency>
            <groupId>com.sun.el</groupId>
            <artifactId>el-ri</artifactId>
            <version>1.0</version>
        </dependency>

    </dependencies>

    <build>
        <finalName>JavaServerFaces</finalName>

        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>2.3.1</version>
                <configuration>
                    <source>1.6</source>
                    <target>1.6</target>
                </configuration>
            </plugin>
        </plugins>
    </build>
</project>

  • 注** JSF 2.0の依存性の詳細については、このhttps://javaserverfaces.java.net/nonav/rlnotes/2.0.0/releasenotes.html[公式のJSF 2.0リリースノート]を参照してください。

  • 警告


    el-ri.jar ** はTomcatサーブレットコンテナの主張可能な依存関係です。リリースノートには記載されていませんが、このライブラリを “link://jsf2/jsf-2-0 -tomcat-it-appear-the-jsp-version-of-the-containerが2-1より古い/[JSPバージョンのコンテナが2.1より古い…​]」というエラーメッセージが表示されます。

  • アップデート – 21-10-2010 ** この “el-ri.jar”は古すぎるので、http://download.java.net/maven/の最新の “el-impl-2.2.jar”を使用することをお勧めします。 2/org/glassfish/web/el-impl/2.2/el-impl-2.2.pom[Java.net] 

     <dependency>
      <groupId>org.glassfish.web</groupId>
      <artifactId>el-impl</artifactId>
      <version>2.2</version>
     </dependency>

  • Updated – 25-07-2012 ** この `el-ri.jar`依存関係はもはやTomcat 7では必要ありません。

2. JSF 2.0 Managed Bean

ユーザー・データを格納するnameプロパティーを持つJava BeanまたはJSF管理Bean。 JSFでは、マネージドBeanとは、このJavaクラスまたはBeanにJSFページからアクセスできることを意味します。

JSF 2.0では、

@ ManagedBean

アノテーションを使用して、これがマネージドBeanであることを示します。

HelloBean.java
 

package com.mkyong.common;

import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import java.io.Serializable;

@ManagedBean
@SessionScoped
public class HelloBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private String name;

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

  • 注意

    JSF 1.xでは、

    faces-config.xml ** にBeanを宣言しなければなりませんでしたが、これはJSF 2.0では必要ありません。

3. JSF 2.0ページ

JSF 2.0では、拡張子が.xhtmlのファイルであるhttp://en.wikipedia.org/wiki/XHTML[XHTMLファイル形式]にJSFページを作成することをお勧めします。

次の2つのJSF 2.0ページを参照してください。

  • 注意

    JSF 2.0のコンポーネントまたは機能を使用するには、ページ上部の

    JSF名前空間** を宣言してください。 

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">


File:hello.xhtml

– JSFテキストボックスをレンダリングし、 ”

helloBean

“（JSFマネージドBean）、 ”

name

“プロパティ、および

welcome.xhtml

ページを表示するボタンをリンクします。クリックされた 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <title>JSF 2.0 Hello World</title>
    </h:head>
    <h:body>
        <h2>JSF 2.0 Hello World Example - hello.xhtml</h2>
        <h:form>
           <h:inputText value="#{helloBean.name}"></h:inputText>
           <h:commandButton value="Welcome Me" action="welcome"></h:commandButton>
        </h:form>
    </h:body>
</html>

  • 注意

    JSF 1.xでは、ボタンをクリックしたときに表示するページを指定するために、

    faces-config.xml

    に ”

    navigation rule

    “を宣言しなければなりませんでした。 JSF 2.0では、ページの名前をボタンの「

    action

    」属性に直接入れることができます。簡単なナビゲーションのためには十分ですが、複雑なナビゲーションでは、 ”

    faces-config.xml

    “に ”

    navigation rule ** “を使用することをお勧めします。


File:welcome.xhtml

– 送信されたテキストボックス値を表示します。 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html">

    <h:head>
        <title>JSF 2.0 Hello World</title>
    </h:head>
    <h:body bgcolor="white">
        <h2>JSF 2.0 Hello World Example - welcome.xhtml</h2>
        <h2>Welcome #{helloBean.name}</h2>
    </h:body>
</html>

  • ＃\ {helloBean.name}

    は、ページが送信されるときにJSFが ”

    helloBean

    “を検索し、送信されたテキストボックスの値を

    setName（）

    メソッドで設定します。

    welcome.xhtml

    ページが表示されると、JSFは同じセッション ”

    helloBean

    “を再度検索し、

    getName（）** メソッドを介してnameプロパティ値を表示します。

4. JSF 2.0 Serlvetの設定

他の標準的なWebフレームワークと同様に、

web.xml

ファイルにJSFのものを設定する必要があります。


File:web.xml
 

<?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>JavaServerFaces</display-name>

    <!-- Change to "Production" when you are ready to deploy -->
    <context-param>
        <param-name>javax.faces.PROJECT__STAGE</param-name>
        <param-value>Development</param-value>
    </context-param>

    <!-- Welcome page -->
    <welcome-file-list>
        <welcome-file>faces/hello.xhtml</welcome-file>
    </welcome-file-list>

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

    <!-- Map these files with JSF -->
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>/faces/** </url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>** .jsf</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>** .faces</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
        <servlet-name>Faces Servlet</servlet-name>
        <url-pattern>** .xhtml</url-pattern>
    </servlet-mapping>

</web-app>

”

javax.faces.webapp.FacesServlet

“マッピングを定義し、それらにマッピングします
よく知られているJSFファイル拡張子（

/faces/


、


。jsf

、


。xhtml

、


。faces

）。

この場合、以下の4つのURLは同じ

hello.xhtml

を指しています。

。

http://localhost:8080/JavaServerFaces/hello.jsf

。

http://localhost:8080/JavaServerFaces/hello.faces

。

http://localhost:8080/JavaServerFaces/hello.xhtml

。

http://localhost:8080/JavaServerFaces/faces/hello.jsf

JSF 2.0の開発では、
”

javax.faces.PROJECT__STAGE

“を ”

Development

“に設定すると、
バグを簡単に追跡できる便利なデバッグ情報にとって
デプロイメントを ”

Production

“に変更するだけで
顧客はこの厄介なデバッグ情報を見てください:)。

5.デモ

長い記事の終わりにプロジェクトのデモがあります:)


URL:http://localhost:8080/JavaServerFaces/hello.jsf


jsf2-hello-world-example-1、title = "jsf2-hello-world-example-1"、幅= 639、高さ= 309

テキストボックスとボタンを持つシンプルなJSFページ。


jsf2-hello-world-example-2、title = "jsf2-hello-world-example-2"、幅= 640、高さ= 293

ボタンをクリックすると、送信されたテキストボックスの値が表示されます。

===ソースコードをダウンロードする

それをダウンロードする（v2.1.7の例） –
リンク://wp-content/uploads/2010/09/JSF2.0-hello-world-example-2.1.7.zip[JSF2.0-hello-world-example-2.1.7.zip]（8KB）

それをダウンロードする（古いv2.1.0-b03の例） –

JSF-2-Hello-World- Example-2.1.0-b03.zip

（8KB）

===参考文献

。

JavaServer
フェイステクノロジー

。

JSF
2.0リリースノート

。

ウィキ:JavaServer Faces

。

Wiki:XHTMLファイルの説明

。リンク://jsf2/java-lang-illegalargumentexception-javax-faces-context-exceptionhandlerfactory/[java.lang.IllegalArgumentException:
javax.faces.context.ExceptionHandlerFactory]。

JSF
2.0 Tomcat:コンテナのJSPバージョンが古い
2.1 …​

。リンク://eclipse/eclipse-ide-unsupported-content-in-editor/[Eclipse
IDE:エディタでサポートされていないコンテンツタイプ]。

Eclipse
IDE:.xhtmlコードアシストがJSFタグで機能していません


hello world


jsf2