2014年9月24日水曜日

Titanium Tips: TableView + dataFilter で上位~個だけ表示

今回アプリを作るにあたって、実装で少し苦労・工夫したところの一つは、Alloy の TableView  の dataFilter と Model を組み合わせて、表示内容を上位~個だけ表示させる実装でした。

私がやりたかったことは、TabbleView に binding して自動的にリスト表示されている SQLite のデータから、そのままでは全データが表示されてしまうものを、表示する個数を制限する、ということでした。

それを、TableView の dataFilter を使う方法で実現をしました。

TableView の dataFilter は、Alloy Data Binding - Titanium 3.X - Appcelerator Docs の説明を引用すると
dataFilter: specifies an optional callback to use to filter data in the collection. The passed argument is a collection and the return value is an array of models.
とあるように、 binding されたデータをフィルタリングする機能です。
サンプルなどでは、書籍データの中から著者(author)で絞り込みをするような、SQL でいうところの where 句での絞り込みのようなものをしていることが多いです。
例えば、上記の「Alloy Data Binding」でも dataFilter用の関数では
// Show only book models by Mark Twain
function filterFunction(collection) {
    return collection.where({author:'Mark Twain'});
}
ただ、結果として「the return value is an array of models.」とモデルの配列を返せば良いので、Filter の仕方に特定の制限はなさそうでした。
そこで
function filterFunction(collection) {
var i=0;
    collectionTopMost = new Array();
    // Collection 中、上位~だけを配列として取りだし(この例では 10個固定)
    for(i=0; i<10 && i<collection.length; i++){
  collectionTopMost.push(collection.at(i));
    }
return collectionTopMost;
}
といった形で必要な個数の配列を返すように実装しました。

この方法でリスト表示数に制限をかけられるようになりました。



Android アプリを Titanium Studio/Alloy を使って作ったので、その際にひっかかったことを、Tips で書いていってます。
実際に同じところで躓いた人がいて、それの解決のお役に立てば、と思っています。
ちなみに環境は Windows + Titanium Studio 3.3 + Android用開発となっています。

ただ、まったくのピンポイントでの Tips なので、まとまっての記述を期待している人にはすいません。

0 件のコメント:

コメントを投稿