One of my favorite war stories is about the user who asked to have his reports printed sideways. (This was in the days of band printers.) The user said he could get his reports printed sideways on his PC, why couldn't he do the same thing on the S/38?

The point I'm illustrating with that story is that users have certain expectations based on their experiences with personal computers. One of the worst questions that you may have to face as a client/server programmer is why the application you developed works differently from Word, Excel, or whatever application the user works with.

For pure green screen programming, the standard is Systems Application Architecture (SAA). It defines, among other things, that F3 is exit and F1 is help. Users come to expect conformance to this standard. On the PC side, Microsoft has set standards about the way the Windows user interface works. If you want happy users (who doesn't?) you'll have to learn and conform to those standards.

When you start moving into graphical user interface (GUI) client/server development, you may encounter confusion about how all of the different types of graphical controls should be used. For most GUI development tools, you have a choice of labels, text boxes, and command buttons, just to name a few. Anything you put in a window is a control.

Each control, including the window itself, has a specific purpose and has events associated with it. An example of an event is mouse over, which is triggered when the user moves the mouse over a control. You might use this event to place help text for the control in the status bar. This article describes some of the controls found in most GUI development tools and the kinds of situations they are used in.

The accompanying figure shows a window demonstrating some of the controls. I created this sample window using Microsoft's Visual Basic (VB), but the controls I will discuss are also available in products like Powersoft's PowerBuilder and Gupta's SQLWindows. The names of the controls may differ among tools, but the concepts apply to almost any product you select.

From the Top

The figure displays extracts from an imaginary window. It shows data from a fictitious magazine's author database, including the author's name, gender, and title. I've created a list of the controls that might be on this window and I will start with the first one, which is a label.

The majority of the controls on this window are labels. For example, the column headings are labels. A label, though a simple thing, is possibly the most prevalent control in a graphical environment. A label is an output only field that doesn't really care about the type of data it shows. It is analogous to a constant field on a display file. The first label field in the figure is a box showing the value "Enter your name:"

The second control is a text box. This control allows the user to enter data for the program to use. A text box is similar to an input/output field on a display file. In the example, the entry is an author's name.

There are different kinds of text boxes. For example, a masked text box allows you to create a mask that defines what kind of data the user can enter in that field. You might restrict the user to enter only alphabetic characters or only numeric characters. The support for different kinds of controls varies depending on the development tool that you select. For example, not all development tools include a masked text box.

The third type of control illustrated is a command button. AS/400 programmers can relate a command button to a function key-it triggers some event to occur. In the example button shown, clicking on that button would exit the program.

On the button, the x in Exit is underlined. The underline defines the access key. It tells the user that holding the Alt key and pressing X is equivalent to clicking the Exit button.

When I typed "Exit" as the caption for the button, I put an ampersand (&) in front of the x. VB translates that into an underline and automatically intercepts an Alt-X and triggers the exit button's click event. This technique is common in most Windows development tools. Some tools use characters other than the ampersand to indicate the access key.

The fourth group of controls in the window consists of three check boxes. Check boxes indicate a true or false value. Some, none, or all of the values can be true.

For example, regarding the fictitious author, all three check boxes are selected, showing that the author is a programmer, a technical editor, and an all around good guy. None of those values are necessarily mutually exclusive. That's where check boxes differ from radio buttons.

Halfway There

The fifth group of controls demonstrates the use of radio buttons-in this case to allow the user to select the gender of the author. A radio button permits the user to select only one option from the list of choices. If the user clicks the Female radio button, the Male radio button is automatically deselected.

If you have more than one group of radio buttons, you will often need to create a frame around each group of radio buttons. (A frame is a method for grouping together controls that have the same purpose.) You might have one set of radio buttons to indicate gender and another set to indicate employment status. The frame groups the gender radio buttons separately from the employment status buttons so that when you tell the application the person has quit, the gender radio buttons remain unaffected.

The sixth control demonstrates a drop-down combo box. This control type lets the user select a value from a set of allowed values. In the example, the user is selecting a job title for our fictitious author from a list of certain job titles that the company has defined.

When the user clicks on the down arrow, the list of job titles drops down from the box, hence the name of the control. The user then clicks on the job title that's appropriate for the author. That job title is displayed in the box next to the arrow.

The seventh control is a list box. The easiest way to remember the purpose of a list box is to think of it as a simple subfile. One thing a list box doesn't handle well is multiple columns of data. The reason is that the normal font used for the data in the list box is a proportional font (meaning that each letter has a different size). With a proportional font, it's difficult to get the columns of data to line up properly.

Certain languages support a control, sometimes called a grid, that looks similar to a spreadsheet. The grid lets you put each column of data in a column on the grid so that it lines up correctly.

The last control is a scroll bar. It allows the user to control his positioning within a set of data. For example, the list box automatically has a scroll bar on the right side because there are more entries than the list box can display. The scroll bar lets the user move through the records in the list box.

You might use a scroll bar if the window is too small to show all the controls. The scroll bar would adjust the virtual position of the window, scrolling through the controls on that window.

Other Controls

Each tool has a slightly different set of controls; however, most tools have what I've described in this article. Many tools allow add-on controls similar to the masked text box that I described. You can purchase add-on controls for VB from many vendors and some of those controls work in other tools, like PowerBuilder and SQLWindows.

Each control has a specific purpose. If you use each control according to its designed purpose, your applications will behave more like the other applications your users are already using. This information about controls will allow you to design GUI applications that are more visually appealing and easier to use.

Jim Hoopes is a senior technical editor for Midrange Computing

Graphical Controls: An Introduction

Figure 1 Sample Controls

 UNABLE TO REPRODUCE GRAPHICS 

Also Read

The Power of Writing Code in a Low-Code Solution

TechTip: Let’s Have a Date, Part 2

Going off the Rails