第2回 カスタムJavaScript機能：特集：Forguncy Pro新機能詳説（6/7 ページ）

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

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

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

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

　この［ページロード時のコマンドを編集］リンクをクリックして、［コマンド］ダイアログが表示されたら、［コマンドの選択］ドロップダウンから［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コードを記述する場所について簡単に考察をしておきたい。