rendered属性

今回はrendered属性について書きます。

【前提条件】

[環境]

【概要】

などの
HTMLタグを出力するカスタムタグには
renderedという属性を持ったタグがあります。

rendered属性は表示/非表示を制御する属性です。
trueの場合は表示され、falseの場合は非表示となります。

【サンプルコード】

まずはManagedBeanからです。

@ManagedBean(name = "rendSample")
@SessionScoped
public class RenderedSample {

    /** パターン */
    private Integer pattern = null;

    /** フラグ1 */
    private boolean flag1 = true;

    /** フラグ2 */
    private boolean flag2 = true;

    /** フラグ3 */
    private boolean flag3 = true;

    public void change() {

        if (pattern == null) {

            pattern = 0;
        }

        flag1 = ((pattern % 2) == 0);
        flag2 = ((pattern % 3) == 0);
        flag3 = ((pattern % 4) == 0);
    }

    // アクセサメソッドは省略
}

patternというプロパティの値によって
flag1〜3の値が変化するという単純なものです。

つづいて、ページを見てみます。

<?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>renderedサンプル</title>
        </h:head>
        <h:body>
            <h:form>
                <div>
                    <h:inputText id="pattern" value="#{rendSample.pattern}" />
                </div>
                <div>
                    <h:inputText value="フラグ1" rendered="#{rendSample.flag1}" />
                </div>
                <div>
                    <h:commandButton value="フラグ2" rendered="#{rendSample.flag2}"/>
                </div>
                <div>
                    <h:commandLink value="フラグ3" rendered="#{rendSample.flag3}"/>
                </div>
                <div>
                    <h:commandButton value="実行" action="#{rendSample.change()}" />
                </div>
            </h:form>
        </h:body>
    </f:view>
</html> 

テキストボックス、ボタン、リンクにそれぞれrendered属性を指定しています。
値はRenderedSampleクラスのflag1〜3を設定しています。

【実行】

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

最初はテキストボックス2つ、ボタン、リンクの全てが表示されています。
続いて一番上のテキストボックスに「1」と入力して「実行」ボタンをクリックします。

一番の上のテキストボックス以外は非表示となりました。
「2」「3」「4」と入力して「実行」ボタンをクリックすると↓のような結果になります。

flag1〜3の値によって表示/非表示が切り替わっています。

【最後に】

同一の画面でも条件によって表示を切り替えることは良くあると思います。
データ編集画面で表示モードの場合と編集モードの場合で、
表示するボタンを変更するといったような仕様など。

rendered属性は表示/非表示の制御が楽に実装できます。