段組テーブルのヘッダー

[umemura]

＞単純にヘッダ行もデータ行と同じTableに入れれば、列そろえのレイアウトは簡単になりそうです

まさにここの点に頭を悩ませていました。

RecordGridは、同じScrollBoxに入っているので
横スクロールは当然問題なく、
縦スクロールは、ヘッダーはそのまま、レコード部のみがスクロールするようになっています。
このレイアウトを実現したかったのです。

レコード部分とヘッダーをそれぞれ個別のScrollBoxにいれ、
ヘッダーにはスクロールバーを表示させず、
レコード部分の横スクロールと連動するようにすると、
ヘッダー部の右側にスクロールバーを表示しないぶんのスペースができてしまい、
境界線の設定が複雑になるという問題と、
スペースの幅を固定値で持たせているため、スクロールバーのUIが変わったときに対応できない
という問題がありました。

Grid クラスを利用すれば実現できました。

Code:

{define-class public DangumiLayout {inherits Table}
  {constructor public {default
                          a:any,
                          b:any,
                          c:any,
                          d:any,
                          e:any,
                          f:any,
                          ...
                      }
    {construct-super
        columns = 5,
        border-width=1pt, border-color="black",
        cell-border-width=1pt, cell-border-color="black",
        background="#b0ffff",
        {splice ...}
    }
    {self.add  row = 0, column = 0, colspan = 1,{Frame width =1in, a}}
    {self.add  row = 0, column = 1, colspan = 3, {Frame width =2in, b}}
    {self.add  row = 0, column = 4, colspan = 1, rowspan = 2,  {Frame width =2in, c}}
    {self.add  row = 1, column = 0,  {Frame width =1in, d}}
    {self.add  row = 1, column = 1, {Frame width =1in, e}}
    {self.add  row = 1, column = 2,  {Frame width =1in, f}}
  }
}

{value
    def vb = {VBox}
    {for i:int = 0 to 10 do
        {vb.add
            {DangumiLayout {CommandButton}, {DateField} ,{TextArea}, {TextField}, {RadioFrame {HBox {RadioButton}, {RadioButton}}},{CheckButton}}
        }
    }
    def main =
        {ScrollBox  vb}
    def header-content =
        {DangumiLayout
            height= 40pt,
            background = "lightgreen",
            "ボタン", "日付", "備考", "コード" , "選択", "チェック"
        }
    def header =
        {ScrollBox
            height = header-content.height,
            always-disable-hscroll? = true,
            always-disable-vscroll? = true,
            header-content
        }
    def header-hscroll = {header.get-hscroll}
    def main-hscroll = {main.get-hscroll}
    def main-vscroll = {main.get-vscroll}

    {main-hscroll.add-event-handler
        {on e:Adjustment at s:Scrollbar do
            {header-hscroll.set-scroll-value {s.get-scroll-value}}
        }
    }
    let my-grid:Grid =
        {Grid
            border-width = 1pt,
            border-color = "gray",
            width = 5in,
            height = 5in
        }

    {my-grid.add
        {VBox header, main},
        bottom = {my-grid.vorigin-fiducial},
        right = {my-grid.horigin-fiducial},
        top = {my-grid.top},
        left = {my-grid.left}
    }
    {my-grid.add
        main-vscroll ,
        bottom = {my-grid.vorigin-fiducial},
        left = {my-grid.horigin-fiducial},
        top = {my-grid.top},
        right = {my-grid.right}
    }
    {my-grid.add
        main-hscroll,
        top = {my-grid.vorigin-fiducial},
        right = {my-grid.horigin-fiducial},
        bottom = {my-grid.bottom},
        left = {my-grid.left}
    }
    my-grid
}