2.2 入出力ページとUIコンポーネント

JavaServer Faces ユーザーズガイド

2.2 入出力ページとUIコンポーネント

JavaServer FacesではUIコンポーネントを組み合わせて画面を作成します。 UIコンポーネントは、フォーム、テキストフィールド、ボタンなどの画面を構成するコンポーネントです。それぞれのUIコンポーネントには対応するJSP拡張タグが用意されており、そのJSP拡張タグをJSPファイルに記述することによって画面を作成できます。例えば、テキストフィールドのUIコンポーネントを表示するには、JSPファイルにh:inputTextタグを記述します。画面を作成するJSPファイルを入出力ページと呼びます。

JavaServer Facesが標準で提供するJSP拡張タグには、 JavaServer FacesコンポーネントタグライブラリとJavaServer Faces基本タグライブラリがあります。コンポーネントタグは、テキストフィールド、コマンドボタンなどユーザインタフェースのコンポーネントのタグです。基本タグは、JavaServer Facesのタグ全体を囲むf:viewタグやイベントリスナを設定するタグなど、アプリケーションや画面の構成および動作を指定します。これらのタグライブラリは、一般的なカスタムタグライブラリと同じように使用することができます。

本製品では、JavaServer Facesが標準で提供するタグのほかに、UJIタグと呼ぶタグライブラリを提供しています。UJIタグについては、「UJIタグを利用した開発」を参照してください。

以下に入出力ページの記述例を示します。コメントで示したように、値の割り当て、バリデータの指定、イベント処理の指定を行っています。


<HTML>
<HEAD> <TITLE>Sample1</TITLE> </HEAD>
<!-- JavaServer Facesタグライブラリの使用を宣言します -->
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<BODY>
<!-- JavaServer Faces UIコンポーネントタグは f:view の中に記述します -->
<f:view>
  <H2>Sample</H2>
  <h:form>
    <!-- 値を myBean の userId プロパティに割り当てます -->
    <h:inputText value="#{myBean.userId}" >
      <!-- バリデータで最大文字数を指定します -->
      <f:validateLength maximum="10"/>
    </h:inputText>
    <!-- ボタンが押された場合に myBean の doAnyActionメソッドを呼びます -->
    <h:commandButton action="#{myBean.doAnyAction}" value="GO"/>
  </h:form>
</f:view>
</BODY>
</HTML>

上の記述中のUIコンポーネントは、予め用意されているレンダラによってHTMLに変換され以下のように表示されます。

Sample

JavaServer Facesでは、UIコンポーネントとUIコンポーネントを表示するレンダラは別に設計されています。これにより、レンダラを変えるだけでUIコンポーネントを様々な表示方法に対応させることが可能になります。レンダラは、UIコンポーネントを特定のクライアントにふさわしい形式で表示するように作成されますが、 UIコンポーネントをHTMLで表示するレンダラはJavaServer Facesに予め用意されています。

入出力ページの作成の詳細は「入出力ページの作成」を参照して下さい。