リストボックスなど選択部品の中身を動的に作成する

今回は選択系の部品を動的に作成する方法です。

【前提条件】

[環境]

【概要】

ManagedBeanでは
javax.faces.model.SelectItemクラスのリストを作成します。

XHTMLではタグを使用します。

【サンプルコード】

ManagedBean

まずはManagedBeanです。

@ManagedBean(name = "dynamicSample")
@RequestScoped
public class DynamicSelectSample {

    private Integer pattern = null;

    private List<SelectItem> itemList = null;

    private Integer selectedValue = null;

    public void changePattern() {

        if (pattern == null) {

            return;
        }

        switch (pattern) {
        case 1:
            createPattern("パターン1");
            break;
        case 2:
            createPattern("パターン2");
            break;
        default:
            createPattern("デフォルト");
            break;
        }

        System.out.println(selectedValue);
    }

    private void createPattern(final String patternName) {

        itemList = new ArrayList<>();

        for (int i = 0; i < 3; i++) {

            final SelectItem item = new SelectItem();
            item.setLabel(patternName + "-" + i);
            item.setValue(i);

            itemList.add(item);
        }
    }

ManagedBeanのプロパティとしてはSelectItemのListを使います。

SelectItemクラスはXHTMLのoptionタグに相当するクラスになります。

labelプロパティに設定した値がoptionタグの選択項目として表示されます。
valueプロパティに設定した値がoptionタグのvalue属性に設定されます。

ページ

次はページ側です。

<?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>選択系の部品2</title>
        </h:head>
        <h:body>
            <h:form id="sample">
                <div>
                    <h:inputText value="#{dynamicSample.pattern}" />
                </div>
                <div>
                    <h:selectOneListbox value="#{dynamicSample.selectedValue}">
                        <f:selectItems value="#{dynamicSample.itemList}" />
                    </h:selectOneListbox>
                </div>
                <div>
                    <h:commandButton action="#{dynamicSample.changePattern()}" value="実行" />
                </div>
            </h:form>
        </h:body>
    </f:view>
</html> 

前回と違うのはタグを使用している点です。
value属性にはSelectItemのリストを指定します。

【実行】

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

初期表示では空のリストが作成されます。
つづいて、上部にあるテキストボックスに「1」を入力して[実行]ボタンをクリックします。

リストボックスの中身が生成されています。

それ以外のパターンも実行してみると変化することがわかります。


【最後に】

動的にリストボックスを作成するのも簡単に作成できました。

実際のシステムではDB値やenumから
動的に作成することが多いと思います。

前回のタグによる実装より
タグとSelectItemクラスの組み合わせによる実装のほうが
使用頻度は高くなるのかなと思います。