リスト

<list> タグを使って項目をリスト表示し、項目を選択する機能があります。 項目には<textlistitem>を使います。

<list>
  <textlistitem />
  <textlistitem />
  <textlistitem />
</list>

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <simplelayout axis="x" spacing="10"/>
  <list id="lst">
    <textlistitem text="item1" value="1"/>
    <textlistitem text="item2" value="2"/>
    <textlistitem text="item3" value="3"/>
    <textlistitem text="item4" value="4"/>
    <textlistitem text="item5" value="5"/>
  </list>
  <text text="${lst.value}"/>
</canvas>

デフォルトではデータがある分だけ表示領域は縦に伸びますが、shownitems属性で表示アイテム数を固定にできます。アイテムが設定数より多くなったらスクロールバーが出ます。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <list shownitems="4">
    <textlistitem text="item1" value="1"/>
    <textlistitem text="item2" value="2"/>
    <textlistitem text="item3" value="3"/>
    <textlistitem text="item4" value="4"/>
    <textlistitem text="item5" value="5"/>
    <textlistitem text="item6" value="6"/>
    <textlistitem text="item7" value="7"/>
  </list>
</canvas>

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <dataset name="ds">
    <item text="テキスト1" value="1"/>
    <item text="テキスト2" value="2"/>
    <item text="テキスト3" value="3"/>
    <item text="テキスト4" value="4"/>
    <item text="テキスト5" value="5"/>
  </dataset>
  <list>
    <textlistitem datapath="ds:/item" 
        text="$path{'@text'}" value="$path{'@value'}" />
  </list>
</canvas>

value値は リスト.value で取得できるのですが、text値は同じように リスト.text とやっても取得できません。ので、下記の工夫を。

ちなみに<textlistitem>にvalue属性がなくtext属性のみだったら、リスト.value でtext値を取得できます。ややこしー。

<?xml version="1.0" encoding="UTF-8"?>
<canvas proxied="false" bgcolor="0xeeeeee"> 
  <simplelayout axis="x" spacing="10"/>
  <list id="lst">
    <textlistitem text="one" value="1"/>
    <textlistitem text="two" value="2"/>
    <textlistitem text="three" value="3"/>
    <textlistitem text="four" value="4"/>
    <textlistitem text="five" value="5"/>
  </list>
 
  <text>
    <handler name="onselect" args="d" reference="lst">
       this.setText(d.text);
    </handler>
  </text>
  <text text="${lst.text}"/><!-- これはダメ -->
 
  <text text="${lst.value}"/>
</canvas>