Titanium + AlloyのViewでリストを組んだだけのエントリ

http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Views

ViewはXMLで書き、tssというスタイルシートちっく(Json形式ちっく）なものでレイアウト調整する。それはhttp://d.hatena.ne.jp/ria10/20130901/1378043812でちょっと調べたのでわかっている。今回はここで問題になったボタンの重なり問題を解決していく。

スタイルのかんたんな話

スタイルの参考サイトはここ。
http://docs.appcelerator.com/titanium/3.0/#!/guide/Alloy_Styles_and_Themes

cssではないので、Titaniumオブジェクトにないプロパティは定義できない。
例えばButtonタグであれば、backgroundDisabledColorなどのhttp://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Buttonで定義されているもの以外は定義できない。

セレクタとしては、cssでもある３つのやり方で指定できる。

• タグ指定
  • 例）Button
• クラス指定
  • 例）.btn
• id指定
  • 例）#btn

あと、styles/app.tssでグローバルにスタイルを指定できる。

リストを組んだ見たときの話

リストもいろんな組み方があるっぽいけど、とりあえず参考に。

indexにリンクリストを表示させ、タップされたらそのリンク先に飛ぶ、という内容。

index.xml

<Alloy>
	<Window class="container">
                <Require id='list' src="commons/index_list"/>
	</Window>
</Alloy>

commons/index_list.xml

<Alloy>
    <ListView id="index_list" onItemclick="onItemClick">
        <ListSection headerTitle="目次">
            <ListItem title="リンク１" controllerName="link1"/>
            <ListItem title="リンク２" controllerName="link2"/>
            <ListItem title="リンク３" controllerName="link3"/>
        </ListSection>
    </ListView>
</Alloy>

このView構成のiOSの見た目はこんな感じ。

index.coffee

$.index.open()

commons/index_list.coffee
onItemClick = (evt) ->
  section = $.index_list.sections[evt.sectionIndex]
  item = section.getItemAt(evt.itemIndex)
  view = Alloy.createController(item.properties.controllerName).getView()
  view.open()

クリックイベントは、個々のListItemではなく、ListViewに設定しておき、発火したクリックイベントに渡されるeventオブジェクトからクリックされたItemを割り出す。イベントオブジェクトの中身の構成を知るには、console.logで出すのが一番早い気がする。こんなとき、tishadow specマジサイコーというキモチでいっぱいになる。
もちろん、個々の飛び先（link1~3）のコントローラは別途作っておくこと。

以上、よろしくお願いいたします。

Titanium Mobile iPhone/Androidアプリ開発入門―JavaScriptだけで作る