checkboxで表示/非表示を切り替える

2012/7/7

ある領域の表示/非表示をcheckboxで切り替える方法。

<xp:panel>や<xp:label>などは、rendered属性に条件式を書いて、表示/非表示を切り替えることができる。

では、<xp:checkbox>にチェックを入れた時だけあるコントロールが表示されるページを書いてみる。

<xp:checkbox>と<xp:button>が並ぶだけの簡単なページである。 一応、確認のため、<xp:checkbox>の値も表示する<xp:label>も用意しておこう。

  <?xml version="1.0" encoding="UTF-8"?>
  <xp:view xmlns:xp="http://www.ibm.com/xsp/core">
      <xp:checkBox id="checkBox1" text="表示"
          value="#{sessionScope.show_flag}">
          <xp:eventHandler event="onclick" submit="true"
              refreshMode="complete">
          </xp:eventHandler>
      </xp:checkBox>
      <xp:br></xp:br>
      <xp:button value="ラベル" id="button1">
          <xp:this.rendered><![CDATA[#{javascript:sessionScope.show_flag}]]></xp:this.rendered>
      </xp:button>
      <xp:br></xp:br>
      <xp:label id="label1">
          <xp:this.value><![CDATA[#{javascript:"sessionScope.show_flag = " + sessionScope.show_flag}]]></xp:this.value>
      </xp:label>
      <xp:br></xp:br>
  
      <xp:eventHandler event="onClientLoad" submit="true"
          refreshMode="norefresh"></xp:eventHandler>
  </xp:view>
  

しかし、この方法では、<xp:button>の表示、非表示は切り替わらない。 ちゃんと確認用の<xp:label>にはsessionScope.show_flag = true か falseが表示されているにもかかわらず。

なんでかなぁ、といろいろ調べたところ、<xp:checkbox>にバインドされているsessionScope.show_flagには論理値ではなく、 文字列がセットされていたのだった。 ご丁寧に"true"と"false"という文字列が! これって、プログラマを陥れる罠だよなぁ。

よって、<xp:button>のrenderedを以下のように書けばいい。

  <xp:this.rendered><![CDATA[#{javascript:sessionScope.show_flag == "true"}]]></xp:this.rendered>