![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
2011/07/31からのアクセス回数 15241
titanium/はじめの一歩の次は、よく使うテーブルビューを表示することにします。 テーブルには、体重と測定日付を表示することにします。
何事もものまねからはじまります。 Titanium Mobileで作る！ iPhone／Androidアプリ第２回 から、TableViewの表示部分を参考にtable_view.jsを作成します。
最初にテストデータをセットします。
table_view.js（先頭のデータセット部分）
var records = [{
weight: 60.3,
at: new Date('Jul 25 2011')},
{
weight: 62.5,
at: new Date('Jul 26 2011')
}];
TableViewの作成は以下のようになります。
var win = Ti.UI.currentWindow;
var data = [];
var tableView = Ti.UI.createTableView({
data:data
});
win.add(tableView);
TableViewへの行データの追加は、以下のようにします。
function updateRecord (records) {
var data = currentData = [];
for (var i=0;i<records.length;i++) {
var record = records[i];
var row = Ti.UI.createTableViewRow({
height: 'auto',
layout: 'vertical',
hasChild: true,
});
var weightLabel = Ti.UI.createLabel({
width: 50,
height: 'auto',
left: 5,
top: 5,
fontSize: 8,
fontWeight: 'bold',
textAlign: 'right',
color: '#2b4771'
}
);
weightLabel.text = record.weight;
row.add(weightLabel);
var weightUnit = Ti.UI.createLabel({
width: 50,
height: 'auto',
left: 60,
top: -weightLabel.height,
fontSize: 8,
fontWeight: 'bold',
text: 'Kg',
color: '#2b4771'
}
);
row.add(weightUnit);
var dateLabel = Ti.UI.createLabel({
width: 290,
height: 'auto',
left: 5,
top: 5,
fontSize: 6,
textAlign: 'right'
}
);
dateLabel.text = record.at.toDateString();
row.add(dateLabel);
currentData.push(row);
}
tableView.setData(currentData);
}
updateRecord(records);
また、app.jsのwin1のurlもtable_view.jsに変更しておきます。
app.jsの変更
var win1 = Titanium.UI.createWindow({
url: 'table_view.js',
title:'Tab 1',
backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
icon:'KS_nav_views.png',
title:'Tab 1',
window:win1
});
表示プログラムが完成したので、実行してみます。
テーブルビューの表示ができたところで、リスト項目を編集できるようにします。
TableViewには、editableという属性があり、これをtrueにすることによってスワイプ（リスト項目上で左から右に動かす）すると「削除」ボタンが現れます。これをクリックすると該当するリスト項目が削除されます。
createTableView部分の修正
var tableView = Ti.UI.createTableView({
data:data,
editable: true
});
これで、リスト項目が削除されるのは確認できましたが、これでは内部のレコード情報recordsが更新されていません。
そこで、TableViewのコールバック関数を定義して、リスト項目が削除された時にその情報を取得する処理を追加します。人の好みですが、私はコールバック関数の定義とその組み込み場所を分けて書きます。 *1
削除処理部
function deleteCallback(index) {
records.splice(index, 1);
updateRecord(records);
}
tableViewへのコールバック定義部
tableView.addEventListener('delete', function(e){
deleteCallback(e.index);
});
次にリスト項目の新規追加ができるようにします。 新規追加というとデータを入力する画面が必要になります。
そこで、２つのTextFieldと１つのボタンを持つ簡単な入力画面を作成します。
これをrecord_window.jsに作成します。
record_window.jsの内容
var win = Ti.UI.currentWindow;
var dateField = Ti.UI.createTextField({
hintText: '日付を入力してください',
top:20, left:50, right:50, height:40,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(dateField);
var weightField = Ti.UI.createTextField({
hintText: '体重を入力してください',
top:80, left:50, right:50, height:40,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(weightField);
var saveButton = Ti.UI.createButton({
title: 'この値で保存する',
top:140, left:50, right:50, height:40
});
win.add(saveButton);
画面を作成した場合に簡単に確かめる方法は、app.jsのwin2を使うと便利です。
app.jsのwin2の変更部分
var win2 = Titanium.UI.createWindow({
url: 'record_window.js',
title:'Tab 2',
backgroundColor:'#fff'
});
画面が正しく表示できることを確認したら、テーブルビューにリスト項目追加のボタンを追加します。
table_view.jsに以下を追加
var addButton = Ti.UI.createButton({
systemButton: Titanium.UI.iPhone.SystemButton.ADD
});
addButton.addEventListener(
'click', function () {
var recordWindow = Ti.UI.createWindow({
url: 'record_window.js',
backgroundColor:'#fff'
});
Ti.UI.currentTab.open(recordWindow);
});
win.rightNavButton = addButton;
新規追加ボタンでデータ入力画面に遷移し、その結果をテーブルビューに反映するにはどうすればよいのでしょう。
ちょっと気持ち悪いですが、Titanium mobileではTi.Appのカスタムイベントを使用します。
record_window.jsの「この値で保存します」ボタンがクリックされた時の処理
saveButton.addEventListener(
'click', function () {
var record = {};
record.weight = weightField.value;
record.at = new Date(dateField.value);
Ti.App.fireEvent('insert_row', record);
win.close();
});
今度は、TableView側でこのイベントを受け取る処理を追加します。
table_view.jsのイベント受け取り処理
Ti.App.addEventListener('insert_row', function(record) {
Titanium.API.debug("insert_row");
insertCallback(record);
});
リスト項目追加の処理
function insertCallback(record) {
records.push(record);
updateRecord(records);
}
iPhoneシミュレータで追加処理の動作を確認してみましょう。
日付の入力は、javascriptのDate型が認識できるように Jul. 31 2011と入力します。
最後にリスト項目の値を更新する処理を追加します。
更新に際し、どのレコードを更新するか分かるようにrecordにindexを追加します。 また処理が「追加」、「更新」のいずれかわかるようにfuncにカスタムイベント名をセットします。
テーブルビューから編集画面へのデータ受け渡しは、createWindowの引数に追加するだけで行えます。 リスト項目の編集は、リスト項目がクリックされた時に行います。
table_view.jsにテーブルのリスト項目がクリックされた時の処理
tableView.addEventListener(
'click', function(e) {
var record = records[e.index];
record.index = e.index;
var recordWindow = Ti.UI.createWindow({
url: 'record_window.js',
record: record,
func: 'update_row',
backgroundColor:'#fff'
}
);
Ti.UI.currentTab.open(recordWindow);
});
追加の場合も同様に変更
addButton.addEventListener(
'click', function () {
var recordWindow = Ti.UI.createWindow({
url: 'record_window.js',
record: {weight:'', at: new Date()},
func: 'insert_row',
backgroundColor:'#fff'
});
Ti.UI.currentTab.open(recordWindow);
});
また、update_rowイベントを受け取る処理
Ti.App.addEventListener('update_row', function(record) {
Titanium.API.debug("update_row");
updateCallback(record);
});
更新処理は、
function updateCallback(record) {
records[record.index] = record;
updateRecord(records);
}
とします。
record_window.jsの変更は、 テーブルビューから渡された値をセットするようにTextField部分を変更します。
var dateField = Ti.UI.createTextField({
value: win.record.at.toDateString(),
hintText: '日付を入力してください',
top:20, left:50, right:50, height:40,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(dateField);
var weightField = Ti.UI.createTextField({
value: win.record.weight,
hintText: '体重を入力してください',
top:80, left:50, right:50, height:40,
borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED
});
win.add(weightField);
また、カスタムイベントを送る処理も以下のようになります。
saveButton.addEventListener(
'click', function () {
var record = {};
record.index = win.record.index;
record.weight = weightField.value;
record.at = new Date(dateField.value);
Ti.App.fireEvent(win.func, record);
win.close();
});
更新の動作確認をします。 体重をベスト60.0に変更すると、テーブルビューにきちんと反映されました。
意外に簡単にテーブルビューが使えることがわかりました。
ここまでのプログラムソースは、
にまとめてあります。
皆様のご意見、ご希望をお待ちしております。
Demo.zip