Curlのコントロール
DBメンテナンスツールでは、ユーザビリティの向上に力を入れています。その一例として、「ツリー」「グリッド」を使用しました。ポピュラーなGUIですが、Curlにも標準コントロールとして搭載されており、使い勝手のよい機能を持っています。
1.TreeControl
「かねやん」のデータベースをツリー表示するUIはとてもわかりやすいので、Curl版でも使用しています。Curlのツリービューは便利なコントロールで、ローカルアプリケーションのツリービューと同じように動作します。ノードが選択されたイベント、開いたときのイベントなども取得できます。
![TreeControl](http://cz-cdn.shoeisha.jp/static/images/article/3281/04.gif)
カスタムすることで、先頭にアイコンをつけたり、ノードに画像を表示することもできます。DBメンテナンスツールでは、先頭にアイコンをつけて、DB、テーブルをわかりやすく表示するようにしました。
![DBメンテナンスツールのTreeControl](http://cz-cdn.shoeisha.jp/static/images/article/3281/05.gif)
TreeControlのコンストラクタの「tree-item-creation-proc」を設定することでアイコンを追加できます。
tree-item-creation-proc = {proc {x:TreeNode}:TreeItem let v_icon:any = null {switch (x asa MyTreeNode).icon-type case my-tree-head do set v_icon = null case my-tree-db do set v_icon = {DefaultPixmapTreeIcon {Pixmap.from-url {url "../../default/images/db.gif"}} } case my-tree-group do set v_icon = {DefaultPixmapTreeIcon {Pixmap.from-url {url "../../default/images/group.gif"}} } case my-tree-table do set v_icon = {DefaultPixmapTreeIcon {Pixmap.from-url {url "../../default/images/tbl.gif"}} } else set v_icon = null } {return {DefaultTreeItem x, icon = v_icon } } }
ノード選択のイベントも取得できるので、DBとテーブルの情報を一括で取得するのではなく、DBノードが選択されたときのイベントで、そのDBにあるテーブルを取得して下位ノードに表示するようにして初期起動を速くしています。
2.RecordGrid
こちらはVisual BasicやDelphiにあるようなグリッドコントロールです。一覧表示ができ、見出し列をクリックするとソートすることもできます。
![RecordGridコントロール](http://cz-cdn.shoeisha.jp/static/images/article/3281/06.gif)
RcordGridはデフォルトではグレーで地味な感じですが、これもプロパティで変更できます。
{RecordGrid grid-line-color = "#758294",||色の変更 font-size = 10pt, alternate-row-background = "#E1E1E1",||一行おきの色の変更 select-current-record? = false,||行の選択を不可に cells-take-focus? = false ,||セルの選択を不可に width = 500, height = 300, header-options = {RecordGridRowOptions background = "#B0D0FF",halign = "left"},||カラムヘッダーの色の変更 background="white",||色の変更 display-navigation-panel? = false,||ナビゲーションバー非表示 display-record-selectors? = false||データセレクター非表示 } }
通常は、テキストの表示に使いますが、グリッド内にコントロールをのせることもできます。
![チェックボックスを表示したRecordGrid](http://cz-cdn.shoeisha.jp/static/images/article/3281/07.gif)
上記の方法でDBメンテナンスツールのデータ一覧表示を行っています。
![DBメンテナンスツールのRecordGridコントロール](http://cz-cdn.shoeisha.jp/static/images/article/3281/08.gif)
まとめ
ツリーとグリッドの2つを組み合わせることで、ローカルアプリケーションと同じ操作感を実現できました。Curlには、ツリーやグリッド以外にも質の高い標準コントロールが揃っていますし、カスタマイズもしやすいので、ユーザーのイメージを簡単に実現できます。これらを活用することで、従来のWebシステムでは実現が難しかった画面を、あまり時間をかけずに作成できます。
次回は表示パフォーマンスについてです。大量のデータを取得するSQLを発行すると、どうしても表示に時間がかかってしまいます。これを改善する方法を説明していきます。