Advanced Maplets Layout
|
Goals & Introduction
|
|
The purpose of this worksheet is to provide detailed information on how Maplet layouts work, and assumes some familiarity with the Maplet Elements used for layouts. The full form is always used in this worksheet (meaning we do not resort to use of lists, and nested lists in the layouts).
After reading this worksheet, you should be able to:
Understand the different layout elements available in Maple, and understand when to use each
Design a Maplet with objects positioned where you want
Design a Maplet with objects sized the way you want
One of the most important things to understand when designing a Maplet layout is that non-container objects (Buttons, TextBoxes, etc.) have no options that can be used to specify their location, but may have options that control the layout of their content.
>
|
with(Maplets[Elements]):
|
|
|
Layout Managers
|
|
There are three layout managers available in Maplets, and these are:
BoxLayout: This is a layout that allows the creation of boxes that can have elements positioned inside them in horizontal or vertical fashion.
GridLayout: This is a layout that behaves somewhat like a spreadsheet. Elements are located in a specified grid.
BorderLayout: This is a layout manager that allows for simple specification of the location of elements, leaving most of the decisions to the layout manager
For simple Maplets, use of one of these layout managers is often sufficient, but for more complicated Maplets may be necessary to employ multiple layout managers for a single Maplet.
It is possible to nest layout managers (one inside the other).
|
|
BoxLayout
|
|
This is the most commonly used of the layout managers, and is the default layout manager that is used when layouts are specified in a list form.
This type of layout can be described as a nested construct of containers where objects can be stacked either horizontally or vertically.
The Maplet Elements that apply to BoxLayouts along with the layout related options are the following:
BoxLayout: border, caption, halign, inset, valign, vertical
BoxRow, BoxColumn: border, caption, halign, inset, spacing, valign
BoxCell: halign, valign
HorizontalGlue, VerticalGlue: no options
It is important to realize that all Box objects are simply containers, with their primary purpose of laying out objects inside them.
|
border & caption
|
|
Though not strictly layout options, these options do affect the layout of a Maplet, so they are described here.
These options can be used in a BoxLayout,BoxRow, or BoxColumn, and provide a border around the container, optionally with a caption.
The caption option is ignored unless a border option is also present, as the caption is part of the border.
Example:
>
|
mlet := Maplet(BoxLayout(border=true,caption="outer",
BoxColumn(border=true,caption="inner1",
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
),
BoxColumn(border=true,caption="inner2",
TextBox("Misc. Text",height=5)
)
)):
|
>
|
Maplets[Display](mlet);
|
|
|
inset & spacing
|
|
The inset option can be used in a BoxLayout,BoxRow, or BoxColumn,and specifies the minimum amount of spacing between the border of the Box object, and the contents inside.
The spacing option can be used in a BoxRow or BoxColumn,and specifies the minimum spacing between tightly packed objects inside the same Box object.
The values should be given in pixels, and by default, both options have value 5.
The following four examples demonstrate the use of these options (note: in all cases the outer BoxLayout object has inset set to 0, so that the formatting of the BoxColumn can be more easily seen):
Both set to 10:
>
|
mlet := Maplet(BoxLayout(inset=0,
BoxColumn(inset=10,spacing=10,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
spacing=0, but inset=10
>
|
mlet := Maplet(BoxLayout(inset=0,
BoxColumn(inset=10,spacing=0,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
inset=0 but spacing=10
>
|
mlet := Maplet(BoxLayout(inset=0,
BoxColumn(inset=0,spacing=10,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
Both set to 0:
>
|
mlet := Maplet(BoxLayout(inset=0,
BoxColumn(inset=0,spacing=0,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
|
|
vertical
|
|
The vertical option is only available for BoxLayout elements, and specifies whether the contents should be placed horizontally across the layout (vertical=false), or vertically stacked in the layout (vertical=true). By default this is false.
Use of the vertical option to arrange contents of the BoxLayout is somewhat limited, as there is no control over the spacing of the objects in the layout (each object is spaced a minimum of 5 pixels apart). If this level of control is required, then the BoxLayout should be used in combination with either a BoxRow (for vertical=false), or a BoxColumn (for vertical=true) for which finer control over the layout is available.
Example:
Two tightly packed vertical buttons (as tight as possible with just BoxLayout):
>
|
mlet := Maplet(BoxLayout(inset=0,vertical=true,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)):
Maplets[Display](mlet);
|
Elimination of the spacing by nesting inside a BoxColumn:
>
|
mlet := Maplet(BoxLayout(inset=0,
BoxColumn(inset=0,spacing=0,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
|
|
halign, valign and Glue elements
|
|
The halign option specifies the horizontal alignment of elements, and can have the values left, right, center or none.
The valign option specifies the vertical alignment of elements, and can have the values top, bottom, center or none
Unlike most of the other options, the halign and valign options are primarily concerned with how to treat extra space in a Maplet.
As an example, consider the following two identical Maplets:
>
|
mlet := Maplet(BoxLayout(
BoxRow(halign=right,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
>
|
mlet := Maplet(BoxLayout(
BoxRow(halign=left,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
So even though one Maplet was specified with left alignment and the other with right alignment, the two are identical, as the Maplet is sized to the objects inside it.
Note: if the Maplet is manually resized, then the effect of the alignment will be visible.
In contrast, if we add a larger element in a prior row, we see the effect of the alignment.
right alignment:
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(halign=right,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
left alignment:
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(halign=left,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
For the remainder of this section we will restrict ourselves to discussion of horizontal alignments, with the understanding that vertical alignments work the same way when used with the corresponding vertical elements and options.
To understand a little bit more about alignments in Maplets we first need to understand a bit about Glue elements.
The HorizontalGlue element is a spacing element that utilizes any extra space allocated to the BoxRow in which it occurs. For BoxRow elements containing more than one HorizontalGlue element, the extra space is equally distributed to all HorizontalGlue elements in the row.
Now internally, Maplets uses Glue elements to apply a specified alignment, so a BoxRow object with halign=left is implemented as a BoxCell containing the specified object with a HorizontalGlue element placed on the right, while a BoxRow object with halign=right is implemented as a BoxCell containing the specified object with a HorizontalGlue element placed on the left. The halign=center option is implemented as a BoxCell containing the specified object with HorizontalGlue elements placed on both the right and left of the object.
Given this information, it is clear why the prior two examples have the spacing between the OK1 and OK2 buttons.
In some applications, it is desirable to have either two buttons, or text and a button flush with one another. In cases like this, one can specify halign=none, and manually add the HorizontalGlue elements where desired.
The above two examples using HorizontalGlue and halign=none:
right alignment:
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(halign=none,
HorizontalGlue(),
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
left alignment:
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(halign=none,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown()),
HorizontalGlue()
)
)):
Maplets[Display](mlet);
|
Much more complicated alignments are possible with the use of multiple HorizontalGlue elements.
For example, the following is a maplet with three buttons, where we want B2 to be 1/2 the distance from B3 as B1:
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(halign=none,
Button("B1",onclick=Shutdown()),
HorizontalGlue(),
HorizontalGlue(),
Button("B2",onclick=Shutdown()),
HorizontalGlue(),
Button("B1",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
Cell-specific alignments are also possible for use with the BoxCell container element, and are implemented exactly the same as described above.
It is important to note that any BoxCell elements that do not have a specified alignment inherit their alignment from the parent BoxRow or BoxColumn container.
So, for example the two layouts:
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(halign=left,
Button("OK1",onclick=Shutdown()),
Button("OK2",onclick=Shutdown())
)
)):
Maplets[Display](mlet);
|
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(
BoxCell(halign=left,Button("OK1",onclick=Shutdown())),
BoxCell(halign=left,Button("OK2",onclick=Shutdown()))
)
)):
Maplets[Display](mlet);
|
are identical. Both are translated as
BoxCell(object,halign=none),HorizontalGlue(),BoxCell(object,halign=none),HorizontalGlue(),
or:
>
|
mlet := Maplet(BoxLayout(vertical=true,
BoxRow(Label("This is a long text label used to show alignment")),
BoxRow(
BoxCell(halign=none,Button("OK1",onclick=Shutdown())),
HorizontalGlue(),
BoxCell(halign=none,Button("OK2",onclick=Shutdown())),
HorizontalGlue()
)
)):
Maplets[Display](mlet);
|
|
|
|
GridLayout
|
|
This layout is pretty much what one would infer from the name: a layout constructed from a rectangular grid.
The Maplet Elements that apply to GridLayouts along with the layout related options are the following:
GridLayout: border, caption, halign, inset, valign
GridRow: halign, valign
GridCell: halign, hweight, height, valign, vweight, width
The structure of GridLayout is strict: each GridLayout must contain one or more GridRow elements which must in turn contain one or more GridCell elements.
Note: the sizing of each row (column) of the grid is taken as the maximum height (width) of all elements in that row (column).
This means that by default there is no spacing between the largest sized elements in a GridLayout.
|
border & caption
|
|
Though not strictly layout options, these options do affect the layout of a Maplet, so they are described here.
These options can be used in a GridLayout and provide a border around the grid, optionally with a caption.
The caption option is ignored unless a border option is also present, as the caption is part of the border.
Example:
>
|
mlet := Maplet(GridLayout(border=true,caption="grid",
GridRow(
GridCell(Label("Button1:")),
GridCell(Button("OK1",onclick=Shutdown()))
),
GridRow(
GridCell(Label("Button2:")),
GridCell(Button("OK2",onclick=Shutdown()))
)
)):
Maplets[Display](mlet);
|
|
|
inset
|
|
The inset option can be used in a GridLayout and specifies the minimum amount of spacing between the objects contained in the grid, and the edges of their corresponding GridCell. By default this value is 0, which means that objects in the Grid are packed as tightly as possible.
Note: This more closely corresponds to the spacing option for the BoxLayout, as the inset is put on the border of each GridCell in the layout. This also means that an inset value of 5 will result in a spacing of 10 between elements (5 on the border of each GridCell).
For example, the following will create a grid that has a 10 pixel spacing between each element of the content by adding an inset of 5 to each GridCell:
>
|
mlet := Maplet(GridLayout(border=true,caption="grid",inset=5,
GridRow(
GridCell(Label("Button1:")),
GridCell(Button("OK1",onclick=Shutdown()))
),
GridRow(
GridCell(Label("Button2:")),
GridCell(Button("OK2",onclick=Shutdown()))
)
)):
Maplets[Display](mlet);
|
|
|
halign & valign
|
|
As mentioned earlier, a GridLayout sizes the grid to be as small as possible, but when an element in a row or column is smaller in width or height than the cell(s) in the grid that it occupies, the alignment becomes relevant.
Quite simply, the horizontal alignment, halign, can take on values left,center,right, or full, and the vertical alignment, valign, can take on values top,center,bottom or full. and these are used to specify the location of the element in it's assigned GridCell. The default for both is center.
The alignment clearly only applies to individual cells, so the specification of the alignment for a GridRow has the effect of setting that as the default for any GridCell elements it contains. Further, specification of the alignment for a GridLayout sets the default for any GridRow elements it contains.
This makes it possible to specify the default horizontal and vertical alignment for all cells in the grid by specifying that alignment in the GridLayout.
An additional note is warranted about the use of the full option for the alignment. What this does (rather than align the object with respect to the cell borders) is to stretch the object contained in the GridCell to the full extent of the GridCell in the alignment direction. For example, a narrow button in a wide GridCell which has been specified with the option halign=full will be stretched to horizontally fill the cell (minus the inset).
Example: using default (center) alignment:
>
|
mlet := Maplet(GridLayout(
GridRow(
GridCell(Label("LongNameButton:")),
GridCell(Button("LongName",onclick=Shutdown()))
),
GridRow(
GridCell(Label("ShortButton:")),
GridCell(Button("Short",onclick=Shutdown()))
)
)):
Maplets[Display](mlet);
|
Using left alignment:
>
|
mlet := Maplet(GridLayout(halign=left,
GridRow(
GridCell(Label("LongNameButton:")),
GridCell(Button("LongName",onclick=Shutdown()))
),
GridRow(
GridCell(Label("ShortButton:")),
GridCell(Button("Short",onclick=Shutdown()))
)
)):
Maplets[Display](mlet);
|
Using right alignment for labels, and left for buttons, so the labels and buttons line up where they meet:
>
|
mlet := Maplet(GridLayout(
GridRow(
GridCell(halign=right,Label("LongNameButton:")),
GridCell(halign=left,Button("LongName",onclick=Shutdown()))
),
GridRow(
GridCell(halign=right,Label("ShortButton:")),
GridCell(halign=left,Button("Short",onclick=Shutdown()))
)
)):
Maplets[Display](mlet);
|
Example using full horizontal alignment for the buttons, so each is enlarged to fill the cell.
>
|
mlet := Maplet(GridLayout(inset=2,
GridRow(
GridCell(halign=left,Label("LongNameButton:")),
GridCell(halign=full,Button("LongName",onclick=Shutdown()))
),
GridRow(
GridCell(halign=left,Label("ShortButton:")),
GridCell(halign=full,Button("Short",onclick=Shutdown()))
)
)):
Maplets[Display](mlet);
|
|
|
width & height
|
|
It is also possible to specify a width and height of a GridCell in terms grid cells. In order to do this correctly, the GridCell must be present in it's top left position in the grid. So, for example, to declare a GridCell with a height of two grid cells, it needs to appear in the first GridRow that contains it, and the following GridRow will be adjusted to allow it to fit.
Example: Button Panel with one button having height 2, and another having width 2, all others with height,width=1
>
|
mlet := Maplet(GridLayout(
GridRow(
GridCell(height=2,
Button("2h",width=52,height=2*25,onclick=Shutdown())
),
GridCell(
Button("1a",width=52,height=25,onclick=Shutdown())
),
GridCell(
Button("1b",width=52,height=25,onclick=Shutdown())
)
),
GridRow(
# This is where the button above extends into
GridCell(
Button("1c",width=52,height=25,onclick=Shutdown())
),
GridCell(
Button("1d",width=52,height=25,onclick=Shutdown())
)
),
GridRow(
GridCell(
Button("1e",width=52,height=25,onclick=Shutdown())
),
GridCell(width=2,
Button("2w",width=2*52,height=25,onclick=Shutdown())
)
)
)):
Maplets[Display](mlet);
|
Same example using full alignment to avoid specification of the sizes for each button:
>
|
mlet := Maplet(GridLayout(halign=full,valign=full,
GridRow(
GridCell(height=2,
Button("2h",onclick=Shutdown())
),
GridCell(
Button("1a",onclick=Shutdown())
),
GridCell(
Button("1b",onclick=Shutdown())
)
),
GridRow(
# This is where the button above extends into
GridCell(
Button("1c",onclick=Shutdown())
),
GridCell(
Button("1d",onclick=Shutdown())
)
),
GridRow(
GridCell(
Button("1e",onclick=Shutdown())
),
GridCell(width=2,
Button("2w",onclick=Shutdown())
)
)
)):
Maplets[Display](mlet);
|
|
|
hweight & vweight
|
|
When dealing with BoxLayouts, resizing capability is part of the alignment options, but for GridLayouts this is somewhat different.
By default, a GridLayout cannot be resized, or more specifically, a resize of a GridLayout will simply center the layout in the assigned area, but will not resize anything internal to the layout.
In some cases this may not be the desired behavior, and we may want the layout to expand all cells uniformly, or to expand specific rows or columns of the layout. This is where the hweight and vweight options are of use.
These options can take on integer values from 0 to 10, they must be used in GridCell elements only, and they specify the relative amount of resizing to apply to a row (vweight) or a column (hweight) when the GridLayout is resized. By default these values are 0 for all GridCell elements, so no resizing of the rows or columns occurs.
Since they are specified for each GridCell, it is possible to have different values of hweight for different GridCells occupying the same column, or different values of vweight for different GridCells occupying the same row, and when this occurs the maximum value for the corresponding column or row is used.
Example: Button layout where we apply hweight to the center buttons of the layout, and vweight to the bottom button in the layout.
This means that the 'left' and 'right' buttons will never change size, the 'top' and 'OK' buttons will resize horizontally, and the 'bottom' button will resize both horizontally and vertically.
>
|
maplet := Maplet(GridLayout(halign=full,valign=full,
GridRow(
GridCell(height=3,
Button("l\ne\nf\nt",onclick=Shutdown())
),
GridCell(
Button("top",onclick=Shutdown())
),
GridCell(height=3,
Button("r\ng\nh\nt",onclick=Shutdown())
)
),
GridRow(
GridCell(height=2,hweight=10,
Button("OK",onclick=Shutdown())
)
),
GridRow(
GridCell(width=3,vweight=10,
Button("done",onclick=Shutdown())
)
)
)):
Maplets[Display](maplet);
|
As noted above the hweight and vweight options are 'relative' measures, meaning that the expansion depends on the ratio of the smallest to the largest weights in the layout. This means that replacing the hweight,vweight values of 10 with 1 in the above example will leave the behavior of the Maplet unchanged.
Example where we use the relative nature of hweight to cause one button to expand more than another in a simple layout
>
|
maplet := Maplet(GridLayout(halign=full,valign=full,
GridRow(
GridCell(hweight=1,vweight=1,
Button("11",onclick=Shutdown())
),
GridCell(hweight=2,
Button("12",onclick=Shutdown())
),
GridCell(hweight=3,
Button("13",onclick=Shutdown())
)
),
GridRow(
GridCell(vweight=1,
Button("21",onclick=Shutdown())
),
GridCell(
Button("22",onclick=Shutdown())
),
GridCell(
Button("23",onclick=Shutdown())
)
)
)):
Maplets[Display](maplet);
|
You will notice two things in this example:
1) We only needed to specify the hweight value once for each column, and only needed to specify vweight once for each row.
2) When the above Maplet is resized, the hweight=3 button expands 3 times as much as the hweight=1 button, and the hweight=2 button expands twice as much as the hweight=1 button.
|
|
|
BorderLayout
|
|
Unlike the other layout managers, the BorderLayout element is generally intended to be a container for other layout managers, though it can be used for very simple Maplets.
There are exactly 5 positions in the layout that can be filled, north,south,west,east, and center, each of which has their own rules for layout.
The following plot provides a diagram to help understand the layout:
>
|
plots[display](
plot({[[0,0],[0,10],[10,10],[10,0],[0,0]],
[[0,1],[10,1]],[[0,9],[10,9]],
[[2,1],[2,9]],[[8,1],[8,9]]},color=black),
PLOT(TEXT([5,1/2],"South"),TEXT([5,19/2],"North"),TEXT([1,5],"West"),
TEXT([9,5],"East"),TEXT([5,5],"Center")),axes=none);
|
On resizing, North and South stretch horizontally, East and West stretch vertically, and Center stretches in both directions.
The Maplet Elements that apply to BorderLayouts along with the layout related options are the following:
BorderLayout: border, caption, hgap, inset, vgap
GridCell2: constraint
|
constraint (basic layout)
|
|
The constraint option can be used in GridCell2 elements, and tells BorderLayout where to place the element. Valid options are north,south,west,east, and center.
Example:
>
|
mlet := Maplet(BorderLayout(
GridCell2(constraint=north,Label("This is a long title")),
GridCell2(constraint=south,Label("This could be a status bar")),
GridCell2(constraint=east,Button("East",onclick=Shutdown())),
GridCell2(constraint=west,Button("West",onclick=Shutdown())),
GridCell2(constraint=center,Button("Center",onclick=Shutdown()))
)):
Maplets[Display](mlet);
|
Not all constraints must be present, but more than one of the same constraint is an error.
|
|
border & caption
|
|
Though not strictly layout options, these options do affect the layout of a Maplet, so they are described here.
These options can be used in a BorderLayout and provide a border around the layout, optionally with a caption.
The caption option is ignored unless a border option is also present, as the caption is part of the border.
Example:
>
|
mlet := Maplet(BorderLayout(border=true,caption="borderlayout",
GridCell2(constraint=north,Label("This is a long title")),
GridCell2(constraint=south,Label("This could be a status bar")),
GridCell2(constraint=east,Button("East",onclick=Shutdown())),
GridCell2(constraint=west,Button("West",onclick=Shutdown())),
GridCell2(constraint=center,Button("Center",onclick=Shutdown()))
)):
Maplets[Display](mlet);
|
|
|
hgap,vgap and inset
|
|
In a BorderLayout, the hgap and vgap options are like the spacing option of the BoxLayout element, but allow slightly finer control.
The hgap option, which is 0 by default, specifies the spacing between the west and center elements, and the center and east elements.
The vgap option, which is also 0 by default, specified the spacing between the north element and the west,center,east elements, and the west,center,east elements and the south element.
Examples:
>
|
mlet := Maplet(BorderLayout(hgap=10,
GridCell2(constraint=north,Label("This is a long title")),
GridCell2(constraint=south,Label("This could be a status bar")),
GridCell2(constraint=east,Button("East",onclick=Shutdown())),
GridCell2(constraint=west,Button("West",onclick=Shutdown())),
GridCell2(constraint=center,Button("Center",onclick=Shutdown()))
)):
Maplets[Display](mlet);
|
>
|
mlet := Maplet(BorderLayout(vgap=10,
GridCell2(constraint=north,Label("This is a long title")),
GridCell2(constraint=south,Label("This could be a status bar")),
GridCell2(constraint=east,Button("East",onclick=Shutdown())),
GridCell2(constraint=west,Button("West",onclick=Shutdown())),
GridCell2(constraint=center,Button("Center",onclick=Shutdown()))
)):
Maplets[Display](mlet);
|
The inset option specifies the spacing between the constrained objects of the layout, and the border of the layout. By default this value is 5.
Example:
>
|
mlet := Maplet(BorderLayout(inset=0,
GridCell2(constraint=north,Label("This is a long title")),
GridCell2(constraint=south,Label("This could be a status bar")),
GridCell2(constraint=east,Button("East",onclick=Shutdown())),
GridCell2(constraint=west,Button("West",onclick=Shutdown())),
GridCell2(constraint=center,Button("Center",onclick=Shutdown()))
)):
Maplets[Display](mlet);
|
|
|
alignment
|
|
In a BorderLayout the north,south, and center cells can stretch horizontally, and the east,west, and center cells can stretch vertically.
This means that the objects themselves in the BorderLayout may be stretched.
Unlike the other layout managers, the objects are stretched to fit the layout, so alignment must occur in the objects themselves.
Note that horizontal alignment options (halign) are only relevant for the elements in the north,south, and center GridCell2 elements, and vertical alignment options (valign) are only relevant for the elements in the east,west, and center GridCell2 elements.
Same example as previous but using halign for the north,south labels (note the alignment is specified in the Label elements):
>
|
mlet := Maplet(BorderLayout(
GridCell2(constraint=north,Label("This is a long title",halign=left)),
GridCell2(constraint=south,Label("This could be a status bar",halign=left)),
GridCell2(constraint=east,Button("East",onclick=Shutdown())),
GridCell2(constraint=west,Button("West",onclick=Shutdown())),
GridCell2(constraint=center,Button("Center",onclick=Shutdown()))
)):
Maplets[Display](mlet);
|
Example of the object in the center cell stretching to fit a larger layout:
>
|
mlet := Maplet(BorderLayout(
GridCell2(constraint=north,Label("This is a very long title which causes the 'center' to stretch")),
GridCell2(constraint=east,Button("East",onclick=Shutdown())),
GridCell2(constraint=west,Button("West",onclick=Shutdown())),
GridCell2(constraint=center,Button("Center",onclick=Shutdown()))
)):
Maplets[Display](mlet);
|
|
|
|
Layout Exceptions
|
|
Some of the layout elements have behavior that does not necessarily perform in the expected way under the layout managers.
DropDownBox and ComboBox:
These elements size to their content by default, and ignore the parent layout manager directives.
For these elements, specification of height=0, width=0 tells the element to size based on the parent layout, so Glues (for BoxLayout) and full alignment (for GridLayout) have the expected effect.
|
|
Non-Layout Element Sizing
|
|
Many Maplet window elements have options that allow control over the size of the element. These are the width and height options.
In cases where the object is a pure text object (no graphical component), the width and height should be given in characters.
At this time the only pure text objects are TextBox and TextField, and while both support width, only the former supports height.
For all other components that support width and height, the values should be given in pixels.
These include Button, ComboBox, DropDownBox, Label, ListBox, MathMLEditor, MathMLViewer, Plotter, and Table.
This allows for specification of a layout that appears homogeneous - even one with different sized buttons.
The following example comes from the GridLayout section:
>
|
mlet := Maplet(GridLayout(
GridRow(
GridCell(height=2,
Button("2h",width=52,height=2*25,onclick=Shutdown())
),
GridCell(
Button("1a",width=52,height=25,onclick=Shutdown())
),
GridCell(
Button("1b",width=52,height=25,onclick=Shutdown())
)
),
GridRow(
# This is where the button above extends into
GridCell(
Button("1c",width=52,height=25,onclick=Shutdown())
),
GridCell(
Button("1d",width=52,height=25,onclick=Shutdown())
)
),
GridRow(
GridCell(
Button("1e",width=52,height=25,onclick=Shutdown())
),
GridCell(width=2,
Button("2w",width=2*52,height=25,onclick=Shutdown())
)
)
)):
Maplets[Display](mlet);
|
In addition, it is possible to have a panel with a combination of Button, DropDownBox, and ListBox objects where they are specified to have the same width:
>
|
mlet := Maplet(BoxLayout(BoxColumn(
Button(width=80,"OK1",'onclick'=Shutdown()),
DropDownBox(width=80,["choice1","choice2","choice3"]),
ListBox(width=80,["list1","list2","list3"])
))):
Maplets[Display](mlet);
|
|
Return to Example Worksheet Index
|