特集
» 2015年03月30日 05時00分 公開

第2回 カスタムJavaScript機能特集:Forguncy Pro新機能詳説(5/7 ページ)

[かわさきしんじ,Insider.NET編集部]

簡易電話帳アプリのテスト実行

 この状態で一度アプリを実行して、動作を確認してみよう。

テキストボックスにデータを入力して[追加]ボタンをクリック
テキストボックスにデータを入力して[追加]ボタンをクリック
データが追加された
データが追加された

データの追加


 同様にしてデータの更新も行ってみる。

リストビューでレコードを選択して、テキストボックスに新しい値を入力し、[更新]ボタンをクリック
リストビューでレコードを選択して、テキストボックスに新しい値を入力し、[更新]ボタンをクリック
データが更新された
データが更新された

データの更新


 最後にデータの削除を試してみる。

レコードを選択して、[削除]ボタンをクリック
レコードを選択して、[削除]ボタンをクリック
一つは削除できたが、続けて[削除]ボタンをクリックしても、実はレコードが削除されない。この状態で今度はデータの更新を行ってみる
一つは削除できたが、続けて[削除]ボタンをクリックしても、実はレコードが削除されない。この状態で今度はデータの更新を行ってみる
該当するレコードがない!
該当するレコードがない!

データの削除で問題が発生した


 これは、リストビューで現在選択されている行のインデックスと、そこに表示されているレコードのテーブルにおけるIDが同一とは限らないからだ。これを修正するにはリストビューにIDを表示するようにした上で、Web APIを呼び出す際に、行インデックスからIDを取得して、それを使うようにする必要がある。

 まず、ページのUIは次のようにする。

修正後のページ 修正後のページ
リストビューに「ID」フィールドを追加し、右ペインでそのセルに「ID」という名前を付けた。セルに名前を付けなければならないのはここでも同様だ。

 また、更新を行うコードは次のようにする。

var page = Forguncy.Page;
var name = page.getCell('textName').getValue();
var phone = page.getCell('textPhone').getValue();
var listview = page.getListView('listview');
var id = listview.getValue(listview.getSelectedRowIndex(), 'ID');

Forguncy.updateTableData(
  'table1',
  { ID: id },
  { name: name, phone: phone },
  function() { listview.reload(); },
  function(errmsg) { alert(errmsg); }
);

更新を行うコード(修正後)

 削除を行うコードも同様なので、ここでは省略する。以上の修正で、アプリは正しく動作するようになる(実行画面は省略)。

 ここまで、データの追加/更新/削除を行うコードを記述してきた。次に、データの取得を行うコードを見てみよう。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。