Tables

Another way of packing is via tables which will a wee bit more complex than boxes but is more versatile. Rather a row or column of boxes, they are column and rows of boxes. The boxes in the table are referenced by left, right, top and bottom co-ordinates. For example, a 3×3 table would be shown graphically as:

0           1          2          3

0+----------+----------+----------+

|           |          |          |

1+----------+----------+----------+

|           |          |          |

2+----------+----------+----------+

|           |          |          |

3+----------+----------+----------+

If you wanted to have a widget in the middle button row you should use the co-ordinates (1,2), (2,3). It would appear as this:

0           1          2          3

0+----------+----------+----------+

|           |          |          |

1+----------+----------+----------+

|           |          |          |

2+----------+----------+----------+

|           |  widget  |          |

3+----------+----------+----------+

To get a widget to fill the whole first row, you would use (0,3), (0,1). It would appear as this:

0           1          2          3

0+----------+----------+----------+

| Widget is on this line          |

1+----------+----------+----------+

|           |          |          |

2+----------+----------+----------+

|           |          |          |

3+----------+----------+----------+

Any number of widgets can be attached to the table as long as there is enough columns and rows.

Example Seed JavaScript code of this is as follows:

   1 #!/usr/bin/env
   2 
   3 var Gtk = imports.gi.Gtk;
   4 
   5 Gtk.init(null, null);
   6 
   7 var window = new Gtk.Window({title: "Table"});
   8 window.signal.hide.connect(Gtk.main_quit);
   9 
  10 var table = new Gtk.Table({rows: 4, columns: 4, homogenous: true});
  11 
  12 var button = new Gtk.Button({label: "Button 1"});
  13 
  14 table.attach(button, 0,4, 0,1)
  15 
  16 var button = new Gtk.Button({label: "1"});
  17 
  18 table.attach(button, 3,4, 1,2)
  19 
  20 var button = new Gtk.Button({label: "Click"});
  21 
  22 table.attach(button, 3,4, 3,4)
  23 
  24 var button = new Gtk.Button({label: "Ok"});
  25 
  26 table.attach(button, 1,2, 2,3)
  27 
  28 window.add(table);
  29 
  30 window.show_all();
  31 
  32 Gtk.main();

A breakdown of the code is as follows:

var table = new Gtk.Table({rows: 4, columns: 4, homogenous: true});

This creates a table of 4 rows and 4 columns and makes the table homogenous. When homogenous, the table sets all widgets to the size of the largest widget. If you want widgets to be different sizes, you would set this to false.

table.attach(button, 3,4, 1,2)

This attaches the widget, in this instance, button to position (3,4), (1,2) (left position, right position, top position, bottom position)

window.add(table);

The table is attached to the window.

A more useful example is as follows:

   1 #!/usr/bin/env seed
   2 Gtk = imports.gi.Gtk;
   3 Gtk.init(null, null);
   4 
   5 var window = new Gtk.Window({title: "Table"});
   6 
   7 var table = new Gtk.Table({rows: 3, columns: 2, homogenous: false});
   8 var entry = new Gtk.Entry();
   9 var title_label = new Gtk.Label({label: "Table Example"});
  10 var entry_label = new Gtk.Label({label: "Enter name"});
  11 var button = new Gtk.Button({label: "Click Here"});
  12 
  13 button.signal.clicked.connect(function(w) {
  14     var x = entry.get_text();
  15     Seed.print("Your name is " + x);
  16 });
  17 
  18 window.signal.hide.connect(Gtk.main_quit);
  19 table.attach(title_label, 0,2, 0,1);
  20 table.attach(entry_label, 0,1, 1,2);
  21 table.attach(entry, 1,2, 1,2);
  22 table.attach(button, 0,2, 2,3);
  23 window.add(table);
  24 window.show_all();
  25 
  26 Gtk.main();