GAMBAS BOOK 3.19.3

Chapter 18 introduces you to containers as the components that hold other components. Containers include:

• Frame,
• Expander,
• Embedder,
• Panel, SidePanel, HPanel, VPanel,
• ToolPanel,
• ToolBar,
• HSplit, VSplit, HBox, VBox,
• ScrollView,
• DrawingArea,
• ListContainer.

The most important properties and methods of the various containers are described, with a separate chapter 12 devoted to the most important container - the form.

Figure 18.0.1: Programme interface for the GBTT project with the Splitter and VBox containers.

The following properties can be found with all containers:

Table 18.0.1.1: Overview of container properties

★ If you set the Margin property to True and also set the Padding property to k (pixels), then the Margin property is ignored! As a recommendation: Select the Margin property for a fixed distance with the constant distance Desktop.Scale between the container edge and the elements in the container and the Padding property to define a variable distance with the distance k ( k ≥ 1, k ∈ Integer) pixels.

The Padding property defines the distance and thus for a container C:

• If C.Margin = True and C.Padding = 0, then C.Margin = Desktop.Scale
• If C.Margin = True and C.Padding = 5, then C.Margin = 5
• If C.Spacing = True and C.Padding = 0, then C.Spacing = Desktop.Scale
• If C.Spacing = True and C.Padding = 5, then C.Spacing = 5

In this section only examples of the effects of the container properties Margin, Spacing, Indent and Invert are presented and another container is inserted - illustrated by the container HBox:

Figure 18.0.3.1: Two identical containers of the type HBox with 4 buttons each; unordered

• Drag two containers of type HBox (background colour grey) with a height of 56 pixels and with 4 buttons (40x40px) each onto a form in the IDE as shown in Figure 18.0.3.1.
• Set selected container properties (margin, spacing, indent and invert) to the values given in each example.
• Present and compare the results in 1 to 5.

HBox1.Margin = False HBox1.Spacing = False HBox1.Indent = False HBox1.Invert = False
HBox2.Margin = True  HBox2.Spacing = False HBox2.Indent = False HBox2.Invert = False

Figure 18.0.3.1.1: Result Example 1 - Content of HBox2 with constant distance to the border.

  HBox1.Margin = False HBox1.Spacing = False HBox1.Indent = False HBox1.Invert = False
  HBox2.Margin = True  HBox2.Spacing = True HBox2.Indent = False HBox2.Invert = False

Figure 18.0.3.2.1: Result example 2 - content of HBox2 additionally with constant distance between the 4 buttons

  HBox1.Margin = True  HBox1.Spacing = True HBox1.Indent = False HBox1.Invert = False
  HBox2.Margin = True  HBox2.Spacing = True HBox2.Indent = False HBox2.Invert = True

Figure 18.0.3.3.1: Result example 3 - alignment in container HBox2 inverted

  HBox1.H = 40          HBox2.H = 40
  HBox1.Margin = False  HBox1.Spacing = False HBox1.Indent = False HBox1.Invert = False
  HBox2.Margin = False  HBox2.Spacing = False HBox2.Indent = True  HBox2.Invert = False

Figure 18.0.3.4.1: Result Example 4 - Indentation by Desktop.Scale Pixel to the Right in Container HBox2

Figure 18.0.3.5.1: Example 5 - Height of containers 56px

• Set the height of the two containers HBox to 56px.
• Insert a panel into the HBox2 container → Figure 18.0.3.5.1.

  HBox1.H = 56
  HBox2.H = 56
  panSpace.Expand = True
  HBox1.Margin = False  HBox1.Spacing = False HBox1.Indent = False HBox1.Invert = False
  HBox2.Margin = True   HBox2.Spacing = True  HBox2.Indent = True  HBox2.Invert = False

Figure 18.0.3.5.2: Example 5 - Height of containers 56px.

The panel 'pushes' the last button to the right edge because, due to the property panSpace.Expand = True being set, the panel takes up all the available space between the 3rd and 4th buttons.

For example, with all other properties set to the same value, place the panel named panSpace between the second and third buttons and observe the result!

In the GeoMap project → chapter 17.15.1, the intentions for example 5 are practically implemented:

Figure 18.0.3.5.3: Project GeoMap