Designing a Form

In this section:

How to:

An example of the first form that you will create for the FanClub application is shown in the following image.

Add a New Member dialog box

This form enables end users to add a new fan to the data source.

The information typed into this form will be written to the fannames data source, so it should correspond to the fields in the data source. The fastest way to create the fields on the form is to use the existing data source fields. Therefore, your first task is to add data source fields to the form.

Top of page

Procedure: How to Add Data Source Fields to a Form
  1. Open the Form1 form.
  2. In the Project Explorer window, click the plus sign to the left of fannames to view the CUSTOMER segment.
  3. Drag the CUSTOMER segment into the form, as shown in the following image.

    Maintain Development Environment Window

    WebFOCUS Maintain opens the Select Segment Fields dialog box. You must specify which data source stack fields you want to display on your form. First, you need to understand the role of data source stacks in your project.

Top of page

What Are Data Source Stacks?

How to:

WebFOCUS Maintain procedures do not directly display or manipulate information in a data source. Instead, use data source stacks as intermediaries between end users and the data source.

A stack is a non-persistent (or in-memory) table where you can store and manipulate data from one or more data sources. WebFOCUS Maintain procedures use stacks to hold values you read from the data source and to manipulate data before writing it back to the data source.

Since this is a new procedure, there are no stacks yet. You are going to create one named AddFanStack, instead of using the default CustomerStk. The structure of the stack is based on the fields in the data source, in other words, the stack is going to have the columns SSN, LASTNAME, FIRSTNAME, and so on. However, this stack will be empty until you do something to put data in it.

Procedure: How to Specify a Data Source Stack for Fields on a Form
  1. In the Select Segment Fields dialog box, select New Stack. This specifies where your procedure stores the data to be displayed in the fields. An input field appears under the New Stack radio button.
  2. In the New Stack field, type AddFanStack.
  3. Scroll down to the bottom of the list of fields and deselect TITLE and USER, as shown in the following image.

    Select Segment Fields dialog box

  4. Click OK.

WebFOCUS Maintain places all of the fields from the CUSTOMER segment except TITLE and USER into the form.

Top of page

Components of a Procedure in the Project Explorer

In the Project Explorer, there have been some additions to the components of Start:

Top of page

Working in the Form Editor

In the Form Editor, you design the user data adapters for your applications. The Form Editor design tools are identified in the following image.

Note: The screen may look different from what you see here. The windows have been moved.

The following are the main components of the Form Editor:

Top of page

Moving Controls on a Form

How to:

When you placed these fields on the form, WebFOCUS Maintain placed them in a column. This is not an optimal arrangement for the fields. Rearrange them so that the Firstname and Lastname fields are next to each other in a row, and City, State, and Zip fields are also next to each other.

Procedure: How to Move Controls on a Form
  1. If the grid for your form is not set to on (the default setting), then turn it on either by selecting Grid from the View menu or by clicking the Toggle grid button Toggle grid button on the Layout toolbar. Make sure the form is the active window.

    If the grid is on, when you move controls on your form, the Form Editor automatically snaps them to the closest grid point. This feature enables you to keep controls easily aligned on a form.

  2. Move Lastname (by clicking on it and dragging it to the new location) far enough to the right so that you can move Firstname up and to the left of it.
  3. Move the Firstname, Company, Address, and City fields up the grid.

    Since the grid is on, you preserve the correct vertical spacing between fields.

  4. Drag State to the right of City.
  5. Drag Zip to the right of State.
  6. Move the Phone, Email, and Enrollment date fields up.
  7. Right-click the form. From the pop-up menu, select Tab Order and reorder the fields to reflect the order in which they appear on your form.

An example of this is shown in the following image.

Form example image

Top of page

Renaming Field Prompts

How to:

While Firstname and Lastname are certainly descriptive field prompts, they are definitely not English words. Rename these two field prompts to First and Last.

Procedure: How to Rename Field Prompts
  1. Select the Firstname field.

    Notice that the control in the property sheet says (Group), indicating that the Firstname field is not a single control, but is actually two controls grouped together, as shown in the following image. It is useful to group controls so that WebFOCUS Maintain treats them as a unit. This means that you cannot move one without moving the other.

    Firstname is made up of two controls: a text box named Firstname_Text that serves as the prompt, and an edit box control named Firstname_Edit where the end user types a value for the Firstname field. Together they are called a prompted edit box.

  2. Select Firstname_Text from the drop-down list at the top of the property sheet, as shown in the following image.

    Properties Sheet

    You can then see the properties for Firstname_Text.

  3. Scroll to find the Text property (the value is Firstname), and change the value to First, as shown in the following image.

    Properties Sheet

  4. Press Enter to confirm your change.

Procedure: How to How to Quickly Rename Field Prompts

There is a faster way to rename field prompts. Now you will rename Lastname using this method.

  1. Select the Lastname prompted edit box.
  2. Place your cursor over the Lastname prompt. It turns into a text editing I-beam.
  3. Change the prompt to Last.

Top of page

Aligning Controls

How to:

If you have been moving these controls around in the window and renaming prompts, your fields have probably become misaligned. The Form Editor enables you to align controls easily.

One of the alignment tools is designed especially for aligning entry fields such as these, which are made up of a text control and an edit box control.

Procedure: How to Align Entry Fields
  1. Select all of the entry fields on the left side (all of the entry fields except for Last, State, and Zip).

    You can multiselect fields by selecting the first one and then holding down the Shift key or the Control key while you select the remaining fields.

    Notice that one of the fields has green handles, while the other ones have blue handles. The field with green handles is the anchor control, meaning the field with which all the other fields are aligned, as shown in the following image.

    Align Entry fields dialog box

  2. In the Layout menu, click Align, and then click Center vertically in the submenu.


    In the Layout toolbar, click the Align Edges button Align Edges.

    Then click the Center vertically button Center Vertically button in the pop-up toolbar.

    Note: You can adjust the fields manually to refine your layout.

    Your entry fields should look like this:

    Align Entry fields dialog box