Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました(1)

JSFはどうもIDEはNetBeansを使うのが相性が良いようです。

が、一旦Eclipseで勉強し始めたのでとことんEclipseでJSFの勉強をしようと思います。

EclipseでJSFプロジェクトを作成する」で作成したプロジェクトでFaceletsタグを一通り使ってみます。

色々タグがあるようですが、まずタグを使うにはネームスペースを宣言しなければいけません。

<h:~~で始まるタグのネームスペース宣言は以下の通りです。

以下はHTML構成要素として基本だと思うので一覧のみとします。

<h:head></h:head> <head></head>
<h:body></h:body> <body></body>
<h:form></h:form> <form></form>

<h:inputText/>

まず<h:inputText/>タグですが1行だけのテキストボックスを表示します。

この入力部品はリクエストでビジネスロジックに渡せるので<h:form>~</h:form>内に記述するのが一般的だと思います。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

<h:inputTextarea/>

次に<h:inputTextarea/>タグですが、これは複数行のテキストエリアを表示します。

この入力部品も

リクエストでビジネスロジックに渡せるので<h:form>~</h:form>内に記述するのが一般的だと思います。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

<h:inputHidden/>

ウェブアプリケーションでよくあるhidden項目です。画面には表示したくないがビジネスロジックに渡したい時などによく利用します。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

hidden項目なので表示は何もされていませんがソースは以下のようにhidden項目が記述されるようです。

<h:outputText/>

h:outputTextは単にテキストを出力したい時に使用するようです。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

<h:outputLabel/>

h:outputTextと似ていますがソース上はlabel要素で囲まれます。

実際のソースは以下のように出力されます。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

<h:selectBooleanCheckbox/>

<h:selectBooleanCheckbox/>タグは1つのチェックボックスを表示します。

実際のソースは以下のように出力されます。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

<h:selectManyCheckbox></h:selectManyCheckbox>

<h:selectManyCheckbox>タグは、一つのタグでは作成できません。こういう複数選択するような入力部品はf:~~で始まるタグが必要になります。

ネームスペースを以下のように修正します。

これでindex.xhtmlを以下のように修正します。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

<h:commandButton/>

先ほど紹介した複数チェックボックスを別画面に遷移して表示したい場合、ボタンなどの入力部品で別画面に遷移します。それが<h:commandButton/>です。

また、画面遷移する際に複数チェックボックスをバッキングビーンとバインドするには配列を使用します。

まず、index.xhtmlを以下のように修正します。

入力部品にバインドするバッキングビーン(Java)です。toString()をオーバーライドします。

Tekito001.java

遷移後画面のout.xhtmlは以下の通りです。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

送信ボタン押下時の遷移画面です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

<f:selectItems/>

複数チェックボックスの際に<f:selectItem/>を使用しましたが<f:selectItems/>を指定することによってチェックボックスを複数作成することができます。

複数作成するにはバッキングビーンでLinkedHashMapを使用して作成します。

index.xhtmlを以下のように修正します。

index.xhtml

1行で済むのですっきりします。

そのかわりバッキングビーンでチェックボックスを生成する必要があります。

以下、バッキングビーンです。

Tekito001.java

これでindex.xhtmlにアクセスします。

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

送信ボタン押下後の遷移画面です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

SelectItemを使用してチェックボックスを作成する

複数チェックボックスを作成するにはSelectItem(javax.faces.model.SelectItem)を使用して作成する方法もあります。

というかこれが一般的かなと思います。

バッキングビーンのみを変更します。

Tekito001.java

以下、表示例です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

送信ボタン押下時の遷移画面です。

Eclipseで作成したJSFプロジェクトでFaceletsタグの使い方を纏めました

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA