PACKING AND BOXING

It has to be noted that only one widget can be added to the top level window. If you try to add more than one, you get this warning message and the first widget added is only displayed.

Gtk-WARNING **: Attempting to add a widget with type GtkLabel to a GtkWindow, but as a GtkBin subclass a GtkWindow can only contain one widget at a time; it already contains a widget of type GtkLabel

How do you add more than more widget then? It is done by packing. There are two methods of packing in GTK+, boxes and tables. Boxes are the simplest method and will be described here. Tables are a bit more complex and will be covered in a later post.

Boxes are widget containers and come in two forms, vertical and horizontal. The box is attached to the top level widget. Individual widgets are attached to the box container, not the top level window.

Example Seed JavaScript code of horizontal box packing is as follows:

   1 #!/usr/bin/env seed
   2 
   3 // box.js
   4 var Gtk = imports.gi.Gtk;
   5 Gtk.init(null, null);
   6 
   7 var window = new Gtk.Window({title: "Box Pack"});
   8 
   9 var pack_box = new Gtk.HBox({spacing: 5});
  10 var box_before = new Gtk.Button({label: "Box Before"});
  11 var box_end = new Gtk.Button({label: "Last Box"});
  12 window.signal.hide.connect(Gtk.main_quit);
  13 for (var i = 0; i <= 5; i++)
  14 {
  15   var label_text = "label" + i
  16   var box = new Gtk.Button({label: label_text});
  17   pack_box.pack_start(box);
  18 }
  19 
  20 pack_box.pack_end(box_end);
  21 pack_box.pack_start(box_before);
  22 
  23 window.add(pack_box);
  24 window.show_all();
  25 
  26 Gtk.main();

If the line:

var pack_box = new Gtk.HBox({spacing: 5});

is replaced by

var pack_box = new Gtk.VBox({spacing: 5});

the boxes are displayed vertically.

A breakdown of the code is as follows:

var pack_box = new Gtk.HBox({spacing: 5});

This creates a HBox container widget with spacing of 5 pixels to be put between each widget. Please note that spacing is optional.

for (var i = 0; i <= 5; i++)
{
  var label_text = "label" + i
  var box = new Gtk.Button({label: label_text});
  pack_box.pack_start(box);
}

A for loop is set to run 6 times and add 6 boxes to the box widget. These boxes are added via the pack_start method.

pack_box.pack_end(box_end);

The pack_start method is used to add a widget to a box container. This adds the widget from left to right / start to end but widgets can also be added from right to left / end to start via the pack_end method.

pack_box.pack_start(box_before);

When pack_start is specified, if there are any other widgets in the box, then the widget will be added before the last one entered.