Titanium Mobilde + Alloy でTableViewの長押しイベントをハンドルする

テーブルビューを使ってると、長押し(longpress)イベントを使いたいことがある。
そんなときどうすればいいのか。試してみた。

longpress or longclick ?

公式サイトのドキュメントを見ると、TableViewRowにlongclickというイベントがあるようだが、これがうまく動かない。

しょうがないのでいろいろ試した結果。以下のようにすると動くっぽい。（iPhone Simulatorのみ動作確認済み）

とりあえず、サンプルを作成しつつ見ていく。
（サンプルなので実際に使う場合は、データの追加処理などが必要だろう。）

画面

まず、画面をデザインしておく。

app/views/index.xml

<Alloy>
    <Collection src="todo" />
	<Window class="container">
   	    <TableView dataCollection="todos" onLongpress="onLongPress" >
       	    <TableViewRow title="{task}" onClick="onClick" />
       	</TableView>
       	</TableView>
    </Window>
</Alloy>

model

次にモデルも作っておく。

app/models/todo.js

exports.definition = {
    config: {
        "columns": {
            "task": "TEXT",
            "limitTime": "TEXT",
            "done": "INTEGER"
        },
        "defaults": {
            "task": "-",
            "limitTime": "",
            "done": "false"
        },
        "adapter": {
            "type": "sql",
            "collection_name": "todos",
            "idAttribute": "id"
        }
    },
    extendModel: function (Model) {
        _.extend(Model.prototype, {});
        return Model;
    },
    extendCollection: function (Collection) {
        _.extend(Collection.prototype, {});
        return Collection;
    }
};

Collectionのインスタンスを、app/alloy.jsであらかじめ作成しておく。

app/alloy.js

Alloy.Collections.todos = Alloy.createCollection('todo');

イベントハンドラ

index.jsに、長押し(longpress)イベントのハンドラを追加する。

app/controllers/index.js

function onLongPress(e){
	var index = e.index;  // 行のインデックス（０からはじまる）
	var row = e.row;       // 各行のデータ
	var task = row ? row.title : null;
	Ti.API.info("<<LongPress>>");
	Ti.API.info(index);
	Ti.API.info(task);
}

function onClick(e){
	var index = e.index;  // 行のインデックス（０からはじまる）
	var row = e.row;       // 各行のデータ
	var task = row.title;
	Ti.API.info("<<Click>>");
	Ti.API.info(index);
	Ti.API.info(task);
}

$.index.addEventListener('open', function(){
	var todos = Alloy.Collections.todos;
	todos.fetch();
});

// Free model-view data binding resources when this view-controller closes
$.index.addEventListener('close', function() {
    $.destroy();
});

$.index.open();

簡単な説明

index.xmlで、

app/view/index.xml

        <TableView dataCollection="todos" onLongpress="onLongPress" >
            <TableViewRow title="{task}" onClick="onClick" />
        </TableView>

のように、
・onLongpressをTableViewでハンドル
・onClickはTableViewRowでハンドル
しているのは、onLongpressもonLongclickもTableViewRowでは捕まえることが出来なかったからです（Titaniumのバージョンによるかもしれませんが…）。

TableViewのonLongpressに渡される引数eと、
TableViewRowのonClickに渡される引数eのデータはほぼ同じ（イベントの種類は当然違いますが）なので、これでいいのかなと思います