2.3.3. Relative Coordinates
There is an additional coordinate
system defined in place for the parent widget that
allows relative placement within it. This coordinate system is shown
in Figure 2-40.
Figure 2-40. The relative coordinate system
The upper-left corner has the coordinates (0.0, 0.0). The lower-right
corner's coordinates are (1.0, 1.0). The middle of the window
would be (0.5, 0.5). The coordinates are specified in floating-point
form to allow place to handle any size window.
This allows the widget to remain at that position (in the center, for
instance) no matter how the window is resized.
It is valid to specify coordinates both smaller than 0.0 and larger
than 1.0; however, your widget might not be completely visible in the
window when you use out-of-range coordinates.
This code snippet produces the Button shown in Figure 2-41:
$b = $mw->Button(-text => "Exit", -command => sub { exit });
$b->place(-relx => 0.5, -rely => 0.5);
Figure 2-41. Using place with -relx => 0.5, -rely => 0.5
Although the Button in Figure 2-41 is placed in the
middle of the screen, it looks off-center because the upper-left
corner of the widget was placed in the middle of the window instead
of the center. You can change this with the
-anchor option, which we will discuss shortly. If
we resize this window, the Button still stays in the middle of the
window (see Figure 2-42).
Figure 2-42. -relx => 0.5, -rely => 0.5 window resized to be larger
This next example creates two Buttons, both placed in the window with
relative coordinates:
$mw->Button(-text => "Exit",
-command => sub { exit })->place(-relx => 0.2,
-rely => 0.2);
$mw->Button(-text => "Exit",
-command => sub { exit })->place(-relx => 0.5,
-rely => 0.5);
No matter what size the window is or where other widgets are in the
screen, the two Buttons will stay in those relative locations (see
Figure 2-43).
Figure 2-43. Two Buttons placed relative to the parent window
The left window in Figure 2-43 is the default size
of the window when it was created. The right window is what it looks
like after the window was resized to make it much smaller. Notice
that the second Button placed in the window remains on top. It does
so because we are still maintaining the ordered list of widgets in
the window; the second Exit Button, placed at (0.5, 0.5), is drawn
last, so it's drawn on top of the other Button.
You can also combine the absolute and relative coordinate systems
simply by using both in the argument list. The relative coordinate
system is considered first, then the x or y value is added to that
position. The options -relx => 0.5, -x
=> -10 place the widget 10 pixels to the left of the
middle of the window.
2.3.4. Anchoring the Widget
Think of the child widget as a piece of paper that you want to put on
your bulletin board (the board is the parent widget). You have a tack
that you are going to use to keep the paper up on the board. You can
put the tack right through the center of the paper, in the upper-left
corner ("nw"), or in the lower-right corner
("se"). The point where the tack is going to stick
the paper to the board is the -anchor point. The
-anchor point on the widget is
"tacked" to the coordinates given by
-x, -y, and/or
-relx, -rely. The default
-anchor is "nw". Figure 2-40 shows these -anchor points
within the child widget.
It is important to know where the -anchor is,
because it will affect how we see the widget within the parent.
In Figure 2-44, almost identical
place commands were used to put the Exit Button in
the window, but the -anchor value was changed. The
left window's Button was created with this command:
$mw->Button(-text => "Exit",
-command => sub { exit })->place(-relx => 0.5,
-rely => 0.5);
The window on the right in Figure 2-44 used this
command:
$mw->Button(-text => "Exit",
-command => sub { exit })->place(-relx => 0.5,
-anchor => "center",
-rely => 0.5);
As with pack and grid, the
possible values for -anchor are:
'n', 'e',
's', 'w',
'center', 'nw',
'sw', 'ne', and
'se'. However, the value now refers to the child
widget instead of the position within the allocation rectangle.
Figure 2-44. Different -anchor values affect where the widget is placed in the window