初心者向けのJSFチュートリアル

9か月 ago
夏樹, 風
5 minutes

初心者のためのJSFチュートリアルへようこそ。Java Server Faces（JSF）テクノロジーは、UIコンポーネントを再利用することで、ユーザーインターフェースコンポーネントの作成を容易にするフロントエンドフレームワークです。JSFは、プレゼンテーション、コントローラー、およびビジネスロジックを分離するモデルビューコントローラーパターン（MVC）に基づいて設計されています。

初心者向けのJSFチュートリアル

モデルビューコントローラーパターンでは、モデルはビジネスシナリオを達成するために必要なビジネスロジックを含み、ビューはJSPやJSFページのようなプレゼンテーション層を表し、コントローラーはリクエストされた操作に応じてモデル/ビューへの制御を処理するプロセスを表します。JSFは以下のコンポーネントを提供してユーザーインターフェースを作成します。

  • Standard basic input elements like fields, buttons etc. that forms the set of base UI components.
  • Rendering ability of JSF depending on the the client specifications
  • Core library
  • Extending available ui components to add more components and use them for accomplishing client requirements.

初心者のためのJSFチュートリアル – 環境のセットアップ

ここでは、最初のJSFアプリケーションを作成するために、コンピュータのセットアップに必要なすべての手順を進めます。

JDKのインストール

以下のOracleのウェブサイトからJDKをダウンロードしてください。https://www.oracle.com/technetwork/java/javase/downloads/index.html インストールされたJDKのbinパスを指すように、環境変数JAVA_HOMEを設定してください。例えば「C:\Program Files\Java\jdk1.7.0_60」となります。また、PATH変数にJAVA_HOME\binを追加して、Javaのバイナリファイルを見つけることができるようにしてください。これで、コマンドウィンドウで「javac」と入力することで、Javaが正常にインストールされたかどうかを確認できます。すると、利用可能なオプションが表示されます。または、「java -version」と入力すると、マシンにインストールされているJavaのバージョンが表示されます。詳細については、以下の投稿を参照してください：WindowsにJavaをインストールする方法

IDEのインストール

人気のあるIDEの一部には、Eclipse、NetBeans、IntelliJ IDEAなどがあります。以下のリンクからEclipseをダウンロードし、ダウンロードされたバイナリファイルを実行してマシンにEclipseをインストールしてください。NetBeansの場合は、https://netbeans.org/downloads/からNetBeans IDEをダウンロードし、インストールを完了させてください。

Apache Tomcatのインストール

以下のリンク（https://tomcat.apache.org/）からTomcatをダウンロードしてください。ダウンロードしたバイナリファイルを実行し、CATALINA_HOME変数をインストールパスに設定してください。サーバーを起動し、お気に入りのブラウザでhttps://localhost:8080にアクセスしてください。インストールが成功していれば、デフォルトのTomcatページが表示されます。基本的なセットアップは完了しましたので、次に最初のJSFアプリケーションの作成に移りましょう。

初めてのJSFチュートリアル-こんにちは世界アプリケーション

さあ、簡単なHello WorldのJSFウェブアプリケーションを作成しましょう。JSF関連のコードを実行するために必要な以下のJARファイルをダウンロードしてください。これらはMaven Centralリポジトリ（https://search.maven.org/）からダウンロードできます。依存関係を管理するために、Mavenのようなビルドシステムを使用することでより明瞭な方法があります。すべての例では、Mavenを使用しますので、依存関係についてはpom.xmlを参照してください。jsf-api-1.2.jar、jsf-impl-2.2.8-04.jar、pom.xmlをご確認ください。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.scdev.jsf</groupId>
    <artifactId>JSF_HelloWorld</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>JSF_HelloWorld</name>

    <properties>
        <endorsed.dir>${project.build.directory}/endorsed</endorsed.dir>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    
    <dependencies>
        <dependency>
            <groupId>javax</groupId>
            <artifactId>javaee-web-api</artifactId>
            <version>7.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-api</artifactId>
            <version>2.1.13</version>
        </dependency>
        <dependency>
            <groupId>com.sun.faces</groupId>
            <artifactId>jsf-impl</artifactId>
            <version>2.1.13</version>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <version>3.1</version>
                <configuration>
                    <source>1.7</source>
                    <target>1.7</target>
                    <compilerArguments>
                        <endorseddirs>${endorsed.dir}</endorseddirs>
                    </compilerArguments>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-war-plugin</artifactId>
                <version>2.3</version>
                <configuration>
                    <failOnMissingWebXml>false</failOnMissingWebXml>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-dependency-plugin</artifactId>
                <version>2.6</version>
                <executions>
                    <execution>
                        <phase>validate</phase>
                        <goals>
                            <goal>copy</goal>
                        </goals>
                        <configuration>
                            <outputDirectory>${endorsed.dir}</outputDirectory>
                            <silent>true</silent>
                            <artifactItems>
                                <artifactItem>
                                    <groupId>javax</groupId>
                                    <artifactId>javaee-endorsed-api</artifactId>
                                    <version>7.0</version>
                                    <type>jar</type>
                                </artifactItem>
                            </artifactItems>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

</project>

初心者向けJSFチュートリアル – マネージドビーンの作成

UIとビジネスロジックの間のやり取りを可能にするために、JSFに登録されるJavaクラスをマネージドビーンといいます。@ManagedBeanアノテーションを使用して、HelloWorld.javaという名前のマネージドビーンを作成してください。

package com.scdev.jsf.helloworld;

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


@ManagedBean(name="helloWorld")
@SessionScoped
public class HelloWorld implements Serializable{
    
    private static final long serialVersionUID = -6913972022251814607L;
	
    private String s1 = "Hello World!!";

    public String getS1() {
        System.out.println(s1);
        return s1;
    }

    public void setS1(String s1) {
        this.s1 = s1;
    }
  
}

@ManagedBeanアノテーションは、HelloWorldクラスが管理されるBeanであることを示しています。@SessionScopedのBeanは、HttpSessionが有効な間はBeanが生きていることを示しています。ここで、文字列s1が宣言され、「Hello World」と初期化され、ゲッターとセッターメソッドが定義されています。@ManagedBean(name=”helloWorld”)のように、Bean名を指定することもできます。名前が指定されていない場合は、Javaの命名規則に従って名前が付けられます。常にBean名を指定することがベストプラクティスです。

初心者向けJSFチュートリアル – ページの表示

今、HelloWorldビーンと対話し、ゲッターメソッドを介して値を取得し、応答ページに同じ値を印刷するJSFページであるhelloWorld.xhtmlを作成してください。

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml"
      xmlns:h="https://java.sun.com/jsf/html">
<h:head>
<title>Hello World JSF Example</title>
</h:head>
<h:body>
       #{helloWorld.s1}
<br /><br />

</h:body>
</html>

ここでは、ビーンとして宣言された文字列変数に続くビーン名を「helloWorld.s1」と呼んでいます。この変数は「Hello World」という値を取得します。

設定されたデプロイメントディスクリプタの構成

最後の部分は、JSFのコントローラークラスを設定して、クライアントのリクエストを処理することです。JSFのコントローラーサーブレットはFacesServletであり、最終的なweb.xmlの設定は以下の通りです。web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.1" xmlns="https://xmlns.jcp.org/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://xmlns.jcp.org/xml/ns/javaee https://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd">
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<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>/faces/*</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>*.jsf</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
            30
</session-timeout>
</session-config>
<welcome-file-list>
<welcome-file>faces/helloWorld.xhtml</welcome-file>
</welcome-file-list>
</web-app>

Eclipse上でFinal JSF Hello worldプロジェクト構造は以下のようになります。web.xmlでは、faces configファイルのエントリとfaces用のservletのマッピング、セッションタイムアウト、そしてアプリケーションの開始時にロードされるウェルカムファイルを指定します。これらの変更が完了したら、ブラウザに以下の出力を表示するアプリケーションを実行します。これでJSFの初心者向けチュートリアルは以上です。次回の投稿では、異なるJSFページコンポーネントについて説明します。その間に、以下のリンクからプロジェクトをダウンロードして、さらに学習のために遊んでみることができます。

JSFのHello Worldプロジェクトをダウンロードする。

コメントを残す 0

Your email address will not be published. Required fields are marked *