Java > JavaEE > WebTier > UsingJSF

「Java/JavaEE/WebTier/UsingJSF」の編集履歴（バックアップ）一覧はこちら

Java/JavaEE/WebTier/UsingJSF - (2012/08/21 (火) 20:52:38) の１つ前との変更点

追加された行は緑色になります。

削除された行は赤色になります。

色々な種類のコンポーネントとコアタグを使ってページを作成する方法
----
*Setting Up a Page
-JSFのWebページに含まれるもの
--JSFタグライブラリの名前空間宣言
--HTMLのh:headとh:body
--ユーザ入力を表すフォームh:form
-コンポーネントをページに追加するには以下のタグライブラリが必要
--JSF標準HTMLタグライブラリ
---共通的なHTMLのUIコンポーネント
 xmlns:h="http://java.sun.com/jsf/html"
--JSFコアタグライブラリ
---コアとなるアクションを定義
 xmlns:f="http://java.sun.com/jsf/core"
----
*Adding Components to a PageUsing HTMLTags
-JSF標準HTMLタグライブラリはHTMLのフォームコンポーネントや、基本的なHTML要素を表す
|column|A column in a table|
|commandButton|<input type=type>|
|commandLink|<a href>|
|dataTable|<table>|
|form|<form>|
|graphicImage|<img>|
|inputHidden|<input type=hidden>|
|inputSecret|<input type=password>|
|inputText|<input type=text>|
|inputTextarea|<textarea>|
|message|<span> tag if styles are used|
|messages|<span> tags if styles are used|
|outputFormat|Plain text|
|outputLabel|<label>|
|outputLink|<a>|
|outputText|Plain text|
|panelGrid|<table> element with <tr> and <td> elements|
|panelGroup|<div> or <span> element|
|selectBooleanCheckbox|<input type=checkbox>|
|selectItem|<option>|
|selectItems|<option> elements|
|selectManyCheckbox|<input> elements of type checkbox|
|selectManyListbox|<select> : A list box|
|selectManyMenu|<select> : A scrollable combo box|
|selectOneListbox|<select> : A list box|
|selectOneMenu|<select> : A scrollable combo box|
|selectOneRadio|<input type=radio>|
**CommonComponentTag Attributes
-多くのコンポーネントタグに共通する属性
--binding
---ビーンプロパティを識別する
--id
---コンポーネントを一意に識別する
---ほかのコンポーネントやクラスからコンポーネントを参照する際に利用
---明示的に指定しない時は、JSFにより自動的に付与される
--immediate
---入力やコマンドのコンポーネントに紐づくイベント、バリデーション、変換がリクエストパラメータ値が適用されたときに実行されるか
---入力とコマンドのコンポーネントのimmediate属性値の組み合わせの場合は、コマンドコンポーネントがアクティブになったときの振る舞いに注意する
--rendered
---コンポーネントがレンダリングされる条件を指定
---rvalue形式に限られる
--style
---CSSスタイル指定
--styleClass
---CSSスタイルクラス指定
--value
---外部のデータソースを指定し、コンポーネント値に紐づける
**Adding HTML Head and BodyTags
-h:head で head 要素
-h:body で body 要素
-リソースリロケーションを利用するときに有用
**Adding a Form Component
-h:form で入力フォームを生成
-表示やサブミットのコンポーネントを含む
-複数のフォームを含めることも可能だが、サブされたフォームの値だけがリクエストパラメータになる
**UsingText Components
-テキストコンポーネントはテキストの参照と編集で使われる
-入力コンポーネントタグ
|h:inputHidden|hidden変数|
|h:inputSecret|パスワード入力フィールド|
|h:inputText|hidden変数|
|h:inputHidden|テキストフィールド|
|h:inputHidden|テキストエリア|
-入力コンポーネントタグの属性
|converter|コンポーネントのローカルデータを変換するコンバータを指定|
|converterMessage|コンバータの処理が失敗したときのメッセージ|
|dir|テキストの表示方向 LTR or RTL|
|label|エラーメッセージ中でコンポーネントを特定するための名前|
|lang|マークアップ中で使われている言語|
|required|ユーザ入力が必須か|
|requiredMessage|requiredエラーのメッセージ|
|validator|管理ビーンのバリデーションメソッド|
|f:validatorMessage|バリデート失敗時のエラーメッセージ|
|valueChangeListener|値を入力したときの管理ビーンのイベントメソッド|
-出力コンポーネントタグ
|h:outputFormat|ローカライズされたメッセージ|
|h:outputLabel|読み取り専用ラベル|
|h:outputLink|アクションイベントを生成しない<a>リンク|
|h:outputText|一行テキスト|
-出力コンポーネントタグの属性
|converter|コンポーネントのローカルデータを変換するコンバータを指定|
***Rendering aText Field with the h:inputText Tag
-label属性で、エラーメッセージの項目名を指定
-value属性で、管理ビーンのプロパティと紐付け
-required属性がtrueで、入力されなかったらページがリロードされて、エラーメッセージが表示される
-requiredエラーが起こったときは、ほかのバリデータは実行されない
***Rendering a Password Field with the h:inputSecret Tag
-<input type="password">を出力
-redisplay属性をfalseにすることで、クエリ文字列やHTMLのソースに表示されるのを防げる
***Rendering a Label with the h:outputLabel Tag
-入力フィールドに対してラベルを付けるときに使う
--for属性で入力フィールドのid属性を参照
-value属性または、h:outputText子要素でラベル値を指定する
***Rendering aHyperlink with the h:outputLink Tag
-アクションイベントなしのハイパーリンクを出力する
--リンククリック時に処理を行わずに、リンク先をオープンする場合
***Displaying a Formatted Message with the h:outputFormat Tag
-MessageFormatのパターンに従って文字列を出力
--value属性でメッセージフォーマットを指定
--f:param子要素でメッセージパラメータを指定
**Using CommandComponentTags for Performing Actions and Navigation
-実行されると何らかのアクションを行うのでボタンやハイパーリンクのコンポーネントは、コマンドコンポーネントと呼ばれる
-h:commandButtonタグはボタンを出力
-h:commandLinkタグはハイパーリンクタグを出力
--h:outputText子タグでリンクのテキストを指定する
-使用できる属性
--action
---遷移先か遷移先を返すMethod Expression
--actionListener
---アクションイベントを実行するMethod Expression
**Adding Graphics and Images with the h:graphicImage Tag
-h:graphicImageタグで画像を出力
-url属性で画像のパスを指定
--/始まりでコンテキストからの相対パス
-value属性でリソース参照することもできる
 value="#{resource[images:xxx]}"
**LayingOut Components with the h:panelGrid and h:panelGroup Tags
-パネルはコンポーネントセットのレイアウトをするために使う
--HTMLのテーブルとして出力
-h:panelGrid
--テーブルの表示
--columns属性：１列より多い場合に列数を指定
---子要素をcolumnsの値分だけ行にしていく。
--columnClasses, footerClass, headerClass, panelClass, rowClasses
--headerClass属性あり⇒最初の子要素にヘッダーを持たせる
--footerClass属性あり⇒最後の子要素にヘッダーを持たせる
-h:panelGroup
--コンポーネントのセット(ネストされたコンポーネントツリー)をグループ化。
--テーブルの行
--layout属性
---blockなら行を囲むよにdivタグがつく。それ以外はspanタグがつく
**Displaying Components for Selecting OneValue
-<h:selectBooleanCheckbox>
--boolean値を表すチェックボックス
-<h:selectOneRadio>
-<h:selectOneMenu>
--項目リストの中から１つを選択できるドロップダウン
--value属性は現在選択されている項目に紐づけられる
---value値設定なしの場合は、最初の項目が選択
--<f:selectItem>,<f:selectItems>子要素で項目を指定
-<h:selectOneListbox>
--size属性で一度に表示される項目数を指定
**Displaying Components for Selecting MultipleValues
-<h:selectManyCheckbox>
--value属性値で現在選択されている項目を指定できる
--layout属性値で表示方向を指定(lineDirection|pageDirection)
--<f:selectItem>,<f:selectItems>子要素で項目を指定
-<h:selectManyMenu>
-<h:selectManyListbox>
--size属性で一度に表示される項目数を指定
**Using the f:selectItem and f:selectItems Tags
-選択項目コンポーネントにネストして、選択項目を指定できる
-<f:selectItem>
--１つの選択項目のラベル、値、記述を設定する
--ページ上で項目リストを定義
--ビーンのコードが<f:selectItems>に比べて少ない
--itemValue属性で選択値、itemLabel属性でラベルを指定
-<f:selectItems>
--全選択項目のラベル、値、記述を設定する
--項目はArray,Map,Collection,POJOのコレクションで指定可能
--異なるリストの結合やグルーピングが可能
--項目リストは動的に生成できる
**Using Data-BoundTable Components
-<h:dataTable>でデータコレクションをHTMLテーブルで表す
--<h:column>でテーブル中の列を指定
---headerClass,footerClassでヘッダとフッタのスタイルを指定できる
--データレコードをイテレートする(テーブル中の行)
--繰り返しがないヘッダやフッタ部分では、<f:facet>を使う。
--<f:facet>の子要素で複数のコンポーネントをまとめるには、<h:panelGroup>を使う
--value属性でテーブルとして描画されるデータを指定
---ビーンのリスト、配列
---ビーン
---javax.faces.model.DataModel
---java.sql.ResultSet
---javax.servlet.jsp.jstl.sql.Result
---javax.sql.RowSet
--var属性でイテレーション変数名を指定
--first属性で表示開始行番号、rows属性で表示行数を指定
---デフォルトでは両方0で、すべての行が表示される
--captionClass,columnClasses,footerClass,headerClass,rowClasses,styleClass：スタイル指定
---行(列)のスタイルを複数指定すると、行(列)番号に応じて順にスタイルが適用される
**Displaying Error Messages with the h:message and h:messages Tags
-変換、バリデーションが失敗したときのメッセージを設定
--コンバータやバリデータをコンポーネントに登録すると、エラーメッセージがコンポーネントにキューイングされる
--そのメッセージを<h:message>や<h:messages>で表示する
-<h:message>
--特定の入力コンポーネントに対するエラーメッセージを設定
--for属性で対象の入力コンポーネントを指定
--メッセージ表示位置はタグの位置
--style属性でテキストのスタイルを指定
-<h:messages>
--ページ全体のエラーメッセージを表示する
--layout属性でメッセージの出力形式を指定 list | table
**Creating Bookmarkable URLs with the h:button and h:link Tags
-ナビゲーション結果情報とコンポーネントパラメータからハイパーリンクを生成
--パラメータ付きのGETのURL
-<h:link>,<h:button>
--outcome属性で参照リソースを指定
--<f:param>子要素でクエリパラメータを指定
**UsingViewParameters to Configure Bookmarkable URLs
-<f:metadata>の子要素として<f:viewparam>でURLのパラメータを設定する
-コンポーネントのincludeViewParams属性をtrueに設定する
-パラメータ値の設定順序
--Component
--Navigation-case parameters
--View parameters
**Resource RelocationUsing h:output Tags
-JSFがリソース描画するページ上の位置を指定することができる
-<h:outputScript> : スクリプトの描画
---target属性なしの場合はタグ位置に描画
-<h:outputStylesheet> : CSSの描画
--name,target属性で描画位置を指定
---target属性なしの場合は、<head>内に描画
-コンポーネントに@ResourceDependencyアノテーションをつけてコンポーネントに対するリソースを指定できる
--ページ作成者はリソース位置を知らなくていい

色々な種類のコンポーネントとコアタグを使ってページを作成する方法
----
*Setting Up a Page
-JSFのWebページに含まれるもの
--JSFタグライブラリの名前空間宣言
--HTMLのh:headとh:body
--ユーザ入力を表すフォームh:form
-コンポーネントをページに追加するには以下のタグライブラリが必要
--JSF標準HTMLタグライブラリ
---共通的なHTMLのUIコンポーネント
 xmlns:h="http://java.sun.com/jsf/html"
--JSFコアタグライブラリ
---コアとなるアクションを定義
 xmlns:f="http://java.sun.com/jsf/core"
----
*Adding Components to a PageUsing HTMLTags
-JSF標準HTMLタグライブラリはHTMLのフォームコンポーネントや、基本的なHTML要素を表す
|column|A column in a table|
|commandButton|<input type=type>|
|commandLink|<a href>|
|dataTable|<table>|
|form|<form>|
|graphicImage|<img>|
|inputHidden|<input type=hidden>|
|inputSecret|<input type=password>|
|inputText|<input type=text>|
|inputTextarea|<textarea>|
|message|<span> tag if styles are used|
|messages|<span> tags if styles are used|
|outputFormat|Plain text|
|outputLabel|<label>|
|outputLink|<a>|
|outputText|Plain text|
|panelGrid|<table> element with <tr> and <td> elements|
|panelGroup|<div> or <span> element|
|selectBooleanCheckbox|<input type=checkbox>|
|selectItem|<option>|
|selectItems|<option> elements|
|selectManyCheckbox|<input> elements of type checkbox|
|selectManyListbox|<select> : A list box|
|selectManyMenu|<select> : A scrollable combo box|
|selectOneListbox|<select> : A list box|
|selectOneMenu|<select> : A scrollable combo box|
|selectOneRadio|<input type=radio>|
**CommonComponentTag Attributes
-多くのコンポーネントタグに共通する属性
--binding
---ビーンプロパティを識別する
--id
---コンポーネントを一意に識別する
---ほかのコンポーネントやクラスからコンポーネントを参照する際に利用
---明示的に指定しない時は、JSFにより自動的に付与される
--immediate
---入力やコマンドのコンポーネントに紐づくイベント、バリデーション、変換がリクエストパラメータ値が適用されたときに実行されるか
---入力とコマンドのコンポーネントのimmediate属性値の組み合わせの場合は、コマンドコンポーネントがアクティブになったときの振る舞いに注意する
--rendered
---コンポーネントがレンダリングされる条件を指定
---rvalue形式に限られる
--style
---CSSスタイル指定
--styleClass
---CSSスタイルクラス指定
--value
---外部のデータソースを指定し、コンポーネント値に紐づける
**Adding HTML Head and BodyTags
-h:head で head 要素
-h:body で body 要素
-リソースリロケーションを利用するときに有用
**Adding a Form Component
-h:form で入力フォームを生成
-表示やサブミットのコンポーネントを含む
-複数のフォームを含めることも可能だが、サブされたフォームの値だけがリクエストパラメータになる
**UsingText Components
-テキストコンポーネントはテキストの参照と編集で使われる
-入力コンポーネントタグ
|h:inputHidden|hidden変数|
|h:inputSecret|パスワード入力フィールド|
|h:inputText|hidden変数|
|h:inputHidden|テキストフィールド|
|h:inputHidden|テキストエリア|
-入力コンポーネントタグの属性
|converter|コンポーネントのローカルデータを変換するコンバータを指定|
|converterMessage|コンバータの処理が失敗したときのメッセージ|
|dir|テキストの表示方向 LTR or RTL|
|label|エラーメッセージ中でコンポーネントを特定するための名前|
|lang|マークアップ中で使われている言語|
|required|ユーザ入力が必須か|
|requiredMessage|requiredエラーのメッセージ|
|validator|管理ビーンのバリデーションメソッド|
|f:validatorMessage|バリデート失敗時のエラーメッセージ|
|valueChangeListener|値を入力したときの管理ビーンのイベントメソッド|
-出力コンポーネントタグ
|h:outputFormat|ローカライズされたメッセージ|
|h:outputLabel|読み取り専用ラベル|
|h:outputLink|アクションイベントを生成しない<a>リンク|
|h:outputText|一行テキスト|
-出力コンポーネントタグの属性
|converter|コンポーネントのローカルデータを変換するコンバータを指定|
***Rendering aText Field with the h:inputText Tag
-label属性で、エラーメッセージの項目名を指定
-value属性で、管理ビーンのプロパティと紐付け
-required属性がtrueで、入力されなかったらページがリロードされて、エラーメッセージが表示される
-requiredエラーが起こったときは、ほかのバリデータは実行されない
***Rendering a Password Field with the h:inputSecret Tag
-<input type="password">を出力
-redisplay属性をfalseにすることで、クエリ文字列やHTMLのソースに表示されるのを防げる
***Rendering a Label with the h:outputLabel Tag
-入力フィールドに対してラベルを付けるときに使う
--for属性で入力フィールドのid属性を参照
-value属性または、h:outputText子要素でラベル値を指定する
***Rendering aHyperlink with the h:outputLink Tag
-アクションイベントなしのハイパーリンクを出力する
--リンククリック時に処理を行わずに、リンク先をオープンする場合
***Displaying a Formatted Message with the h:outputFormat Tag
-MessageFormatのパターンに従って文字列を出力
--value属性でメッセージフォーマットを指定
--f:param子要素でメッセージパラメータを指定
**Using CommandComponentTags for Performing Actions and Navigation
-実行されると何らかのアクションを行うのでボタンやハイパーリンクのコンポーネントは、コマンドコンポーネントと呼ばれる
-h:commandButtonタグはボタンを出力
-h:commandLinkタグはハイパーリンクタグを出力
--h:outputText子タグでリンクのテキストを指定する
-使用できる属性
--action
---遷移先か遷移先を返すMethod Expression
--actionListener
---アクションイベントを実行するMethod Expression
**Adding Graphics and Images with the h:graphicImage Tag
-h:graphicImageタグで画像を出力
-url属性で画像のパスを指定
--/始まりでコンテキストからの相対パス
-value属性でリソース参照することもできる
 value="#{resource[images:xxx]}"
**LayingOut Components with the h:panelGrid and h:panelGroup Tags
-パネルはコンポーネントセットのレイアウトをするために使う
--HTMLのテーブルとして出力
-h:panelGrid
--テーブルの表示
--columns属性：１列より多い場合に列数を指定
---子要素をcolumnsの値分だけ行にしていく。
--columnClasses, footerClass, headerClass, panelClass, rowClasses
--headerClass属性あり⇒最初の子要素にヘッダーを持たせる
--footerClass属性あり⇒最後の子要素にヘッダーを持たせる
-h:panelGroup
--コンポーネントのセット(ネストされたコンポーネントツリー)をグループ化。
--テーブルの行
--layout属性
---blockなら行を囲むよにdivタグがつく。それ以外はspanタグがつく
**Displaying Components for Selecting OneValue
-<h:selectBooleanCheckbox>
--boolean値を表すチェックボックス
-<h:selectOneRadio>
-<h:selectOneMenu>
--項目リストの中から１つを選択できるドロップダウン
--value属性は現在選択されている項目に紐づけられる
---value値設定なしの場合は、最初の項目が選択
--<f:selectItem>,<f:selectItems>子要素で項目を指定
-<h:selectOneListbox>
--size属性で一度に表示される項目数を指定
**Displaying Components for Selecting MultipleValues
-<h:selectManyCheckbox>
--value属性値で現在選択されている項目を指定できる
--layout属性値で表示方向を指定(lineDirection|pageDirection)
--<f:selectItem>,<f:selectItems>子要素で項目を指定
-<h:selectManyMenu>
-<h:selectManyListbox>
--size属性で一度に表示される項目数を指定
**Using the f:selectItem and f:selectItems Tags
-選択項目コンポーネントにネストして、選択項目を指定できる
-<f:selectItem>
--１つの選択項目のラベル、値、記述を設定する
--ページ上で項目リストを定義
--ビーンのコードが<f:selectItems>に比べて少ない
--itemValue属性で選択値、itemLabel属性でラベルを指定
-<f:selectItems>
--全選択項目のラベル、値、記述を設定する
--項目はArray,Map,Collection,POJOのコレクションで指定可能
--異なるリストの結合やグルーピングが可能
--項目リストは動的に生成できる
**Using Data-BoundTable Components
-<h:dataTable>でデータコレクションをHTMLテーブルで表す
--<h:column>でテーブル中の列を指定
---headerClass,footerClassでヘッダとフッタのスタイルを指定できる
--データレコードをイテレートする(テーブル中の行)
--繰り返しがないヘッダやフッタ部分では、<f:facet>を使う。
--<f:facet>の子要素で複数のコンポーネントをまとめるには、<h:panelGroup>を使う
--value属性でテーブルとして描画されるデータを指定
---ビーンのリスト、配列
---ビーン
---javax.faces.model.DataModel
---java.sql.ResultSet
---javax.servlet.jsp.jstl.sql.Result
---javax.sql.RowSet
--var属性でイテレーション変数名を指定
--first属性で表示開始行番号、rows属性で表示行数を指定
---デフォルトでは両方0で、すべての行が表示される
--captionClass,columnClasses,footerClass,headerClass,rowClasses,styleClass：スタイル指定
---行(列)のスタイルを複数指定すると、行(列)番号に応じて順にスタイルが適用される
**Displaying Error Messages with the h:message and h:messages Tags
-変換、バリデーションが失敗したときのメッセージを設定
--コンバータやバリデータをコンポーネントに登録すると、エラーメッセージがコンポーネントにキューイングされる
--そのメッセージを<h:message>や<h:messages>で表示する
-<h:message>
--特定の入力コンポーネントに対するエラーメッセージを設定
--for属性で対象の入力コンポーネントを指定
--メッセージ表示位置はタグの位置
--style属性でテキストのスタイルを指定
-<h:messages>
--ページ全体のエラーメッセージを表示する
--layout属性でメッセージの出力形式を指定 list | table
**Creating Bookmarkable URLs with the h:button and h:link Tags
-ナビゲーション結果情報とコンポーネントパラメータからハイパーリンクを生成
--パラメータ付きのGETのURL
-<h:link>,<h:button>
--outcome属性で参照リソースを指定
--<f:param>子要素でクエリパラメータを指定
**UsingViewParameters to Configure Bookmarkable URLs
-<f:metadata>の子要素として<f:viewparam>でURLのパラメータを設定する
-コンポーネントのincludeViewParams属性をtrueに設定する
-パラメータ値の設定順序
--Component
--Navigation-case parameters
--View parameters
**Resource RelocationUsing h:output Tags
-JSFがリソース描画するページ上の位置を指定することができる
-<h:outputScript> : スクリプトの描画
---target属性なしの場合はタグ位置に描画
-<h:outputStylesheet> : CSSの描画
--name,target属性で描画位置を指定
---target属性なしの場合は、<head>内に描画
-コンポーネントに@ResourceDependencyアノテーションをつけてコンポーネントに対するリソースを指定できる
--ページ作成者はリソース位置を知らなくていい
----
*Using CoreTags
-イベントハンドリング
|f:actionListener|親コンポーネントにActionリスナを登録|
|f:phaseListener|ページにフェーズリスナを登録|
|f:setPropertyActionListener|フォームサブミット時に管理ビーンに値を設定するリスナを登録|
|f:valueChangeListener|親コンポーネントにValueChangeリスナを登録|
-データ変換
|f:converter|親コンポーネントに任意のコンバータを登録|
|f:convertDateTime|親コンポーネントにDateTimeConverterを登録|
|f:convertNumber|親コンポーネントにNumberConverterを登録|
-Facet
|f:facet|ネストされたコンポーネントを追加|
|f:metadata|親コンポーネントにfacetを登録|
-リスト項目
|f:selectItem|リスト中の１項目|
|f:selectItems|リスト中の項目セット|
-バリデータ
|f:validateDoubleRange|コンポーネントにDoubleRangeValidatorを登録|
|f:selectItems|コンポーネントにLengthValidatorを登録|
|f:validateLongRange|コンポーネントにLongRangeValidatorを登録|
|f:validator|コンポーネントにカスタムバリデータを登録|
|f:validateRegEx|コンポーネントにRegExValidatorを登録|
|f:validateBean|BeanValidatorにローカル値のバリデーションを委譲|
|f:validateRequired|必須チェック|
-その他
|f:attribute|親コンポーネントに属性を追加|
|f:loadBundle|ResourceBundleを特定|
|f:param|MessageFormatにパラメータを代入し、URLにクエリパラメータを追加|
|f:ajax|Ajaxのアクションとコンポーネント（グループ）を紐づける|
|f:event|コンポーネントにComponentSystemEventListenerをインストール|