CodeZine(コードジン)

特集ページ一覧

全機能を使い倒せ!大量データもグラフィカルに表示するCurlコントロール「RecordGrid」マニア

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

目次

RecordGridもここまでできる ! Curl External Library TreeGrid, Gantt Chart

 これまで、RecordGridCellをカスタマイズする方法を紹介してきました。ここからは、RecordGridやそのデータであるRecordSetをカスタマイズし、RecordGridをこれまでとは違った表現をするコントロールに変えてみましょう。

 5月に公開されたCurlの業務向けUIコンポーネント群「Curl External Library(Curl EXT)」にRecordGridをベースにカスタマイズされた2つのコンポーネント「TreeGrid」「Gantt Chart」があります。Curl EXTのコードはオープンソースで全て公開されており、ここからダウンロードが可能です。

 Curl EXTのTreeGridは、RecordGridとTreeControlを足したような機能を持っています。1つの行に紐づく複数の行を折りたたんだり、広げたりできます。例えば、次図のように、購入した商品の合計金額行が複数の商品の購入金額を持っており、合計金額行のみを表示したり、購入した商品の一覧を広げて表示することなども可能です。

購入した商品の一覧を広げて表示できるTreeGrid
購入した商品の一覧を広げて表示できるTreeGrid

 では、このTreeGridはどのように実装されているのか、実際にソースコードを見てみましょう。TreeGridが主に実装されているファイルは、COM.CURL.EXT.DATA-ACCESSパッケージのtreegrid.scurlです。

CURL-EXT-V0.6.1/COM.CURL.EXT-V0.6.1-src/code/GUI/treegrid.scurl
{doc-next
    {purpose
        Display data in a {docref RecordSet} as a tree with many columns.
    }
}
{define-class public open TreeGrid {inherits RecordGrid}
  
  {doc-next
    {purpose The {docref RecordSetTreeModel} associated with 
        this {docref TreeGrid}.
    }
  }
  field protected _model:RecordSetTreeModel
                   
                   ・
                   ・
                   ・

 確かに、TreeGridはRecordGridから継承されて作られていることがわかります。しかし、このTreeGridクラス自体の長さはそこまで大きくありません。ドキュメント用のコードを入れても160行程度です。追加された処理にも、大きな変更はないように見えます。しかし、TreeGridのコンストラクタを見てみると、以下のようになっています。

{constructor public {default
                      model:RecordSetTreeModel,
                      filter:#RecordFilter = null,
                      header-options:RecordGridRowOptions =
                          {RecordGridRowOptions},
                      ui-object:#RecordGridUI = null,
                      draggable-items?:bool = true,
                      icon-proc:#{proc-type 
                                     {cell:RecordGridCell,
                                      state:DisclosureState
                                     }:Pixmap
                                 } = null,
                      item-proc:#{proc-type
                                     {cell:RecordGridCell}:Graphic
                                 } = null,
                      ...
                  }
   set self._model = model
   set self.draggable-items? = draggable-items?
   set self.icon-proc = icon-proc
   set self.item-proc = item-proc
   {construct-super
       record-source = model.display-records,
       filter = filter,
       header-options = header-options,
       ui-object = ui-object,
       display-navigation-panel? = false,
       display-filler-column? = true,
       {splice ...},
       sort = RecordSetTreeModel.pos-field,
       key-spec = RecordSetTreeModel.pos-field
   }
 }

 TreeGridのコンストラクタには、見慣れないRecordSetTreeModelクラスがあります。TreeGridのスーパークラスであるRecordGridのコンストラクタへ渡すconstruct-superを見ても、record-source引数にそのクラスの持つdisplay-recordsオブジェクトが渡されています。つまり、RecordSetTreeModelクラスでツリー構造となるようなRecordSetオブジェクトを作り出している、このTreeGridのツリー感を出しているのは、ReordSetTreeModelであるというのが分かります。このように、RecordGridだけでなくRecordSetを工夫するだけでもこのような表現の仕方が可能になります。

 次に、Gantt Chartは上記のTreeGridとRecordGridCellをカスタマイズしたGanttCellを組み合わせて作成されています。このGantt Chartは日時の列をドラッグによって左右にスライドできます。もちろん、全体がスライドするのではなく、指定した日時列だけを動かすことが可能です。これにより、各項目の期間が確認しやすくなっています。

 グラフィック階層を見ることができるデバッガを使用してGantt Chartを見てみると、GanttCellをはじめ多くのカスタマイズされたセルや、ヘッダーにはドラッグで左右にスライドするためのクラスが使用されています。

 このようにセルのカスタマイズ、RecordGrid、RecordSetのカスタマイズなどによって、このGantt Chartのように複雑な表現や機能を実現することが可能となります。

RecordGrid、RecordSetのカスタマイズで複雑な表現や機能を実現したGantt Chart
RecordGrid、RecordSetのカスタマイズで複雑な表現や機能を実現したGantt Chart

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

あなたにオススメ

著者プロフィール

バックナンバー

連載:CurlデベロッパーセンターPick Up

もっと読む

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5