GAMBAS-BOOK 3.19.5

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.

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.

Table 18.8.2.1: Overview of VBox properties

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.