mixing vertical and horizontal buttons

kline · **Posted:** Mon Jan 30, 2012 11:32 pm

could somebody show me a simple gtk program that has, say, 4 vertical buttons, B1 to B4, that are in a column, and show me how to take:

B1
B2
B3
B4
and join or rearrange the buttons so that the buttons may be drawn as

B1 | B2
B3 | B4

or even

B1

B2 |B3

B4

I thought i had this figured out, but nope. there are a couple obscure examples on various sites, but they are still over me head!

i dont expect anybody to code all the examples, but one or two examples of how to joinn button labels would be a great help.

Paul Childs · **Posted:** Tue Jan 31, 2012 5:01 am

Your best bet is to make a table, e.g. in your case if it is 4x4 you can move widgets around in whatever layout you want.
Here's the bit for the buttons:

Code:

GtkWidget* table=gtk_table_new(4, 4, FALSE);
gtk_widget_show(table);
GtkWidget* butt1=gtk_button_new_with_label("B1");
gtk_widget_show(butt1);
gtk_table_attach(GTK_TABLE(table), butt1, 0, 1, 0, 1, GTK_FILL|GTK_SHRINK|GTK_EXPAND, GTK_FILL|GTK_SHRINK|GTK_EXPAND, 2, 2);
GtkWidget* butt2=gtk_button_new_with_label("B2");
gtk_widget_show(butt2);
gtk_table_attach(GTK_TABLE(table), butt2, 0, 1, 1, 2, GTK_FILL|GTK_SHRINK|GTK_EXPAND, GTK_FILL|GTK_SHRINK|GTK_EXPAND, 2, 2);
GtkWidget* butt3=gtk_button_new_with_label("B3");
gtk_widget_show(butt3);
gtk_table_attach(GTK_TABLE(table), butt3, 0, 1, 2, 3, GTK_FILL|GTK_SHRINK|GTK_EXPAND, GTK_FILL|GTK_SHRINK|GTK_EXPAND, 2, 2);
GtkWidget* butt4=gtk_button_new_with_label("B4");
gtk_widget_show(butt4);
gtk_table_attach(GTK_TABLE(table), butt4, 0, 1, 3, 4, GTK_FILL|GTK_SHRINK|GTK_EXPAND, GTK_FILL|GTK_SHRINK|GTK_EXPAND, 2, 2);

Of course you'll need to add the usual gtk code around this and tell it where to put the table.
If you want to then relocate a button (the easiest would be your last option) the code is:

Code:

gtk_container_child_set_property(GTK_CONTAINER(table), butt3, "left-attach", 1);
gtk_container_child_set_property(GTK_CONTAINER(table), butt3, "right-attach", 2);
gtk_container_child_set_property(GTK_CONTAINER(table), butt3, "top-attach", 1);
gtk_container_child_set_property(GTK_CONTAINER(table), butt3, "bottom-attach", 2);

Might need to do something then to force it to refresh the layout -- not sure haven't tested it -- nonetheless that should do the trick

kline · **Posted:** Wed Feb 01, 2012 12:16 am

thanks for your example. i'll copy and test it come daylight! i spent hours tuning existing code and giving up when it failed. then after another few hours based on one example from my code i got

button1|button2

drawn very crudely. i'll expand and see if i can teach myself to do

button1|button2|button3
button4

et cetra. i want to master what i put together by sheer accident or chance. i want to understand as many ways of placing buttons on a window or widget until i can do it with the lights out:-)

i taught myself C back before 1980 by brute-force porting about a dozen utilities in version 6 to version 7. i think there are as many ways to learn as students. for me, the best way is by writing and/or copying existing code snippets.

with gtk, parts are so off-the-wall screwy [[at least until you understand it]], that you need someone who understands the code to EXPLAIN it and demo in code.

23:00, 30jan, '12

kline · **Posted:** Wed Feb 01, 2012 1:26 am

Here is code that draws four buttons. Three are in one row, the fourth button runs across the entire second row. It compiles with a warning. How do it get rid of these? and, can the fourth button be centered [and smaller], or placed to the right or left?

Code:

/*Compilied Using:
gcc -Wall -Wextra -g buttons.c -o buttons `pkg-config --cflags gtk+-2.0` `pkg-config --libs gtk+-2.0`
*/
#include <gtk/gtk.h>

int main( int argc, char *argv[])
{
  GtkWidget *window;
  GtkWidget *button1, *button2, *button3, *button4;
  GtkWidget *hbox, *vbox;
  GtkWidget *separator;

  gtk_init(&argc, &argv);

  window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
  gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
  gtk_window_set_title(GTK_WINDOW(window), "Button Formations");
  gtk_container_set_border_width(GTK_CONTAINER(window), 10);

  vbox = gtk_vbox_new(FALSE, 3);
  gtk_container_add(GTK_CONTAINER(window), vbox);

  hbox = gtk_hbox_new(FALSE, 3);
  gtk_container_add(GTK_CONTAINER(vbox), hbox);
  gtk_widget_show(hbox);

  button1 = gtk_button_new_from_stock("Button1");
  gtk_container_add(GTK_CONTAINER(hbox), button1);

  button2 = gtk_button_new_from_stock("Button2");
  gtk_box_pack_start(GTK_BOX(hbox), button1,  FALSE, FALSE, 2);
  gtk_widget_show(button1);

  gtk_box_pack_start(GTK_BOX(hbox), button2, FALSE, FALSE, 2);
  gtk_container_add(GTK_CONTAINER(hbox), button2);

  button3 = gtk_button_new_from_stock("Button3");
  gtk_box_pack_start(GTK_BOX(hbox), button2,  FALSE, FALSE, 2);
  gtk_container_add(GTK_CONTAINER(hbox), button3);

  separator = gtk_hseparator_new ();
  gtk_box_pack_start (GTK_BOX (vbox), separator, FALSE, TRUE, 0);
  gtk_widget_show (separator);

  button4 = gtk_button_new_from_stock ("Button4");
  gtk_box_pack_start (GTK_BOX (vbox), button4, 0, 0, 0);

  g_signal_connect_swapped(G_OBJECT(window),"destroy", G_CALLBACK(gtk_main_quit),G_OBJECT(window));
  gtk_widget_show_all(window);
  gtk_main();
  return 0;
}

errol · **Posted:** Wed Feb 01, 2012 6:30 am

Hi Gary,

Try this corrected code out. This should work. The main problems were that you were using gtk_container_add() for GtkBox when you should be using gtk_box_pack_start(). gtk_container_add() is for when the container can only have one widget. Also there were places that the same widget was trying to be placed more than once which can not be done.

Code:

#include <gtk/gtk.h>

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

    GtkWidget *window;
    GtkWidget *button1, *button2, *button3, *button4;
    GtkWidget *hbox, *vbox;
    GtkWidget *separator;

    gtk_init(&argc, &argv);

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_window_set_title(GTK_WINDOW(window), "Button Formations");
    gtk_container_set_border_width(GTK_CONTAINER(window), 10);

    vbox = gtk_vbox_new(FALSE, 3);
    gtk_container_add(GTK_CONTAINER(window), vbox);

    hbox = gtk_hbox_new(FALSE, 3);
    gtk_box_pack_start(GTK_BOX(vbox), hbox, FALSE, FALSE, 0);

    button1 = gtk_button_new_from_stock("Button1");
    gtk_box_pack_start(GTK_BOX(hbox), button1, FALSE, FALSE, 2);

    button2 = gtk_button_new_from_stock("Button2");
    gtk_box_pack_start(GTK_BOX(hbox), button2, FALSE, FALSE, 2);

    button3 = gtk_button_new_from_stock("Button3");
    gtk_box_pack_start(GTK_BOX(hbox), button3, FALSE, FALSE, 2);

    separator = gtk_hseparator_new ();
    gtk_box_pack_start (GTK_BOX (vbox), separator, FALSE, TRUE, 8);

    button4 = gtk_button_new_from_stock ("Button4");
    gtk_box_pack_start (GTK_BOX (vbox), button4, FALSE, FALSE, 0);

    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_widget_show_all(window);
    gtk_main();

    return 0;
}

Paul Childs · **Posted:** Wed Feb 01, 2012 11:42 am

If you're wanting to change the way the buttons are laid out you can often get more control by using a table. If you note the example above there are four numbers in the table attach. These are indices for the four corners in a grid so they give you flexibilility in button placement (however the grid is not necessarily linear as each cell must fit whatever widget is placed within some may be bigger than others); being able to span over multiple cells as you have done with your second row (in this case left attach is 0 and right attach is 3 for button 4 -- the top row buttons being 0-1, 1-2 and 2-3). If you want it to the left or the right adjust the attach values (0-2 makes it sit to the left, 1-3 sits to the right alternatively if you don't want it lined up you could change to a 6 column table with the top row aligned 0-2, 2-4, 5-6 and the bottom row something like 1-3). there are also the fill expand etc flags to control appearance
I use GTK for designing scientific software and generally find the table allows for neater 2 dimensional alignment than trying to combine hboxes in vboxes etc., though I do do that too.

kline · **Posted:** Wed Feb 01, 2012 9:28 pm

first, to errol,

you use gtk_container_add the first time. but with CONTAINER rather than BOX. Was this to link things to the first four lines to tie everything to the window widget? [i'll try myself and see if things break. ] your code is around 11 lines simpler than mine; that's enough incentive for me to check the use of _start vs _add.

second, to paul,

until now i haven't messed around with tables. could you re-code this with 4 boxes and with the fourth button on the left, first column? there is one app with a rectangular window and with [OK] and [Close] in the lower right. time to go back and study that code. basically, what i want to be able to do is learn one or two ways of positioning buttons any/everywhere on the window.

thanks, guys,

gary

errol · **Posted:** Wed Feb 01, 2012 10:39 pm

Gary,

I used gtk_container_add() because a window can contain only one widget, and is derived from GtkContainer. For the GtkVBox and GtkHBox I used gtk_box_pack_start() as these are derived from GtkBox and can contain many widgets.

GtkTable is different again and you need to use gtk_table_attach() or gtk_table_attach_defaults() to place the widgets.

Here is your original but using GtkTable

Code:

#include <gtk/gtk.h>

int
main( int argc, char *argv[])
{
    GtkWidget *window;
    GtkWidget *button1, *button2, *button3, *button4;
    GtkWidget *table;
    GtkWidget *separator;

    gtk_init(&argc, &argv);

    window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
    gtk_window_set_position(GTK_WINDOW(window), GTK_WIN_POS_CENTER);
    gtk_window_set_title(GTK_WINDOW(window), "Button Formations");
    gtk_container_set_border_width(GTK_CONTAINER(window), 10);

    table = gtk_table_new(3, 3, FALSE);
    gtk_container_add(GTK_CONTAINER(window), table);

    button1 = gtk_button_new_from_stock("Button1");
    button2 = gtk_button_new_from_stock("Button2");
    button3 = gtk_button_new_from_stock("Button3");
    separator = gtk_hseparator_new ();
    button4 = gtk_button_new_from_stock ("Button4");

    gtk_table_attach_defaults(GTK_TABLE(table), button1, 0, 1, 0, 1);
    gtk_table_attach_defaults(GTK_TABLE(table), button2, 1, 2, 0, 1);
    gtk_table_attach_defaults(GTK_TABLE(table), button3, 2, 3, 0, 1);
    gtk_table_attach_defaults(GTK_TABLE(table), button4, 0, 3, 2, 3);
    gtk_table_attach(GTK_TABLE(table), separator, 0, 3, 1, 2, GTK_EXPAND | GTK_FILL, GTK_EXPAND | GTK_FILL, 0, 8);

    g_signal_connect(G_OBJECT(window), "destroy", G_CALLBACK(gtk_main_quit), NULL);
    gtk_widget_show_all(window);
    gtk_main();

    return 0;
}

Hope this is of help to you.

kline · **Posted:** Thu Feb 02, 2012 8:18 pm

well, slowly-but-surely, these methods are sinking in. what matters most is probably how the buttons are grouped on the main window. that is a design issue. at least now, thanks to this forum, i have ways of laying out the buttons.

thanks much!

GTK+ Forums

mixing vertical and horizontal buttons

Who is online