JSF 2のpanelGridの例

getdocs

4年前

JSFでは、「

h:panelGrid

」タグを使用して、JSFコンポーネントを行と列のレイアウトで左から右、上から下に配置するためのHTML表タグを生成します。

たとえば、JSFコンポーネントを次のようなHTMLテーブル・タグでグループ化していました。

<table>
<tbody>
<tr>
    <td>
        Enter a number :
    </td>
    <td>
        <h:inputText id="number" value="#{dummy.number}"
            size="20" required="true"
            label="Number" >
            <f:convertNumber/>
        </h:inputText>
    </td>
    <td>
        <h:message for="number" style="color:red"/>
    </td>
</tr>
</tbody>
</table>

”

h:panelGrid

“タグを使用すると、HTMLテーブルタグを入力せずに、上記の同じレイアウトを得ることができます。

h:panelGrid **

<h:panelGrid columns="3">

    Enter a number :

    <h:inputText id="number" value="#{dummy.number}"
        size="20" required="true"
        label="Number" >
        <f:convertNumber/>
    </h:inputText>

    <h:message for="number" style="color:red"/>

</h:panelGrid>

注意** “column”属性はオプションで、JSFコンポーネントのレイアウトに必要な列の数を定義します。デフォルトは1です。

h:panelGridの例

「

h:panelGrid

」タグを使用してコンポーネントを適切にレイアウトする方法を示すJSF 2.0の例

1.マネージドBean

デモ用のダミーBean。

package com.mkyong;

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;

@ManagedBean(name="dummy")
@SessionScoped
public class DummyBean implements Serializable{

    int number;

    public int getNumber() {
        return number;
    }

    public void setNumber(int number) {
        this.number = number;
    }

}

2. JSFページ

”

h:panelGrid

“タグを使用してJSFコンポーネントを3列のレイアウトに配置するJSF XHTMLページ。

<?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"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:c="http://java.sun.com/jsp/jstl/core"
      >
    <h:body>

        <h1>JSF 2 panelGrid example</h1>

    <h:form>
        <h:panelGrid columns="3">

            Enter a number :

            <h:inputText id="number" value="#{dummy.number}"
                size="20" required="true"
                label="Number" >
                <f:convertNumber/>
            </h:inputText>

            <h:message for="number" style="color:red"/>

        </h:panelGrid>

        <h:commandButton value="Submit" action="result"/>

    </h:form>
    </h:body>
</html>

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">

<body>
    <h1>JSF 2 panelGrid example</h1>
    <form id="j__idt6" name="j__idt6" method="post"
        action="/JavaServerFaces/faces/default.xhtml"
                enctype="application/x-www-form-urlencoded">
    <input type="hidden" name="j__idt6" value="j__idt6"/>

    <table>
    <tbody>
    <tr>
        <td>
            Enter a number :
        </td>
        <td>
            <input id="j__idt6:number" type="text"
                              name="j__idt6:number" value="0" size="20"/>
        </td>
        <td></td>
    </tr>
    </tbody>
    </table>

    <input type="submit" name="j__idt6:j__idt10" value="Submit"/>
        <input type="hidden" ..../>
    </form>
</body>
</html>