JSF

https://blogs.oracle.com/wlc/entry/%E9%80%A3%E8%BC%89_weblogic_server_12c%E3%81%A7java_ee1
https://blogs.oracle.com/wlc/entry/%E9%80%A3%E8%BC%89_weblogic_server_12c%E3%81%A7java_ee2

はじめに

特徴

UIコンポーネント

JSF では、ボタンや入力フォームなどユーザー・インタフェースを構成する部品を「UI コンポーネント」として提供しています。
ビューはこのUIコンポーネントを配置し、xhtmlとして作成する。

イベント・ドリブン

UI コンポーネントは、「ボタンが押された」「テキスト・フィールドの値が変わった」といった「イベント」を処理する機能を提供します。このイベント・ドリブンなプログラミング・モデルを採用した JSF は、 HTTP リクエスト/レスポンスを強く意識する必要があった旧来の Web アプリケーションよりも、 Ajax を活用しやすいです。

サンプル

sample.zip(484)

環境

ディレクトリ構成

IDEを利用する場合はあまり気にしない。
IDEを使わない場合は、以下のようなディレクトリ構成で良いと思う。

[app root]
   |-- WebContent
   |   |-- META-INF
   |   |   `-- MANIFEST.MF
   |   |-- WEB-INF
   |   |   |-- faces-config.xml
   |   |   |-- lib
   |   |   `-- web.xml
   |   |-- game.xhtml
   |   |-- index.xhtml
   |   `-- template.xhtml
   |-- build
   |   `-- classes
   `-- src
       |-- jsf_test
       |   |-- Answer.java
       |   |-- GameBean.java
       |   `-- UserBean.java
       `-- resources
           |-- application_ja.properties

基本

テンプレート

template.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"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <!-- a. ページごとに定義するページ・タイトル -->
  <title>
    <ui:insert name="title">JFS Template</ui:insert>
</title>
</head>
<body>
  <!-- b. 全ページで共通のページ・ヘッダー -->
  <div id="header" style="background-color:#F00; color:#FFF">
    <h1>数字当てゲーム</h1>
  </div>
  <!-- c. 各ページで異なるコンテンツを表示する領域 -->
  <ui:insert name="content">ページごとのコンテンツ</ui:insert>
</body></html>

index.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"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">
<!-- a. 適用するテンプレートの指定 -->
<ui:composition template="template.xhtml">
  <!-- b. ページ固有の設定（title）を指定 -->
  <ui:define name="title">ようこそ</ui:define>
  <!-- b. ページ固有の設定（content）を指定 -->
  <ui:define name="content">
    <!-- c. HTTPポスト・リクエストを送信するためのformタグ -->
    <h:form>
      <div> あなたのお名前は？
        <!-- d. 名前を入力するためのテキスト・フィールド -->
        <h:inputText size="12"/>
        <!-- e. 入力された名前をサーバーに送信し、ゲームを開始するためのボタン -->
        <h:commandButton value="開始"/>
      </div>
    </h:form>
  </ui:define>
</ui:composition>
</html>

コンポーネントUIとBeans

index.xhtml（一部変更）

1	<h:inputText size="12" value="#{userBean.name}"/>

UserBean.java

package jsfsample;

import java.io.Serializable;

@javax.faces.bean.ManagedBean  // マネージドBeanであることを宣言するアノテーション
@javax.faces.bean.SessionScoped // このマネージドBeanがsessionスコープであることを表すアノテーション
public class UserBean implements Serializable {
  private String name; // ユーザーの名前を格納するプロパティ
  
  public String getName() {
    return name;
  }

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

ページナビゲーション

game.xhml

<?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:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core">
<!-- a. 適用するテンプレートの指定 -->
<ui:composition template="template.xhtml">
  <!-- b. ページ固有の設定（title）を指定 -->
  <ui:define name="title">数字当てゲーム</ui:define>
  <!-- b. ページ固有の設定（content）を指定 -->
  <ui:define name="content">
    <!-- c. HTTPポスト・リクエストを送信するためのformタグ -->
    <h:form>
      <div>
        <!-- d. ユーザーへのメッセージ -->
        <h:outputFormat value="{0}さん、{1}">
          <f:param value="ユーザー名"/><!-- {0}に入る値 -->
          <f:param value="3つの異なる数字を入力してください。"/><!-- {1}に入る値-->
        </h:outputFormat>
        <!-- 実行時「ユーザー名さん、3つの異なる数字を入力してください。」と表示される-->
      </div>
      <div>
        <!-- e. 数字を入力するためのテキスト・フィールド -->
        <h:inputText size="2" maxlength="1"/>
        <h:inputText size="2" maxlength="1"/>
        <h:inputText size="2" maxlength="1"/>
        <!-- f. サーバーに回答を送信するためのボタン -->
        <h:commandButton value="回答"/>
        <!-- g. ゲームをやり直すためのボタン -->
        <h:commandButton value="やり直す" action="index"/>
      </div>
      <h2>回答履歴</h2>
      <!-- 次回ここに回答履歴のテーブルを追加 -->
    </h:form>
  </ui:define>
</ui:composition>
</html>