Introduction to GTK Layouts

iPick12 · **Joined:** Thu Sep 06, 2012 10:19 am **Posts:** 1

After a small research I found out about the table and box layouts. My question is, what layout should I use to initially position controls (like the GtkFixed layout) but then set "rules" about how they will move/resize in case the window size changes?

zerohour · **Posted:** Fri Sep 07, 2012 4:30 pm

I would really reconsider using GtkFixed. You don't list what version of gtk your using but from the Gtk+3 manual it says:

Quote:

For most applications, you should not use this container! It keeps you from having to learn about the other GTK+ containers, but it results in broken applications. With GtkFixed, the following things will result in truncated text, overlapping widgets, and other display bugs:

Themes, which may change widget sizes.

Fonts other than the one you used to write the app will of course change the size of widgets containing text; keep in mind that users may use a larger font because of difficulty reading the default, or they may be using Windows or the framebuffer port of GTK+, where different fonts are available.

Translation of text into other languages changes its size. Also, display of non-English text will use a different font in many cases.

http://developer.gnome.org/gtk3/stable/GtkFixed.html

Gtk+3 uses a new height-for-width model.
http://developer.gnome.org/gtk3/3.2/ch25s02.html#id1482126

Also gtk_table_new has been deprecated since version 3.4. Instead use gtk_grid_new().
http://developer.gnome.org/gtk3/stable/GtkTable.html#gtk-table-new

There's official GTK documentation to help you make the switch from other container widgets to GtkGrid.
http://developer.gnome.org/gtk3/stable/gtk-migrating-GtkGrid.html

To control spacing there's:
gtk_grid_set_row_spacing ()
gtk_grid_set_column_spacing ()
http://developer.gnome.org/gtk3/stable/GtkGrid.html
gtk_widget_set_margin_top()
gtk_widget_set_margin_bottom()
gtk_widget_set_margin_right ()
gtk_widget_set_margin_left ()
gtk_widget_set_halign ()
gtk_widget_set_valign ()
http://developer.gnome.org/gtk3/stable/GtkWidget.html

filtre · **Joined:** Tue Oct 16, 2012 11:01 am **Posts:** 6

Hi!

I can't understand how to set size of GtkWidget (for example button) in GtkGrid which would not be changed after main window (one where grid is packed) resizing.

Also I can't get main window size fixed, after using gtk_window_set_resizable() with FALSE it gets pretty small and do not react on gtk_window_resize or gtk_window_set_default_size() calls (which are before gtk_window_set_resizable() call). Here is code fragment:

Code:

win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_resize (GTK_WINDOW(win), 600,120);
  gtk_window_set_resizable(GTK_WINDOW(win), FALSE);

I have ubuntu 12.04 with gtk 3.4.2.

Paul Childs · **Posted:** Wed Oct 17, 2012 5:03 am

Re: Grid element resizing:
Gtk 3 changed the way resizing happens automatically for grid elements compared with child elements. What the documentation doesn't make clear is that one needs to call gtk_widget_set_hexpand etc. on the child widgets in order for them to be able to expand as the window is resized.

Re: fixing a size:
Don't. I have a netbook. It pains me no end to see how many sloppy developers there are out there who place buttons in positions that just don't appear on my screen. Taking control away from a user will in no way improve your program. It can break your program in unexpected ways, violate accessibility guidelines on which gtk is based and generally anger your target audience. If your display manager is stopping you from doing this, then good on it. The ideal balance is for gtk to offer suggestions on (never demand) the way the layout is organised and leave the window management to the window manager.

filtre · **Joined:** Tue Oct 16, 2012 11:01 am **Posts:** 6

Hi, Paul Childs, and thanks for reply!

I have already read about widget allignment with gtk_widget_set_(v)hexpand (), gtk_widget_set_(v)halign () and g_object_set (,"margins") in http://developer.gnome.org/gtk3/3.6/gtk-migrating-GtkGrid.html.
But you see I still can't get my buttons etc. to be in the exact size and exact position. Though maybe there are more options for g_object_set () I don'tknow about.

Still if you can and want help me here is an example. I want the 3 buttons to be the size you usually see OK and Cancel buttons. Two of them must be in the left side and the third button in the right side. And the most important, the buttons sizes must not change when I resize the window (look in picture). Here is code we could start from:

Code:

#include <gtk/gtk.h>

int main (int argc, char *argv[])
{
  GtkWidget *button_1 = NULL, *button_2 = NULL, *button_3 = NULL;
  GtkWidget *win = NULL;
  GtkWidget *grid = NULL;

  /* Initialize GTK+ */
  g_log_set_handler ("Gtk", G_LOG_LEVEL_WARNING, (GLogFunc) gtk_false, NULL);
  gtk_init (&argc, &argv);
  g_log_set_handler ("Gtk", G_LOG_LEVEL_WARNING, g_log_default_handler, NULL);

  /* Create the main window */
  win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_container_set_border_width (GTK_CONTAINER (win), 8);
  gtk_window_set_title (GTK_WINDOW (win), "Hello World");
  gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(win),600, 120);

  /* Create a vertical box with buttons */
  grid = gtk_grid_new ();
  gtk_container_add(GTK_CONTAINER(win), grid);

  button_1 = gtk_button_new ();
  gtk_grid_attach (GTK_GRID (grid), button_1, 0, 0, 1, 1);

  button_2 = gtk_button_new ();
   gtk_grid_attach_next_to (GTK_GRID (grid), button_2, button_1, GTK_POS_RIGHT, 1, 1);

  button_3 = gtk_button_new ();
  gtk_grid_attach_next_to (GTK_GRID (grid), button_3, button_2, GTK_POS_RIGHT, 1, 1);

  /* Enter the main loop */
  gtk_widget_show_all (win);
  gtk_main ();
  return 0;
}

Please make you suggestions to make things work. :)

tadeboro · **Posted:** Thu Oct 18, 2012 8:13 pm

Hello and welcome to the GTK+ forums!

Why don't you simply use GtkButtonBox that is created exactly for this purpose: make button usage coherent in apps that use standard layouts?

As for using GtkGrid, you can make this work by adding an expandable empty label in between your buttons. Have a look at this updated sample you posted:

Code:

#include <gtk/gtk.h>

int main (int argc, char *argv[])
{
  GtkWidget *button_1 = NULL, *button_2 = NULL, *button_3 = NULL;
  GtkWidget *win = NULL;
  GtkWidget *grid = NULL;
  GtkWidget *label;

  /* Initialize GTK+ */
  gtk_init (&argc, &argv);

  /* Create the main window */
  win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  g_signal_connect (win, "destroy", gtk_main_quit, NULL);
  gtk_container_set_border_width (GTK_CONTAINER (win), 8);
  gtk_window_set_title (GTK_WINDOW (win), "Hello World");
  gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
  gtk_window_set_default_size(GTK_WINDOW(win),600, 120);


  /* Create a vertical box with buttons */
  grid = gtk_grid_new ();
  gtk_grid_set_column_homogeneous (GTK_GRID (grid), FALSE);
  gtk_container_add(GTK_CONTAINER(win), grid);

  /* Add a label just to serve as a placeholder */
  label = gtk_label_new ("Placeholder");
  gtk_widget_set_hexpand (label, TRUE);
  gtk_widget_set_vexpand (label, TRUE);
  gtk_grid_attach (GTK_GRID (grid), label, 0, 0, 4, 1);

  button_1 = gtk_button_new_with_label ("Button1");
  gtk_grid_attach (GTK_GRID (grid), button_1, 0, 1, 1, 1);

  button_2 = gtk_button_new_with_label ("Button2");
  gtk_grid_attach (GTK_GRID (grid), button_2, 1, 1, 1, 1);

  label = gtk_label_new ("");
  gtk_widget_set_hexpand (label, TRUE);
  gtk_grid_attach (GTK_GRID (grid), label, 2, 1, 1, 1);

  button_3 = gtk_button_new_with_label ("Button3");
  gtk_grid_attach (GTK_GRID (grid), button_3, 3, 1, 1, 1);

  /* Enter the main loop */
  gtk_widget_show_all (win);
  gtk_main ();
  return 0;
}

Cheers,
Tadej

filtre · **Joined:** Tue Oct 16, 2012 11:01 am **Posts:** 6

Hi, Tadej!

Well, your tip with empty label is very useful for me, thanks. Also I think I will use it with GtkButtonBox as you advised.

I've seen "child-internal-pad-x" and other properties in GtkButtonBox reference page http://developer.gnome.org/gtk/2.24/GtkButtonBox.html#gtk-button-box-set-child-ipadding. I tried to activate them through g_object_set () function, but neither for button box neither for button such property does not exist, says my compiler. Maybe you know where is the problem?

tadeboro · **Posted:** Fri Oct 19, 2012 7:23 pm

Hi.

Properties you describe are not regular properties but style properties, which are normally regulated by user's theme. You should usually leave this alone since in GTK+, user is the one who controls the general look of the app. There are other means to force your way but leaving this alone makes you application more coherent with the rest of the apps on users computer.

Cheers,
Tadej

filtre · **Joined:** Tue Oct 16, 2012 11:01 am **Posts:** 6

I got problem with buttons layot in button box. I do not know how to keep last button in the end of window after resizing. Button box and label expanding should make it, but it seems not working in my case. Here is code:

Code:

#include <gtk/gtk.h>

int main (int argc, char *argv[])
{

  GtkWidget *image = NULL;
  GtkWidget *label = NULL;
  GtkWidget *file_chooser = NULL, *rec_button = NULL,  *play_button = NULL,
            *pause_button = NULL, *stop_button = NULL, *previous_button = NULL,
            *next_button = NULL;
  GtkWidget *win = NULL;
  GtkWidget *grid = NULL, *button_box = NULL;

  /* Initialize GTK+ */
   gtk_init (&argc, &argv);

  /* Make buton's images visible */
  GtkSettings *default_settings = gtk_settings_get_default();
  g_object_set(default_settings, "gtk-button-images", TRUE, NULL);

  /* Create the main window */
  win = gtk_window_new (GTK_WINDOW_TOPLEVEL);
  gtk_window_resize (GTK_WINDOW(win), 600,120);
  gtk_container_set_border_width (GTK_CONTAINER (win), 8);
  gtk_window_set_title (GTK_WINDOW (win), "Button_box");
  gtk_window_set_position (GTK_WINDOW (win), GTK_WIN_POS_CENTER);
  gtk_widget_realize (win);
  g_signal_connect (win, "destroy", gtk_main_quit, NULL);

  /* Create a grid */
  grid = gtk_grid_new ();
  gtk_container_add (GTK_CONTAINER (win), grid);

  /* Create button box */
  button_box = gtk_button_box_new (GTK_ORIENTATION_HORIZONTAL);
  gtk_widget_set_hexpand (button_box, TRUE);
  gtk_widget_set_halign (button_box, GTK_ALIGN_FILL);
  gtk_grid_attach (GTK_GRID (grid), button_box, 0, 0, 1, 1);

  rec_button = gtk_button_new();
  image = gtk_image_new_from_stock(GTK_STOCK_MEDIA_RECORD, GTK_ICON_SIZE_BUTTON);
  gtk_button_set_image (GTK_BUTTON(rec_button),image);
  gtk_box_pack_start (GTK_BOX(button_box), rec_button, TRUE, TRUE, 0);
  gtk_button_box_set_child_non_homogeneous (GTK_BUTTON_BOX(button_box), rec_button, TRUE);

  play_button = gtk_button_new();
  image = gtk_image_new_from_stock(GTK_STOCK_MEDIA_PLAY, GTK_ICON_SIZE_BUTTON);
  gtk_button_set_image (GTK_BUTTON(play_button),image);
  gtk_box_pack_start (GTK_BOX(button_box), play_button, FALSE, FALSE, 0);
  gtk_button_box_set_child_non_homogeneous (GTK_BUTTON_BOX(button_box), play_button, TRUE);

  stop_button = gtk_button_new();
  image = gtk_image_new_from_stock(GTK_STOCK_MEDIA_STOP, GTK_ICON_SIZE_BUTTON);
  gtk_button_set_image (GTK_BUTTON(stop_button),image);
  gtk_box_pack_start (GTK_BOX(button_box), stop_button, FALSE, FALSE, 0);
  gtk_button_box_set_child_non_homogeneous (GTK_BUTTON_BOX(button_box), stop_button, TRUE);

  previous_button = gtk_button_new();
  image = gtk_image_new_from_stock(GTK_STOCK_MEDIA_PREVIOUS, GTK_ICON_SIZE_BUTTON);
  gtk_button_set_image (GTK_BUTTON(previous_button),image);
  gtk_box_pack_start (GTK_BOX(button_box), previous_button, FALSE, FALSE, 0);
  gtk_button_box_set_child_non_homogeneous (GTK_BUTTON_BOX(button_box), previous_button, TRUE);

  next_button = gtk_button_new();
  image = gtk_image_new_from_stock(GTK_STOCK_MEDIA_NEXT, GTK_ICON_SIZE_BUTTON);
  gtk_button_set_image (GTK_BUTTON(next_button),image);
  gtk_box_pack_start (GTK_BOX(button_box), next_button, FALSE, FALSE, 0);
  gtk_button_box_set_child_non_homogeneous (GTK_BUTTON_BOX(button_box), next_button, TRUE);

  label = gtk_label_new ("");
  gtk_box_pack_start (GTK_BOX(button_box), label, TRUE, TRUE, 0);

  file_chooser = gtk_file_chooser_button_new ("Select file", GTK_FILE_CHOOSER_ACTION_OPEN);
  gtk_box_pack_start (GTK_BOX(button_box), file_chooser, FALSE, FALSE, 0);

  /* Enter the main loop */
  gtk_widget_show_all (win);
  gtk_main ();
  return 0;
  }

GTK+ Forums

Introduction to GTK Layouts

Who is online