SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Curlで構築する長崎電子県庁システム(DBメンテナンスツール編)(PR)

Curlで構築する長崎電子県庁システム(DBメンテナンスツール)
概要とユーザーインターフェース

第1回

  • このエントリーをはてなブックマークに追加

Curlのコントロール

 DBメンテナンスツールでは、ユーザビリティの向上に力を入れています。その一例として、「ツリー」「グリッド」を使用しました。ポピュラーなGUIですが、Curlにも標準コントロールとして搭載されており、使い勝手のよい機能を持っています。

1.TreeControl

 「かねやん」のデータベースをツリー表示するUIはとてもわかりやすいので、Curl版でも使用しています。Curlのツリービューは便利なコントロールで、ローカルアプリケーションのツリービューと同じように動作します。ノードが選択されたイベント、開いたときのイベントなども取得できます。

TreeControl
TreeControl

 カスタムすることで、先頭にアイコンをつけたり、ノードに画像を表示することもできます。DBメンテナンスツールでは、先頭にアイコンをつけて、DB、テーブルをわかりやすく表示するようにしました。

DBメンテナンスツールのTreeControl
DBメンテナンスツールのTreeControl

 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コントロール
RecordGridコントロール

 RcordGridはデフォルトではグレーで地味な感じですが、これもプロパティで変更できます。

RecordGridの見た目を変えるプロパティ
{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
チェックボックスを表示したRecordGrid

 上記の方法でDBメンテナンスツールのデータ一覧表示を行っています。

DBメンテナンスツールのRecordGridコントロール
DBメンテナンスツールのRecordGridコントロール

まとめ

 ツリーとグリッドの2つを組み合わせることで、ローカルアプリケーションと同じ操作感を実現できました。Curlには、ツリーやグリッド以外にも質の高い標準コントロールが揃っていますし、カスタマイズもしやすいので、ユーザーのイメージを簡単に実現できます。これらを活用することで、従来のWebシステムでは実現が難しかった画面を、あまり時間をかけずに作成できます。

 次回は表示パフォーマンスについてです。大量のデータを取得するSQLを発行すると、どうしても表示に時間がかかってしまいます。これを改善する方法を説明していきます。

この記事は参考になりましたか?

  • このエントリーをはてなブックマークに追加
Curlで構築する長崎電子県庁システム(DBメンテナンスツール編)連載記事一覧

もっと読む

この記事の著者

株式会社ドゥアイネット 湯川栄太(ドゥアイネット ユカワエイタ)

【湯川栄太】株式会社ドゥアイネットに勤務するプログラマーです。CurlやFlexを使ってRIAの開発を担当しています。最近はマッシュアップに興味があります。開発日記http://blog.doinet.co.jp/CurlApplication Award2006http://www.curlap.com/award2006/index.htmlMashupAward4http://mashupaward.jp/entry_list/?posted=316

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/3281 2008/11/25 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング