GridLayout grid layout calculator

GridLayout is useful for laying out the larger sections of an interface.

Grid systems are a commonly used method that graphic designers use layout the overall form of a page.  Look at any magazine, newspaper or finer website.  They give a vertical and horizontal rhythm to the design and simplify decisions about where to place things.  It quantizes the visual space.

A GridLayout is not a decorator like FlowLayout.  You create one and use it directly to calculate bounds, then Composite views or flow views can be placed at those Rects and you put your controls and stuff inside those.

// a fairly large bounds

b = GUI.window.screenBounds.resizeBy(-100,-100);

// create a large grid layout with 12 cols and 5 rows

g = GridLayout.new(b,12,5);

// 12 cols and as many rows as will fit within the bounds

g = GridLayout.new(b,12);

// use the grid's gui to plan where you want things

g.gui

Several ways to specify and obtain bounds.

To get a 2 x 3 box (occupying 6 total grid spaces) in the upper right corner I find it easiest to specify two sets of quadrants that encompass the area.

// top left and bottom right corner

g.calc( 0@0, 2@1 )

// you can specify any two quadrants in any order

// the same specified with points

// or specify using a rect with the left,top, width, height in integers

g.mapRect( Rect(0,0,2,3) )

(

b = GUI.window.screenBounds.resizeBy(-100,-100);

g = GridLayout.new(b,12,7);

w = GUI.window.new(b).front;

// 12 cols and as many rows as will fit within the bounds

g = GridLayout.new(b,12);

// g.gui

a = g.calc( 0@), 

w.view

Could be done as a decorator and specify bounds as integers

decorator = GridLayout

text(g,Rect(0,0,1,1))

text(g,Rect(2,0,6,1))

text(g,GridBlock([2,0],[3,4])

[2,0][3,4]

text(c,g.calc([2,0],[3,4]))

g.calc(2@0,3@4)

g.project(2@0,3@4)