Facelet ページへのコンポーネントの追加

Facelet ページを作成した後、パレットから Web ページに UI コンポーネントをドラッグすることでページのコンテンツを作成することができます。

始める前に

  1. Facelet 対応の Web プロジェクトの作成を行います。
  2. Facelet Web ページの作成 を行います。

このタスクについて

エディターで XHTML ファイルが開いた後、新規ページの隣にある「パレット」ビューで、「標準 Faces コンポーネント」ドロワーが開きます。「パレット」ビューの「Facelet タグ」ドロワーには、XHTML ファイルにドラッグ・アンド・ドロップすることができるすべての Facelet UI コンポーネントが含まれています。 パレットが表示されない場合は、「ウィンドウ」 > 「ビューの表示」 > 「基本」 > 「パレット」をクリックします。
「標準 Faces コンポーネント」ドロワー
「Facelet タグ」ドロワー
表 1. 「標準 Faces コンポーネント」ドロワー
コンポーネント タグ 説明
データ・テーブル <h:dataTable> 行がデータ・レコードに対応し、 列がフィールドまたはカテゴリーに対応する、データのテーブルを作成します。 ページ制御、ヘッダーおよびフッターがフィーチャーに含まれ、 行選択とアクションをサポートします。
パネル - グループ <h:panelGroup> その他のコンポーネント (リンク、ボタン、サブパネル、セパレーターなど) を、追加のレイアウトを導入しないでグループ化します。 このコンポーネントは、AJAX 更新など、1 つのアクションを複数のコンポーネントに対して同時に実行する必要がある場合に使用します。
パネル - グリッド <h:panelGrid> 他のコンポーネント (ハイパーリンク、ボタン、セパレーターなど) をグリッドに配置するために使用する HTML テーブルを作成します。
ボタン - ナビゲート <h:button> クリックされたときに GET 要求が生成されるボタンを作成します。 要求の宛先を決めるのに、ナビゲーション規則を使用することができます。
ボタン - コマンド <h:commandButton> テキストやイメージが含まれているプッシュボタンを作成します。 ボタンが submit タイプである場合、ボタンをクリックするとフォームが送信され、 コマンド (アクション) がサーバーに渡されます。 このボタンによって、アクションを実行させることができます。
リンク - ナビゲート <h:link> リンクがクリックされたときに GET 要求を生成するアンカーを作成します。 ナビゲーション規則を使用して、リンク先を決定できます。
リンク - コマンド <h:commandLink> フォームを送信してアクションを実行するリンクを挿入します。
リンク <h:outputLink> 指定された URL に移動するハイパーリンクを表示します。
入力 <h:inputText> 数値、日付、時刻、またはフォーマット済み文字列などのテキストまたはフォーマット済みテキストを入力するために使用される、単一行入力コントロールを作成します。 このコントロールには、キー・ストローク管理、先行入力サポート、ヘルパー・ボタンなどの、 さまざまな種類の入力支援コンポーネントを付加することができます。 以下のタイプのデータ用に入力フィールドを作成できます。
  • ストリング
  • 数値
  • 日付/時刻
入力 - テキスト領域 <h:inputTextarea> 長い、フォーマットされていないテキストを入力するために使用される、 複数行入力コントロールを作成します。
入力 - パスワード <h:inputSecret> パスワード入力フィールドをページに追加します。 このフィールドに入力されたテキストは変更された形式 (通常はアスタリスク) でユーザーにエコーされ、ブラウザーは他のプログラムに対し、パスワードが平文としてアクセスされないように保護しようとします。
チェック・ボックス <h:selectBooleanCheckbox> ラベルのない Boolean 型チェック・ボックスを作成します。
チェック・ボックス・グループ <h:selectManyCheckbox> ラベル付きのチェック・ボックスのセットを作成します。 ユーザーは、ボタンのリストからゼロ個またはそれ以上のボタンを選択できます。
ラジオ・ボタン・グループ <h:selectOneRadio> ラベル付きのラジオ・ボタンのグループを作成します。 ユーザーは、ボタンのリストから 1 つを選択できます。
コンボ・ボックス <h:selectOneMenu> ユーザーが 1 つの項目を選択するドロップダウン・コンボ・ボックスを表示します。 コンボ・ボックスの入力フィールドは直接編集することはできません。
リスト・ボックス - 単一選択 <h:selectOneListbox> ユーザーが単一の項目を選択するリスト・ボックスを挿入します。
リスト・ボックス - 複数選択 <h:selectManyListbox> ユーザーが複数の項目を選択できるリスト・ボックスを挿入します。
出力 <h:outputText> ユーザーが変更できない出力テキストを作成します。 テキストは、静的にすることもできますし、 データ・ソースに結合することもできます。 出力コンポーネントは、 データ・ソースのデータを表示できるだけでなく、 他のほとんどの Faces コンポーネント内で、 静的なテキストを (例えば入力フィールドのラベルとして) 表示させることもできます。
出力コンポーネントを追加するときは、 以下に挙げる「プロパティー」ビューの 出力コンポーネント用フォーマットの中から、1 つ選択してください。
  • ストリング
  • 数値
  • 日付/時刻
出力 - フォーマット済みテキスト <h:outputFormat> フォーマットされたメッセージをページに出力します。このメッセージは、データ・ストレージから作られる 静的テキストと動的データの組み合わせである可能性があります。
イメージ <h:graphicImageEx> ページ上にイメージを表示します。 また、データ・ソースからイメージを表示させることもできます。
ラベル <h:outputLabel> アクセシビリティー出力ラベルを挿入します。
入力コンポーネント・エラーの表示 <h:message> 条件付きで表示されるエラー・テキストを挿入します。 エラーは、特定のコンポーネントに関連付けられます。
フォーム内エラーの表示 <h:messages> ページ上でエラーが発生したときに、 条件付きで表示されるエラー・メッセージを挿入します。 ページ全体のエラーを表示します。
スタイルシート <h:outputStylesheet> スタイルシートへのリンクを追加します。
スクリプト <h:outputScript> JavaScript ファイルへの参照を追加します。
メタデータ <f:metadata> パラメーターを照会ストリングから取得して変数内に格納する、ビュー・パラメーター (<f:viewParam>) を保持します。 ビュー・パラメーターは、GET 要求による Facelet ビューのブックマークをサポートします。
表 2. 「Facelet タグ」ドロワー
コンポーネント タグ 説明
コンポーネント <ui:component> 新しい UIComponent インスタンスを、すべての子コンポーネントおよびフラグメントのルートとして JSF コンポーネント・ツリーに挿入します。 タグの外側にあるコンポーネントおよびフラグメントは、Facelets ビュー・ハンドラーでは視覚化されません。 タグの内側にあるコンポーネントおよびフラグメントは、ビュー・ハンドラーで視覚化されます。
フラグメント <ui:fragment> 新しい UIComponent インスタンスを、すべての子コンポーネントおよびフラグメントのルートとして JSF コンポーネント・ツリーに挿入します。 タグの外側にあるコンポーネントおよびフラグメントは、Facelets ビュー・ハンドラーでは視覚化されません。 タグの内側にあるコンポーネントおよびフラグメントは、ビュー・ハンドラーで視覚化されます。
構成 <ui:composition> 別の Facelet に含まれるコンテンツをラップします。 タグの外側にあるコンテンツは、Facelets ビュー・ハンドラーでは視覚化されません。 タグの内側にあるコンテンツは、ビュー・ハンドラーで視覚化されます。
デコレート <ui:decorate> 別の Facelet から組み込まれたコンテンツをデコレートします。 デコレート・タグの外側にあるコンテンツは、Facelets ビュー・ハンドラーで表示されます。 デコレート・タグの内側にあるコンテンツは、関連付けられたテンプレートに渡されます。
定義 <ui:define> テンプレートに挿入される名前付きコンテンツを定義します。
インクルード <ui:include> テンプレートを現行ページの一部として組み込みます。
挿入 <ui:insert> 別の Facelet によって定義された名前付きコンテンツ・エレメントを宣言します。
パラメーター <ui:param> Facelet ページ間でオブジェクトを名前付き変数として渡します。このタグは、<ui:composition><ui:decorate>、または <ui:include> の子にすることができます。
デバッグ <ui:debug> テストの際に、JSF コンポーネント・ツリーおよびスコープ済み変数に関するデバッグ情報をブラウザーに表示します。 「プロパティー」ビューで、CTRL + Shift と一緒に使用することでデバッグ・ウィンドウを開くためのホット・キーを定義することができます。
削除 <ui:remove> コンパイル時に、XML コンテンツのブロックを Facelet から削除します。 このタグには属性がありません。 このタグは、レンダリングされたページからタグを削除する必要があることを示すために、しばしば jsfc 属性と共に使用されます。
ヒント: 削除タグには属性がありません。そのため、「プロパティー」ビューは空になります。
繰り返し <ui:repeat> 値をバインドする EL 式として、Facelet ページに公開されたデータの集合に対して反復処理を行います。
子の挿入 <composite:insertChildren> コンポジット・コンポーネントで使用されます。 コンポーネントを使用する Web ページのコンポジット・コンポーネント・タグ内の子コンポーネントまたはテンプレート・テキストを、コンポジット・コンポーネントの中の、このタグを置いた場所に挿入できます。 このタグは、コンポジット・コンポーネント内で複数回使用しないでください。
ファセットの挿入 <composite:insertFacet> コンポジット・コンポーネントで使用されます。 コンポーネントを使用する Web ページのコンポジット・コンポーネント・タグ内に定義されたファセットを、 このタグが配置された場所の親タグに挿入または移動します。 コンポジットのいずれかの子の下の、通常は f:facet タグを配置する場所に、insertFacet タグを配置します。
ファセットのレンダリング <composite:renderFacet> コンポジット・コンポーネントで使用されます。 コンポジット・コンポーネント本体に定義されたファセットを、現在の位置に表示します。 ヘッダーやフッターなど、コンポジット自体の中のファセットを入れる場所にこのタグを配置します。
他の JSF 2.0 タグはパレットで使用できませんが、「ソース」ペインで追加したり、 「プロパティー」ビューでコンポーネントを編集したりできます。
表 3. 他の JSF 2.0 タグ
タグ 説明 タグの追加
<f:ajax> Ajax の動作を使用可能にします。 「プロパティー」ビューで、コンポーネントの 「Ajax」タブをクリックして、 「Ajax サポート」チェック・ボックスを選択します。
<f:event> システム・イベント・リスナーをコンポーネントへ追加します。 「クイック編集」ビューで、以下のいずれかのイベント・タイプを選択して、リスナーを追加します。
  • preRenderComponent
  • preRenderView
  • postAddToView
  • preValidate
  • postValidate
<f:validateBean> Bean Validation Framework の検証グループを指定します。 「プロパティー」ビューで、ビュー・パラメーターを追加した後に、 「検証」タブで「Bean 検証を使用」を選択します。 特定のコンポーネントを検証するときに使用される「検証グループ」を指定します。検証グループは、完全修飾クラス名です。他のすべての <h:input> および <h:select> タグのために、このタグを「検証」タブから挿入することもできます。
<f:validateRegEx> 入力コンポーネントの値を正規表現パターンに照らして妥当性検査します。 「プロパティー」ビューで、ビュー・パラメーターを追加した後に、 「検証」タブの「制約」リストで、入力コンポーネントが許可する文字のタイプを選択します。
<f:validateRequired> 親コンポーネントの必須属性を設定します。 「プロパティー」ビューで、ビュー・パラメーターを追加した後に、 「検証」タブで「値を必須にする」を選択します。 他のすべての <h:input> および <h:select> タグのために、このタグを「検証」タブから挿入することもできます。
<f:viewParam> 着信要求のパラメーター値をビュー内のコンポーネントにマップします。 「メタデータ」コンポーネントを「標準 Faces コンポーネント」ドロワーからユーザーのページにドラッグします。 「プロパティー」ビューで、「追加」を選択してビュー・パラメーターを追加します。
Facelet タグについて詳しくは、 http://java.sun.com/javaee/javaserverfaces/2.0/docs/pdldocs/facelets/index.htmlを参照してください。

次のタスク

ページにコンポーネントを追加した後、「プロパティー」ビューでコンポーネント・プロパティーを構成することができます。 「プロパティー」ビューを開くには、 「ウィンドウ」 > 「ビューの表示」 > 「プロパティー」をクリックします。

フィードバック