読者です 読者をやめる 読者になる 読者になる

リア充爆発日記

You don't even know what ria-ju really is.

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でもある3つのやり方で指定できる。

  • タグ指定
    • 例)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="リンク1" controllerName="link1"/>
            <ListItem title="リンク2" controllerName="link2"/>
            <ListItem title="リンク3" 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だけで作る

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