gtk_tut-4.html

GTK development guide

        separator = gtk_hseparator_new ();
        /* The last 3 arguments to gtk_box_pack_start are: expand, fill, padding. */
        gtk_box_pack_start (GTK_BOX (box1), separator, FALSE, TRUE, 5);
        gtk_widget_show (separator);
        break;
    
    case 3:

        /* This demonstrates the ability to use gtk_box_pack_end() to
         * right justify widgets. First, we create a new box as before. */
        box2 = make_box (FALSE, 0, FALSE, FALSE, 0);

        /* Create the label that will be put at the end. */
        label = gtk_label_new ("end");
        /* Pack it using gtk_box_pack_end(), so it is put on the right
         * side of the hbox created in the make_box() call. */
        gtk_box_pack_end (GTK_BOX (box2), label, FALSE, FALSE, 0);
        /* Show the label. */
        gtk_widget_show (label);
        
        /* Pack box2 into box1 (the vbox remember ? :) */
        gtk_box_pack_start (GTK_BOX (box1), box2, FALSE, FALSE, 0);
        gtk_widget_show (box2);
        
        /* A separator for the bottom. */
        separator = gtk_hseparator_new ();
        /* This explicitly sets the separator to 400 pixels wide by 5 pixels
         * high. This is so the hbox we created will also be 400 pixels wide,
         * and the "end" label will be separated from the other labels in the
         * hbox. Otherwise, all the widgets in the hbox would be packed as
         * close together as possible. */
        gtk_widget_set_usize (separator, 400, 5);
        /* pack the separator into the vbox (box1) created near the start 
         * of main() */
        gtk_box_pack_start (GTK_BOX (box1), separator, FALSE, TRUE, 5);
        gtk_widget_show (separator);    
    }
    
    /* Create another new hbox.. remember we can use as many as we need! */
    quitbox = gtk_hbox_new (FALSE, 0);
    
    /* Our quit button. */
    button = gtk_button_new_with_label ("Quit");
    
    /* Setup the signal to terminate the program when the button is clicked */
    gtk_signal_connect_object (GTK_OBJECT (button), "clicked",
                               GTK_SIGNAL_FUNC (gtk_main_quit),
                               GTK_OBJECT (window));
    /* Pack the button into the quitbox.
     * The last 3 arguments to gtk_box_pack_start are:
     * expand, fill, padding. */
    gtk_box_pack_start (GTK_BOX (quitbox), button, TRUE, FALSE, 0);
    /* pack the quitbox into the vbox (box1) */
    gtk_box_pack_start (GTK_BOX (box1), quitbox, FALSE, FALSE, 0);
    
    /* Pack the vbox (box1) which now contains all our widgets, into the
     * main window. */
    gtk_container_add (GTK_CONTAINER (window), box1);
    
    /* And show everything left */
    gtk_widget_show (button);
    gtk_widget_show (quitbox);
    
    gtk_widget_show (box1);
    /* Showing the window last so everything pops up at once. */
    gtk_widget_show (window);
    
    /* And of course, our main function. */
    gtk_main ();

    /* Control returns here when gtk_main_quit() is called, but not when 
     * gtk_exit is used. */
    
    return(0);
}
/* example-end */
</PRE>
</CODE></BLOCKQUOTE>
<P>
<H2><A NAME="ss4.4">4.4 Packing Using Tables</A>
</H2>

<P>Let's take a look at another way of packing - Tables. These can be
extremely useful in certain situations.
<P>Using tables, we create a grid that we can place widgets in. The
widgets may take up as many spaces as we specify.
<P>The first thing to look at, of course, is the gtk_table_new function:
<P>
<BLOCKQUOTE><CODE>
<PRE>
GtkWidget *gtk_table_new( gint rows,
                          gint columns,
                          gint homogeneous );
</PRE>
</CODE></BLOCKQUOTE>
<P>The first argument is the number of rows to make in the table, while
the second, obviously, is the number of columns.
<P>The homogeneous argument has to do with how the table's boxes are
sized. If homogeneous is TRUE, the table boxes are resized to the size
of the largest widget in the table. If homogeneous is FALSE, the size
of a table boxes is dictated by the tallest widget in its same row,
and the widest widget in its column.
<P>The rows and columns are laid out from 0 to n, where n was the number
specified in the call to gtk_table_new. So, if you specify rows = 2
and columns = 2, the layout would look something like this:
<P>
<BLOCKQUOTE><CODE>
<PRE>
 0          1          2
0+----------+----------+
 |          |          |
1+----------+----------+
 |          |          |
2+----------+----------+
</PRE>
</CODE></BLOCKQUOTE>
<P>Note that the coordinate system starts in the upper left hand corner.
To place a widget into a box, use the following function:
<P>
<BLOCKQUOTE><CODE>
<PRE>
void gtk_table_attach( GtkTable  *table,
                       GtkWidget *child,
                       gint       left_attach,
                       gint       right_attach,
                       gint       top_attach,
                       gint       bottom_attach,
                       gint       xoptions,
                       gint       yoptions,
                       gint       xpadding,
                       gint       ypadding );
</PRE>
</CODE></BLOCKQUOTE>
                                       
<P>The first argument ("table") is the table you've created and the
second ("child") the widget you wish to place in the table.
<P>The left and right attach arguments specify where to place the widget,
and how many boxes to use. If you want a button in the lower right
table entry of our 2x2 table, and want it to fill that entry ONLY,
left_attach would be = 1, right_attach = 2, top_attach = 1,
bottom_attach = 2.
<P>Now, if you wanted a widget to take up the whole top row of our 2x2
table, you'd use left_attach = 0, right_attach = 2, top_attach = 0,
bottom_attach = 1.
<P>The xoptions and yoptions are used to specify packing options and may
be bitwise OR'ed together to allow multiple options.
<P>These options are:
<UL>
<LI><CODE>GTK_FILL</CODE> - If the table box is larger than the widget, and
<CODE>GTK_FILL</CODE> is specified, the widget will expand to use all the room
available.
</LI>
<LI><CODE>GTK_SHRINK</CODE> - If the table widget was allocated less space
then was requested (usually by the user resizing the window), then the
widgets would normally just be pushed off the bottom of the window and
disappear. If <CODE>GTK_SHRINK</CODE> is specified, the widgets will shrink
with the table.
</LI>
<LI><CODE>GTK_EXPAND</CODE> - This will cause the table to expand to use up
any remaining space in the window.</LI>
</UL>
<P>Padding is just like in boxes, creating a clear area around the widget
specified in pixels.
<P>gtk_table_attach() has a LOT of options.  So, there's a shortcut:
<P>
<BLOCKQUOTE><CODE>
<PRE>
void gtk_table_attach_defaults( GtkTable  *table,
                                GtkWidget *widget,
                                gint       left_attach,
                                gint       right_attach,
                                gint       top_attach,
                                gint       bottom_attach );
</PRE>
</CODE></BLOCKQUOTE>
<P>The X and Y options default to <CODE>GTK_FILL | GTK_EXPAND</CODE>, and X and Y
padding are set to 0. The rest of the arguments are identical to the
previous function.
<P>We also have gtk_table_set_row_spacing() and
gtk_table_set_col_spacing(). These places spacing between the rows at
the specified row or column.
<P>
<BLOCKQUOTE><CODE>
<PRE>
void gtk_table_set_row_spacing( GtkTable *table,
                                gint      row,
                                gint      spacing );
</PRE>
</CODE></BLOCKQUOTE>
<P>and
<P>
<BLOCKQUOTE><CODE>
<PRE>
void gtk_table_set_col_spacing ( GtkTable *table,
                                 gint      column,
                                 gint      spacing );
</PRE>
</CODE></BLOCKQUOTE>
<P>Note that for columns, the space goes to the right of the column, and
for rows, the space goes below the row.
<P>You can also set a consistent spacing of all rows and/or columns with:
<P>
<BLOCKQUOTE><CODE>
<PRE>
void gtk_table_set_row_spacings( GtkTable *table,
                                 gint      spacing );
</PRE>
</CODE></BLOCKQUOTE>
<P>And,
<P>
<BLOCKQUOTE><CODE>
<PRE>
void gtk_table_set_col_spacings( GtkTable *table,
                                 gint      spacing );
</PRE>
</CODE></BLOCKQUOTE>
<P>Note that with these calls, the last row and last column do not get
any spacing.
<P>
<H2><A NAME="ss4.5">4.5 Table Packing Example</A>
</H2>

<P>Here we make a window with three buttons in a 2x2 table.
The first two buttons will be placed in the upper row.
A third, quit button, is placed in the lower row, spanning both columns.
Which means it should look something like this:
<P> <CENTER >
<IMG SRC="gtk_tut_table.gif" VSPACE="15" HSPACE="10" 
ALT="Table Packing Example Image" WIDTH="180" HEIGHT="120"
> </CENTER
 >
<P>Here's the source code:
<P>
<BLOCKQUOTE><CODE>
<PRE>
/* example-start table table.c */

#include &lt;gtk/gtk.h>

/* Our callback.
 * The data passed to this function is printed to stdout */
void callback( GtkWidget *widget,
               gpointer   data )
{
    g_print ("Hello again - %s was pressed\n", (char *) data);
}

/* This callback quits the program */
gint delete_event( GtkWidget *widget,
                   GdkEvent  *event,
                   gpointer   data )
{
    gtk_main_quit ();
    return(FALSE);
}

int main( int   argc,
          char *argv[] )
{
    GtkWidget *window;
    GtkWidget *button;
    GtkWidget *table;

    gtk_init (&amp;argc, &amp;argv);

    /* Create a new window */
    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

    /* Set the window title */
    gtk_window_set_title (GTK_WINDOW (window), "Table");

    /* Set a handler for delete_event that immediately
     * exits GTK. */
    gtk_signal_connect (GTK_OBJECT (window), "delete_event",
                        GTK_SIGNAL_FUNC (delete_event), NULL);

    /* Sets the border width of the window. */
    gtk_container_set_border_width (GTK_CONTAINER (window), 20);

    /* Create a 2x2 table */
    table = gtk_table_new (2, 2, TRUE);

    /* Put the table in the main window */
    gtk_container_add (GTK_CONTAINER (window), table);

    /* Create first button */
    button = gtk_button_new_with_label ("button 1");

    /* When the button is clicked, we call the "callback" function
     * with a pointer to "button 1" as its argument */
    gtk_signal_connect (GTK_OBJECT (button), "clicked",
              GTK_SIGNAL_FUNC (callback), (gpointer) "button 1");


    /* Insert button 1 into the upper left quadrant of the table */
    gtk_table_attach_defaults (GTK_TABLE(table), button, 0, 1, 0, 1);

    gtk_widget_show (button);

    /* Create second button */

    button = gtk_button_new_with_label ("button 2");

    /* When the button is clicked, we call the "callback" function
     * with a pointer to "button 2" as its argument */
    gtk_signal_connect (GTK_OBJECT (button), "clicked",
              GTK_SIGNAL_FUNC (callback), (gpointer) "button 2");
    /* Insert button 2 into the upper right quadrant of the table */
    gtk_table_attach_defaults (GTK_TABLE(table), button, 1, 2, 0, 1);

    gtk_widget_show (button);

    /* Create "Quit" button */
    button = gtk_button_new_with_label ("Quit");

    /* When the button is clicked, we call the "delete_event" function
     * and the program exits */
    gtk_signal_connect (GTK_OBJECT (button), "clicked",
                        GTK_SIGNAL_FUNC (delete_event), NULL);

    /* Insert the quit button into the both 
     * lower quadrants of the table */
    gtk_table_attach_defaults (GTK_TABLE(table), button, 0, 2, 1, 2);

    gtk_widget_show (button);

    gtk_widget_show (table);
    gtk_widget_show (window);

    gtk_main ();

    return 0;
}
/* example-end */
</PRE>
</CODE></BLOCKQUOTE>
<P>
<HR>
<A HREF="gtk_tut-5.html">Next</A>
<A HREF="gtk_tut-3.html">Previous</A>
<A HREF="gtk_tut.html#toc4">Contents</A>
</BODY>
</HTML>