Curlで始めるリッチクライアント（2）　Page 3/3

Curlによるオブジェクト指向開発と
強力な標準クラス

住商情報システム
三野 凡希
2005/6/17

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

　続いて、RecordSetクラスを表形式で表示するための主要クラスで、高機能を持ったRecordGridクラスを解説します。サンプル・アプリケーションではRecordGridの基本機能を知っていただくため、リスト6のようにシンプルなオプション設定のみにしています。

 

 

 

 

{RecordGrid     width=20cm,     height=8cm,     alternate-row-background = "#ccccff",     record-source=rs }

リスト6　RecordGridクラスのオプション設定 （RecordSet-and-RecordGrid.scurlの48行目からを抽出）

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

　「alternate-row-background」は1行置きに行の色を変えて表示するためのオプションで、色を指定することで1行ずつ色が変わります（図5）。そのほかにもディスプレイの変更のためのさまざまなオプションが用意されています。詳しくはSurge Labドキュメントの「目次」タブ−「Surge Lab開発者ガイド」−「グラフィカル ユーザー インターフェイス」−「データ レコードとグリッド」および「APIリファレンス」の「RecordGrid」クラスを参照してください（Surge Lab IDE 60日体験版のダウンロードページ）。では、RecordGridクラスの主要な機能を中心に説明しましょう。

• ドラッグ＆ドロップによる列の移動
  移動する列の見出しをドラッグすることで列の位置を移動できます
  　
• 列のサイズ変更
  サイズを変更する列の右端の線上にカーソルを置くとカーソルが両方向矢印の形に変わります。ドラッグするとサイズを変更できます
  　
• レコードのソート
  列見出しをクリックすると、列の値を基準にしてソートできます。その際、昇順／降順を示す小さな矢印も現れます
  　
• レコードの選択
  レコード・セレクタ領域（左側の部分）をクリックすることで、レコード全体を選択できます。複数のレコードを選択する場合は［CTRL］もしくは［SHIFT］キーを押しながらクリックします

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

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

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

■レイアウトコンテナとポータルにも使えるTabContainerクラス

　Curlで画面遷移を実現する場合、HTMLのように新しいページにリンクして画面を変更するのではなく、グラフィカル・コンテナと呼ばれるオブジェクトにTextFieldなどのオブジェクトを配置したり、または入れ替えたりすることで実現します。

　代表的なグラフィカル・コンテナとしてVBox、HBox、Frameがあります。VBoxは垂直方向にHBoxは水平方向にオブジェクトを配置でき、Frameは1つのオブジェクトを配置する機能を持っています。グラフィカル・コンテナはBoxクラスを継承しているため、それぞれaddメソッドおよびclearメソッドを使用してオブジェクトの追加および削除ができ、その機能を使用して画面を変更できます。詳しくはSurge Labドキュメントの「目次」タブ−「グラフィカル ユーザー インターフェイス」−「グラフィカルコンテナ」を参照してください（Surge Lab IDE 60日体験版のダウンロードページ）。

　サンプル・アプリケーションでは、簡単に画面を切り替えられるTabContainerクラスを使用しています。これは複数のページを構成できるコントロールで、Excelのシート（タブ）のように使用できます。ページを切り替えてもサーバにアクセスする必要はありません。TabContainerクラスは複数のTabPaneで構成され、それぞれのTabPaneが1つのタブになります。サンプル・アプリケーションの例では、TabContainerの中でadd-paneメソッドを使用して複数のTabPaneを動的に追加していますが、静的にTabContainerクラスのパラメータにTabPaneを設定することもできます。

let tc:TabContainer={TabContainer                             height=10cm,                             width=10cm                         }     {for tp in ... do         {tc.add-pane tp}     }

リスト7　TabContainerクラスに動的にTabPaneを追加 （TabContainer.scurlの11行目からを抽出）

　このようにTabContainerは簡単でポータル画面の作成にも向いています。また、オプション、メソッドなども豊富で、tab-placementオプションを変更することによりタブの位置を変更することも可能です。詳しくはSurge Labドキュメントの「目次」タブ−「APIリファレンス」から「TabContainer」クラスを参照してください（Surge Lab IDE 60日体験版のダウンロードページ）。

■まとめ

　サンプルアプリケーションは、Curlのシンタックスを理解してもらうためにすべてコーディングベースで説明しました。一方、より簡単に多くの画面を作成したい場合、コーディング量を減らして開発を効率化するツールとして「ビジュアル・レイアウト・エディタ」が提供されています。これは直感的かつコーディングレスの開発環境であり、効率的かつフレキシブルな開発を支援します。

◇

　次回はビジュアル・レイアウト・エディタを中心とした開発環境と、効率的な開発手順を紹介します。どうぞお楽しみに！（次回に続く）

3/3

INDEX
Curlで始めるリッチクライアント（2） Curlによるオブジェクト指向開発と強力な標準クラス
	Page1 前回のおさらいと今回の解説ポイント Curlのアプリケーション構成 TextFieldクラスを継承したサブクラス（共通部品）化
	Page2 データモデルのRecordSetクラス
	Page3 強力なユーザー・インターフェイスを持つRecordGridクラス レイアウトコンテナとポータルにも使えるTabContainerクラス まとめ

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）