Titanium AlloyのListViewを実際に使ってみたところ具合がよかった話

TableViewの後継？のListViewを調べたメモの続き。実戦投入だ！

前回のエントリではXMLではできなさそう、とか言ったけどできるもんね！

今回は食べログ的な検索条件画面を組んでみる。

こんなの。
チェックボックスがついている行と、次ページに行って選択した項目が反映される行のリスト。

こいつをviewのxmlで表現するとこうだ！ドドん！

    <ListView id="conditionList" defaultItemTemplate="template1" onItemclick="onItemClicked" height="70%">
      <Templates>
        <ItemTemplate id="checkTemplate" name="checkTemplate" class="checkTemplate">
          <View id="textContainer">
            <Label id="textLabel" bindId="textLabel" class="listTitle" />
          </View>
          <Label id="checkValue" bindId="checkValue" class="checkValue" />
          <ImageView id="icon" bindId="icon" class="listImageIconRight" />
        </ItemTemplate>
        <ItemTemplate id="listTemplate" name="listTemplate" class="listTemplate">
          <View id="textContainer">
            <Label id="titleLabel" bindId="titleLabel" class="listTitle" />
            <Label id="selectedLabel" bindId="selectedLabel" class="selected" />
          </View>
          <ImageView id="icon" bindId="icon" class="listImageIconRight" />
        </ItemTemplate>
      </Templates>

      <ListSection id="checkCategory">
        <ListItem template="checkTemplate" checkValue:text="0" icon:image="/images/common/check_off.png" textLabel:text="個室"  />
        <ListItem template="checkTemplate" checkValue:text="0" icon:image="/images/common/check_off.png" textLabel:text="駐車場"  />
        <ListItem template="checkTemplate" checkValue:text="0" icon:image="/images/common/check_off.png" textLabel:text="土日祝日営業"  />
      </ListSection>
      <ListSection id="selectCategory">
        <ListItem template="listTemplate" icon:image="/images/tmp/arrow_right.png" titleLabel:text="料理ジャンル" selectedLabel:text="寿司 イタリアン" />
        <ListItem template="listTemplate" icon:image="/images/tmp/arrow_right.png" titleLabel:text="場所" selectedLabel:text="東京　埼玉" />
      </ListSection>
    </ListView>

tssは公開するのにちょっと手間がいるのでしない。

かんたんに順を追うと、Templatesの中に1行あたりに詰め込むデータとレイアウトを定義する。それがItemTemplate。今回は見ての通り、2種類のスタイルがリストに存在するのでItemTemplateも２種類定義する。
idとnameとclassが定義してあるけど、必須なのはnameだけ。結果的にidも必要になるかもしれないけど、classはレイアウト用。
このItemTemplateの中に、１行に詰め込みたいレイアウトをテキトウに定義する。ここでもidとbindIdとclassが定義されているけど、必須なのはbindIdだけ。結果的にidも（ｒｙ

チェックボックスのテンプレートを使っているListItemが

        <ListItem template="checkTemplate" checkValue:text="0" icon:image="/images/common/check_off.png" textLabel:text="個室"  />

templateでテンプレートを指定し、{bindId}:{property}の形式でデータを指定する。
今回は、XMLでベタ書きだけど、肝心のリスト部分がすごく見やすい！

あと、これがサーバサイドとかのデータ連携する系だと何がいいかって、データ格納するときにどのタグかを意識しなくてよくなるんじゃね？まだやってないけど。

１つ、onClickの処理を書いてて気づいたけど、ListItemのデータは直接操作できない。そういえばマニュアルにそう書いてあった。
そのため、データを変更するのはitemを取り出して変更したいところを変更して、updateItemAt()で変更するのだった。

onItemClicked = (evt) ->
  switch evt.section.id
    when 'checkCategory'
      item = $.checkCategory.getItemAt(evt.itemIndex)
      if item.checkValue.text is "0"
        item.icon.image = "/images/common/check_on.png"
        item.checkValue.text = "1"
      else
        item.icon.image = "/images/common/check_off.png"
        item.checkValue.text = "0"
     
　　$.checkCategory.updateItemAt evt.itemIndex, item
~snip~

いいね！これ、いいね！ちょっと理解するのに時間がいるけど！
追記9/11）ちょっと使うの待ったほうがいいかも。→http://d.hatena.ne.jp/ria10/20130911/1378885998

あと、Titaniumの技術書は古いのが多いので、これからTitanium関連のエントリには僕の好きな漫画の紹介をしておきますね。

自殺島 1―サバイバル極限ドラマ (ジェッツコミックス)