Designing a Form

In this section:

How to:

The first form that you will create for the FanClub application will look something like this:

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

x
Procedure: How to Add Data Source Fields to a Form
  1. Open Form1.
  2. In the Project Explorer window, click the plus sign to the left of fannames to view the CUSTOMER segment.
  3. Click and drag the CUSTOMER segment into the form.

    Project Explorer window 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.


Top of page

x
What Are Data Source Stacks?

How to:

WebFOCUS Maintain procedures do not display or manipulate information in a data source directly. Instead, they 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.



x
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.

    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

x
More About the Project Explorer: More About the Components of a Procedure

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

AddFanStack tree diagram


Top of page

x
Working in the Form Editor

In the Form Editor, you design the user data adapters for your applications. Take a look at its contents.

Form Editor dialog box

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

Following are the main components of the Form Editor:


Top of page

x
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 Firstname and Lastname are next to each other in a row, and City, State, and Zip are also next to each other.



x
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 Toggle grid button 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 up the fields Firstname, Company, Address, and City.

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

  4. Click and drag State to the right of City.
  5. Click and drag Zip to the right of State.
  6. Move up Phone, Email, and Enrollment date.
  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.

When you are done, your form looks something like this:

Form example image


Top of page

x
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.



x
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. 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.

    Properties Prompted Edit box dialog box

  2. Select Firstname_Text from the drop-down list at the top of the property sheet.

    Properties Prompted Edit box dialog box

    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.

    Properties Prompted Edit box dialog box

  4. Press Enter to confirm your change.


x
Procedure: How to Rename Field Prompts the Fast Way

There is a faster way to rename field prompts. Now you'll rename Lastname the fast way.

  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

x
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.



x
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 multi-select 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.

    Align Entry fields dialog box

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

    or

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

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

    Your entry fields should look like this:

    Align Entry fields dialog box


WebFOCUS