+- Curl Global Community (https://communities.curl.com)
+-- Forum: Discussions (https://communities.curl.com/forumdisplay.php?fid=1)
+--- Forum: General Curl questions (https://communities.curl.com/forumdisplay.php?fid=2)
+--- Thread: 段組テーブルのヘッダー (/showthread.php?tid=929)
段組テーブルのヘッダー - umemura - 07-02-2013
下記のような、段組みされたボックスをひとかたまりとした入力用のテーブルを作りたいと思っています。
各セルには、TextField や CheckButton、TextArea などが入ります。
RecordGrid では、セルの結合が難しいという認識なので、
このようなレイアウトは、Table クラスを利用するしかない、という認識です。
┌────┬──────────┬───────┬─────┐
│ │ │ │ │
├────┼─────┬────┴────┬──│ │
│ │ │ │ │ │
└────┴─────┴─────────┴──┴─────┘
クラス自体は何とか作れたのですが、ヘッダーをどうやって作ればよいのか悩んでいます。
レコードグリッドと同じレイアウトにするには、どうすればいいのでしょうか。
もしくは、拡張パッケージの WorkSheet クラスだと、こういうことも簡単にできるのでしょうか。
もしご存知の方がいらっしゃったら教えてください。
RE: 段組テーブルのヘッダー - dyoshida - 07-03-2013
Tableに結合したセルを含む行をレコード単位で追加できるようなクラスを作っているのでしょうか、
こった段組ができて便利そうですね。
ヘッダで実現したいことについてあまり書かれていないのでエスパーレスですが、
今回作成した拡張Tableオブジェクトの上にヘッダオブジェクトを表示して、それらを連動させる
簡単な方法は〜 と考えているのでは!? と勘ぐってしまうのですが、もしそういう問題ならば
単純にヘッダ行もデータ行と同じTableに入れれば、列そろえのレイアウトは簡単になりそうです。
Tableのセルにアクセスする際に、ヘッダ行を加味して実際Tableの行位置を求める必要がある程度
なので、さほど手間ではないかと思います。
全然、的外れでしたらすみません。
RE: 段組テーブルのヘッダー - umemura - 07-05-2013
＞単純にヘッダ行もデータ行と同じ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
}RE: 段組テーブルのヘッダー - dyoshida - 07-05-2013
簡潔なサンプルコードで非常に勉強になりました！
レコードグリッドの縦スクロールの動作を見ていると、単に表示開始行を1行ずつ上げ下げして
ようなので、ヘッダとデータ行を分けなくてもテーブルの行削除、挿入だけでスクロール表示
ができると考えていました。
でも、挙げていただいたようなサンプルのように、行にそこそこ高さがあると普通にスクロール
させた方が綺麗に見えるのでいいですね。