JavaServer Faces(以下、JSF)とは、Webアプリケーション構築のためのUI(User Interface)フレームワークである。

faces-config.xml

faces-config.xmlは、JSFアプリケーションで必要なManeged Beanや画面遷移を定義するファイルである。faces-config.xmlはWEB-INFO直下に置く。

イベントリスナ

イベントリスナ説明
ActionListenerボタンがクリックされたときに、そのイベント通知を受けるリスナ。
PhaseListenerJSFライフサイクルのフェーズが変更したときに、そのイベント通知を受けるリスナ。

JSF HTMLタグ

JSF HTMLタグは、HTMLのUI部品を出力するためのタグである。

JSPでHTMLタグを使用するためには、taglibディレクティブを宣言する。

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
JSF HTMLタグ 説明
<h:form> HTMLの<form>タグを生成する。
<h:outputText> <span>
<h:outputLink> <a>
<h:outputLabel> <label>
<h:outputFormat>
<h:inputText> <input type="text">
<h:inputSecret> <input type="password">
<h:inputTextarea> <textarea>
<h:inputHidden> <input type="hidden">
<h:selectBooleanCheckbox> <input type="checkbox">
<h:selectManyCheckbox> <input type="checkbox">
<h:selectManyListbox> <select>
<h:selectManyMenu> <select>
<h:selectOneListbox> <select>
<h:selectOneMenu> <select>
<h:selectOneRadio> ラジオボタンのHTMLタグ(<input type="radio">)を出力する。
<h:commandButton> <input type="submit">
<h:commandLink> <a>
<h:dataTable> <table>
<h:column> <td>
<h:graphicImage> <img>
<h:message> ひとつのメッセージをレンダリングする。
<h:messages> すべてのメッセージをレンダリングする。
<h:panelGrid> HTML 4.01仕様の<table>タグをレンダリングする。
<h:panelGroup>
<f:actionListener> 最も近い親のUIComponentカスタムアクションに関連付けられたUIComponentのActionListenerのインスタンスを登録する。
<f:valueChangeListener> 最も近い親のUIComponentカスタムアクションに関連付けられているUIComponetでValueChangeListenerのインスタンスを登録する。
<f:attribute> 最も近い親のUIComponentカスタムアクションに関連付けられたUIComponentに属性を追加する。
<f:param> 最も近い親のUIComponentカスタムアクションに関連付けられたUIComponentに子UIParameterコンポーネントを追加する。
<f:facet> 最も近い親のUIComponentカスタムアクションに関連付けられたUIComponentに名前付きファセットを登録する。

入力コンポーネント

<h:inputText>

<h:inputText>タグは、テキスト入力フィールド(<input type="text">)を出力する。

属性名説明
idコンポーネントのID
valueコンポーネントの入力値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か
sizeコンポーネントの大きさ(文字数)
maxlengthコンポーネントに入力可能な文字数

<h:inputSecret>

属性名説明
idコンポーネントのID
valueコンポーネントの入力値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か
redisplayコンポーネントに既に設定されているテキストがある場合、JSPページ再表示の際にそれを出力するか動画を指定する。
  • true(出力する)
  • false(出力しない、デフォルト値)
sizeコンポーネントの大きさ(文字数)
maxlengthコンポーネントに入力可能な文字数

<h:inputTextarea>

属性名説明
idコンポーネントのID
valueコンポーネントの入力値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か
redisplayコンポーネントに既に設定されているテキストがある場合、JSPページ再表示の際にそれを出力するか動画を指定する。
  • true(出力する)
  • false(出力しない、デフォルト値)
colsコンポーネントの1行の長さ(文字数)
rowコンポーネントの行数(文字数)

<h:inputHidden>

属性名説明
idコンポーネントのID
valueコンポーネントの入力値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か

<h:selectBooleanCheckbox>

属性名説明
idコンポーネントのID
value選択項目の値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か

<h:selectManyCheckbox>

<h:selectManyCheckbox>タグのボディ内部に記述可能な子要素は、次のとおり。

属性名説明
idコンポーネントのID
value選択項目の値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か
enabledClass選択項目が有効な場合に適用するCSSクラスを指定する。
disabledClass選択項目が無効な場合に適用するCSSクラスを指定する。
layout選択項目を並べる方向を指定する。デフォルト値は"lineDirection"。
  • "lineDirection"(水平方向)
  • "pageDirection"(垂直方向)

<h:selectManyListbox>

<h:selectManyListbox>タグのボディ内部に記述可能な子要素は、次のとおり。

属性名説明
idコンポーネントのID
value選択項目の値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か
size表示する選択項目の数を指定する。省略した場合は、すべての選択項目を表示する。

<h:selectManyMenu>

<h:selectManyMenu>タグのボディ内部に記述可能な子要素は、次のとおり。

属性名説明
idコンポーネントのID
value選択項目の値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か

<h:selectOneListbox>

<h:selectOneListbox>タグのボディ内部に記述可能な子要素は、次のとおり。

属性名説明
idコンポーネントのID
value選択項目の値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か
size表示する選択項目の数を指定する。省略した場合は、すべての選択項目を表示する。

<h:selectOneMenu>

<h:selectOneMenu>タグのボディ内部に記述可能な子要素は、次のとおり。

属性名説明
idコンポーネントのID
value選択項目の値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か

<h:selectOneRadio>

JSF HTMLタグの<h:selectOneRadio>は、ラジオボタンのHTMLタグ(<input type="radio">)を出力する。

<h:selectOneRadio>タグのボディ内部に記述可能な子要素は、次のとおり。

属性名説明
idコンポーネントのID
value選択項目の値
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
renderedコンポーネントを出力するか否か
disabledコンポーネントが有効か否か
readonlyコンポーネントが読み取り専用か否か
converterコンポーネントに適用するコンバータ
converterMessageコンポーネントに適用されたコンバータによる、型変換エラーのメッセージ
requiredコンポーネントが入力必須か否かを指定する。trueを指定すると、必須バリデータによる検証が行われる。
  • true(入力必須)
  • false(入力必須でない、デフォルト値)
requiredMessageコンポーネントの必須バリデータによる、検証エラーのメッセージ
validatorコンポーネントに適用するバリデータメソッド
validatorMessageコンポーネントに適用されたバリデータによる、検証エラーのメッセージ
valueChangeListenerコンポーネントに適用するバリューチェンジリスナーメソッド
imediateコンポーネントのバリューチェンジイベントを「入力値の適用フェーズ」で適用するか否か
layout選択項目を並べる方向を指定する。デフォルト値は"lineDirection"。
  • "lineDirection"(水平方向)
  • "pageDirection"(垂直方向)

出力コンポーネント

JSFコアタグ

JSFコアタグとは、UI部品以外を表すタグである。

JSPでコアタグを使用するためには、taglibディレクティブを宣言する。

<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
JSFコアタグ説明
<f:view>
<f:subview>
<f:actionListener>
<f:valueChangeListener>
<f:convertDateTime>日付コンバータ
<f:convertNumber>数値コンバータ
<f:converter>汎用コンバータ
<f:validateLength>文字列長バリデータ
<f:validateLongRange>範囲バリデータ(整数)
<f:validateDoubleRange>範囲バリデータ(浮動小数点数)
<f:validator>
<f:selectItem>選択肢
<f:selectItems>選択肢
<f:attribute>
<f:param>
<f:facet>
<f:verbatim>
<f:loadBundle>

コンバータ

コンバータとは、Webブラウザの入力値及び出力値と、WebアプリケーションのJavaデータ型を相互に変換する機能である。コンバータには組込みコンバートとカスタムコンバータの2種類がある。

JSFコアタグの<f:convertDateTime>を使うと、日付の書式を変換することができる。

属性名説明
pattern日付と時刻の入出力フォーマット
type日付と時刻の種類
  • date(日付のみ、デフォルト値)
  • time(時刻のみ)
  • both(日付と時刻)
dateStyle日付の詳細度
timeStyle時刻の詳細度
locale日付と時刻のロケール
timeZone日付と時刻のタイムゾーン

日付コンバータ

<h:inputText id="birthday" value="#{studentInput.birthday}">
    <f:convertDateTime pattern="yyyy/MM/dd">
</h:inputText>

数値コンバータ

JSFコアタグの<f:convertNumber>を使うと、数値の書式を変換することができる。

属性名説明
pattern数値の入出力フォーマット
type数値の種類
  • number(数値、デフォルト値)
  • currency(通貨)
  • percent(%)
groupingUsedカンマ区切りの有無
  • true(カンマ区切り有り、デフォルト値)
  • false(カンマ区切り無し)
integerOnly数値型を変換する際に整数部分のみを対象とするか否か
minIntegerDigits整数部分の最少桁数
maxIntegerDigits整数部分の最大桁数
minFractionDigits小数部分の最少桁数
maxFractionDigits小数部分の最大桁数
locale数値の出力ロケール
currencyCode通貨コード
currencySimbol通貨のシンボル
<h:outputText value="#{account.balance}">
    <f:convertNumber groupingUsed="true">
</h:outputText>

汎用コンバータ

選択肢

<f:selectItem>

属性名説明
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
idコンポーネントのID
itemValue選択肢項目の値(サーバに送信する値)
itemLabel項目に表示するテキストを指定する。省略時は、itemValue属性に指定した値が適用される。
itemDisabled選択肢項目が無効か否か
  • true(無効)
  • false(有効、デフォルト値)
itemDescription選択肢項目の説明

<f:selectItems>

属性名説明
bindingコンポーネントにバインディングされるマネージドBeanのフィールド
idコンポーネントのID
valueSelectItemオブジェクトの配列又はコレクション

バリデータ

バリデータとは、Webアプリケーションの入力値を検証する機能である。バリデータには組込みバリデータカスタムバリデータの2種類がある。

組込みバリデータ

必須バリデータ

入力コンポーネントのrequired属性にtrueを指定すると、コンポーネントの入力値が無い場合に検証エラーとなる。

<h:inputText id="studentName" value="#{studentInput.studentName}" required="true">
</h:inputText>

文字列長バリデータ

JSFコアタグの<f:validateLength>を使うと、文字列の長さを検証することができる。

属性名説明
maximum許容する最大の長さ
minimum許容する最小の長さ
<h:inputText id="accountPassword" value="#{accountInput.accountPassword}">
    <f:validateLength maximum="16" />
</h:inputText>

範囲バリデータ

JSFコアタグの<f:validateLongRange>又は<f:validateDoubleRange>を使うと、最大値や最小値を検証することができる。

属性名説明
maximum許容する最大値
minimum許容する最小値
<h:inputText id="studentAge" value="#{studentInput.studentAge}">
    <f:convertNumber type="number" />
    <f:validateLongRange minimum="10" maximum="15" />
</h:inputText>
スポンサーリンク