1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
1001
1002
1003
1004
1005
1006
1007
1008
1009
1010
1011
1012
1013
1014
1015
1016
1017
1018
1019
1020
1021
1022
1023
1024
1025
1026
1027
1028
1029
1030
1031
1032
1033
1034
1035
1036
1037
1038
1039
1040
1041
1042
1043
1044
1045
1046
1047
1048
1049
1050
1051
1052
1053
1054
1055
1056
1057
1058
1059
1060
1061
1062
1063
1064
1065
1066
1067
1068
1069
1070
1071
1072
1073
1074
1075
1076
1077
1078
1079
1080
1081
1082
1083
1084
1085
1086
1087
1088
1089
1090
1091
1092
1093
1094
1095
1096
1097
1098
1099
1100
1101
1102
1103
1104
1105
1106
1107
1108
1109
1110
1111
1112
1113
1114
1115
1116
1117
1118
1119
1120
1121
1122
1123
1124
1125
1126
1127
1128
1129
1130
1131
1132
1133
1134
1135
1136
1137
1138
1139
1140
1141
1142
1143
1144
1145
1146
1147
1148
1149
1150
1151
1152
1153
1154
1155
1156
1157
1158
1159
1160
1161
1162
1163
1164
1165
1166
1167
1168
1169
1170
1171
1172
1173
1174
1175
1176
1177
1178
1179
1180
1181
1182
1183
1184
1185
1186
1187
1188
1189
1190
1191
1192
1193
1194
1195
1196
1197
1198
1199
1200
1201
1202
1203
1204
1205
1206
1207
1208
1209
1210
1211
1212
1213
1214
1215
1216
1217
1218
1219
1220
1221
1222
1223
1224
1225
1226
1227
1228
1229
1230
1231
1232
1233
1234
1235
1236
1237
1238
1239
1240
1241
1242
1243
1244
1245
1246
1247
1248
1249
1250
1251
1252
1253
1254
1255
1256
1257
1258
1259
1260
1261
1262
1263
1264
1265
1266
1267
1268
1269
1270
1271
1272
1273
1274
1275
1276
1277
1278
1279
1280
1281
1282
1283
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>
Containers And Widget Layout
</title>
<meta name="GENERATOR" content=
"Modular DocBook HTML Stylesheet Version 1.45">
<link rel="HOME" title="GTK+ / Gnome Application Development"
href="ggad.html">
<link rel="UP" title="GTK+ Basics" href="cha-gtk.html">
<link rel="PREVIOUS" title="GTK+ Basics" href="cha-gtk.html">
<link rel="NEXT" title="Widget Concepts" href="z57.html">
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#0000FF" vlink=
"#840084" alink="#0000FF">
<div class="NAVHEADER">
<table width="100%" border="0" bgcolor="#ffffff" cellpadding=
"1" cellspacing="0">
<tr>
<th colspan="4" align="center">
<font color="#000000" size="2">GTK+ / Gnome Application
Development</font>
</th>
</tr>
<tr>
<td width="25%" bgcolor="#ffffff" align="left">
<a href="cha-gtk.html"><font color="#0000ff" size="2">
<b><<< Previous</b></font></a>
</td>
<td width="25%" colspan="2" bgcolor="#ffffff" align=
"center">
<font color="#0000ff" size="2"><b><a href="ggad.html">
<font color="#0000ff" size="2"><b>
Home</b></font></a></b></font>
</td>
<td width="25%" bgcolor="#ffffff" align="right">
<a href="z57.html"><font color="#0000ff" size="2"><b>
Next >>></b></font></a>
</td>
</tr>
</table>
</div>
<div class="SECT1">
<h1 class="SECT1">
<a name="SEC-CONTAINERS">Containers And Widget Layout</a>
</h1>
<p>
There are two kinds of container widgets in GTK+. All of
them are subclasses of the abstract <tt class="CLASSNAME">
GtkContainer</tt>. The first type of container widget
always descends from <tt class="CLASSNAME">GtkBin</tt>,
another abstract base class. Descendents of <tt class=
"CLASSNAME">GtkBin</tt> can contain only one child widget;
these containers add some kind of functionality to the
child. For example, <tt class="CLASSNAME">GtkButton</tt> is
a <tt class="CLASSNAME">GtkBin</tt> which makes the child
into a clickable button. <tt class="CLASSNAME">
GtkFrame</tt> is a <tt class="CLASSNAME">GtkBin</tt> which
draws a relieved border around the child. <tt class=
"CLASSNAME">GtkWindow</tt> allows the child to appear in a
toplevel window.
</p>
<p>
The second type of container widget often has <tt class=
"CLASSNAME">GtkContainer</tt> as its immediate parent.
These containers can have more than one child, and their
purpose is to manage layout. "Manage layout" means that
these containers assign <i class="EMPHASIS">sizes</i> and
<i class="EMPHASIS">positions</i> to the widgets they
contain. For example, <tt class="CLASSNAME">GtkVBox</tt>
arranges its children in a vertical stack. <tt class=
"CLASSNAME">GtkFixed</tt> allows you to position children
at arbitrary coordinates. <tt class="CLASSNAME">
GtkPacker</tt> gives you Tk-style layout management.
</p>
<p>
This chapter is about the second kind of container. To
produce the layout you want without hard-coding any sizes,
you'll need to understand how to use these. The goal is to
avoid making assumptions about window size, screen size,
widget appearance, fonts, and so on. Your application
should automatically adapt if these factors change.
</p>
<div class="SECT2">
<h2 class="SECT2">
<a name="SEC-SIZENEGOTIATION">Size Allocation</a>
</h2>
<p>
To understand layout containers, you first have to
understand how GTK+ widgets negotiate their size. It's
quite simple really; there are only two concepts, <i
class="FIRSTTERM">requisition</i> and <i class=
"FIRSTTERM">allocation</i>. These correspond to the two
phases of layout.
</p>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z47">Requisition</a>
</h3>
<p>
A widget's <i class="FIRSTTERM">requisition</i>
consists of a width and a height---the size the widget
would like to be. This is represented by a <span class=
"STRUCTNAME">GtkRequisition</span> struct:
</p>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="PROGRAMLISTING">
typedef struct _GtkRequisition GtkRequisition;
struct _GtkRequisition
{
gint16 width;
gint16 height;
};
</pre>
</td>
</tr>
</table>
<p>
Different widgets choose what size to request in
different ways. <tt class="CLASSNAME">GtkLabel</tt>,
for example, requests enough size to display all the
text in the label. Most container widgets base their
size request on the size requests of their children.
For example, if you place several buttons in a box, the
box will ask to be large enough to hold all the
buttons.
</p>
<p>
The first phase of layout starts with a toplevel widget
such as <tt class="CLASSNAME">GtkWindow</tt>. Since
it's a container, <tt class="CLASSNAME">GtkWindow</tt>
asks its child widget for a size request; that child
might ask its own children; and so on recursively. When
all child widgets have been queried, <tt class=
"CLASSNAME">GtkWindow</tt> will finally get a <span
class="STRUCTNAME">GtkRequisition</span> back from its
child. Depending on how it was configured, <tt class=
"CLASSNAME">GtkWindow</tt> may or may not be able to
expand to accomodate the size request.
</p>
</div>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z48">Allocation</a>
</h3>
<p>
Phase two of layout begins at this point. <tt class=
"CLASSNAME">GtkWindow</tt> makes a decision about how
much space is actually available for its child, and
communicates its decision to the child. This is known
as the child's <i class="FIRSTTERM">allocation</i>,
represented by the following struct:
</p>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="PROGRAMLISTING">
typedef struct _GtkAllocation GtkAllocation;
struct _GtkAllocation
{
gint16 x;
gint16 y;
guint16 width;
guint16 height;
};
</pre>
</td>
</tr>
</table>
<p>
The <span class="STRUCTNAME">width</span> and <span
class="STRUCTNAME">height</span> elements are identical
to <span class="STRUCTNAME">GtkRequisition</span>; they
represent the size of the widget. A <span class=
"STRUCTNAME">GtkAllocation</span> also includes the
coordinates of the child with respect to its parent.
<span class="STRUCTNAME">GtkAllocation</span>s are
assigned to children by their parent container.
</p>
<p>
Widgets are required to honor the <span class=
"STRUCTNAME">GtkAllocation</span> given to them. <span
class="STRUCTNAME">GtkRequisition</span> is only a
request; widgets must be able to cope with any size.
</p>
<p>
Given the layout process, it's easy to see what role
containers play. Their job is to assemble each child's
requisition into a single requisition to be passed up
the widget tree; then to divide the allocation they
receive between their children. Exactly how this
happens depends on the particular container.
</p>
</div>
</div>
<div class="SECT2">
<h2 class="SECT2">
<a name="SEC-GTKBOX"><tt class="CLASSNAME">
GtkBox</tt></a>
</h2>
<p>
A <tt class="CLASSNAME">GtkBox</tt> manages a row (<tt
class="CLASSNAME">GtkHBox</tt>) or column (<tt class=
"CLASSNAME">GtkVBox</tt>) of widgets. For <tt class=
"CLASSNAME">GtkHBox</tt>, all the widgets are assigned
the same height; the box's job is to distribute the
available width between them. <tt class="CLASSNAME">
GtkHBox</tt> optionally uses some of the available width
to leave gaps (called "spacing") between widgets. <tt
class="CLASSNAME">GtkVBox</tt> is identical, but in the
opposite direction (i.e., it distributes available height
rather than width). <tt class="CLASSNAME">GtkBox</tt> is
an abstract base class; <tt class="CLASSNAME">
GtkVBox</tt> and <tt class="CLASSNAME">GtkHBox</tt> can
be used almost entirely via its interface. Boxes are the
most useful container widget.
</p>
<p>
To create a <tt class="CLASSNAME">GtkBox</tt>, you use
one of the constructors shown in <a href=
"sec-containers.html#FL-HBOXCONSTRUCT">Figure 2</a> and
<a href="sec-containers.html#FL-VBOXCONSTRUCT">Figure
3</a>. The box constructor functions take two parameters.
If <span class="STRUCTNAME">TRUE</span>, <span class=
"STRUCTNAME">homogeneous</span> means that all children
of the box will be allocated the same amount of space.
<span class="STRUCTNAME">spacing</span> specifies the
amount of space between each child. There are functions
to change spacing and toggle homogeneity after the box is
created.
</p>
<div class="FIGURE">
<a name="FL-HBOXCONSTRUCT"></a>
<div class="FUNCSYNOPSIS">
<a name="FL-HBOXCONSTRUCT.SYNOPSIS"></a>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="FUNCSYNOPSISINFO">
#include <gtk/gtkhbox.h>
</pre>
</td>
</tr>
</table>
<p>
<code><code class="FUNCDEF">GtkWidget* <tt class=
"FUNCTION">gtk_hbox_new</tt></code>(gboolean <tt
class="PARAMETER"><i>homogeneous</i></tt>, gint <tt
class="PARAMETER"><i>spacing</i></tt>);</code>
</p>
</div>
<p>
<b>Figure 2. <tt class="CLASSNAME">GtkHBox</tt>
Constructor</b>
</p>
</div>
<div class="FIGURE">
<a name="FL-VBOXCONSTRUCT"></a>
<div class="FUNCSYNOPSIS">
<a name="FL-VBOXCONSTRUCT.SYNOPSIS"></a>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="FUNCSYNOPSISINFO">
#include <gtk/gtkvbox.h>
</pre>
</td>
</tr>
</table>
<p>
<code><code class="FUNCDEF">GtkWidget* <tt class=
"FUNCTION">gtk_vbox_new</tt></code>(gboolean <tt
class="PARAMETER"><i>homogeneous</i></tt>, gint <tt
class="PARAMETER"><i>spacing</i></tt>);</code>
</p>
</div>
<p>
<b>Figure 3. <tt class="CLASSNAME">GtkVBox</tt>
Constructor</b>
</p>
</div>
<p>
There are two basic functions to add a child to a <tt
class="CLASSNAME">GtkBox</tt>; they are shown in <a href=
"sec-containers.html#FL-BOXPACK">Figure 4</a>.
</p>
<div class="FIGURE">
<a name="FL-BOXPACK"></a>
<div class="FUNCSYNOPSIS">
<a name="FL-BOXPACK.SYNOPSIS"></a>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="FUNCSYNOPSISINFO">
#include <gtk/gtkbox.h>
</pre>
</td>
</tr>
</table>
<p>
<code><code class="FUNCDEF">void <tt class=
"FUNCTION">gtk_box_pack_start</tt></code>(GtkBox* <tt
class="PARAMETER"><i>box</i></tt>, GtkWidget* <tt
class="PARAMETER"><i>child</i></tt>, gboolean <tt
class="PARAMETER"><i>expand</i></tt>, gboolean <tt
class="PARAMETER"><i>fill</i></tt>, gint <tt class=
"PARAMETER"><i>padding</i></tt>);</code>
</p>
<p>
<code><code class="FUNCDEF">void <tt class=
"FUNCTION">gtk_box_pack_end</tt></code>(GtkBox* <tt
class="PARAMETER"><i>box</i></tt>, GtkWidget* <tt
class="PARAMETER"><i>child</i></tt>, gboolean <tt
class="PARAMETER"><i>expand</i></tt>, gboolean <tt
class="PARAMETER"><i>fill</i></tt>, gint <tt class=
"PARAMETER"><i>padding</i></tt>);</code>
</p>
</div>
<p>
<b>Figure 4. Packing <tt class="CLASSNAME">
GtkBox</tt></b>
</p>
</div>
<p>
A box can contain two sets of widgets. The first set is
packed at the "start" (top or left) of the box; the
second at the "end" (bottom or right). If you pack three
widgets into the start of a box, the first widget you
pack appears topmost or leftmost; the second follows the
first; and the third appears closest to the center of the
box. If you then pack three widgets into the end of the
same box, the first appears bottommost or rightmost; the
second follows it; and the third appears closest to the
center. With all six widgets packed, the order from
top/left to bottom/right is: 1, 2, 3, 3, 2, 1. <a href=
"sec-containers.html#FIG-PACKSTARTEND">Figure 5</a> shows
this for <tt class="CLASSNAME">GtkVBox</tt>. Order of
packing is only important within each end of the box;
i.e., we could have alternated packing start and packing
end, with the same results.
</p>
<div class="FIGURE">
<a name="FIG-PACKSTARTEND"></a>
<p>
<img src="figures/packstartend.png">
</p>
<p>
<b>Figure 5. Buttons packed into a <tt class=
"CLASSNAME">GtkVBox</tt></b>
</p>
</div>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z49"><tt class="CLASSNAME">GtkBox</tt> Layout
Details</a>
</h3>
<p>
Packing is affected by three parameters, which are the
same for both start and end packing; the meaning of
these parameters is somewhat complicated, because they
interact with the <span class="STRUCTNAME">
homogeneous</span> setting of the box and with each
other.
</p>
<p>
Here's how a <tt class="CLASSNAME">GtkBox</tt> computes
its size request for the "interesting" direction (width
for <tt class="CLASSNAME">GtkHBox</tt>, height for <tt
class="CLASSNAME">GtkVBox</tt>):
</p>
<ol type="1">
<li>
<p>
The total requested size of each child is
considered to be the child's size request, plus two
times the <span class="STRUCTNAME">padding</span>
value used to pack the child. A child's <span
class="STRUCTNAME">padding</span> is the amount of
blank space on either side of it. In short, Child
Size = (Child Widget's Size Request) + 2*(Child
Padding).
</p>
</li>
<li>
<p>
If the box is homogeneous, the base size request
for the entire box is equal to the size (request +
padding) of the largest child, times the number of
children. In a homogeneous box, all children are as
large as the largest child.
</p>
</li>
<li>
<p>
If the box is not homogeneous, the base size
request for the entire box is the sum of the size
(request + padding) of each child.
</p>
</li>
<li>
<p>
The box-wide <span class="STRUCTNAME">
spacing</span> setting determines how much blank
space to leave between children; so this value is
multiplied by the number of chilren minus one, and
added to the base size request. Note that <i class=
"FIRSTTERM">spacing</i> does not belong to a child;
it is blank space between children and is
unaffected by the <span class="STRUCTNAME">
expand</span> and <span class="STRUCTNAME">
fill</span> parameters. <i class="FIRSTTERM">
Padding</i>, on the other hand, is the space around
each child and <i class="EMPHASIS">is</i> affected
by the child's packing parameters.
</p>
</li>
<li>
<p>
All containers have a "border width" setting; two
times the border width is added to the request,
representing a border on either side. Thus, the
total size requested by a <tt class="CLASSNAME">
GtkBox</tt> is: (Sum of Child Sizes) +
Spacing*(Number of Children - 1) + 2*(Border
Width).
</p>
</li>
</ol>
<p>
After computing its size request and delivering it to
its parent container, <tt class="CLASSNAME">GtkBox</tt>
will receive its size allocation and distribute it
among its children as follows:
</p>
<ol type="1">
<li>
<p>
Enough space for the border width and inter-child
spacing is subtracted from the allocation; the
remainder is the available space for children
themselves. This space is divided into two chunks:
the amount actually requested by the children
(child requisitions and padding), and the "extra."
Extra = (Allocation Size) - (Sum of Child
Sizes).
</p>
</li>
<li>
<p>
If the box is not homogeneous, the "extra" space is
divided among those children with the <span class=
"STRUCTNAME">expand</span> parameter set to <span
class="STRUCTNAME">TRUE</span>. These children can
expand to fit available space. If no child can
expand, the extra is used to add more space in the
center of the box, between the start-packed widgets
and the end-packed widgets.
</p>
</li>
<li>
<p>
If the box is homogeneous, the extra is distributed
according to need; those children who requested
more space get less extra, so that everyone ends up
with the same amount of space. The <span class=
"STRUCTNAME">expand</span> parameter is ignored for
homogeneous boxes---extra is distributed to all
children, not just the expandable ones.
</p>
</li>
<li>
<p>
When a child gets some extra space, there are two
possibilities. More padding can be added around the
child, or the child widget itself can be expanded.
The <span class="STRUCTNAME">fill</span> parameter
determines which will happen. If <span class=
"STRUCTNAME">TRUE</span>, the child widget expands
to fill the space---that is, the entire space
becomes the child's allocation; if <span class=
"STRUCTNAME">fill</span> is <span class=
"STRUCTNAME">FALSE</span>, the child's padding is
increased to fill the space, and the child is
allocated only the space it requested. Note that
<span class="STRUCTNAME">fill</span> has no effect
if <span class="STRUCTNAME">expand</span> is set to
<span class="STRUCTNAME">FALSE</span> and the box
is not homogeneous, because the child will never
receive any extra space to fill.
</p>
</li>
</ol>
<p>
Whew! Who wants to think about all that? Fortunately,
there are some common patterns of usage, so you don't
need to solve a multivariate equation to figure out how
to use the widget. The authors of the GTK+ Tutorial
boil things down nicely to five cases that occur in
practice; we'll follow in their footsteps here.
</p>
</div>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z50">Non-Homogeneous Box Packing Patterns</a>
</h3>
<p>
There are three interesting ways to pack a
non-homogeneous box. First, you can pack all the
widgets into the end of the box, with their natural
size. This means setting the <span class="STRUCTNAME">
expand</span> parameter to <span class="STRUCTNAME">
FALSE</span>:
</p>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="PROGRAMLISTING">
gtk_box_pack_start(GTK_BOX(box),
child,
FALSE, FALSE, 0);
</pre>
</td>
</tr>
</table>
<p>
The result is shown in <a href=
"sec-containers.html#FIG-PACKNONHOMONOEXPANDNOFILL">
Figure 6</a>. The <span class="STRUCTNAME">
expand</span> parameter is the only one that matters in
this case; no children are receiving extra space, so
they wouldn't be able to fill it even if <span class=
"STRUCTNAME">fill</span> were <span class="STRUCTNAME">
TRUE</span>.
</p>
<div class="FIGURE">
<a name="FIG-PACKNONHOMONOEXPANDNOFILL"></a>
<p>
<img src="figures/packnonhomonoexpandnofill.png">
</p>
<p>
<b>Figure 6. Non-homogeneous, with <span class=
"STRUCTNAME">expand = FALSE</span></b>
</p>
</div>
<p>
Second, you can spread widgets throughout the box,
letting them keep their natural size as in <a href=
"sec-containers.html#FIG-PACKNONHOMOEXPANDNOFILL">
Figure 7</a>; this means setting the <span class=
"STRUCTNAME">expand</span> parameter to <span class=
"STRUCTNAME">TRUE</span>:
</p>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="PROGRAMLISTING">
gtk_box_pack_start(GTK_BOX(box),
child,
TRUE, FALSE, 0);
</pre>
</td>
</tr>
</table>
<div class="FIGURE">
<a name="FIG-PACKNONHOMOEXPANDNOFILL"></a>
<p>
<img src="figures/packnonhomoexpandnofill.png">
</p>
<p>
<b>Figure 7. Non-homogeneous, with <span class=
"STRUCTNAME">expand = TRUE</span> and <span class=
"STRUCTNAME">fill = FALSE</span></b>
</p>
</div>
<p>
Finally, you can fill the box with widgets (letting
larger children have more space) by setting the <span
class="STRUCTNAME">fill</span> parameter to <span
class="STRUCTNAME">TRUE</span> as well:
</p>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="PROGRAMLISTING">
gtk_box_pack_start(GTK_BOX(box),
child,
TRUE, TRUE, 0);
</pre>
</td>
</tr>
</table>
<p>
This configuration is shown in <a href=
"sec-containers.html#FIG-PACKNONHOMOEXPANDFILL">Figure
8</a>
</p>
<div class="FIGURE">
<a name="FIG-PACKNONHOMOEXPANDFILL"></a>
<p>
<img src="figures/packnonhomoexpandfill.png">
</p>
<p>
<b>Figure 8. Non-homogeneous, with <span class=
"STRUCTNAME">expand = TRUE</span> and <span class=
"STRUCTNAME">fill = TRUE</span></b>
</p>
</div>
</div>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z51">Homogeneous Box Packing Patterns</a>
</h3>
<p>
There are only two interesting ways to pack a
homogeneous box. Recall that the <span class=
"STRUCTNAME">expand</span> parameter is irrelevant for
homogeneous boxes; so the two cases correspond to the
<span class="STRUCTNAME">fill</span> parameter's
setting.
</p>
<p>
If <span class="STRUCTNAME">fill</span> is <span class=
"STRUCTNAME">FALSE</span>, you get <a href=
"sec-containers.html#FIG-PACKHOMONOFILL">Figure 9</a>.
Notice that the box is logically divided into three
equal parts, but only the largest child widget occupies
its entire space. The others are padded to fill their
third of the area. If <span class="STRUCTNAME">
fill</span> is <span class="STRUCTNAME">TRUE</span>,
you get <a href="sec-containers.html#FIG-PACKHOMOFILL">
Figure 10</a>; all the widgets are the same size.
</p>
<div class="FIGURE">
<a name="FIG-PACKHOMONOFILL"></a>
<p>
<img src="figures/packhomonofill.png">
</p>
<p>
<b>Figure 9. Homogeneous, with <span class=
"STRUCTNAME">fill = FALSE</span></b>
</p>
</div>
<div class="FIGURE">
<a name="FIG-PACKHOMOFILL"></a>
<p>
<img src="figures/packhomofill.png">
</p>
<p>
<b>Figure 10. Homogeneous, with <span class=
"STRUCTNAME">fill = TRUE</span></b>
</p>
</div>
</div>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z52">Box Packing Summary</a>
</h3>
<p>
Figure <a href="sec-containers.html#FIG-ALLPACK">Figure
11</a> shows all five box-packing techniques together.
(They are packed into a homogeneous <tt class=
"CLASSNAME">GtkVBox</tt> with <span class="STRUCTNAME">
fill</span> set to <span class="STRUCTNAME">TRUE</span>
and an interchild spacing of two pixels.) This should
give you a sense of their relative effects. Keep in
mind that you can also tweak the <span class=
"STRUCTNAME">padding</span> and <span class=
"STRUCTNAME">spacing</span> parameters, to increase or
decrease the amount of blank space between widgets.
However, you can easily create an ugly layout by using
inconsistent spacing---it's a good idea to try to keep
widgets "lined up" and consistently spaced.
</p>
<div class="FIGURE">
<a name="FIG-ALLPACK"></a>
<p>
<img src="figures/allpack.png">
</p>
<p>
<b>Figure 11. All Five Ways to Pack a Box</b>
</p>
</div>
<p>
A final point: notice that the <span class=
"STRUCTNAME">expand</span> and <span class=
"STRUCTNAME">fill</span> parameters are only relevant
when a box's size allocation is larger than its size
request. That is, these parameters determine how <i
class="EMPHASIS">extra</i> space is distributed.
Typically, extra space appears when a user resizes a
window to make it larger than its default size. Thus,
you should always try resizing your windows to be sure
your boxes are packed correctly.
</p>
</div>
</div>
<div class="SECT2">
<h2 class="SECT2">
<a name="SEC-GTKTABLE"><tt class="CLASSNAME">
GtkTable</tt></a>
</h2>
<p>
The second most common layout container is <tt class=
"CLASSNAME">GtkTable</tt>. <tt class="CLASSNAME">
GtkTable</tt> divides a region into cells; you can assign
each child widget to a rectangle made up of one or more
cells. You can think of <tt class="CLASSNAME">
GtkTable</tt> as a sheet of graph paper (with more
flexibility---the grid lines do not have to be
equidistant, though they can be).
</p>
<p>
<tt class="CLASSNAME">GtkTable</tt> comes with the usual
constructor, and some functions to attach children to it;
these are shown in <a href=
"sec-containers.html#FL-GTKTABLE">Figure 12</a>. When
creating a table, you specify the number of cells you
plan to use; this is purely for efficiency. The table
will automatically grow if you place children in cells
outside its current area. Like boxes, tables can be
homogeneous or not.
</p>
<div class="FIGURE">
<a name="FL-GTKTABLE"></a>
<div class="FUNCSYNOPSIS">
<a name="FL-GTKTABLE.SYNOPSIS"></a>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="FUNCSYNOPSISINFO">
#include <gtk/gtktable.h>
</pre>
</td>
</tr>
</table>
<p>
<code><code class="FUNCDEF">GtkWidget* <tt class=
"FUNCTION">gtk_table_new</tt></code>(guint <tt class=
"PARAMETER"><i>rows</i></tt>, guint <tt class=
"PARAMETER"><i>columns</i></tt>, gboolean <tt class=
"PARAMETER"><i>homogeneous</i></tt>);</code>
</p>
<p>
<code><code class="FUNCDEF">GtkWidget* <tt class=
"FUNCTION">gtk_table_attach</tt></code>(GtkTable* <tt
class="PARAMETER"><i>table</i></tt>, GtkWidget* <tt
class="PARAMETER"><i>child</i></tt>, guint <tt class=
"PARAMETER"><i>left_side</i></tt>, guint <tt class=
"PARAMETER"><i>right_side</i></tt>, guint <tt class=
"PARAMETER"><i>top_side</i></tt>, guint <tt class=
"PARAMETER"><i>bottom_side</i></tt>, GtkAttachOptions
<tt class="PARAMETER"><i>xoptions</i></tt>,
GtkAttachOptions <tt class="PARAMETER"><i>
yoptions</i></tt>, guint <tt class="PARAMETER"><i>
xpadding</i></tt>, guint <tt class="PARAMETER"><i>
ypadding</i></tt>);</code>
</p>
</div>
<p>
<b>Figure 12. <tt class="CLASSNAME">GtkTable</tt></b>
</p>
</div>
<p>
The first two arguments to <tt class="FUNCTION">
gtk_table_attach()</tt> are the table and the child to
place in the table. The next four specify which grid
lines should form the bounding box of the child. Grid
lines are numbered from the top left (northwest) corner
of the table, starting with 0; so a 2 by 3 table will
have vertical lines 0, 1, 2 and horizontal lines 0,1,2,3.
The last two arguments are the amount of padding to put
on the left-right sides of the child (<span class=
"STRUCTNAME">xpadding</span>) and the top-bottom (<span
class="STRUCTNAME">ypadding</span>). This is analagous to
padding in boxes.
</p>
<p>
The <span class="STRUCTNAME">GtkAttachOptions</span>
arguments require some explanation. Here's a summary of
possible values. The values are bitmasks, so more than
one can be specified by or-ing them together.
</p>
<ul>
<li>
<p>
<span class="STRUCTNAME">GTK_EXPAND</span> specifies
that this section of the table will expand to fit
available space, much like the <span class=
"STRUCTNAME">expand</span> option when packing
boxes.
</p>
</li>
<li>
<p>
<span class="STRUCTNAME">GTK_FILL</span> specifies
that the child widget will expand to fill available
space. Important only if <span class="STRUCTNAME">
GTK_EXPAND</span> is set, because <span class=
"STRUCTNAME">GTK_EXPAND</span> permits extra space to
exist.
</p>
</li>
<li>
<p>
<span class="STRUCTNAME">GTK_SHRINK</span> determines
what will happen if there is insufficient space to
meet the child's size request. If <span class=
"STRUCTNAME">GTK_SHRINK</span> is set, the child is
given a smaller allocation which reflects available
space---i.e., the table shrinks the child. If it
isn't set, the child is given its requested size;
this may result in overlapping children within the
table, and children will be "chopped off" at the
table edges (because they'll try to draw outside the
table's <span class="STRUCTNAME">
GdkWindow</span>).
</p>
</li>
</ul>
<p>
It's possible to set spacing between rows and columns, in
addition to padding around particular children; the terms
"spacing" and "padding" mean the same thing with respect
to tables and boxes. See <tt class="FILENAME">
gtk/gtktable.h</tt> for a complete list of available <tt
class="CLASSNAME">GtkTable</tt> functions.
</p>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z53"><tt class="CLASSNAME">GtkTable</tt>
Example</a>
</h3>
<p>
The following code creates a table with four cells and
three children; one child covers two cells. The
children are packed using different parameters:
</p>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="PROGRAMLISTING">
GtkWidget* window;
GtkWidget* button;
GtkWidget* container;
window = gtk_window_new(GTK_WINDOW_TOPLEVEL);
container = gtk_table_new(2, 2, FALSE);
gtk_container_add(GTK_CONTAINER(window), container);
gtk_window_set_title(GTK_WINDOW(window), "Table Attaching");
gtk_container_set_border_width(GTK_CONTAINER(container), 10);
/* This would be a bad idea in real code; but it lets us
* experiment with window resizing.
*/
gtk_window_set_policy(GTK_WINDOW(window), TRUE, TRUE, TRUE);
gtk_signal_connect(GTK_OBJECT(window),
"delete_event",
GTK_SIGNAL_FUNC(delete_event_cb),
NULL);
button = gtk_button_new_with_label("1. Doesn't shrink\nor expand");
gtk_table_attach(GTK_TABLE(container),
button,
0, 1,
0, 1,
GTK_FILL,
GTK_FILL,
0,
0);
button = gtk_button_new_with_label("2. Expands and shrinks\nvertically");
gtk_table_attach(GTK_TABLE(container),
button,
0, 1,
1, 2,
GTK_FILL,
GTK_FILL | GTK_EXPAND | GTK_SHRINK,
0,
0);
button = gtk_button_new_with_label("3. Expands and shrinks\nin both directions");
gtk_table_attach(GTK_TABLE(container),
button,
1, 2,
0, 2,
GTK_FILL | GTK_EXPAND | GTK_SHRINK,
GTK_FILL | GTK_EXPAND | GTK_SHRINK,
0,
0);
</pre>
</td>
</tr>
</table>
<p>
It's instructive to observe the resulting table as the
window is resized. First, a quick summary of how the
children are attached:
</p>
<ol type="1">
<li>
<p>
The first child will always receive its requested
size; it neither expands nor shrinks.
</p>
</li>
<li>
<p>
The second child can expand and shrink only in the
Y direction.
</p>
</li>
<li>
<p>
The third child can expand and shrink in either
direction.
</p>
</li>
</ol>
<p>
The window's natural size is shown in <a href=
"sec-containers.html#FIG-TABLENATURAL">Figure 13</a>;
notice that some cells are given more space than the
widgets inside them requested because table cells have
to remain aligned. (Recall that a button with a label
will request only enough space to display the entire
label.) The <span class="STRUCTNAME">GTK_FILL</span>
flag causes <tt class="CLASSNAME">GtkTable</tt> to
allocate extra space to the widgets themselves, instead
of leaving blank padding around them.
</p>
<div class="FIGURE">
<a name="FIG-TABLENATURAL"></a>
<p>
<img src="figures/tablenatural.png">
</p>
<p>
<b>Figure 13. <span class="STRUCTNAME">
GtkTable</span> before resizing</b>
</p>
</div>
<p>
Now imagine the user expands the window vertically;
notice that extra space is given to the widgets with
<span class="STRUCTNAME">GTK_EXPAND</span> turned on in
the Y direction---namely widgets two and three---while
the widget in the top-left corner remains unchanged. <a
href="sec-containers.html#FIG-TABLEVERTRESIZE">Figure
14</a> shows this state of affairs.
</p>
<div class="FIGURE">
<a name="FIG-TABLEVERTRESIZE"></a>
<p>
<img src="figures/tablevertresize.png">
</p>
<p>
<b>Figure 14. <span class="STRUCTNAME">
GtkTable</span> after expanding the window
vertically</b>
</p>
</div>
<p>
Next, imagine the user expanding the window
horizontally; only child widget number three can expand
horizontally. <a href=
"sec-containers.html#FIG-TABLEHORIZRESIZE">Figure
15</a> shows this.
</p>
<div class="FIGURE">
<a name="FIG-TABLEHORIZRESIZE"></a>
<p>
<img src="figures/tablehorizresize.png">
</p>
<p>
<b>Figure 15. <span class="STRUCTNAME">
GtkTable</span> after expanding the window
horizontally</b>
</p>
</div>
<p>
<a href="sec-containers.html#FIG-TABLEVERTSHRINK">
Figure 16</a> shows the result if the user shrinks the
table vertically, so that there isn't enough vertical
space to give all the widgets their size requests.
Child number two gets shortchanged, while child number
one gets all the vertical space it needs.
</p>
<div class="FIGURE">
<a name="FIG-TABLEVERTSHRINK"></a>
<p>
<img src="figures/tablevertshrink.png">
</p>
<p>
<b>Figure 16. <span class="STRUCTNAME">
GtkTable</span> after shrinking the window
vertically</b>
</p>
</div>
<p>
Finally, <a href=
"sec-containers.html#FIG-TABLEHORIZSHRINK">Figure
17</a> shows the result if the user shrinks the table
horizontally. Child number three gets the short end of
the stick in this situation.
</p>
<div class="FIGURE">
<a name="FIG-TABLEHORIZSHRINK"></a>
<p>
<img src="figures/tablehorizshrink.png">
</p>
<p>
<b>Figure 17. <span class="STRUCTNAME">
GtkTable</span> after shrinking the window
horizontally</b>
</p>
</div>
<p>
It's not a bad idea to try resizing your window like
this whenever you're designing a layout, just to be
sure something sane happens. The definition of "sane"
varies with the exact widgets you've placed in the
layout.
</p>
</div>
<div class="SECT3">
<h3 class="SECT3">
<a name="Z54">Using <tt class="FUNCTION">
gtk_table_attach_defaults()</tt></a>
</h3>
<p>
Since <tt class="FUNCTION">gtk_table_attach()</tt> is
somewhat cumbersome, there's a simpler version called
<tt class="FUNCTION">gtk_table_attach_defaults()</tt>,
shown in <a href=
"sec-containers.html#FL-ATTACHDEFAULTS">Figure 18</a>.
This version attaches the child with the options <span
class="STRUCTNAME">GTK_EXPAND</span> and <span class=
"STRUCTNAME">GTK_FILL</span>, and no padding.
</p>
<p>
It's tempting to use <tt class="FUNCTION">
gtk_table_attach_defaults()</tt> all the time to save
typing, but really you shouldn't; in fact, it's
probably fair to say that it's rarely used. The
function is only useful if the defaults happen to be
exactly the settings you want. Most of the time, you
need to carefully tweak your table attachment
parameters to get really nice behavior when your window
is resized. Always try resizing your window to be sure
you've designed your layout well.
</p>
<div class="FIGURE">
<a name="FL-ATTACHDEFAULTS"></a>
<div class="FUNCSYNOPSIS">
<a name="FL-ATTACHDEFAULTS.SYNOPSIS"></a>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="FUNCSYNOPSISINFO">
#include <gtk/gtktable.h>
</pre>
</td>
</tr>
</table>
<p>
<code><code class="FUNCDEF">GtkWidget* <tt class=
"FUNCTION">
gtk_table_attach_defaults</tt></code>(GtkTable* <tt
class="PARAMETER"><i>table</i></tt>, GtkWidget* <tt
class="PARAMETER"><i>child</i></tt>, guint <tt
class="PARAMETER"><i>left_side</i></tt>, guint <tt
class="PARAMETER"><i>right_side</i></tt>, guint <tt
class="PARAMETER"><i>top_side</i></tt>, guint <tt
class="PARAMETER"><i>bottom_side</i></tt>);</code>
</p>
</div>
<p>
<b>Figure 18. Attaching with Defaults</b>
</p>
</div>
</div>
</div>
<div class="SECT2">
<h2 class="SECT2">
<a name="Z55">Other Layout Widgets</a>
</h2>
<p>
Boxes and tables are the most commonly-used layout
widgets by far. However, there are a few others for
special situations.
</p>
<ul>
<li>
<p>
<tt class="CLASSNAME">GtkButtonBox</tt> is a special
kind of box appropriate for the "action area" of a
dialog.
</p>
</li>
<li>
<p>
<tt class="CLASSNAME">GtkPacker</tt> supports <tt
class="APPLICATION">Tk</tt>-style packing, useful if
you're familiar with <tt class="APPLICATION">
Tk</tt>.
</p>
</li>
<li>
<p>
<tt class="CLASSNAME">GtkLayout</tt> provides an
infinite scrolling area. In general, scrolling areas
in GTK+ are limited to just over 30,000 pixels,
because that is the maximum size of an X window.
</p>
</li>
<li>
<p>
<tt class="CLASSNAME">GtkFixed</tt> allows you to
manually position widgets at fixed coordinates.
</p>
</li>
</ul>
</div>
<div class="SECT2">
<h2 class="SECT2">
<a name="Z56">Manually Affecting Layout</a>
</h2>
<p>
It's possible to manually override GTK+'s geometry
management. This is a bad idea 95% of the time, because
GTK+'s geometry is essentially the user's preferred
geometry, determined by the theme, and resizing toplevel
windows. If you find yourself wanting to do things
manually, it's probably because you're using the wrong
layout container, or you really should be writing a
custom container widget.
</p>
<p>
You can force a size or position on a widget with the
functions shown in <a href="sec-containers.html#FL-SETU">
Figure 19</a>. However, it is rarely a good idea to use
them. In particular, <tt class="FUNCTION">
gtk_widget_set_usize()</tt> should not be used to set a
toplevel window's default size. Usually you want to set
window size because you've saved the application's state
and you're restoring it, or because the user specified a
window geometry on the command line. Unfortunately, if
you use <tt class="FUNCTION">gtk_widget_set_usize()</tt>
the user will be unable to shrink the window, and you'll
get hate mail. Rather than force a size, you want to
specify an initial size with <tt class="FUNCTION">
gtk_window_set_default_size()</tt>, shown in <a href=
"sec-containers.html#FL-DEFAULTSIZE">Figure 20</a>. <tt
class="FUNCTION">gtk_widget_set_usize()</tt> is almost
never a good idea for non-toplevel widgets either; most
of the time, you can get better results using the proper
layout widget.
</p>
<p>
<tt class="FUNCTION">gtk_widget_set_uposition()</tt> is
only useful for toplevel windows; it borders on
nonsensical for other widgets, and will most likely cause
bad things to happen. It's primarily used to honor a <tt
class="APPLICATION">--geometry</tt> command line
argument.
</p>
<p>
All three of these functions can accept <span class=
"STRUCTNAME">-1</span> for the <span class="STRUCTNAME">
x</span>, <span class="STRUCTNAME">y</span>, <span class=
"STRUCTNAME">width</span>, or <span class="STRUCTNAME">
height</span> argument. The functions ignore any <span
class="STRUCTNAME">-1</span> argument; this allows you to
set only one of the two arguments, leaving the default
value for the other.
</p>
<div class="FIGURE">
<a name="FL-SETU"></a>
<div class="FUNCSYNOPSIS">
<a name="FL-SETU.SYNOPSIS"></a>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="FUNCSYNOPSISINFO">
#include <gtk/gtkwidget.h>
</pre>
</td>
</tr>
</table>
<p>
<code><code class="FUNCDEF">void <tt class=
"FUNCTION">
gtk_widget_set_uposition</tt></code>(GtkWidget* <tt
class="PARAMETER"><i>widget</i></tt>, gint <tt class=
"PARAMETER"><i>x</i></tt>, gint <tt class=
"PARAMETER"><i>y</i></tt>);</code>
</p>
<p>
<code><code class="FUNCDEF">void <tt class=
"FUNCTION">
gtk_widget_set_usize</tt></code>(GtkWidget* <tt
class="PARAMETER"><i>widget</i></tt>, gint <tt class=
"PARAMETER"><i>width</i></tt>, gint <tt class=
"PARAMETER"><i>height</i></tt>);</code>
</p>
</div>
<p>
<b>Figure 19. Forcing Allocations</b>
</p>
</div>
<div class="FIGURE">
<a name="FL-DEFAULTSIZE"></a>
<div class="FUNCSYNOPSIS">
<a name="FL-DEFAULTSIZE.SYNOPSIS"></a>
<table border="0" bgcolor="#E0E0E0" width="100%">
<tr>
<td>
<pre class="FUNCSYNOPSISINFO">
#include <gtk/gtkwindow.h>
</pre>
</td>
</tr>
</table>
<p>
<code><code class="FUNCDEF">void <tt class=
"FUNCTION">
gtk_window_set_default_size</tt></code>(GtkWindow*
<tt class="PARAMETER"><i>window</i></tt>, gint <tt
class="PARAMETER"><i>width</i></tt>, gint <tt class=
"PARAMETER"><i>height</i></tt>);</code>
</p>
</div>
<p>
<b>Figure 20. Default Window Size</b>
</p>
</div>
</div>
</div>
<div class="NAVFOOTER">
<br>
<br>
<table width="100%" border="0" bgcolor="#ffffff" cellpadding=
"1" cellspacing="0">
<tr>
<td width="25%" bgcolor="#ffffff" align="left">
<a href="cha-gtk.html"><font color="#0000ff" size="2">
<b><<< Previous</b></font></a>
</td>
<td width="25%" colspan="2" bgcolor="#ffffff" align=
"center">
<font color="#0000ff" size="2"><b><a href="ggad.html">
<font color="#0000ff" size="2"><b>
Home</b></font></a></b></font>
</td>
<td width="25%" bgcolor="#ffffff" align="right">
<a href="z57.html"><font color="#0000ff" size="2"><b>
Next >>></b></font></a>
</td>
</tr>
<tr>
<td colspan="2" align="left">
<font color="#000000" size="2"><b>GTK+
Basics</b></font>
</td>
<td colspan="2" align="right">
<font color="#000000" size="2"><b>Widget
Concepts</b></font>
</td>
</tr>
</table>
</div>
</body>
</html>
|
