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
|
<html>
<head>
<LINK REL="stylesheet" HREF="styles.css" TYPE="text/css">
<title>FOX-Toolkit</title>
<!-- HTML Copyright 2001 Paul Laufer -->
</head>
<body bgcolor=#ffffff link=#990033 vlink=#4a73ad alink=#ed004f text=#000000>
<!--header-->
<table align=center border=0 cellpadding=0 cellspacing=0 width=100% >
<tr><td bgcolor=silver colspan=5 align=right height=50><img src=art/oul_grey.gif align=left valign=top width=8 height=8><img src=art/foxlogo.png valign=bottom alt="FOX Toolkit" height=50 width=500 border=0 ></td>
<td bgcolor=#557faa valign=top align=right><img src=art/our.gif width=8 height=8></td>
</tr>
<!-- end header -->
<tr>
<td bgcolor=#557faa colspan=2 valign=top align=left> </td>
<td bgcolor=#557faa colspan=3><font color=#ffffff size=+1><center>
<!-- Page Title -->
Documentation: Layout Managers
<!-- End Page Title -->
</center></font></td>
<td bgcolor=#557faa valign=top align=right> </td>
</tr>
<tr>
<td bgcolor=#557faa colspan=2> </td>
<td bgcolor=#ffffff valign=top align=left><img src=art/iul.gif width=8 height=8></td>
<td bgcolor=#ffffff> </td>
<td bgcolor=#ffffff valign=top align=right><img src=art/iur.gif width=8 height=8></td>
<td bgcolor=#557faa width=15> </td>
</tr>
<tr>
<td width=8 bgcolor=#557faa> </td>
<td valign=top bgcolor=#557faa link=#ffffff width=150>
<!-- start navbar content -->
<a href=fox.html><font color=#ffffff>Home</font></a><br>
<a href=news.html><font color=#ffffff>News</font></a><br>
<a href=download.html><font color=#ffffff>Download</font></a><br>
<a href=goals.html><font color=#ffffff>Goals & Approach</font></a><br>
<a href=doc.html><font color=#ffffff>Documentation</font></a><br>
<a href=faq.html><font color=#ffffff>FAQ</font></a><br>
<a href=rex.html><font color=#ffffff>FXRex</font></a><br>
<a href=screenshots.html><font color=#ffffff>Screenshots</font></a><br>
<br>
<a href=adie.html><font color=#ffffff>Adie</font></a><br>
<a href=pathfinder.html><font color=#ffffff>PathFinder</font></a><br>
<a href=calc.html><font color=#ffffff>FOX Calculator</font></a><br>
<br>
<a href=projects.html><font color=#ffffff>Projects</font></a><br>
<br>
<a href='http://fxpy.sourceforge.net'><font color=#ffffff>FXPy</font></a><br>
<a href='http://fxruby.sourceforge.net'><font color=#ffffff>FXRuby</font></a><br>
<a href='http://eiffelfox.sourceforge.net'><font color=#ffffff>EiffelFox</font></a><br>
<a href='http://eevolved.com/foxhole/'><font color=#ffffff>The FOX Hole</font></a><br>
<a href='http://takahr.dhis.portside.net/cgi-bin/rwiki.cgi?cmd=view;name=FOX+FAQ'><font color=#ffffff>Japanese Docs</font></a><br>
<br>
<center>
<a href="http://www.eff.org/br"><img SRC="art/freespeach.gif" border=0></a>
<p>
<a href="http://www.slashdot.org"><img SRC="art/slingerzbutton1.gif" border=0></a>
</center>
<!-- end navbar content -->
</td>
<td bgcolor=#ffffff> </td>
<td valign=top>
<!-- start main window content -->
<center><img src='art/foxstart.png'>
<BR><B>Documentation: Layout Managers</B>
</center>
<p>
<p>
<b>Placing Widgets</b>
<hr>
<FONT COLOR="#000000">Making an attractive layout for a Dialog or Window
is an important consideration in design of a user interface. Setting
windows at specific x,y coordinates, and specifying explicit dimensions
allow the GUI designer full control over the placement of each Control.
However, this is very tedious and time-consuming. Also, what if the
labels on buttons change, or if the user wants to use a bigger font?</FONT>
<P><FONT COLOR="#000000">For these reasons, the preferred method for placing
GUI Controls on windows in FOX is through the use of so-called Layout Managers.
A Layout manager is a widget whose primary purpose is to arrange GUI Controls
contained in it in a certain way in its interior; this even includes other
Layout Managers! The benefits of this approach vis-a-vis a precise
and explicit placement is that:</FONT>
<OL>
<LI>
<FONT COLOR="#000000">It takes the tedium out of placing GUI Controls;
the application programmer does not concern him or herself with specific
coordinates.</FONT></LI>
<LI>
<FONT COLOR="#000000">GUI Controls are automatically arranged correctly,
even if button labels are changed, or users choose bigger fonts.</FONT></LI>
<LI>
<FONT COLOR="#000000">Layouts may be recalculated intelligently when a
user resizes the window.</FONT></LI>
<LI>
<FONT COLOR="#000000">It makes it easy to accomodate and place Controls
which are created automatically under program control, for example in configurable
GUI's which may place hundreds of controls based on configuration files.</FONT></LI>
</OL>
<FONT COLOR="#000000">In FOX, you determine the arrangement of a
GUI Control by selecting the appropriate Layout Managers, and a combination
of <I>Packing Styles </I>passed to the Layout Manager, as well as a combination
of <I>Layout Hints</I> passed to the GUI Control being arranged.
Thus, virtually every conceivable arrangement can be achieved.</FONT>
<P><FONT COLOR="#000000">Note that FOX allows nesting of Layout Managers;
a nested Layout Manager can thus have both a Packing Style as well as Layout
Hints!</FONT>
<P><FONT COLOR="#000000">FOX supports a number of general-purpose layout
managers. The desired arrangement of GUI controls determines which
layout manager is the most appropriate for the job; the following table
lists the most commonly used layout managers and their layout arrangement:</FONT>
<BR>
<BR>
<CENTER><TABLE BORDER CELLSPACING=0 CELLPADDING=5 WIDTH="90%" BGCOLOR="#FFF8E1" NOSAVE >
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXPacker</FONT></B></TD>
<TD NOSAVE>The Packer layout widget places its GUI elements in its
interior rectangle, placing each child against one of the four sides.
As each child is placed, the size of the rectangle is reduced by the space
taken up by the child.
<BR>If a child is placed against the left or right, the interior rectangle's
width is reduced; if the child is placed against the top or bottom, the
height is reduced.
<BR>Children may be of any type, including other layout managers.</TD>
</TR>
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXTopWindow</FONT></B></TD>
<TD NOSAVE>The TopWindow operates like an FXPacker window. For simple
dialogs and toplevel windows, no additional layout managers may be needed
in many cases, as the TopWindow's layout characteristics may be sufficient.</TD>
</TR>
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXHorizontalFrame</FONT></B></TD>
<TD>The HorizontalFrame layout manager packs its children horizontally
from left to right (or right to left). </TD>
</TR>
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXVerticalFrame</FONT></B></TD>
<TD>The VerticalFrame layout manager packs its children vertically, from
top to bottom or vice versa. It behaves similar to the HorizontalFrame
layout manager.</TD>
</TR>
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXMatrix</FONT></B></TD>
<TD>The Matrix layout manager arranges its children in rows and columns.
An FXMatrix widget can operate in both column-oriented as well as row-oriented
mode. Normally, the Matrix layout manager operates row-wise.
Based on the number of rows, the Matrix layout determines the width of
each column and the height of each row, then arranges the children in the
space allotted, observing the child's layout hints as much as possible. </TD>
</TR>
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXSwitcher</FONT></B></TD>
<TD NOSAVE>The Switcher layout manager places its children exactly on top
of each other; it ignores most of the layout hints provided by each child.
You typically use a layout manager like the switcher to save screen real-estate,
by placing for example several control panels on top of each other, and
bringing the right one on top depending on the context.</TD>
</TR>
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXGroupBox</FONT></B></TD>
<TD>The GroupBox is a layout manager that provides identical layout facilities
as the Packer. In addition, the GroupBox draws an attractive border
around its contents, and provides an optional caption. Finally,
if its children are RadioButtons, it forces at most one of these to be
checked.</TD>
</TR>
<TR NOSAVE>
<TD VALIGN=TOP NOSAVE><B><FONT SIZE=+2>FXSplitter</FONT></B></TD>
<TD>The Splitter layout manager divides some area of the screen horizontally
or vertically. The divider bars can be repositioned by the user,
so that depending on what the user is doing, he or she may give one or
the other partition more screen space.</TD>
</TR>
</TABLE></CENTER>
<p>
<p>
<b>How Layout Works</b>
<hr><FONT COLOR="#000000">All widgets in FOX are organized into a <I>widget</I>
<I>hierarchy</I>
or <I>widget-tree</I>. Widgets are roughly classified as <I>Composite</I>
widgets, and <I>Simple</I> widgets. Composite widgets can have child
widgets, whereas Simple widgets are the most basic type of widget.</FONT>
<FONT COLOR="#000000">One widget is at the top of the widget hierarchy:
the <I>RootWindow</I> widget. This special widget represents the
background screen on your display.</FONT> <FONT COLOR="#000000">Widgets
below the RootWindow widgets are called <I>Shell</I> widgets. Shell
widgets are positioned and resized directly by the end-user, typically
through resize handles and title-bars provided by a
<I>Window Manager</I>.</FONT>
<P><FONT COLOR="#000000">As a user resizes a Shell widget, layout needs
to be performed to reposition each widget in that Shell so as to maintain
the proper arrangement. Hence, we refer to the <I>layout</I> process
as going <B><I>top-down</I></B>, i.e. proceeding from widgets higher up
in the widget tree downward toward the leaves of the tree.</FONT>
<P><FONT COLOR="#000000">Sometimes, however, widgets may want to change
size of their own accord. For example, an application changes the
text on a Label widget, making it larger. Changing a widget's size demands
that its immediate parent be notified, as widgets are arranged by their
parents. Depending on the arrangement, the widget's parent may decide
that it, too, may need to change size, and in its turn notify its parent.
Thus process goes on all the way till some widget is encountered whose
size is not affected by the change. Thus, we refer to the <I>recalculation</I>
process as going <B><I>bottom-up.</I></B></FONT>
<P><FONT COLOR="#000000">In the course of recursing upwards, all widgets
are marked for later layout. The upward traversal will typically be
stopped because of one of the following reasons:</FONT>
<OL>
<LI>
<FONT COLOR="#000000"><B>The widget is a Shell widget</B>. Shell
widgets are resized by the user only, so the size will not change, and
layout will have to be performed as well as possible given the size of
the Shell widget.</FONT></LI>
<LI>
<FONT COLOR="#000000"><B>The widget is a ScrollWindow widget.</B>
A ScrollWindow does not have to grow or shrink when its child does:- it
just adjusts the scrollbars to reflect the new child size, and layout the
child properly.</FONT></LI>
<LI>
<FONT COLOR="#000000"><B>The widget is able to accomodate the child's new
size. </B>For example, it may be that the child that changed was
not the determining factor that caused the parent's size; in such a case,
no further marking needs to take place.</FONT></LI>
</OL>
<FONT COLOR="#000000"><FONT SIZE=+0>During idle processing, all marked
widgets will be laid out by the system, and their mark-flags will be reset.
Thus, during processing of a user-event, any number of things may be changed
in the User Interface; still, only one pass will be performed to rearrange
all widgets again. This is one of the reasons for FOX's fast performance
for large-scale graphical user interfaces.</FONT></FONT>
<p>
<p>
<b>About Default Sizes</b>
<hr><FONT COLOR="#000000">All widgets may be requested to compute their
<I>default
size</I>. Layout widgets will use this information to determine their own
default size. Mostly, layout managers will try and ensure that a
child-widget will not be made smaller than its reported default size.
Note that the default size is normally the minimum size that is sensible
for a widget, but that a widget may potentially become smaller than its
default size!</FONT>
<BR><FONT COLOR="#000000">For most types of Controls, the default size
is computed based on the content, such as a text label and icon, plus borders
and perhaps some interior padding; most Controls have a border, which may
be 0, 1, or 2 pixels wide, and an interior padding around the top, bottom,
left, and right side. The interior padding provides some spacing
around the content for visual aesthetics. For Layout Managers, the
default size is computed based on the arrangement of the children, their
default sizes, its own border, interior padding, and inter-child spacing.</FONT>
<p>
<p>
<b>Layout Hints</b>
<hr><FONT COLOR="#000000">With layout hints, widgets can inform their parent
layout manager of certain desired positioning and sizing requirements.
Since they are just hints, these may not always be observed. Generally,
however, the layout widgets will try and do their best to observe the hints
insofar as feasible.</FONT>
<P><FONT COLOR="#000000">The absence of a specific hint usually indicates
that a default value is to be chosen. So in many cases, you do not
need to fully specify any hints at all! In complicated situations,
however, you may have to specify many of these hints. The FOX
toolkit has defined the hints in such a way that the most common situations
require the fewest hint-flags; for example, normally, Layout Managers are
filled from top to bottom, and left to right. Thus, you wouldn't
have to specify these hints if this is the case!</FONT>
<P><FONT COLOR="#000000">We will subsequently describe the layout hints
and their effect on the typical layout process; we have indicated the default
option between parentheses; it is usually the case that the default options
do not have to be specified explicitly.</FONT>
<BR>
<BR>
<BR>
<CENTER><TABLE BORDER CELLSPACING=0 WIDTH="90%" BGCOLOR="#FFF8E1" NOSAVE >
<TR NOSAVE>
<TD NOSAVE><U><FONT SIZE=+3>Layout Hint:</FONT></U></TD>
<TD><U><FONT SIZE=+3>Where</FONT></U>:</TD>
<TD><U><FONT SIZE=+3>Effect:</FONT></U></TD>
</TR>
<TR NOSAVE>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_SIDE_TOP (default)</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_SIDE_BOTTOM</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_SIDE_LEFT</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_SIDE_RIGHT</FONT></FONT></B></TD>
<TD NOSAVE>FXPacker,
<BR>FXGroupBox,
<BR>FXTopLevel,
<BR><I><FONT COLOR="#FF6666">only</FONT></I></TD>
<TD NOSAVE><FONT COLOR="#000000">If you specify <B><I>one</I></B> of these
four options, the child widget will be stuck to the top, bottom, left,
or right, respectively in the layout manager cavity. The cavity's
size will be reduced by the amount lopped off by the packed widget.
LAYOUT_SIDE_TOP/LAYOUT_SIDE_BOTTOM will reduce the height of the cavity,
and LAYOUT_SIDE_LEFT/LAYOUT_SIDE_RIGHT will reduce the width.</FONT>
<BR>For other composite widgets, these options may not have any effect</TD>
</TR>
<TR>
<TD><B><FONT SIZE=-1>LAYOUT_FILL_ROW</FONT></B>
<BR><B><FONT SIZE=-1>LAYOUT_FILL_COLUMN</FONT></B></TD>
<TD>FXMatrix
<BR><I><FONT COLOR="#FF6666">only</FONT></I></TD>
<TD>If LAYOUT_FILL_COLUMN is specified for all child widgets in a certain
column in of a Matrix layout manager, the whole column can stretch if the
Matrix itself is stretched horizontally. Analoguously, if LAYOUT_FILL_ROW
is specified for all child widgets in a certain row, the whole row is stretched
if the Matrix layout manager is stretched vertically.</TD>
</TR>
<TR NOSAVE>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_LEFT (default)</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_RIGHT</FONT></FONT></B></TD>
<TD NOSAVE><I><FONT COLOR="#FF6666">all</FONT></I></TD>
<TD NOSAVE>The widget will be placed on the left-side, or right side of
the space remaining in the container. When used for a child of FXPacker
FXGroupBox, or FXTopLevel, the hint will be ignored unless either LAYOUT_SIDE_TOP
or LAYOUT_SIDE_BOTTOM is specified.</TD>
</TR>
<TR NOSAVE>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_TOP (default)</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_BOTTOM</FONT></FONT></B></TD>
<TD NOSAVE><I><FONT COLOR="#FF6666">all</FONT></I></TD>
<TD NOSAVE>The widget will be placed on the top-side or bottom-side of
the space remaining in the container. For a child of FXPacker etc.,
these options will only have effect if either LAYOUT_SIDE_RIGHT or LAYOUT_SIDE_LEFT
is specified.</TD>
</TR>
<TR NOSAVE>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_FIX_X</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_FIX_Y</FONT></FONT></B></TD>
<TD NOSAVE><I><FONT COLOR="#FF6666">all</FONT></I></TD>
<TD NOSAVE><FONT COLOR="#000000">Either none, one, or both of these hints
may be specified. The LAYOUT_FIX_X hint will cause the parent layout
manager to place this widget at the indicated X position, as passed on
the optional arguments in the widgets constructor argument list. Likewise,
a LAYOUT_FIX_Y hint will cause placement at the indicated Y position.</FONT>
<FONT COLOR="#000000">Note that the X and Y position is specified in the
<I>parent's
coordinate system</I>.</FONT></TD>
</TR>
<TR>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_FIX_WIDTH</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_FIX_HEIGHT</FONT></FONT></B></TD>
<TD><I><FONT COLOR="#FF6666">all</FONT></I></TD>
<TD>These options will fix the widgets width (resp. height) to the value
specified on the constructor. You can change the widget's size using
setWidth() and setHeight(), under program control; however, the layout
manager will generally observe the specified dimensions of the widget without
trying to modify it (unless other options override).</TD>
</TR>
<TR>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_MIN_WIDTH (default)</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_MIN_HEIGHT (default)</FONT></FONT></B></TD>
<TD><I><FONT COLOR="#FF6666">all</FONT></I></TD>
<TD><FONT COLOR="#000000">Either none, one, or both of these hints may
be specified. You will almost never specify these options, except perhaps
for code legibility. If LAYOUT_FIX_WIDTH or LAYOUT_FIX_HEIGHT are
not specified, these options will cause the parent layout widget to use
the default (or minimum) width and height, respectively.</FONT></TD>
</TR>
<TR>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_CENTER_X</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_CENTER_Y</FONT></FONT></B></TD>
<TD><I><FONT COLOR="#FF6666">all</FONT></I></TD>
<TD>The widget will be centered in the x-direction (y-direction) in the
parent. Extra spacing will be added around the widget to place it
at the center of the space available to it. The widget's size will
be its default size unless LAYOUT_FIX_WIDTH or LAYOUT_FIX_HEIGHT have been
specified.</TD>
</TR>
<TR>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_FILL_X</FONT></FONT></B>
<BR><B><FONT COLOR="#000000"><FONT SIZE=-1>LAYOUT_FILL_Y</FONT></FONT></B></TD>
<TD><I><FONT COLOR="#FF6666">all</FONT></I></TD>
<TD><FONT COLOR="#000000">Either none, one, or both of these hints may
be specified. LAYOUT_FILL_X will cause the parent layout manager
to stretch or shrink the widget to accomodate the available space.
If more than one child with this option is placed side by side, the available
space will be subdivided proportionally to their default size.</FONT>
<BR><FONT COLOR="#000000">LAYOUT_FILL_Y has the identical effect on the
vertical direction.</FONT></TD>
</TR>
</TABLE></CENTER>
<p>
<p>
<b>General Purpose Layout Managers</b>
<hr>
<FONT COLOR="#000000">All general-purpose layout widgets have interior
padding, to offset their child-widgets by some amount from the left, right,
top, and bottom edge of the layout manager's interior edges, as well as
horizontal and vertical spacing, which is extra space placed between child-widgets
to prevent them from being stuck too close together.</FONT>
<BR><FONT COLOR="#000000">As usual, sensible default values are automatically
supplied in the optional arguments on the constructor argument list so
that in many cases, you will not need to specify specific values yourself.</FONT>
<P>All layout managers support the so-called packing styles:
<p>
<p>
<b>Packing Styles</b>
<hr>
The Layout managers support a number of packing styles which can influence
the way their children are arranged. These packing style flags override
hints that child widgets may supply. The following packing styles
are available:
<BR>
<BR>
<CENTER><TABLE BORDER CELLSPACING=0 WIDTH="90%" BGCOLOR="#FFF8E1" NOSAVE >
<TR NOSAVE>
<TD NOSAVE><U><FONT SIZE=+3>Packing Style:</FONT></U></TD>
<TD><U><FONT SIZE=+3>Effect:</FONT></U></TD>
</TR>
<TR NOSAVE>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>PACK_UNIFORM_HEIGHT</FONT></FONT></B></TD>
<TD NOSAVE>The PACK_UNIFORM_HEIGHT packing style causes the Layout Manager
to compute the height of the tallest of its children, and then subsequently
use this as the height for the remaining layout computations. You
can use this option to easily force different widgets to be the same height.</TD>
</TR>
<TR>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>PACK_UNIFORM_WIDTH</FONT></FONT></B></TD>
<TD>Like PACK_UNIFORM_HEIGHT, PACK_UNIFORM_WIDTH forces each widget to
be the same width. The widget's own preferences such as LAYOUT_FIX_WIDTH
are overridden.</TD>
</TR>
</TABLE></CENTER>
<p>
<p>
<b>Matrix Layout Widget</b>
<hr>
<FONT COLOR="#000000">The Matrix layout widget positions its children
in nice rows and columns. Besides the common General Purpose Layout
options, Matrix also supports the following layout styles:</FONT>
<BR>
<CENTER><TABLE BORDER CELLSPACING=0 WIDTH="90%" BGCOLOR="#FFF8E1" NOSAVE >
<TR>
<TD><U><FONT SIZE=+3>Matrix Style:</FONT></U></TD>
<TD><U><FONT SIZE=+3>Effect:</FONT></U></TD>
</TR>
<TR>
<TD><B><FONT SIZE=-1><FONT COLOR="#000000">MATRIX_BY_ROWS </FONT>
(default)</FONT></B></TD>
<TD>The MATRIX_BY_ROWS is the default, and usually does not need to be
specified. </TD>
</TR>
<TR NOSAVE>
<TD><B><FONT COLOR="#000000"><FONT SIZE=-1>MATRIX_BY_COLUMNS</FONT></FONT></B></TD>
<TD NOSAVE>When MATRIX_BY_COLUMNS is specified, the number of columns of
the matrix is fixed, and equal to the number specified on the constructor
argument list; the number of rows is determined by the total number
of children.
<BR>Conversely, if MATRIX_BY_COLUMNS is not specified, the number of rows
is fixed and the number of columns is determined by the number of children. </TD>
</TR>
</TABLE></CENTER>
<P>In either case, Matrix places children top to bottom, left to right
(left to right, top to bottom for MATRIX_BY_COLUMNS), and determines
the height of each row and width of each column as follows:
<BR>
<OL>
<LI>
If a column contains children which all have set the property LAYOUT_FILL_COLUMN,
the whole column will be considered stretchable. The amount of stretch
is proportionally disbursed between all stretchable columns.</LI>
<LI>
If a row contains children which all have set the property LAYOUT_FILL_ROW,
the whole row is stretchable.</LI>
<LI>
If a column is not stretchable, the column's width will be determined by
the widest child in the column (or the widest child of all of them if the
Matrix has PACK_UNIFORM_WIDTH has been specified).</LI>
<LI>
If a row is not stretchable, the row's height is determined by its tallest
child in the row (or tallest child of all children if PACK_UNIFORM_HEIGHT).</LI>
</OL>
The Matrix widget then arranges each child in its appropriate row/column.
Within the column, a child that is not stretched may be centered in the
column, or placed against the left or right edge of the column; likewise,
within the row, a child that is not stretched may be centered in the row,
or placed against the top or bottom. Between each pair of columns,
the Matrix layout manager adds a small amount of horizontal spacing.
Between each pair of rows, it applies some vertical spacing.
<BR>Around the top, bottom, left, and right, the Matrix provides the usual
interior padding for visual aesthetics.
<P>The Matrix layout manager ignores hints for a specific X or Y position
of each child.
<br>
<p>
<p>
<b>Packer Layout Widget</b>
<hr>The Packer layout widget places its children inside a cavity, packing
them against one of the four sides, until the entire space is filled up.
Which side of the Packer a child is placed against is determined specifying
<B><I>one</I></B>
of the side hints:
<BR>
<UL>
<LI>
LAYOUT_SIDE_TOP. Forces placement of the child against the top side
of the Packer. This is the default, and may not have to be specified
explicitly.</LI>
<LI>
LAYOUT_SIDE_BOTTOM. Forces placement of the child against the bottom.</LI>
<LI>
LAYOUT_SIDE_LEFT. Places the child against the left side of the Packer.</LI>
<LI>
LAYOUT_SIDE_RIGHT. Places the child against the right side of the Packer.</LI>
</UL>
Each time a child is placed against one of the four sides on the inside
of the packer, it decreases the packer's interior by some amount.
If the child is placed at the top or bottom, the height is decreased
by the child's height; if placed against the left or right side, the width
is reduced by the child's width.
<P>Even so, the Packer tries to observe as many layout hints as feasible.
Thus, for a child being packed on the left or right, the hints LAYOUT_TOP
and LAYOUT_BOTTOM are still observed and cause the widget to be placed
against the top or bottom of the packer. Likewise, the LAYOUT_FILL_Y
and LAYOUT_CENTER_Y are also observed, and cause the child to stretch or
center in the packer's cavity.
<P>Analaguous to the above, when a child is packed against the top or bottom,
the Packer properly observes the LAYOUT_LEFT, LAYOUT_RIGHT, LAYOUT_FILL_X,
and LAYOUT_CENTER_X hints.
<P>There is one <I>special</I> case: When packing the <B>last</B>
child, the Packer observes <B>both</B> LAYOUT_CENTER_X, LAYOUT_CENTER_Y,
LAYOUT_FILL_X, <B>and</B> LAYOUT_FILL_Y. This will cause the
Packer to <B>completely fill </B>the<B> remaining space </B>of the cavity
with the<B> last child widget.</B>
<P>You can make use of this feature in a typical application by defining
your Main Viewing area as the last widget to be placed.
<p>
<p>
<b>Layout Suggestions</b>
<hr>
FOX allows you either perform automatic layout or explicitly control
over widget placement by specifying positions and sizes.
The automatic layout has the advantage of accomodating changes of fonts, or
changes in text labels or icons without any effort.
This is especially interesting because it makes it quite easy to build GUI's
under program control (e.g. by reading a configuration file or database schema).
<p>
However, it takes a bit more forethought to figure out how various widget-
layouts are structured, i.e. how various layout managers and controls are to
be arranged to achieve the desired effect.<br>
<p>
Some hints:
<ol>
<li>Work areas like multi-line text or OpenGL windows should be flexible
both horizontally and vertically. This allows the user to grow the
work area if desired.
<li>Simple text fields, sliders, dials, and so on should be stretchable
horizontally if possible:- sliders and dials are more accurate if bigger,
and you can see more of the text. Of course for vertical sliders and dials,
you would want to allow vertical stretching.
<li>Buttons need not be stretchable, there is no point. However, it is
pleasing to keep proper proportions in the dialog. This means keeping certain
buttons the same size using PACK_UNIFORM_WIDTH, and centering them under the
dialog with LAYOUT_CENTER_X under the content, for example.
<li>Nice tabular layouts can be achieved quickly using the Matrix layout manager.
Selected rows and columns may be allowed to stretch vertically and horizontally.
<li>Because sizes are figured from the inside-out, it is better to force a few selected
widgets like scroll areas to be a certain size and let the system figure the size
of the dialog, rather than try and set the size of the dialog and hope that the
scroll areas wind up big enough.
<li>You can use a borderless Frame widget as a "spacer" if some extra space is needed.
</ol>
<p>
Try to design dialogs to be resizable, because it is almost always the case that
text fields, sliders, and list widgets would be able to take advantage of a larger
screen area.
<!-- end main window content -->
</td>
<td bgcolor=#ffffff> </td>
<td bgcolor=#557faa width=15> </td>
</tr>
<tr>
<td colspan=2 bgcolor="#557faa" align=center>
</td>
<td bgcolor=#ffffff valign=bottom align=left><img src=art/ill.gif width=8 height=8></td>
<td bgcolor=#ffffff> </td>
<td bgcolor=#ffffff valign=bottom align=right><img src=art/ilr.gif width=8 height=8></td>
<td bgcolor=#557faa width=15> </td>
</tr>
<tr>
<td valign=bottom align=left bgcolor=#557faa><img src=art/oll.gif width=8 height=8></td>
<td colspan=4 bgcolor=#557faa> </td>
<td valign=bottom align=right bgcolor=#557faa><img src=art/olr.gif width=8 height=8></td>
</tr>
</table>
<address>Copyright 1997-2002 <a href=mailto:jeroen@fox-toolkit.org>Jeroen van der Zijp</a></address>
<!-- Created: Mon Apr 10 11:20:32 CEST 2000 -->
<!-- hhmts start -->
<!-- hhmts end -->
</body>
</html>
|
