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

» 2015年03月30日 05時00分 公開
[かわさきしんじInsider.NET編集部]

テーブルからのデータの取得

 ここでは、リストビューで選択されているレコードが変更されたら、Web APIを使用してデータを取得し、それを二つのテキストボックスに設定するようにしよう。もちろん、これは上で使用したリストビューのgetValueメソッドとテキストボックスのsetValueメソッドを使っても行える。そうすればデータベースアクセスの必要がなくなり、不要なトラフィックがなくなるため、そちらの方が適切だが、ここではデータ取得のサンプルとしてそのようにする。

 ここでは、ボタンをクリックしたときにコードが実行されるわけではないので、[コマンドの編集]リンクを使ってコードを記述するわけにはいかない。そのため、ページ全体が読み込まれたタイミングで、リストビューにイベントハンドラーを設定する。ここでは、右ペインの[ページ設定]ダイアログにある[ページロード時のコマンドを編集]リンクから開かれるダイアログでそのためのコードを記述しよう。

 この[ページロード時のコマンドを編集]リンクをクリックして、[コマンド]ダイアログが表示されたら、[コマンドの選択]ドロップダウンから[JavaScriptコードの記述]を選択する。すると、その下のテキストボックスにJavaScriptコードを入力できるようになる。

ページロード時に実行するJavaScriptコードを記述するダイアログ ページロード時に実行するJavaScriptコードを記述するダイアログ

 ここにコードを記述していけばよい。テーブルのデータを取得するには、Web APIのgetTableDataメソッドを使用する。構文は以下の通りだ。

Forguncy.getTableData(
  tableName,
  primaryKey,
  successCallback,
  errorCallback
)

Forguncy.getTableDataメソッドの構文

 データの取得に成功すると、第3引数に指定するコールバック関数が呼び出され、取得したデータが引数として渡される。よって、このコールバック関数の中で、テキストボックスにそれぞれの値をセットしてやればよい。実際のコードは次のようになる。

var id = listview.getValue(listview.getSelectedRowIndex(), 'ID');
Forguncy.getTableData(
  'table1',
  { 'ID': id },
  function(data) {
    textName.setValue(data.name);
    textPhone.setValue(data.phone);
  }
);

テーブルのデータを取得し、テキストボックスに設定するコード

 リストビューで選択されているレコードに変更があったときに('selectionchanged'イベント)、この処理を行うので、実際にはリストビューのbindメソッドを使って、これをイベントハンドラーとして関連付ける必要がある。

var page = Forguncy.Page;
var textName = page.getCell('textName');
var textPhone = page.getCell('textPhone');
var listview = page.getListView('listview');

var getTableData = function() {
  var id = listview.getValue(listview.getSelectedRowIndex(), 'ID');
  Forguncy.getTableData(
    'table1',
    { 'ID': id },
    function(data) {
      textName.setValue(data.name);
      textPhone.setValue(data.phone);
    }
  );
}

listview.bind('selectionchanged', getTableData);

イベントハンドラーの設定
ここではエラー発生時に呼び出されるコールバック関数は省略している。

 これで、リストビューで適当なレコードを選択すると、その内容がテキストボックスに表示されるようになる。

[追加]ボタンと[更新]ボタンの有効/無効の切り替え

 最後に、二つのテキストボックスの両方にデータが入力されるまでは、[追加]ボタンと[更新]ボタンをクリックできないようにするコードを示す。これも[ページロード時のコマンドを編集]リンクをクリックすると表示されるダイアログに入力する。内容については、特に説明する必要はないだろう。

var page = Forguncy.Page;
var textName = page.getCell('textName');
var textPhone = page.getCell('textPhone');
var btnAdd = page.getCell('btnAdd');
var btnUpdate = page.getCell('btnUpdate');
var listview = page.getListView('listview');

checkTextBox = function() {
  if (!textName.getValue() || !textPhone.getValue()) {
    btnAdd.disable();
    btnUpdate.disable();
  } else {
    btnAdd.enable();
    btnUpdate.enable();
  }
}

btnAdd.disable();
btnUpdate.disable();
textName.bind('valuechanged', checkTextBox);
textPhone.bind('valuechanged', checkTextBox);

[追加]ボタンと[更新]ボタンの有効/無効を切り替えるコード

 以上で、簡易電話帳アプリは完成だ。Forguncyが持つ高度で便利なデータ連結機能を使わずともJavaScriptでそれなりの処理が実現できることを分かっていただけたと思う。

 最後に、JavaScriptコードを記述する場所について簡単に考察をしておきたい。

Copyright© Digital Advantage Corp. All Rights Reserved.

RSSについて

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

メールマガジン登録

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