JSPページにパネル・グリッドを作成するには、UIPanel
コンポーネントに対して、HTML表をレンダリングするpanelGrid
タグを使用します。このコンポーネントは、他のコンポーネントに対するコンテナとして機能し、ページ上の他のコンポーネントの表示位置を制御します。ただし、セル内で使用できるコンポーネントは1つのみです。したがって、セル内で複数のコンポーネントを使用する場合は、panelGroup
タグを使用する必要があります。このタグは、それ自体が複数コンポーネントに対するコンテナです。
たとえば、従業員の名前、部門および給与をユーザーが入力できるフォームを作成する場合、JSPのコードは次のようになります。
<h:panelGrid columns="2">
<h:outputLabel value="Employee Name"/>
<h:inputText id="inputText0" value="#{employees.ename}"
required="true"/>
<h:outputLabel value="Department"/>
<h:inputText id="inputText1" value="#{employees.dept}"
required="true"/>
<h:outputLabel value="Commission"/>
<h:inputText id="inputText2" value="#{employees.comm}"
required="false"/>
<h:outputLabel value="Salary"/>
<h:inputText id="inputText3" value="#{employees.salary}"
required="true"/>
</h:panelGrid>
columns
属性を使用してグリッド内の列数を設定します。ただし、行数は明示的に設定しません。行数は、列数とコンポーネント数によって決まります。パネル・グリッドがレンダリングされるときに、列が設定され、各コンポーネントが、コード内に記述されている順序でグリッド内に配置されます。前述の例では、グリッド内に2つの列があるため、最初の2つのコンポーネントが最初の行に表示されます。次の2つのコンポーネントが次の行に配置され、残りのコンポーネントも同様に配置されます。コンポーネントは8つであるため、4行になります。グリッドは次のようにレンダリングされます。
しかし、columns
属性を"3"に設定すると、次に示すように、3つのコンポーネントが3行に表示されます。
したがって、一部の行で他の行より多いコンポーネントを表示する場合は、panelGroup
タグを使用します。このタグを使用すると、セル内のコンポーネントをグループ化できます。前述の例を使用すると、Name、DepartmentおよびSalaryの情報は必須ですが、Commissionの情報は必須ではないため、必須情報に対しては検証エラー・メッセージを表示し、Commissionに対しては表示しないようにします。列の属性を"3"に設定し、必須の各inputText
タグの後にmessage
タグを挿入すると、パネルは次のように表示されます。
パネルを正しく表示するには、列属性を"2"に設定し、panelGroup
タグを使用して、inputText
と関連message
コンポーネントをグループ化します。コードは、次のようになります。
<h:panelGrid columns="2">
<h:outputLabel value="Employee Name"/>
<h:panelGroup>
<h:inputText id="inputText0" value="#{employees.ename}"
required="true"/>
<h:message for="inputText0"/>
</h:panelGroup>
<h:outputLabel value="Department"/>
<h:panelGroup>
<h:inputText id="inputText1" value="#{employees.dept}"
required="true"/>
<h:message for="inputText1"/>
</h:panelGroup>
<h:outputLabel value="Commission"/>
<h:inputText id="inputText2" value="#{employees.comm}"
required="false"/>
<h:outputLabel value="Salary"/>
<h:panelGroup>
<h:inputText id="inputText3" value="#{employees.salary}"
required="true"/>
<h:message for="inputText3"/>
</h:panelGroup>
</h:panelGrid>
この結果、パネルは次のように正しく表示されます。
Copyright © 1997, 2007, Oracle. All rights reserved.