Tab Control – A Tutorial

Tab Control – A Tutorial

In this example, a Tab Control is constructed for a ‘Customer Maintenance Interface’. The tab control contains three pages for Details, Addresses, and Notes.

Notes:

1. The instructions assume that the developer is experienced in using the Zim Screen Painter.
2. The example uses the ZOF naming conventions.
3. Start the tutorial in a new initialized database.
4. Measurements are made in TWIPS.
5. Field names are irrelevant in this tutorial; therefore, the generated field names are sufficient.

Steps

1. Create a new form.
2. Paint the ‘fCustomer’ base widgets.
3. Construct the tab control
4. Add the widgets for each page.
5. Assign the focus fields.
6. Create the interface class/program.

To create a new form:

1. Add a new form using DC.
2. Enter the form name ‘fCustomer’.
3. Click OK. The painter automatically opens.
4. Assign the name ‘wCustomer’ to the window.
5. Assign the caption ‘Customer’ to the window.
6. Size the window to approximately 6000 x 5000 TWIPS.

To paint the ‘fCustomer’ base widgets:

1. Add a status bar to the window.
2. Add an OK button.
3. Add a Cancel button. Assign the field tag Exit.

Sample Painted Form

To construct the tab control:

1. Exit the painter and the form is created.
2. From the Edit menu, select Tab Control. The Tab Control constructor interface opens.
3. On the Labels tab page enter the three labels required: Details, Address, Notes
4. On the Properties page, change the bottom margin from 100 to 1000.
5. Select the Set Focus Field Automatically check box. This causes the zTabControl to select a field in the current tab page automatically.
6. Press the Construct button. The Tab Control is constructed in ‘fCustomer’.
7. A message box is displayed; ‘The form [formname] contains reserved form field numbers. These form field numbers are used by the tab control. Do you want to set form field numbers to zero’. Select ‘Yes’ to the prompt.

To add the widgets for each page:

1. From the ‘Edit’ menu select ‘Paint Form’. The resulting form should be similar to the following:

Constructed Tab Control

Three frames (no borders, no titles) have been added, labelled TabPage1, TabPage2, and TabPage3. These frames contain the widgets for each page. Note that the widgets must be a child frame for the tab control to display them. This can be checked in using the Z-Order window on the left side of the painter.

2. For TabPage1, paint the detail fields as shown below:

The Details Page

3. For TabPage2, paint the address fields as shown below:

The Address Page

4. For TabPage3, paint the address fields as shown below:

The Notes Page

To assign the focus fields:

Note: Each page should have a focus field. zTabControl sets the focus field when the page changes. There is one focus field per page. The focus field number is the tab page field number plus 1.

1. Assign the following focus fields:
   • Name (FIELDNUM) = 101
   • Company (FIELDNUM) = 201
   • Notes (FIELDNUM) = 301
2. Exit the painter.

To create the interface class/program:

1. Create a new document with DOCNAME of ‘zCustomer’.
2. Using a text editor, copy the example code from zTabControl Description into the document ‘zCustomer’.
3. Search and replace the string ‘InterfaceClass’ with ‘Customer’.
4. Execute zCustomer() at the command prompt.