リストボックスなどの選択部品

JSF2.0

今回は選択系の部品についてです。

【前提条件】

[環境]

【概要】

チェックボックスやリストボックス、ラジオボタンと
JSFの標準のカスタムタグでサポートされています。

難しい設定は不要で、
XHTMLとManagedBeanのみで作成できます。

【サンプルコード】

ページ

まずはページ側です。

<?xml version="1.0" encoding="Windows-31J" ?>
<!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:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"> 
    <f:view>
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=Windows-31J" />
            <title>選択系の部品</title>
            <style>
            <!--
                .width-value {
                    margin-bottom: 10px;
                }
            -->
            </style>
        </h:head>
        <h:body>
            <h:form id="sample">
                <div class="width-value" style="background-color : #FFDDDD">
                    <h:selectBooleanCheckbox value="#{selectSample.checkValue}" />サンプル
                </div>
                <div class="width-value" style="background-color : #DDFFDD">
                    <h:selectOneListbox value="#{selectSample.selectValue}">
                        <f:selectItem itemLabel="サンプル1" itemValue="1" />
                        <f:selectItem itemLabel="サンプル2" itemValue="2" />
                        <f:selectItem itemLabel="サンプル3" itemValue="3" />
                    </h:selectOneListbox>
                </div>
                <div class="width-value" style="background-color : #DDDDFF">
                    <h:selectOneMenu value="#{selectSample.menuValue}">
                        <f:selectItem itemLabel="サンプル1" itemValue="1" />
                        <f:selectItem itemLabel="サンプル2" itemValue="2" />
                        <f:selectItem itemLabel="サンプル3" itemValue="3" />
                    </h:selectOneMenu>
                </div>
                <div class="width-value" style="background-color : #FFFFDD">
                    <h:selectOneRadio value="#{selectSample.radioValue}">
                        <f:selectItem itemLabel="サンプル1" itemValue="1" />
                        <f:selectItem itemLabel="サンプル2" itemValue="2" />
                        <f:selectItem itemLabel="サンプル3" itemValue="3" />
                    </h:selectOneRadio>
                </div>
                <div class="width-value"  style="background-color : #FFDDFF">
                    <h:selectManyCheckbox value="#{selectSample.checkList}">
                        <f:selectItem itemLabel="サンプル1" itemValue="1" />
                        <f:selectItem itemLabel="サンプル2" itemValue="2" />
                        <f:selectItem itemLabel="サンプル3" itemValue="3" />
                    </h:selectManyCheckbox>
                </div>
                <div class="width-value" style="background-color : #DDFFFF">
                    <h:selectManyListbox value="#{selectSample.selectList}">
                        <f:selectItem itemLabel="サンプル1" itemValue="1" />
                        <f:selectItem itemLabel="サンプル2" itemValue="2" />
                        <f:selectItem itemLabel="サンプル3" itemValue="3" />
                    </h:selectManyListbox>
                </div>
                <div class="width-value" style="background-color : #DDDDDD">
                    <h:selectManyMenu value="#{selectSample.menuList}">
                        <f:selectItem itemLabel="サンプル1" itemValue="1" />
                        <f:selectItem itemLabel="サンプル2" itemValue="2" />
                        <f:selectItem itemLabel="サンプル3" itemValue="3" />
                    </h:selectManyMenu>
                </div>
                <div>
                    <h:commandButton action="#{selectSample.outValues()}" value="実行" />
                </div>
            </h:form>
        </h:body>
    </f:view>
</html>

単一の選択のみのh:selectOne系のタグと
複数の選択ができるh:selectMany系のタグ、
単一のチェックボックスのタグがあります。

value属性には対応するManagedBeanのプロパティを指定します。

選択項目はタグを使用します。
選択値はitemValue属性に指定し、ラベルはitemLabel属性に指定します。

ManagedBean

つづいて、ManagedBeanです。

@ManagedBean(name = "selectSample")
@RequestScoped
public class SelectSample {

    private boolean checkValue = false;

    private String selectValue = null;

    private String menuValue = null;

    private String radioValue = null;

    private List<String> checkList = null;

    private List<String> selectList = null;

    private List<String> menuList = null;

    public void outValues() {

        System.out.println(checkValue);
        System.out.println(selectValue);
        System.out.println(menuValue);
        System.out.println(radioValue);

        final String lineSep = System.getProperty("line.separator");

        for (final String value : selectList) {

            System.out.print(value);
        }
        System.out.print(lineSep);

        for (final String value : menuList) {

            System.out.print(value);
        }
        System.out.print(lineSep);
    }
}

タグに対応する値の型はbooleanにします。
系のタグに対応する値の型はListにします。

【実行】

では、ページにアクセスしてみます。

それぞれ選択系の部品が表示されています。
各項目を選択して、実行ボタンをクリックすると
選択された項目の値が各プロパティに設定されていることがわかると思います。

タグとタグの違いですが、
見た目上は違いがありませんが、生成されるソースが若干違います。

<!-- <h:selectManyListbox>タグ -->
<select name="sample:j_idt30" multiple="multiple" size="3">

<!-- <h:selectManyMenu>タグ -->
<select name="sample:j_idt35" multiple="multiple" size="1">

size属性が違うだけなので大きな違いはありません。

【最後に】

選択形の部品もJSFのカスタムタグを使うことにより、
簡単に実装ができました。

実際のシステムでは固定値の表示だけではなく、
DBから値を取得してきて表示ということもあると思います。

次回はManagedBeanで選択項目を生成する方法について書きます。