JSF 2.0 hello worldの例

このチュートリアルでは、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 を指しています。

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