初心者向けのJSFチュートリアルへようこそ。 Java Server Faces（JSF）技術は、UIコンポーネントの作成をUIコンポーネントの再利用によって容易にするフロントエンドフレームワークです。JSFは、
初心者向けのJSFチュートリアル
Model View Controller（MVC）パターンに基づいて設計されており、プレゼンテーション、コントローラ、およびビジネスロジックを分離します。
- モデルビューコントローラーパターンでは、モデルにはビジネスシナリオを達成するために必要なビジネスロジックが含まれ、ビューはJSPやJSFページのようなプレゼンテーション層を表し、コントローラはリクエストされた操作に応じてモデル/ビューに制御を処理します。JSFは、以下のコンポーネントを提供してユーザーインターフェースを作成します：
- 基本の入力要素（フィールド、ボタンなど）を形成する標準の基本UIコンポーネント。
- JSFの描画能力は、クライアントの仕様に応じて変わります。
- コアライブラリ
使用可能なUIコンポーネントを拡張して、クライアントの要件を達成するためにそれらを使用します。
初心者向け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”です。また、JAVA_HOME\binをPATH変数に追加してください。これにより、Javaのバイナリが見つかります。コマンドウィンドウでjavacと入力して、マシンにJavaが正常にインストールされているかどうかを確認します。これにより、利用可能なすべてのオプションが表示されるはずです。または、”java -version”と入力して、マシンにインストールされているJavaのバージョンが表示されます。詳細については、次の投稿をご覧ください：WindowsにJavaをインストールする方法
IDEのインストール
人気のあるIDEの中には、Eclipse、NetBeans、そしてIntelliJ IDEAがあります。次のリンクからEclipseをダウンロードして、ダウンロードしたバイナリファイルを実行してマシンにEclipseをインストールします：https://www.eclipse.org/downloads/。NetBeansの場合、https://netbeans.org/downloads/からNetBeans IDEをダウンロードし、インストールを完了させます。
Apache Tomcatのインストール
次のリンクからTomcatをダウンロードします：https://tomcat.apache.org/。ダウンロードしたバイナリファイルを実行し、CATALINA_HOME変数をインストールパスを指すように設定します。そして、サーバーを起動し、お好きなブラウザでhttps://localhost:8080にアクセスします。これで、正常にインストールされていればデフォルトのTomcatページが表示されます。基本のセットアップは完了です。さて、最初のJSFアプリケーションの作成に移りましょう。
初心者向けJSFチュートリアル – Hello Worldアプリケーション
さて、シンプルなHello World JSF Webアプリケーションを作成しましょう。次に、JSF関連のコードを実行するために必要な以下のJARファイルをダウンロードします。これらはMaven Central Repository 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.journaldev.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チュートリアル – マネージドビーンの作成
A managed bean is a java class registered to JSF which makes interaction between the UI and the business logic possible. Create a managed bean named HelloWorld.java using @ManagedBean annotation as
package com.journaldev.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」で初期化され、文字列s1の値を取得するためのgetterおよびsetterメソッドが定義されています。 @ManagedBean(name="helloWorld")のようにBean名を指定することもできます。名前が指定されていない場合は、Javaの命名規則に従って派生します。常にBean名を指定するのがベストプラクティスです。
初心者向けJSFチュートリアル – ビューページ
次に、helloWorld.xhtmlという名前のJSFページを作成し、HelloWorld Beanとやり取りし、getterメソッドを介して値を取得し、同じ値を応答ページに表示します。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>
ここでは、Bean名を呼び出し、Beanで宣言された文字列変数に続けて「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>
最終的なJSF Hello worldプロジェクト構造は、Eclipseで以下のようになります。
web.xmlでは、facesの構成ファイルエントリと、facesのためのサーブレットのマッピング、セッションタイムアウト、およびアプリケーションの開始時に読み込まれるウェルカムファイルが指定されています。これらの変更が完了したら、アプリケーションを実行し、ブラウザに以下の出力が表示されます。
これでJSFチュートリアルの初心者向けの説明は以上です。今後の投稿で異なるJSFページコンポーネントを紹介します。その間に、以下のリンクからプロジェクトをダウンロードして試してみてください。
Source:
https://www.digitalocean.com/community/tutorials/jsf-tutorial-for-beginners