コンボボックス

コンボボックスは<combobox>と<datacombobox>の２種類あります。

• アイテムリストの持ち方

両者は良く似ていますが、全く別物と思ってOKです。使える属性、メソッド、イベント、見た目の挙動に違いがあります。どちらを選ぶかは使いたい属性やメソッドのあるほう、となります(^^;)

• 属性

• メソッド

• イベント

<datacombobox>と<combobox>は文字列の縦位置が違います。<datacombobox>のほうが若干上寄りなのでthis._text.setAttribute('y',3)で調整します。

※<datacombobox>のソースを見ると _textビュー のy属性が0だったので、3にしてみたらうまくいっただけです。

下記サンプルは、左が<datacombobox>、右が<combobox>、です。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
 
<dataset name="ds" >
  <item value="30">りんご</item>
  <item value="60">みかん</item>
  <item value="90">いちご</item>
  <item value="50">メロン</item>
  <item value="20">ぶどう</item>
</dataset>
 
<simplelayout spacing="10"/>
 
<text>▼デフォルトでは、文字列の縦位置が微妙にずれている</text>
<hbox spacing="5">
  <datacombobox itemdatapath="ds:/item" />
  <combobox editable="false">
    <textlistitem datapath="ds:/item" text="$path{'text()'}" value="$path{'@value'}"/>
  </combobox>
</hbox>
 
<text>▼文字列の縦位置が合うようにした</text>
<hbox spacing="5">
  <datacombobox itemdatapath="ds:/item" oninit="this._text.setAttribute('y',3)"/>
  <combobox editable="false">
    <textlistitem datapath="ds:/item" text="$path{'text()'}" value="$path{'@value'}"/>
  </combobox>
</hbox>
 
</canvas>

<combobox>タグ内に<textlistitem>でtext:valueを列挙します。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
 
<simplelayout axis="x"/>
 
<combobox id="dc" editable="false">
  <textlistitem value="30">りんご</textlistitem>
  <textlistitem value="60">みかん</textlistitem>
  <textlistitem value="90">いちご</textlistitem>
  <textlistitem value="50">メロン</textlistitem>
  <textlistitem value="20">ぶどう</textlistitem>
</combobox>
 
<text text="${dc.text + ':' + dc.value}"/>
 
</canvas>

データセットからアイテムを取得することもできます。<textlistitem>にdatapathを設定します。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
 
<dataset name="ds" >
  <item value="30">りんご</item>
  <item value="60">みかん</item>
  <item value="90">いちご</item>
  <item value="50">メロン</item>
  <item value="20">ぶどう</item>
</dataset>
 
<simplelayout axis="x"/>
 
<combobox id="dc" editable="false">
  <textlistitem datapath="ds:/item" text="$path{'text()'}" value="$path{'@value'}"/>
</combobox>
 
<text text="${dc.text + ':' + dc.value}"/>
 
</canvas>

選択したアイテムが上から何番目かを取得するにはgetItemIndex()メソッドを使います。引数はvalueです。

１番目の数値は０です。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
 
<dataset name="ds" >
  <item value="30">りんご</item>
  <item value="60">みかん</item>
  <item value="90">いちご</item>
  <item value="50">メロン</item>
  <item value="20">ぶどう</item>
</dataset>
 
<simplelayout axis="x"/>
 
<datacombobox id="dc" itemdatapath="ds:/item" />
 
<text>
  <handler name="onselect" reference="dc" >
    setText(dc.getItemIndex(dc.value) + ":" + dc.text + ":" + dc.value);
  </handler>
</text>
 
</canvas>

コンボボックスを使えないようにグレーアウト表示して無効化するには、enabled属性をfalseにすればOKです。

しかし、確かにグレーアウト＆無効にはなるものの、実際にはクリック可能で一覧リストが見えてしまい、うごいているように見えてしまいます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds" >
    <item value="30">りんご</item>
    <item value="60">みかん</item>
    <item value="90">いちご</item>
  </dataset>
  <simplelayout axis="x" spacing="20"/>
  <radiogroup id="r">
    <radiobutton value="0">有効</radiobutton>
    <radiobutton value="1">無効</radiobutton>
  </radiogroup>
  <datacombobox itemdatapath="ds:/item" >
    <handler name="onselect" reference="r">
      if(r.value==0){
        this.setAttribute('enabled',true);  
      }else if(r.value!=0){
        this.setAttribute('enabled',false);
      }
    </handler>
  </datacombobox>
</canvas>

<datacombobox>のソースにあるbkgndビューのclickable属性をfalseにするとクリック不能になり完全に無効化できます。

this.bkgnd.setAttribute('clickable',false);

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee">
  <dataset name="ds" >
    <item value="30">りんご</item>
    <item value="60">みかん</item>
    <item value="90">いちご</item>
  </dataset>
  <simplelayout axis="x"/>
  <radiogroup id="r">
    <radiobutton value="0">有効</radiobutton>
    <radiobutton value="1">無効</radiobutton>
  </radiogroup>
  <datacombobox itemdatapath="ds:/item" >
    <handler name="onselect" reference="r">
      if(r.value==0){
        this.setAttribute('enabled',true);  
        this.bkgnd.setAttribute('clickable',true);  // クリック有効化
      }else if(r.value==1){
        this.setAttribute('enabled',false);
        this.bkgnd.setAttribute('clickable',false); // クリック無効化
      }
    </handler>
  </datacombobox>
</canvas>