- Up - | Next >> |
The introductory example showed the building of a simple application and how its gui is expressed in QHTML. The geometry management and the different principles of QHTML are described in this chapter.
The geometry management is done by means of dedicated widgets :
td
which organizes widgets top down.
lr
which organizes widgets from left to right.
By default all widgets take exactly the size they need to draw themselves. If there is more space available, widgets are centered by default inside that space. That behaviour can be changed by the glue
parameter (almost) all widgets have. Valid values for this parameter are atoms that are a combination of the letters n
, s
, w
and e
that correspond respectively to the top, bottom, left and right side of the widget. Gluing a side consist of placing a constraint on that side with its corresponding neighboor. Gluing two opposite sides results in the widget taking all the space available in the direction of these sides.
Let's consider :
lr(glue:nswe
button(value:"Left")
button(value:"Right"))
This describes a frame with two buttons placed side by side horizontally.If the user resizes the window, the frame is split in equal space and each button is centered within its own space.
We can add constraints to how control the geometry of the widgets with the glue
parameter :
lr(glue:nswe
button(value:"Left" glue:e)
button(value:"Right" glue:w)
Now both widgets have glued their horizontal border that is neighboor of the other widget so that they are both glued together. When the window is resized, the two buttons stick themselves together, centering themselves in all the available space. Note that QHTML behave slightly differently from QTk : with QTk, only one of widget had to glue itself to the other for them to be glued together while with QHTML they both have to be glued.
It is also possible to ask widgets to take as much space as is available:
lr(glue:nswe
button(value:"Left" glue:we)
button(value:"Right"))
The first button is glued to both horizontal side. The second button takes just its necessary size (default behaviour). The result is that the second button is stuck to the right while the first button takes all the remaining available horizontal space. Note the blank space at the right of the second button : this space is reserved by the browser to display a vertical scrollbar if needed. Sadly this space is lost even if there is no scrollbar to display.
td
widgets can be included inside lr
widgets and vice versa. Combining with the glue
parameter, complex windows can be built. However it is hard to obtain windows that need a grid structure like a calculator :
td(lr(button(value:"One") button(value:"Two") button(value:"Three"))
lr(button(value:"Four") button(value:"Five") button(value:"Six"))
lr(button(value:"Seven") button(value:"Height") button(value:"Nine"))
button(value:"Zero"))
As the text labels aren't the same width, the buttons are not vertically centered. There is a command to achieve this : newline
.
lr(button(value:"One") button(value:"Two") button(value:"Three") newline
button(value:"Four") button(value:"Five") button(value:"Six") newline
button(value:"Seven") button(value:"Height") button(value:"Nine") newline
button(value:"Zero"))
newline
introduces a new line (or column for the td
widget) with a grid structure, such that widgets are aligned on several lines.
Another uselfull command is empty
which leaves an empty space :
lr(button(value:"One") button(value:"Two") button(value:"Three") newline
button(value:"Four") button(value:"Five") button(value:"Six") newline
button(value:"Seven") button(value:"Height") button(value:"Nine") newline
empty button(value:"Zero") empty)
Note that newline
and empty
are not widgets and that they don't have any parameter (they don't have a glue or a handle parameter for instance).
- Up - | Next >> |