The class IconPanel (gb.form) is a multi-container that can display large icons and text on its tabs (tab). This class behaves like a read-only array. An IconPanel consists of a left and a right pane.

You can use the Container component IconPanel to create decorative navigation for several sub-programmes with minimal effort. For each entry in the navigation bar (left pane) with a large icon and text, a corresponding area (right pane 1…k) is available for the arrangement of the components:

Figure 18.15.1: Use of the IconPanel component (Gambas IDE)

The properties of the IconPanel component are described in the following table:

Table 18.15.1.1: IconPanel properties

The container component has only one special Click event. It is triggered when the current tab changes.

This project follows on from the example presented above of using the IconPanel component in the Gambas IDE to specify global settings, and provides guidance on some aspects of using the component to make your work easier. This is especially true at development time for

• adding more tabs after setting the (starting) number,
• arranging the tabs,
• the deletion of tabs and
• changing the text in a tab.

In the planning phase, you should determine the (starting) number of individual tabs, note their order, icon and text for the left-hand window area and record and comment on the arrangement of the components in the right-hand window areas - at least schematically.

Here you can see the arrangement of the components for Tab2 with matching icon and the caption text 'Settings' in the IDE and below at runtime:

Figure 18.15.3.1: Project - Development time

Figure 18.15.3.2: Project - runtime with changed text on Tab2.

For all work in the IDE it is important that the container component IconPanel is selected. Check this carefully! The surest way to do this is to click in the right pane of the IconPanel component. Before giving the source code in excerpts, here are some hints:

• First set the (start) number of individual tabs (In the project → 5).
• In the properties window, the properties of the IconPanel component are defined in general as well as the two properties Text and Picture - depending on the selected tab in the left-hand window area! Better look twice.
• Then set 5 times each of the 2 properties Text and Picture of the currently marked tab in the left window area. A pixel size of 32px (size large) for the icon is optimal in our opinion.
• You can then equip the five right-hand window areas - depending on the selected tab - with the intended components according to the templates from the planning phase → Figure 18.5.3.1 for Tab2.

• Choose simple labels for headings and HBoxes as containers for buttons, combo boxes, input fields or similar. The safest way to explore the properties of the HBoxes and their embedded components is to open the given project and look in the properties window as well as in the source code. Please note that only for Tab2 all components are entered - on all others you will find only one label each!

• If you are not satisfied with the order of the tabs, you can rearrange them. A click with the right mouse button (RMT) on a tab opens a context menu. You cannot find the entry “Move Tab”? Well - then the component IconPanel is obviously not selected. Make up for it. In the context menu, under “Move Tab”, you will then find the four move options for the selected tab. Alternatively, you can also use the 4 buttons in the lower toolbar.
• Deleting a marked tab in the marked component IconPanel is only possible with the Del key if all components have been deleted in the corresponding right-hand window area. To delete, you can also go via the corresponding entry in the context menu of the IconPanel component.
• Insert a new tab by increasing the current value of the Count property by one. You can then insert an icon and text and fill the corresponding right-hand pane with components and specify the required functionality in the source code.<x>db</x>.

The source code is manageable because only a few properties are set at runtime and the functionality is limited to selecting the default font (→ Figure 18.15.3.2, red circle).

' Gambas class file
 
Public Sub Form_Open()
 
  FMain.Center
  FMain.Resizable = False
  FMain.Caption = "Projekt-Einstellungen für das aktuelle Projekt:   " & Application.Name
  FMain.Arrangement = Arrange.Fill
  FMain.Margin = True
  FMain.Spacing = True
  FMain.Persistent = True
  FMain.Utility = True
 
  ipnOption.Arrangement = Arrange.Vertical
  ipnOption.Border = True
  ipnOption.Margin = True
  ipnOption.Spacing = True
 
' Zur Kontrolle und zum Experimentieren:
' Print ipnOption.Font.ToString() ' Auslesen des eingesetzten Fonts (Z.B. Ubuntu, 11)
' ipnOption.Font = Font["Arial,10,Italic"] ' Font für die Komponente IconPanel setzen
' ipnOption.TextFont = Font["Arial,11,Bold"] ' Font speziell für den linken Fensterbereich setzen
 
  ipnOption.Index = 1 ' Der 2. Eintrag ist aktiv
  ipnOption[1].Background = &HE1EAF6 ' Hintergrundfarbe Tab1
  ipnOption[1].Text = "Allgemeine Einstellungen" ' Text für Tab1 ändern!
 
  btnClearGlobalFont.Tooltip = "Standard-Schriftart setzen"
 
End
 
Public Sub txtGlobalFont_Click()
  If Dialog.SelectFont() Then Return ' Aktion: Abbrechen
  txtGlobalFont.Text = Dialog.Font.Name & " " & Dialog.Font.Size
End
 
Public Sub btnClearGlobalFont_Click()
  txtGlobalFont.Text = "Ubuntu 11"
End
 
Public Sub Form_Close()
  FMain.Close
End