SHOEISHA iD

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

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

CurlデベロッパーセンターPick Up(PR)

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

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

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

次のページ
もう好きにして ! あなたの思うまま。RecordGridオープンコントール

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

  • このエントリーをはてなブックマークに追加
CurlデベロッパーセンターPick Up連載記事一覧

もっと読む

この記事の著者

住商情報システム株式会社(スミショウジョウホウシステムカブシキガイシャ)

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

小段 政樹(コダン マサキ)

2003年、住商情報システム株式会社に入社後Curlビジネスに携わり、多数の基幹系業務システムの開発・設計を担当、その後、Curlサポートセンターでのサポート業務に従事。現在は、Curlプロダクトの開発・メンテナンスを行っている。

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

カール ウィリアム スターン(カール ウィリアム スターン)

アメリカ生まれ、マサチューセッツ工科大学卒。1998年から超並列計算機、ウェブアプリケーション、ウェブ検索システム、個人認証システム開発に携わり2000年よりCurlCorpolation(現Curl,inc.)にてCurlのGUI開発担当となる。現在、住商情報システム株式会社に勤務、CurlのGU...

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング