Table of Contents
18.8 HBox and VBox
The two classes HBox and VBox present containers in which objects are automatically arranged horizontally or vertically:
Figure 18.8.1: HBox (3) and VBox (1) in a container HSplit
Container (2) in container HSplit (horizontal splitter) is a panel without frame and with property Panel.Arrangement = Arrange.Vertical and thus behaves like a VBox.
Figure 18.8.2: HBoxes and VBoxes and a panel with special properties in an application.
- The container VBox (1) has 4 vertically arranged containers of type HBox, into each of which a (text) label and a text box have been inserted.
- The quasi-VBox (2) has only two containers, but also of type HBox. A label has been inserted in the upper HBox and a listbox in the lower HBox, which displays the attachments.
- The container HBox (3) takes two buttons and a panel which, by a special choice of its .Expand property, forces the two buttons to the left and right edges.
- The two container components HBox and VBox have no border. In Figure 18.8.2, however, the position of the two containers in the HSplit container has been made visible by setting the background colour grey.
- The size of the two containers VBox (1) and Quasi-VBox (2) in the container HSplit can be adapted to the content of the attachments, for example in the case of very long file names. To do this, you can move the grey line between VBox (1) and Quasi-VBox (2) horizontally with the mouse.
- The two container components HBox and VBox have no special methods or events.
18.8.1 The properties HBox
| Property | Data type | Description |
|---|---|---|
| .AutoResize | Boolean | If true, then the size of the HBox adjusts to the content in the container. |
| .Indent | Boolean | If true, the first element is indented. The indent depth is Desktop.Scale (pixels). The direction is determined by the value of .Invert. |
| .Invert | Boolean | If true, the content in the container is not arranged from left to right but the other way round. |
| .Margin | Boolean | If true, then a space is inserted between the container margin and the elements in the container. This space is Desktop.Scale (Pixel). |
| .Padding | Integer | A space of k pixels (default 0) is inserted between the container border and the elements in the container. |
| .Spacing | Boolean | If true, a (horizontal) space is inserted between the elements in the container. This spacing is Desktop.Scale (Pixel). |
Table 18.8.1.1: Overview Properties HBox
The properties of the two containers HBox and VBox differ only very slightly and the VBox lacks the property .Invert.
18.8.2 VBox properties
| Property | DataType | Description |
|---|---|---|
| .AutoResize | Boolean | If true, then the size of the VBox adjusts to the content in the container. |
| .Indent | Boolean | If true, the first element is indented. The indentation depth is Desktop.Scale (Pixel). |
| .Margin | Boolean | If true, a space is inserted between the container edge and the elements in the container. This space is Desktop.Scale (Pixel). |
| .Padding | Integer | A space of k pixels (default 0) is inserted between the container border and the elements in the container. |
| .Spacing | Boolean | If true, a (horizontal) space is inserted between the elements in the container. This spacing is Desktop.Scale (Pixel). |
Table 18.8.2.1: Overview of VBox properties
18.8.3 Project EMail Client
In this project, the focus is not on the client functions but on the design of the components on the form (IDE). To arrange the containers on the form as shown in Figure 18.8.2, some properties of the containers used and their contents have to be specified in a special way. These requirements should be met:
- It should be possible to change the size of the programme window dynamically (→ full screen).
- All three (main) containers (HSplit, TextArea, HBox with the 2 buttons) are arranged vertically.
- It should be possible to dynamically enlarge the display for the attachments (→ HSplit).
- In the HBox with the 2 buttons, the buttons should be placed on both the left and right edges in the container (→ panel as variable intermediate element).
In the next section, you will only see the excerpt from the source code that implements the above requirements:
Public Sub Form_Open() FMain.Center FMain.Arrangement = Arrange.Vertical FMain.Expand = False FMain.Margin = True FMain.Spacing = True ' Container HSplit HSplit1.Layout = [100, 0] ' Man sieht nach dem Programmstart die Box für die Anhänge zunächst nicht ' Container VBox links im Container HSplit vboxLeft.Margin = True ' Fester Abstand zwischen VBox-Rand und den 4 inneren HBoxen vboxLeft.Spacing = True ' Fester vertikaler Abstand zwischen den 4 inneren HBoxen hboxTo.Spacing = True ' Fester Abstand zwischen TextLabel und TextBox in der HBox (Empfänger) txlTo.W = 120 ' Feste Breite des TextLabels. Gilt für alle 4 TextLabel! txlTo.Alignment = Align.Right ' Text-Ausrichtung auf dem TextLabel ist "rechts" txbTo.Expand = True ' Die Weite der Textbox passt sich dynamisch an die Container-Weite von VBox an hboxCC.Spacing = True txlCC.W = 120 txlCC.Alignment = Align.Right txbCC.Expand = True hboxBCC.Spacing = True txlBCC.W = 120 txlBCC.Alignment = Align.Right txbBCC.Expand = True hboxSubject.Spacing = True lblSubject.W = 120 lblSubject.Alignment = Align.Right txbSubject.Expand = True ' Container rechts im Container HSplit ' vboxSubstitute ist ein Panel mit spezifischen Eigenschaftswerten (ohne Rand, Anordnung vertikal) vboxSubstitute.Border = Border.None ' Panel ohne Rand vboxSubstitute.Arrangement = Arrange.Vertical ' Vertikale Anordnung der 2 inneren Komponenten vboxSubstitute.Margin = True ' Fester Abstand zwischen VBox-Substitute und den zwei inneren HBoxen vboxSubstitute.Spacing = True ' Fester (vertikaler) Abstand zwischen den zwei inneren HBoxen lblAttachment.Alignment = Align.TopLeft ' Textanzeige in der linken, oberen Ecke hboxLIstBox.Expand = True ' Maximale Ausdehnung ListBox1.Expand = True ' Maximale Ausdehnung ListBox1.ScrollBar = Scroll.Both ' Komponente TextArea txaMailBody.Expand = True ' Füllt automatisch die Fläche, die HSplit und HBox (unten) frei lassen ' Container HBox unten hboxBottom.Height = 24 hboxBottom.Margin = False hboxBottom.Spacing = True panelSpace.Expand = True ' Schiebt die 2 Button an den linken bzw. an den rechten Rand des Containers End
All colour values have been set in the IDE. These have nothing to do with the arrangement of the containers and their contents.