第2回 テーブルを作ってみよう(1):連載:Forguncy 3でカンタンWebアプリ開発(3/6 ページ)
今回は、Forguncy 3でWebアプリを作成する際に肝となる機能「テーブル」について見ていくことにしよう。
データの追加
まずは新規にページを作成し、その名前を「データ追加」としておく。そして、各セルに文字を入力し、データ入力部のセルのセル型を「テキストボックス」および「ボタン」に変更する。リボンの[ホーム]タブでフォントを太字にしたり、大きさを調整したり、文字表示部のセルを結合したりする。
一番上の「データ追加」と左端に表示されている「名前:」などのテキストは文字を入力しただけだ。一方、その右側にある4つの入力用テキストボックスのセル型は「ふりがな:」の隣にあるものだけが「ふりがなテキストボックス」であり、その他は「テキストボックス」になっている。
「ふりがなテキストボックス」は特定のセル(テキストボックスもしくは複数行テキストボックス)に関連付けることで、そこに入力された文字のふりがなが自動的に入力される。また、右ペインの[セル型]タブにある[ふりがなの文字種]で[半角カタカナ][全角カタカナ][ひらがな]のいずれかを選択することで、ふりがなの種類を選択できる(ここでは[ひらがな]とする)。これらを設定している画面を以下に示す。
特別な設定は以上だ。あとは[追加]ボタンがクリックされたときに実行するコマンドを編集するだけで、データの追加が可能になる。これには[追加]ボタンを選択して、右ペインの[セル型]タブにある[コマンド]リンクをクリックする。すると、以下のようなダイアログが表示される。
ここで[コマンド]ダイアログの[コマンドの選択]ドロップダウンから[テーブルデータの更新]を選択したら、[更新の種類]から[追加]ラジオボタンを選択する。そして[新しいフィールド]ボタンをクリックしていく。すると、その下のリストボックスに「内線番号表」テーブルにあるフィールドと値(空欄)が追加されていく。次に、これらのフィールドと作業スペースにあるテキストボックスを関連付けていく。
テーブルデータの更新
以上で、[データ追加]ページの作成は完了だ。ただし、このページを表示する方法がない(このページを作業スペースに表示してデバッグ実行をすれば、このページが実行時に表示されるが、入力したデータが正しく入力されているかは確認できない)。そこで、「マスターページ」を使って、ページのナビゲーションを行ってみよう。
Copyright© Digital Advantage Corp. All Rights Reserved.
![新規に作成した[データ追加]ページ](https://image.itmedia.co.jp/ait/articles/1712/01/dt-025.gif)
![「ふりがなテキストボックス」の[セル型]の指定](https://image.itmedia.co.jp/ait/articles/1712/01/dt-026.gif)
![[追加]ボタンをクリックして、右ペインの[セル型]タブで[コマンド]リンクをクリック](https://image.itmedia.co.jp/ait/articles/1712/01/dt-027.gif)
![[コマンド]ダイアログが表示される](https://image.itmedia.co.jp/ait/articles/1712/01/dt-028.gif)
![[コマンドの選択]で[テーブルデータの更新]を選び、[処理の種類]には[追加]を選択して、[詳細設定を表示]リンクをクリック](https://image.itmedia.co.jp/ait/articles/1712/01/dt-029.gif)
![[新しいフィールド]ボタンをクリックして4つのフィールドを追加したら、関連付けに使用するボタンをクリックする](https://image.itmedia.co.jp/ait/articles/1712/01/dt-030.gif)

![設定が完了した[コマンド]ダイアログ](https://image.itmedia.co.jp/ait/articles/1712/01/dt-032.gif)