JSF HTMLタグサンプル

作成 2004/4/7

はじめに
UIForm Component
- h:form
UIOutput Component
UIInput Component
UICommand Component
- h:commandButton
- h:commandLink
UIGraphic Component
- h:graphicImage
UIMessage / UIMessages Component
- h:messages
- h:message
UIData / UIColumn Component
- h:column
- h:dataTable
UIPanel Component
- h:panelGrid
- h:panelGroup
UISelectBoolean Component
- h:selectBooleanCheckbox
UISelectMany Component
UISelectOne Component
参考

はじめに

ここでは、JSFのHTMLタグの"サンプル"を示します。HTMLタグのAPIリファレンスは、例えばSunのJSF RIのドキュメント内にありますが、サンプルがないので、最初どう書いていいのかよくわかりません。ここでは、JSFのHTMLタグの使い方、理解を深めたいと思います。まだ、最低限のサンプルしかありませが、そのうち、もうちょっと複雑な(というか他のオプション属性も使った)サンプルや、補足説明を追加していきたいと思います。

JSFのJSPタグは２種類あります。それはCoreタグとHTMLタグ。HTMLタグはHTMLを出力する場合のタグです。対して、CoreタグはビューがHTMLであるかどうかに関わらないJSF共通のタグです。このページでは、HTMLタグについて見ていきます。

サンプルは次のような形式で記述しています。ソースは、元となるJSFタグを含むJSPのソース。レンダリングはブラウザ上での表示のされ方。HTMLソースは出力されたソースです。

Example1

ソース	レンダリング	HTMLソース
<h:outputLink value="http://muimi.com"> <h:outputText value="muimi.com"/> </h:outputLink>	muimi.com	<a href="http://muimi.com">muimi.com</a>

HTMLソースは、実行させて、ソースを表示して貼り付けたものですが、見やすくするように、フォーマットをととのえています(故意に改行やスペースを入れてある)。

また、レンダリングは、実行結果をコピーして、見た目を再現させたものです。一部、リンク先などを変更してあります(リンク先がないので)。

共通の属性

@TODO

UIForm Component

h:form

Example1

<h:form>
    ....
</h:form>

h:formの中に入力コンポーネントを配置していく。 HTML全体のソースで見るとこうなる。

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>

<html>
<body>

<f:view>
    <h:form>
        <h:inputText value="#{myBean.userId}"/>
    </h:form>
</f:view>

</body>
</html>

UIOutput Component

h:outputText

Example1

ソース	レンダリング	HTMLソース
<h:outputText value="I am hungry"/>	I am hungry	I am hungry

h:outputLink

Example1

ソース	レンダリング	HTMLソース
<h:outputLink value="http://muimi.com"> <h:outputText value="muimi.com"/> </h:outputLink>	muimi.com	<a href="http://muimi.com">muimi.com</a>

h:outputLabel

Example1

ソース	レンダリング	HTMLソース
<h:outputLabel for="userId"> <h:outputText id="userId" value="USERID"/> </h:outputLabel>	USERID	<span id="userId">USERID</span>

h:outputFormat

Example1

ソース	レンダリング	HTMLソース
<h:outputFormat value="I am {0}"> <f:param value="Happy"/> </h:outputFormat>	I am Happy	I am Happy

@TODO もうちょっと現実的な例

UIInput Component

h:inputText

Example1

ソース	レンダリング	HTMLソース
<h:inputText value="#{myBean.userId}"/>		<input type="text" name="_id0:_id1" value="beckham" />

h:inputSecret

Example1

ソース	レンダリング	HTMLソース
<h:inputSecret value="#{myBean.password}"/>		<input type="password" name="_id0:_id1" value="" />

h:inputTextarea

Example1

ソース	レンダリング	HTMLソース
<h:inputTextarea value="#{myBean.comment}"/>	hoge hoge	<textarea name="_id0:_id1">hoge hoge</textarea>

h:inputHidden

Example1

ソース	レンダリング	HTMLソース
<h:inputHidden id="aaa" value="bbb"/>	(レンダリングなし)	<input id="_id0:aaa" type="hidden" name="_id0:aaa" value="bbb" />

UICommand Component

h:commandButton

Example1

静的なアクションの例

ソースレンダリング HTMLソース

<h:commandButton value="PUSH" action="nextPage"/>

<input type="submit" name="_id0:_id1" value="PUSH" />

faces-config.xmlでactionに対応するnavigation-ruleが定義されている必要がある。

<navigation-rule>
    <navigation-case>
        <from-outcome>nextPage</from-outcome>
        <to-view-id>/dummy.jsp</to-view-id>
    </navigation-case>
</navigation-rule>

Example2

動的なメソッドアクションなアクションの例

ソースレンダリング HTMLソース

<h:commandButton value="PUSH" action="#{myBean.doLogin}"/>
Eample1と同じ Example1と同じ

サブミット時に、myBeanの次のような、"Stringを返り値に持つ引数なし"のdoLogin()メソッドが呼ばれる。

public String doLogin(){
    //...
    if(loginOk){ 
        return "ok";
    }else{
        return "ng";
    }
}

返り値の文字列により、navigation-ruleでページが遷移する。

<navigation-rule>
    <navigation-case>
        <from-outcome>ok</from-outcome>
        <to-view-id>/welcome.jsp</to-view-id>
    </navigation-case>
</navigation-rule>
<navigation-rule>
    <navigation-case>
        <from-outcome>ng</from-outcome>
        <to-view-id>/fail.jsp</to-view-id>
    </navigation-case>
</navigation-rule>

補足

指定したactionはHTML FORMのactionに出力されるわけではないようだ。 HTML FORMのactionは現在のFaces JSPページのパスが指定されている。なので、サブミットしてもブラウザ上のURLは変わらない。 (JSFの仕様なのかSunのRI特有の動作なのかは不明)

<form id="_id0" method="post" 
    action="/jsf3/faces/commandButton.jsp" ←現在のFaces JSPページ
    enctype="application/x-www-form-urlencoded">
    <input type="submit" name="_id0:_id1" value="PUSH" />
    <input type="hidden" name="_id0" value="_id0" />
</form>

h:commandLink

Example1

ソース

レンダリング

HTMLソース

<h:commandLink action="nextPage">
    <h:outputText value="PUSH"/>
</h:commandLink>

PUSH

<form id="_id0" method="post" 
    action="/jsf3/faces/commandLink.jsp" 
    enctype="application/x-www-form-urlencoded">
    <a href="#" 
       onclick="document.forms['_id0']['_id0:_id1'].value='_id0:_id1'; 
       document.forms['_id0'].submit(); 
       return false;">PUSH</a>
    <input type="hidden" name="_id0" value="_id0" />
    <input type="hidden" name="_id0:_id1" />
</form>

(太字部分は実際は一行)

commandLinkタグ内に出力するテキストは、普通に文字列をはさんでも<a href="...">ここ</a>に表示されません。

誤った例

<h:commandLink action="nextPage">
    リンクをクリック
</h:commandLink>

actionやnavigation-ruleは <h:commandButton> と同じです。

出力されたHTMLソースが、commandButtonより複雑なのではなんでだろう？

UIGraphic Component

h:graphicImage

Example1

ソース	レンダリング	HTMLソース
<h:graphicImage id="duke" url="/images/duke.gif"/>		<img id="duke" src="/jsf3/images/duke.gif" alt="" />

UIMessage / UIMessages Components

h:messages

Example1

出力

ソースレンダリング HTMLソース

<h:form> <h:inputText value="#{myBean.userId}" required="true"/> <h:commandButton value="PUSH" action="nextPage"/> <h:messages/> </h:form>

Validation Error: Value is required.

<form id="_id0" method="post" action="/jsf3/faces/messages.jsp" enctype="application/x-www-form-urlencoded"> <input type="text" name="_id0:_id1" value="" /> <input type="submit" name="_id0:_id2" value="PUSH" /> Validation Error: Value is required. <input type="hidden" name="_id0" value="_id0" /> </form>

(レンダリングは本当は１行)

h:message

Example1

出力

ソースレンダリング HTMLソース

<h:form> <h:inputText id="userId" value="#{myBean.userId}" required="true"/> <h:commandButton value="PUSH" action="nextPage"/> <h:message for="userId"/> </h:form> </pre>

Validation Error: Value is required.

<form id="_id0" method="post" action="/jsf3/faces/message.jsp" enctype="application/x-www-form-urlencoded"> <input id="_id0:userId" type="text" name="_id0:userId" value="" /> <input type="submit" name="_id0:_id1" value="PUSH" /> Validation Error: Value is required. <input type="hidden" name="_id0" value="_id0" /> </form>

(レンダリングは本当は１行)

message(sなし)の方は、メッセージの対象のコンポーネントを指定できます。

UIData / UIColumn Component

h:dataTable

Example1

ソース

レンダリング

HTMLソース

<h:dataTable 
    value="#{catalog.items}" 
    var="item"
    border="1">

    <h:column>
        <f:facet name="header">
            <h:outputText value="name"/>
        </f:facet>
        <h:outputText  
            value="#{item.name}" />
    </h:column>

    <h:column>
        <f:facet name="header">
            <h:outputText value="price"/>
        </f:facet>
        <h:outputText  
            value="#{item.price}" />
    </h:column>

</h:dataTable>

name	price
item1	100
item2	200
item3	300

<table border="1">
    <thead>
        <tr>
            <th scope="col">name</th>
            <th scope="col">price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>item2</td>
            <td>200</td>
        </tr>
        <tr>
            <td>item3</td>
            <td>300</td>
        </tr>
    </tbody>
</table>

h:column

dataTableを参照

UIPanel Component

h:panelGrid

Example1

出力

ソースレンダリング HTMLソース

<h:panelGrid columns="3"> <f:facet name="header"> <h:outputText value="it's header"/> </f:facet> <h:outputText value="A" /> <h:outputText value="B" /> <h:outputText value="C" /> <h:outputText value="D" /> <h:outputText value="E" /> <f:facet name="footer"> <h:outputText value="it's footer"/> </f:facet> </h:panelGrid>

it's header

it's footer

A B C

D E

<table> <thead> <tr> <th colspan="3" scope="colgroup">it's header</th> </tr> </thead> <tfoot> <tr><td colspan="3">it's footer</td></tr> </tfoot> <tbody> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>D</td> <td>E</td> </tr> </tbody> </table>

Example2

たとえばログイン画面でテキストや入力フィールドの整列用に

出力

ソースレンダリング HTMLソース

<h:panelGrid columns="2"> <h:outputText value="userId" /> <h:inputText value="#{login.userId}"/> <h:outputText value="password" /> <h:inputSecret value="#{login.password}"/> </h:panelGrid>

userId

password

<table> <tbody> <tr> <td>userId</td> <td><input type="text" name="_id0:_id3" /></td> </tr> <tr> <td>password</td> <td><input type="password" name="_id0:_id5" value="" /></td> </tr> </tbody> </table>

h:panelGroup

@TODO 用途が不明

UISelectBoolean Component

h:selectBooleanCheckbox

Example1

出力

ソースレンダリング HTMLソース

<h:selectBooleanCheckbox value="#{profile.alive}" />

<input type="checkbox" name="_id0:_id1" />

profileビーンはaliveプロパティーをもっていること。

    public boolean isAlive() {
        return alive;
    }

    public void setAlive(boolean alive) {
        this.alive = alive;
    }

UISelectMany Component

h:selectManyCheckbox

Example1

出力

ソースレンダリング HTMLソース

<h:selectManyCheckbox value="#{profile.favorites}"> <f:selectItem itemLabel="Movie" itemValue="Movie"/> <f:selectItem itemLabel="Walk" itemValue="Walk"/> <f:selectItem itemLabel="Karate" itemValue="Karate"/> </h:selectManyCheckbox>

Movie Walk Karate

<table> <tr> <td> <label for="_id0:_id1"> <input name="_id0:_id1" value="Movie" type="checkbox"> Movie</input </label> </td> <td> <label for="_id0:_id1"> <input name="_id0:_id1" value="Walk" type="checkbox"> Walk</input> </label> </td> <td> <label for="_id0:_id1"> <input name="_id0:_id1" value="Karate" type="checkbox"> Karate</input> </label> </td> </tr> </table>

profileビーンは、favoriteプロパティーを持つ。

public Object[] getFavorites() {
    return favorites;
}

public void setFavorites(Object[] favorite) {
    this.favorites = favorite;
}

Example2

ソース	レンダリング	HTMLソース
<h:selectManyCheckbox value="#{profile.favorites}"> <f:selectItems value="#{favoriteList}"/> </h:selectManyCheckbox>	Example1と同じ	Example1と同じ

HTMLにベタ書きせずに、selectItemsで値をひぱってくる例。 #{favoriteList}の定義は、faces-config.xmlのmanaged-beanで行う。

<managed-bean>
    <managed-bean-name>favoriteList</managed-bean-name>
    <managed-bean-class>java.util.ArrayList</managed-bean-class>
    <managed-bean-scope>application</managed-bean-scope>
    <list-entries>
        <value-class>javax.faces.model.SelectItem</value-class>
        <value>#{favoriteList0}</value>
        <value>#{favoriteList1}</value>
        <value>#{favoriteList2}</value>
    </list-entries>
</managed-bean>

<managed-bean>
    <managed-bean-name>favoriteList0</managed-bean-name>
    <managed-bean-class>javax.faces.model.SelectItem</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    <managed-property>
        <property-name>label</property-name>
        <value>Movie</value>
    </managed-property>
    <managed-property>
        <property-name>value</property-name>
        <value>Movie</value>
    </managed-property>
</managed-bean>
<managed-bean>
    <managed-bean-name>favoriteList1</managed-bean-name>
    <managed-bean-class>javax.faces.model.SelectItem</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    <managed-property>
        <property-name>label</property-name>
        <value>Walk</value>
    </managed-property>
    <managed-property>
        <property-name>value</property-name>
        <value>Walk</value>
    </managed-property>
</managed-bean>
<managed-bean>
    <managed-bean-name>favoriteList2</managed-bean-name>
    <managed-bean-class>javax.faces.model.SelectItem</managed-bean-class>
    <managed-bean-scope>none</managed-bean-scope>
    <managed-property>
        <property-name>label</property-name>
        <value>Karate</value>
    </managed-property>
    <managed-property>
        <property-name>value</property-name>
        <value>Karate</value>
    </managed-property>
</managed-bean>

ツールならいいが、手書きでこれを書くのはダルいだけである。

@TODO Javaクラスに書いてひっぱってくる方法

@TODO UISelectItemGroup

h:selectManyListbox

Example1

ソース

レンダリング

HTMLソース

<h:selectManyListbox
    value="#{profile.favorites}">
    <f:selectItems
        value="#{favoriteList}"/>
</h:selectManyListbox>

<select name="_id0:_id1" multiple size="3">
    <option value="Movie">Movie</option
    <option value="Walk">Walk</option>
    <option value="Karate">Karate</option>
</select>

selectItem、selectItemsの利用については、 <selectManyCheckbox> を参照

h:selectManyMenu

Example1

ソース

レンダリング

HTMLソース

<h:selectManyMenu
    value="#{profile.favorites}">
    <f:selectItems
        value="#{favoriteList}"/>
</h:selectManyMenu>

<select name="_id0:_id1" multiple size="1">
    <option value="Movie">Movie</option>
    <option value="Walk">Walk</option>
    <option value="Karate">Karate</option>
</select>

selectItem、selectItemsの利用については、 <selectManyCheckbox> を参照

UISelectOne Components

h:selectOneMenu

Example1

ソース

レンダリング

HTMLソース

<h:selectOneMenu
    value="#{profile.mostFavorite}">
     <f:selectItems
         value="#{favoriteList}"/>
</h:selectOneMenu>

<select name="_id0:_id1" size="1">
    <option value="Movie">Movie</option>
    <option value="Walk">Walk</option>
    <option value="Karate">Karate</option>
</select>

selectItem、selectItemsの利用については、 <selectManyCheckbox> を参照

h:selectOneListbox

Example1

ソース

レンダリング

HTMLソース

<h:selectOneListbox
    value="#{profile.mostFavorite}">
     <f:selectItems
         value="#{favoriteList}"/>
</h:selectOneListbox>

<select name="_id0:_id1" size="3">
    <option value="Movie">Movie</option>
    <option value="Walk">Walk</option>
    <option value="Karate">Karate</option>
</select>

selectItem、selectItemsの利用については、 <selectManyCheckbox> を参照

h:selectOneRadio

Example1

ソース

レンダリング

HTMLソース

<h:selectOneRadio
    value="#{profile.mostFavorite}">
     <f:selectItems
         value="#{favoriteList}"/>
</h:selectOneRadio>

Movie

Walk

Karate

<table>
    <tr>
        <td>
            <label for="_id0:_id1">
            <input type="radio" name="_id0:_id1" value="Movie"> Movie</input>
            </label>
        </td>
        <td>
            <label for="_id0:_id1">
            <input type="radio" name="_id0:_id1" value="Walk"> Walk</input>
            </label>
        </td>
        <td>
            <label for="_id0:_id1">
            <input type="radio" name="_id0:_id1" value="Karate"> Karate</input>
            </label>
        </td>
    </tr>
</table>

selectItem、selectItemsの利用については、 <selectManyCheckbox> を参照

参考

Sun JSF RI タグリファレンス
http://java.sun.com/j2ee/javaserverfaces/1.0/docs/tlddocs/index.html

Sun J2EE 1.4 Tutorial
http://java.sun.com/j2ee/1.4/docs/tutorial/doc/index.html
Chapter 18 Using the HTML Component Tags

Exadel JavaServer Faces HTML Tags
http://www.exadel.com/tutorial/jsf/jsftags-guide.html
HTMLタグサンプル。まとまってます。

次のページ(サンプルアプリケーション)

Back Top