titanium/テーブルビューを作る
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
[[FrontPage]]
#contents
2011/07/31からのアクセス回数 &counter;
** テーブルビューの表示 [#e00e3ae5]
[[titanium/はじめの一歩]]の次は、よく使うテーブルビューを...
テーブルには、体重と測定日付を表示することにします。
何事もものまねからはじまります。
[[Titanium Mobileで作る！ iPhone／Androidアプリ第２回>htt...
から、TableViewの表示部分を参考にtable_view.jsを作成しま...
最初にテストデータをセットします。
table_view.js（先頭のデータセット部分）
#pre{{
var records = [{
weight: 60.3,
at: new Date('Jul 25 2011')},
{
weight: 62.5,
at: new Date('Jul 26 2011')
}];
}}
TableViewの作成は以下のようになります。
#pre{{
var win = Ti.UI.currentWindow;
var data = [];
var tableView = Ti.UI.createTableView({
data:data
});
win.add(tableView);
}}
- Ti.UI.currentWindowでこの画面のWindowを取得します
- dataは、TableViewに渡すリスト項目をセットします（最初は...
- 生成されたTableViewはすぐにwinに追加しましょう（忘れな...
TableViewへの行データの追加は、以下のようにします。
#pre{{
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);
}}
- TableViewRowを生成し、これに部品（ラベル）を追加します
- tableViewに生成したリスト項目をセットします
- 最後にupdateRecordを呼び出し、レコードの更新を実行します
また、app.jsのwin1のurlもtable_view.jsに変更しておきます。
app.jsの変更
#pre{{
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
});
}}
*** 動かしてみる [#t593ff48]
表示プログラムが完成したので、実行してみます。
&ref(tableView.png);
** テーブルビューの編集 [#tfbdfbb2]
テーブルビューの表示ができたところで、リスト項目を編集で...
** リスト項目の削除 [#m89b00d0]
TableViewには、editableという属性があり、これをtrueにする...
&ref(delete.png);
createTableView部分の修正
#pre{{
var tableView = Ti.UI.createTableView({
data:data,
editable: true
});
}}
これで、リスト項目が削除されるのは確認できましたが、これ...
そこで、TableViewのコールバック関数を定義して、リスト項目...
((画面定義部と処理部を分かりやすくするため))
削除処理部
#pre{{
function deleteCallback(index) {
records.splice(index, 1);
updateRecord(records);
}
}}
tableViewへのコールバック定義部
#pre{{
tableView.addEventListener('delete', function(e){
deleteCallback(e.index);
});
}}
** リスト項目の追加 [#tfa262d2]
次にリスト項目の新規追加ができるようにします。
新規追加というとデータを入力する画面が必要になります。
そこで、２つのTextFieldと１つのボタンを持つ簡単な入力画面...
&ref(input_record.png);
これをrecord_window.jsに作成します。
record_window.jsの内容
#pre{{
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の変更部分
#pre{{
var win2 = Titanium.UI.createWindow({
url: 'record_window.js',
title:'Tab 2',
backgroundColor:'#fff'
});
}}
画面が正しく表示できることを確認したら、テーブルビューに...
table_view.jsに以下を追加
#pre{{
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;
}}
&ref(addButton.png);
*** データ入力画面からテーブルビューへのデータ受け渡し [#...
新規追加ボタンでデータ入力画面に遷移し、その結果をテーブ...
ちょっと気持ち悪いですが、Titanium mobileではTi.Appのカス...
record_window.jsの「この値で保存します」ボタンがクリック...
#pre{{
saveButton.addEventListener(
'click', function () {
var record = {};
record.weight = weightField.value;
record.at = new Date(dateField.value);
Ti.App.fireEvent('insert_row', record);
win.close();
});
}}
- Ti.App.fireEventを使ってカスタムイベントinsert_rowにrec...
今度は、TableView側でこのイベントを受け取る処理を追加しま...
table_view.jsのイベント受け取り処理
#pre{{
Ti.App.addEventListener('insert_row', function(record) {
Titanium.API.debug("insert_row");
insertCallback(record);
});
}}
リスト項目追加の処理
#pre{{
function insertCallback(record) {
records.push(record);
updateRecord(records);
}
}}
*** 追加動作確認 [#g05dd9ec]
iPhoneシミュレータで追加処理の動作を確認してみましょう。
日付の入力は、javascriptのDate型が認識できるように Jul. 3...
&ref(add_record.png); &ref(add_list.png);
** リスト項目の更新 [#r6016120]
最後にリスト項目の値を更新する処理を追加します。
更新に際し、どのレコードを更新するか分かるようにrecordにi...
また処理が「追加」、「更新」のいずれかわかるようにfuncに...
*** テーブルビューから編集画面へのデータの受け渡し [#s80b...
テーブルビューから編集画面へのデータ受け渡しは、createWin...
リスト項目の編集は、リスト項目がクリックされた時に行いま...
table_view.jsにテーブルのリスト項目がクリックされた時の処理
#pre{{
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);
});
}}
追加の場合も同様に変更
#pre{{
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イベントを受け取る処理
#pre{{
Ti.App.addEventListener('update_row', function(record) {
Titanium.API.debug("update_row");
updateCallback(record);
});
}}
更新処理は、
#pre{{
function updateCallback(record) {
records[record.index] = record;
updateRecord(records);
}
}}
とします。
record_window.jsの変更は、
テーブルビューから渡された値をセットするようにTextField部...
#pre{{
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);
}}
また、カスタムイベントを送る処理も以下のようになります。
#pre{{
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();
});
}}
*** 更新の動作確認 [#t1131b63]
更新の動作確認をします。
体重をベスト60.0に変更すると、テーブルビューにきちんと反...
意外に簡単にテーブルビューが使えることがわかりました。
&ref(update_record.png); &ref(update_list.png);
** プログラムソース [#u9c552a0]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#v7603c0d]
#vote(おもしろかった[18],そうでもない[0],わかりずらい[1])
皆様のご意見、ご希望をお待ちしております。
- insertCallback関数のrecords.push(record)のスペルミスを...
#comment_kcaptcha
終了行:
[[FrontPage]]
#contents
2011/07/31からのアクセス回数 &counter;
** テーブルビューの表示 [#e00e3ae5]
[[titanium/はじめの一歩]]の次は、よく使うテーブルビューを...
テーブルには、体重と測定日付を表示することにします。
何事もものまねからはじまります。
[[Titanium Mobileで作る！ iPhone／Androidアプリ第２回>htt...
から、TableViewの表示部分を参考にtable_view.jsを作成しま...
最初にテストデータをセットします。
table_view.js（先頭のデータセット部分）
#pre{{
var records = [{
weight: 60.3,
at: new Date('Jul 25 2011')},
{
weight: 62.5,
at: new Date('Jul 26 2011')
}];
}}
TableViewの作成は以下のようになります。
#pre{{
var win = Ti.UI.currentWindow;
var data = [];
var tableView = Ti.UI.createTableView({
data:data
});
win.add(tableView);
}}
- Ti.UI.currentWindowでこの画面のWindowを取得します
- dataは、TableViewに渡すリスト項目をセットします（最初は...
- 生成されたTableViewはすぐにwinに追加しましょう（忘れな...
TableViewへの行データの追加は、以下のようにします。
#pre{{
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);
}}
- TableViewRowを生成し、これに部品（ラベル）を追加します
- tableViewに生成したリスト項目をセットします
- 最後にupdateRecordを呼び出し、レコードの更新を実行します
また、app.jsのwin1のurlもtable_view.jsに変更しておきます。
app.jsの変更
#pre{{
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
});
}}
*** 動かしてみる [#t593ff48]
表示プログラムが完成したので、実行してみます。
&ref(tableView.png);
** テーブルビューの編集 [#tfbdfbb2]
テーブルビューの表示ができたところで、リスト項目を編集で...
** リスト項目の削除 [#m89b00d0]
TableViewには、editableという属性があり、これをtrueにする...
&ref(delete.png);
createTableView部分の修正
#pre{{
var tableView = Ti.UI.createTableView({
data:data,
editable: true
});
}}
これで、リスト項目が削除されるのは確認できましたが、これ...
そこで、TableViewのコールバック関数を定義して、リスト項目...
((画面定義部と処理部を分かりやすくするため))
削除処理部
#pre{{
function deleteCallback(index) {
records.splice(index, 1);
updateRecord(records);
}
}}
tableViewへのコールバック定義部
#pre{{
tableView.addEventListener('delete', function(e){
deleteCallback(e.index);
});
}}
** リスト項目の追加 [#tfa262d2]
次にリスト項目の新規追加ができるようにします。
新規追加というとデータを入力する画面が必要になります。
そこで、２つのTextFieldと１つのボタンを持つ簡単な入力画面...
&ref(input_record.png);
これをrecord_window.jsに作成します。
record_window.jsの内容
#pre{{
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の変更部分
#pre{{
var win2 = Titanium.UI.createWindow({
url: 'record_window.js',
title:'Tab 2',
backgroundColor:'#fff'
});
}}
画面が正しく表示できることを確認したら、テーブルビューに...
table_view.jsに以下を追加
#pre{{
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;
}}
&ref(addButton.png);
*** データ入力画面からテーブルビューへのデータ受け渡し [#...
新規追加ボタンでデータ入力画面に遷移し、その結果をテーブ...
ちょっと気持ち悪いですが、Titanium mobileではTi.Appのカス...
record_window.jsの「この値で保存します」ボタンがクリック...
#pre{{
saveButton.addEventListener(
'click', function () {
var record = {};
record.weight = weightField.value;
record.at = new Date(dateField.value);
Ti.App.fireEvent('insert_row', record);
win.close();
});
}}
- Ti.App.fireEventを使ってカスタムイベントinsert_rowにrec...
今度は、TableView側でこのイベントを受け取る処理を追加しま...
table_view.jsのイベント受け取り処理
#pre{{
Ti.App.addEventListener('insert_row', function(record) {
Titanium.API.debug("insert_row");
insertCallback(record);
});
}}
リスト項目追加の処理
#pre{{
function insertCallback(record) {
records.push(record);
updateRecord(records);
}
}}
*** 追加動作確認 [#g05dd9ec]
iPhoneシミュレータで追加処理の動作を確認してみましょう。
日付の入力は、javascriptのDate型が認識できるように Jul. 3...
&ref(add_record.png); &ref(add_list.png);
** リスト項目の更新 [#r6016120]
最後にリスト項目の値を更新する処理を追加します。
更新に際し、どのレコードを更新するか分かるようにrecordにi...
また処理が「追加」、「更新」のいずれかわかるようにfuncに...
*** テーブルビューから編集画面へのデータの受け渡し [#s80b...
テーブルビューから編集画面へのデータ受け渡しは、createWin...
リスト項目の編集は、リスト項目がクリックされた時に行いま...
table_view.jsにテーブルのリスト項目がクリックされた時の処理
#pre{{
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);
});
}}
追加の場合も同様に変更
#pre{{
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イベントを受け取る処理
#pre{{
Ti.App.addEventListener('update_row', function(record) {
Titanium.API.debug("update_row");
updateCallback(record);
});
}}
更新処理は、
#pre{{
function updateCallback(record) {
records[record.index] = record;
updateRecord(records);
}
}}
とします。
record_window.jsの変更は、
テーブルビューから渡された値をセットするようにTextField部...
#pre{{
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);
}}
また、カスタムイベントを送る処理も以下のようになります。
#pre{{
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();
});
}}
*** 更新の動作確認 [#t1131b63]
更新の動作確認をします。
体重をベスト60.0に変更すると、テーブルビューにきちんと反...
意外に簡単にテーブルビューが使えることがわかりました。
&ref(update_record.png); &ref(update_list.png);
** プログラムソース [#u9c552a0]
ここまでのプログラムソースは、
- &ref(Demo.zip);
にまとめてあります。
** コメント [#v7603c0d]
#vote(おもしろかった[18],そうでもない[0],わかりずらい[1])
皆様のご意見、ご希望をお待ちしております。
- insertCallback関数のrecords.push(record)のスペルミスを...
#comment_kcaptcha
ページ名:
SmartDoc
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
