一覧表示系画面を作ろう!


強力なユーザー・インターフェイスを持つRecordGridクラス

強力なユーザー・インターフェイスを持つRecordGridクラス

一覧表形式で表示・編集可能な高機能を持ったRecordGridクラスを解説します。
RecordGridはモデル層のRecordSetクラスを表形式で表示するための主要クラスです。
対象ファイルは「recordgrid.scurl」です。
RecordSetについてはデータの部分で詳しく解説します。

サンプル・アプリケーションではRecordGridの基本機能を知っていただくため、コード11のようにシンプルなオプション設定のみにしています。

コード11 RecordGridクラスのオプション設定

ここでは高さ(height)と幅(width)の設定に続いて、「alternate-row-background」と「record-source」オプションを設定しています。「record-source」には、表示するデータのRecordSetクラスを指定します。基本的にRecordGridクラスは、「record-source」にRecordSetクラスを指定するだけで使用できます。

「alternate-row-background」は1行置きに行の色を変えて表示するためのオプションで、色を指定することで1行ずつ色が変わります(図5)。そのほかにもディスプレイの変更のためのさまざまなオプションが用意されています。詳しくは「Curl IDE ドキュメント」の「目次」タブ-「Curl開発者ガイド」-「グラフィカル ユーザー インターフェイス」-「データ レコードとグリッド」および「APIリファレンス」の「RecordGrid」クラスを参照してください

RecordGridクラスの主要な機能を中心に説明しましょう。

ドラッグ&ドロップによる列の移動
移動する列の見出しをドラッグすることで列の位置を移動できます
列のサイズ変更
サイズを変更する列の右端の線上にカーソルを置くとカーソルが両方向矢印の形に変わります。ドラッグするとサイズを変更できます
レコードのソート
列見出しをクリックすると、列の値を基準にしてソートできます。その際、昇順/降順を示す小さな矢印も現れます
レコードの選択
レコード・セレクタ領域(左側の部分)をクリックすることで、レコード全体を選択できます。複数のレコードを選択する場合は[CTRL]もしくは[SHIFT]キーを押しながらクリックします
フレーム/列/行の固定、固定の解除示
領域の一部をスクロールしないように固定します。残りの表示領域はスクロールできます。あるセルを右クリックし、[フレームの固定] を適用すると、現在のセルより左側にあるすべての列と現在のセルより上にあるすべての行が固定されます。

このほかにもスクロール・バーやナビゲーション・バーの設定、さらにグリッド・セルを右クリックするとメニューが表示され[昇順ソート]ないし[降順ソート]や[(セルの値)のフィルタ]などが選択できます(図7)。

プロジェクト

図7 サンプル・アプリケーションの一覧表タブに実装された機能
右クリックからサブメニューを表示させた。「フリガナ」列に降順ソートを示す矢印も表示されている

今回のアプリケーションでは参照用に使用していますが、もちろん入力用にも使用できます。また、Excelのようにより高度なユーザー・インターフェイスとして、例えばコピー&ペースト、行の挿入などの機能を持たせることもできます。詳しくは「Curl IDE ドキュメント(開発環境CDEの中に入ってます)」の「目次」タブ-「Curl開発者ガイド」-「グラフィカル ユーザー インターフェイス」-「データ レコードとグリッド」、「目次」タブ-「Curl開発者ガイド」-「データアクセス」および「APIリファレンス」の「RecordGrid」クラスを参照してください。