Designing a Form

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

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.

Procedure: How to Add Data Source Fields to a Form

Open the Form1 form.
In the Project Explorer window, click the plus sign to the left of fannames to view the CUSTOMER segment.
Drag the CUSTOMER segment into the form, as shown in the following image.

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.

What Are Data Source Stacks?

How to:

Specify a Data Source Stack for Fields on a Form

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.

Top of page

Procedure: How to Specify a Data Source Stack for Fields on a Form

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.
In the New Stack field, type AddFanStack.
Scroll down to the bottom of the list of fields and deselect TITLE and USER, as shown in the following image.
Click OK.

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

Components of a Procedure in the Project Explorer

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

If you expand Form1, you see a list of fields that you placed on the form.
The stack AddFanStack has also been added to Start. If you expand AddFanStack, you will see the columns in this stack, as shown in the following image.

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:

The Form is your main working area. What you place here appears on the form your end users see.
The Maintain Controls palette contains the controls that you can place on your form, such as text boxes, buttons, radio buttons, check boxes, and so on. Controls are objects on the screen that you can maneuver to execute an action. You can use many of these controls in this tutorial.
Note: When you select an object, the mouse pointer changes to a crosshair so that you can draw it on a form. You can use the arrow keys to move the object to a specific location.
The property sheet is where you specify information about controls that you have placed on the palette. You will always see the properties for the currently selected control here. If no control is selected, you see the properties for the form itself.
The Layout toolbar contains alignment and grouping commands.
Note: The layout toolbar usually appears at the bottom of the application. If it is not visible, click the Tools menu, click Customize toolbars, then select Layout.

Moving Controls on a Form

How to:

Move Controls on a Form

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.

Top of page

Procedure: How to Move Controls on a Form

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 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.
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.
Move the Firstname, Company, Address, and City fields up the grid.
Since the grid is on, you preserve the correct vertical spacing between fields.
Drag State to the right of City.
Drag Zip to the right of State.
Move the Phone, Email, and Enrollment date fields up.
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

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.

Top of page

Procedure: How to Rename Field Prompts

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.
Select Firstname_Text from the drop-down list at the top of the property sheet, as shown in the following image.

You can then see the properties for Firstname_Text.
Scroll to find the Text property (the value is Firstname), and change the value to First, as shown in the following image.
Press Enter to confirm your change.

Top of page

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.

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

Aligning Controls

How to:

Align Entry Fields

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.

Top of page

Procedure: How to Align Entry Fields

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.
In the Layout menu, click Align, and then click Center vertically in the submenu.
or

In the Layout toolbar, click the Align Edges button .

Then click the 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: