Layouts

Layouts

It's difficult to get certain layouts implemented using just stacks and flows. Not impossible but difficult. For examples - here's one, designed(?) in Glade.

How could that be done in Shoes? Assume a grid method exists and is a slot like flow and stack. Assume r:, c:, w: and h: are symbols in the common styles hash.

Shoes.app do
  grid rows: 5, columns: 6, width: 600, height: 400 do
    para "this is a demo", r: 0, c: 1, w: 4, h: 1, align: "center"
    edit_line r: 1, c: 1, w: 2, h: 1
    edit_box r: 1, c: 4, w: 2, h: 2
    button "push me", r: 2, c: 2, w: 1, h: 1
    svg "pict.svg", r: 3, c: 0, w: 4, h: 2
    check r: 3, c: 5, w: 1, h: 1
    check r: 4, c: 5, w: 1, h: 1
  end
end

You might notice that each column is 600px/6 = 100px wide and each row is 400px/5 = 80px tall. A better example would probably have more rows to get the height down to around 30px since that is a natural height for labels, buttons, and edit_lines. The glade example above did needed more columns and rows. You might also note it's an easy conversion from r:c: to x:px and y:px and from w:h: to width:px and height:px

There is an interesting note in the Shoes manual. It claims that if you 'move' an element it is detached from its flow/stack and will stay in that abs position. Anybody want to try doing that layout in a custom widget?

I suspect it's also possible to transform the grid into flows and stacks of the proper width & height if issued in the correct order. I suspect.