Curlのコントロール
DBメンテナンスツールでは、ユーザビリティの向上に力を入れています。その一例として、「ツリー」「グリッド」を使用しました。ポピュラーなGUIですが、Curlにも標準コントロールとして搭載されており、使い勝手のよい機能を持っています。
1．TreeControl
「かねやん」のデータベースをツリー表示するUIはとてもわかりやすいので、Curl版でも使用しています。Curlのツリービューは便利なコントロールで、ローカルアプリケーションのツリービューと同じように動作します。ノードが選択されたイベント、開いたときのイベントなども取得できます。
カスタムすることで、先頭にアイコンをつけたり、ノードに画像を表示することもできます。DBメンテナンスツールでは、先頭にアイコンをつけて、DB、テーブルをわかりやすく表示するようにしました。
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にあるようなグリッドコントロールです。一覧表示ができ、見出し列をクリックするとソートすることもできます。
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||データセレクター非表示
}
}
通常は、テキストの表示に使いますが、グリッド内にコントロールをのせることもできます。
上記の方法でDBメンテナンスツールのデータ一覧表示を行っています。
まとめ
ツリーとグリッドの2つを組み合わせることで、ローカルアプリケーションと同じ操作感を実現できました。Curlには、ツリーやグリッド以外にも質の高い標準コントロールが揃っていますし、カスタマイズもしやすいので、ユーザーのイメージを簡単に実現できます。これらを活用することで、従来のWebシステムでは実現が難しかった画面を、あまり時間をかけずに作成できます。
次回は表示パフォーマンスについてです。大量のデータを取得するSQLを発行すると、どうしても表示に時間がかかってしまいます。これを改善する方法を説明していきます。
