Figure 17. A block containing a line of text and a static image.
The RFV program treats the DISPLAY parameter as defining a column of visual elements. The order in which the elements are displayed corresponds to the order in which they were specified in the input file. In the new block we defined in ``Component 2'', the line of text was specified before the static image, and thus the text line appears above the image in Figure 17. Each element is centred with respect to the width of the RFV window. However, although the pair of elements is centred vertically also, there is no space between the line of text and the image.
The height of the text plus the height of the image is less than the height of the RFV window. (If otherwise, the RFV program would stop with an appropriate error message.) This means that there is extra vertical space in the RFV window beyond what is needed to display the visual elements specified. By default, the program will evenly divide this extra vertical space to appear above and below the elements that are defined. However, it is possible to take control of the distribution of this vertical space by using the V_SPACE parameter.
Using the V_SPACE parameter inside the column defined by the DISPLAY parameter, allows the allocation of vertical space to be specified in the input file. For example, we could put all of the extra vertical space above the two visual elements.
...
component( "Component 2"
block(
display(
v_space()
text_line("Another line of text")
image("equation.gif")
)
)
)
Now when we run the RFV on ``Component 2'', the block will appears as in Figure 18. Here, there is no extra vertical space between or below the elements. All the extra vertical space is above them.
Figure 18. Modifying the distribution of vertical space.
The V_SPACE parameter can be used any number of times inside the
DISPLAY parameter. If it is used four times for example,
then each instance of V_SPACE will represent one quarter of the extra
vertical space available. It is also possible to specify multiple V_SPACE
parameters in succession. Thus, we can specify that one quarter of the
extra vertical space should appear above the text line, another quarter
should be between the text line and the static image, and the other half should
be below the the static image. This is done by adding another three instances
of the V_SPACE parameter to our input file.
The resulting layout of the visual elements in shown in
Figure 19.
Figure 19. Further modifying the distribution of vertical space.
You will have noted that the V_SPACE parameter is followed by a pair of
brackets. This is because it can take an optional argument. This argument is
an integer to specify a specific height (in pixels). For example, we may not
have wanted our text line and image pressed together as was the case when we
first created them. On the other hand, the V_SPACE that has been added
between them may also be too large. Sometimes (as we will do now), it is convenient
to say that we want a specific vertical gap (for example, of 20 pixels) between
elements.
The block in ``Component 2'' will now appear as in
Figure 20. Note
that the remaining three V_SPACEs that do not have an argument now
each represent one third of the extra vertical space, since the V_SPACE
with the argument is now treated as a visual element. This means that the
extra vertical space in the block is now calculated as the difference between
the RFV window height and the heights of the text line, static image and
the 20 pixel high V_SPACE. One third of the extra vertical space is above
the line of text, with the remaining two thirds below the static image.
Figure 20. Using a fixed vertical space in the layout of the elements.
So far, all of the layout has been in a single column. No doubt however, it will
be desirable to layout elements horizontally also. This can be done by using
the ROW parameter. We now add to our input file a row containing two
buttons. We will place this row between the last two V_SPACE parameters.
This row is now treated the same as a visual element within the column
defined by the DISPLAY parameter. The height of the row is the height of
the tallest element in the row. When we now run the RFV, the block
where we have just specified the ROW appears as in
Figure 21.
Figure 21. Adding a row to a block.
The buttons appear right next to each other, with the extra horizontal space
appearing evenly distributed on either side of them. Just as we could control
vertical space with the V_SPACE parameter in the column defined by
DISPLAY, it is also possible to control the extra horizontal space in a row
by using the H_SPACE parameter. For example we add a H_SPACE
between the two buttons.
This forces the two buttons to appear on either side of the RFV window, as
in
Figure 22
, with all of the extra horizontal space between them.
Figure 22. Manipulating the extra horizontal space in a row.
The H_SPACE parameter works similarly to the V_SPACE parameter, with
extra horizontal space being divided equally among all of the H_SPACEs
specified within a row. As with V_SPACE, it is also possible to specify
a fixed horizontal width (in pixels) by providing an integer as an argument to
the H_SPACE parameter. Thus we can separate the buttons by 100 pixels.
Note that when we do this, the row no longer contains any H_SPACEs that
operate on the extra horizontal space, since the H_SPACE parameter with an
argument is treated like a visual element. Thus, the RFV again will automatically
divide the extra horizontal space on either side of the buttons, with a fixed
horizontal space of 100 pixels also appearing between them as is shown in
Figure 23.
Figure 23. Further manipulating the horizontal space in a row.
Of course it may sometimes be desirable to lay things out vertically within a
row. This can be done with the COLUMN parameter. We will now define a new
block that makes use of COLUMNs within ROWs.
When the RFV is run on the input file now, this block will appear as is
shown in
Figure 24.
Figure 24. Example of columns defined within rows.
This newly defined block may appear complicated. However, to make it
clearer as to how the layout of the elements is organized,
Figure 25
shows the same block marked with red lines to
indicate the boundaries of the rows and columns. Keep in mind that the
entire RFV window itself forms a column defined by the DISPLAY parameter.
This column contains two ROWs, with the extra vertical space in the column
divided equally between the space above the first row, the space between the two
rows, and the space below the second row. In
Figure 25
the
boundaries of these rows are indicated by the red lines that have been
drawn across the entire width of the RFV window.
The first row contains a line of text, a horizontal gap of 50 pixels, and then
a column which contains two buttons. The input file also specifies how the
extra vertical space within the column should be distributed. However, in the
first row in
Figure 25, there is no extra vertical space in the
column containing the two buttons. What has happened? When the RFV determines
the height of a row it simply uses the maximum height of all of the elements
specified within that row. If a column is specified within a row, then the total
height of all the elements in that column is used as the column height. Since
in the first row the total height of the two buttons in the column is greater
that the height of the line of text, the height of the row becomes the total
height of the two buttons in the column. The column of course has the same
height as the row it is specified within. Since the height of the column is
only exactly enough to accommodate the two buttons specified within it, the
extra vertical space within the column is zero. Thus, the V_SPACE
parameter has no effect on the final layout. The line of text is vertically
centred within the row.
Figure 25. Layout of various rows and columns within the RFV window.
The second row is similar to the first, consisting of a static image, a horizontal
gap of 50 pixels, and then a column which contains two buttons. However, in this
row, the static image has a greater height than the total height of the two
buttons defined in the column. Thus the height of the row, and thus also of the
column defined in this row, becomes the height of the static image. In this
instance, since the height of the column is greater than the total height of the
elements defined within it, there is extra vertical space to be allocated.
This is then divided up evenly among the two V_SPACE parameters, resulting
in the column being split up as is indicated in
Figure 25.
It is important to note that if a V_SPACE or a H_SPACE parameter
takes an argument, it is then treated like a visual element in determining
the size of a row or column. For example, in the first row we can force a gap
to appear between the buttons ``Button 1'' and ``The Second Button'' by specifying
how many pixels high the vertical space should be. This can be done by placing
a value (in this case 20) as an argument of the V_SPACE parameter that
is defined between the two buttons.
The block will now appear as in
Figure 26
when the RFV is run.
Figure 26. Forcing a gap between the two buttons in the top row.
It is possible to continue defining ROWs within COLUMNs and
COLUMNs within ROWs to any level desired. However, for most cases
it likely that the column defined by the DISPLAY parameter and the
occasional use of the ROW parameter will be sufficient.
The tutorial continues in the next section.
...
component( "Component 2"
block(
display(
v_space()
text_line("Another line of text")
v_space()
image("equation.gif")
v_space()
v_space()
)
)
)
...
component( "Component 2"
block(
display(
v_space()
text_line("Another line of text")
v_space(20)
image("equation.gif")
v_space()
v_space()
)
)
)
...
component( "Component 2"
block(
display(
v_space()
text_line("Another line of text")
v_space(20)
image("equation.gif")
v_space()
row(
button("First Button")
button("Second Button")
)
v_space()
)
)
)
...
component( "Component 2"
block(
display(
...
row(
button("First Button")
h_space()
button("Second Button")
)
v_space()
)
)
)
...
component( "Component 2"
block(
display(
...
row(
button("First Button")
h_space(100)
button("Second Button")
)
v_space()
)
)
)
...
component( "Component 2"
block(
...
)
block(
display(
v_space()
row(
text_line("Some text")
h_space(50)
column(
button("Button 1")
v_space()
button("The Second Button")
)
)
v_space()
row(
image("pulley_focus.gif")
h_space(50)
column(
button("Button 3")
v_space()
button("Button Number 4")
v_space()
)
)
v_space()
)
)
)
...
component( "Component 2"
...
block(
display(
v_space()
row(
text_line("Some text")
h_space(50)
column(
button("Button 1")
v_space(20)
button("The Second Button")
)
)
...
)
)
)
Back to Contents |
Previous Section |
Next Section