JSFを作ってみる
ではJSFを作ってみましょう。NetBeans 6.9.1を立ち上げ、前回作成したサンプルプロジェクトに対して、JSFページを追加します。
左パネルからWebを選び、JSFページを選択します。次に作成するまでの確認がいくつか出ますが、そのままで［完了］ボタンを押します。すると、次のリストにあるJSFの雛形が生成されます。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
Hello from Facelets
</h:body>
</html>
このように、<h:…>と、HTMLでは見慣れない記載があります。このh:や、後ほど紹介するf:の記述（これを名前空間、namespaceと言います）は、JSFでは必ず使うことになります。このできあがったFaceletsに対して、ブラウザからリクエストをすると次のようになります。
リクエストするURLは、例えば「http://localhost:8080/SampleWebApp/faces/samplejsf.xhtml」のように、/faces/のパスをつけます。
なお、NetBeansでは、JSFを作成すると、利用するURLである/faces/の定義を、アプリケーション定義ファイルであるweb.xmlに対して自動的に生成します。この/faces/のパスを呼ぶと、Javaコンテナ内にてJSFやFaceletsの加工処理を行い、ブラウザへHTMLを返すようになります。
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Facelet Title</title></head><body>
Hello from Facelets
</body>
</html>
このように、<h:>の部分からHTMLのタグが生成され、通常のHTMLが表示されているのがわかるでしょうか。この例では、単純にタイトルとテキストを出しているだけなので、何が便利なのかがわからないかと思います。以下に、JSFが提供する機能を紹介していきます。
JSFが持つ機能
では、JSFでは何が扱えるのでしょうか。大きくまとめるとHTMLの標準ユーザーインターフェースに便利な機能を付け加えた名前空間h:、Ajax用に機能拡張された名前空間f:、自由に拡張可能なComposite Component、cc:に分けられます。
それぞれ名前空間が割り振られているので、名前空間と合わせて使用します。なお、NetBeansでは全てのタグの入力候補を出してくれるので、名前空間で悩むことはないでしょう。
今回紹介するのは、標準インターフェースが定義されているh:のものです。f:やcc:は次回以降で紹介していきます。以下にh:の名前空間が与えられているタグ一覧と機能概要を示します。
| タグ名 | 概要 |
| <h:body> | HTMLのBODY部を作る。JSFを利用する場合には必ず設定する |
| <h:button> | 通常のボタンを作る。画像ファイルを指定した場合は画像が表示され、ボタンとして使用できる |
| <h:column> | dataTableの列を定義する。<h:dataTable>の中で利用される |
| <h:commandButton> | h:buttonの機能に送信機能をつけることができるもの。後述するf:タグの機能を追加することができる。Ajaxを利用する場合に利用 |
| <h:commandLink> | submit（入力フォームの送信）ボタンとして機能するアンカーを作る |
| <h:dataTable> | IteratorやMapなど、Collectionフレームワークのオブジェクトを、tableタグでグリッドの表示をする。value属性に表示したいオブジェクト、var属性で行データを格納する一時変数名を定義する |
| <h:form> | HTMLのform要素。 |
| <h:graphicImage> | 画像表示をするimgタグを作る |
| <h:head> | HTMLのヘッダー（head）部を作る。JSFを利用する場合には必ず設定する |
| <h:inputHidden> | <input type="hidden">要素を作る。画面には描画されないが、サーバへの送信パラメータになる |
| <h:inputSecret> | パスワード入力用の項目を作る。<input type="password">が生成される |
| <h:inputText> | １行テキストの入力項目を作る。<input type="text">が生成される |
| <h:inputTextarea> | 複数行の入力項目を作る。<textarea>が生成される |
| <h:link> | 通常のアンカー要素を作る。特に特殊な機能はもっていないため、通常はoutputlinkや後述するf:タグを使ったAjaxの機能を利用をする場合にはcommandLinkを利用する |
| <h:message> | ページ内のh:タグやf:タグで指定した要素（コンポーネント）のエラーメッセージを表示する。主に入力チェックのエラーに利用 |
| <h:messages> | エラーメッセージを全て出力する |
| <h:outputFormat> | <span>要素を作り、サニタイズ済のテキストやオブジェクトを画面へ出力する。出力時のスタイルも定義できる |
| <h:outputLabel> | <label>要素を作り、for属性で指定した要素に対して関連付けをする |
| <h:outputLink> | アンカーを作成する。送信されるパラメータは自動的にURLエンコードされる |
| <h:outputScript> | <script>要素を作る。Ajaxに関する要素を作るf:タグと共に使われる |
| <h:outputStylesheet> | スタイルシート参照用の<link>要素を作る |
| <h:outputText> | <span>要素を作り、その中に指定したテキストやオブジェクトの値を出力する |
| <h:panelGrid> | テーブル要素を作る。dataTableと異なり動的な値（オブジェクト）を表示することはできない |
| <h:panelGroup> | panelGridの中で使われる。テーブルの項目を結合する |
| <h:selectBooleanCheckbox> | 単一のチェックボックスを作る |
| <h:selectManyCheckbox> | 複数の項目を選択できるチェックボックスを作る |
| <h:selectManyListbox> | リストボックスを作る |
| <h:selectManyMenu> | 複数の項目を選択できるセレクトボックスを作る。表示は単一行になる |
| <h:selectOneMenu> | プルダウン形式の入力項目を作る |
| <h:selectOneRadio> | ラジオボタンで選択する項目を作る |
| <h:selectItem> | <select～>内で利用する選択項目。itemValueに送信される値、itemLabelで表示されるテキストを設定する |
このように、従来のHTMLタグよりもやや長い名前が振られており、タグがもつ機能の内容が理解しやすいものになっています。また、従来のHTMLにない機能も同時に含んでいます。
次に、具体的なサンプルを交えてJSF独自のタグの1つであるdataTableを紹介します。
