solutionlog @ ウィキ
solutionlog @ ウィキ

Java > JavaEE > WebTier > UsingJSF

色々な種類のコンポーネントとコアタグを使ってページを作成する方法

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をインストール
「UsingJSF」をウィキ内検索
最終更新：2012年08月21日 20:52
ツールボックス

下から選んでください:

新しいページを作成する
ヘルプ / FAQ もご覧ください。