Chapter 1: The Graphical User Interface

This chapter introduces the graphical user interface (GUI) and explains how to use it.

Dialog System provides software that enables you to build a usable GUI quickly and easily. It has an integral testing facility, which enables you to test and prototype the interface before you start to write the program that will use the interface. Some important features of Dialog System are:

• You can create a user interface that is independent of your application program and main program logic.

• You can define and change the user interface without affecting the application program.

• You can create several different user interfaces for the same program.

• You can prototype and test the interface without a supporting COBOL program.

  This means that you can enter data, receive output, and navigate between windows solely within Dialog System, without involving the program.

• All interaction with the user at run time is handled by calls to Dialog System from your application program.

  This means that your application program is smaller and easier to maintain.

• Dialog System helps to create the program by providing a ready-coded data structure for communication between the program and the user interface.

• Dialog System is portable among different environments.

Terminology

The Glossary in the Help fully explains the terms used in the Dialog System documents. Where two terms exist for the same item, the glossary explains both and notes the term preferred in Dialog System.

1.1 Why Use a GUI for Your Application?

The aim of a GUI is to provide an interface that is:

• Easy to learn.

• Consistent across applications (needs learning only once).

• Easy to use.

The GUI encourages users to concentrate on their tasks, rather than on the functions provided by the application. A GUI is intuitive, and encourages users to experiment and explore. It also forgives mistakes. This means that users can learn in their own way and at their own pace.

When they revisit the GUI, they are more likely to remember how to use it. If they don't remember, it doesn't matter because they can experiment all over again.

Character-based application interfaces use a hierarchy of menus. These require users to navigate through the different levels to the required function. Alternatively, users can memorize obscure shortcut keys.

A GUI application approaches the task to be done more directly. Users select an object and then an action. This reduces the number of menu levels. By using the point and click actions of the mouse, users can move easily through the interface until they can do the required task.

A GUI provides contextual help, with links to related areas. This makes it easier for users to acquire the background knowledge they need to do a task, without using more complicated help facilities that are supplied with character based systems, such as navigating through a hierarchical help tree.

1.2 How Dialog System Helps

Dialog System helps you with five phases in the life cycle of the user interface:

• Defining the user interface.

  Use Dialog System to define the data you want your application to use and its presentation on screen. This includes how the user will input data and navigate around the interface. This information is called the screenset and is saved as a file with a .gs extension.

• Prototyping and testing.

  Use Dialog System's testing facility to enter data and navigate around the interface as if the program were running. Simulate outputs and monitor what is returned to users.

• Integrating with the calling program.

  When the interface has been thoroughly tested, use Dialog System to generate a copyfile containing details of the data structure and the run-time interface.

• Running the application.

  Use Dialog System in run-time mode to handle dialog with the user and use the screenset until control returns to the calling program.

• Maintaining the application.

  Use Dialog System to change and customize the user interface without affecting the calling program. Conversely, you can change the calling program, without needing to change the user interface. Change both only if you need to change the data items passed between the user interface and the program.

1.3 Using a GUI System

Dialog System is designed for use with a mouse. You use the mouse to select, move and size the objects on the screen. You can also use the keyboard to do this, but you are likely to find the mouse more convenient. The keyboard is used to enter text and numeric data.

The following sections explain how to use the mouse, windows and control objects for those who are unfamiliar with a GUI environment.

1.3.1 Mouse Actions

The mouse operates a pointer that shows your position on screen. Also on the screen there is a selection cursor, which shows your position within a window.

The mouse pointer can move across window borders, and will change shape. For example, in a text field, it appears as an I-beam pointer, showing you the exact place where any text will be added. At the corner of a sizable window, it appears as a double headed arrow, and while you wait for an action to complete, it appears as a clock or an hourglass (depending on your current environment). The shape of the mouse pointer should give you some clues as to what you can do at a particular place on the desktop.

Before you perform any of the mouse actions, move the mouse pointer to the appropriate position on the screen. For example, if you want to select a menu option, move the pointer until it is over that option.

You can use the mouse to operate the various buttons on the screen, as well as to select objects or items and scroll through information on the screen.

In the following list of mouse actions, the mouse button to use for each action is not specified because some behavior is specific to an underlying operating system:

• Click – Press and release the mouse button.

  Selects an item or object, presses a push button or radio button, toggles a check box or a checkmarked choice.

• Click and drag (also called rubber band) – Press and hold down the mouse button, move the mouse pointer in the desired direction or over the desired selection, then release the mouse button.

  Draws a box around an area to select a number of items, moves a selected object, or changes an object boundary in a sizing operation.

• Double-click – Press and release the mouse button twice.

  On a Dialog System object, displays that object's Properties dialog box.

• Release – Let go of the mouse button which has been held down.

  Stops scrolling, stops dragging the object in a move operation, stops moving the window or object boundaries in a sizing operation.

Other mouse button behavior relating to Dialog System, for example Move or Select, is configurable. You can attach specific behavior for use in Dialog System which provides various standard patterns for these. What you choose to use depends on your operating environment, the software you are familiar with, and the type of mouse you have (two button or three button).

1.3.2 Windows and Menus

The desktop is the working area on your screen. A window is an object that represents all or part of the screen. You can create windows on the desktop that extend beyond the edges of the screen. You can also move windows around on the desktop.

The first window you create is called the primary window. It is a child of the desktop, because there are no other windows above it. This means that the desktop is its parent. You may create more than one primary window.

Any primary window can have child windows, called secondary windows. These in turn can have other secondary windows.

Primary and secondary windows are fully explained in the chapter Window Objects

The main menu bar appears on your desktop when you start up Dialog System.

You can pull down submenus from the menu bar by clicking on the choice required. Clicking on another choice while a submenu is pulled down simply closes the current menu and pulls down another.

Sometimes, choices are not available until you have performed a particular action (for example, you cannot create a control object such as a push button, until you have created a window or dialog box to put it into). If a choice is not available, it is displayed in a pale color instead of the deeper color of the available choices. The choice is said to be disabled. If you click on a disabled choice, you may hear a beep, but nothing else happens.

Menu choices can:

• Pull down additional menus. These are identified by arrows following the choice.

• Cause a secondary window or a dialog box to be displayed. These are identified by an ellipsis (...) following the choice.

• Be checkmarked choices. These have two states, on or off. When you click on the choice, you reverse its state. If it is on, a checkmark appears in front of it. These choices are sometimes called toggles.

• Cause an action to be performed directly. These have no special identification.

Any one menu choice can only have one of the actions described in the preceding list, and is decorated (for example with an ellipsis or a checkmark) appropriately.

1.3.2.1 Manipulating Windows

This section describes various ways of manipulating windows using the mouse and the icons that form part of most windows.

Figure 1-1 shows a window with labels to identify its components.

Figure 1-1: Window Components

When you are not using a primary window, you can reduce it to a small symbol, called an icon, on your taskbar.

If the window has a minimize icon, you can minimize the window using the mouse. Click on the minimize icon, which is the leftmost icon in the top right corner of the window. Double-click on the window icon to restore the window (see the section Mouse Actions earlier in this chapter).

You can also move a window and change the size of the window. These operations are best done with the mouse. To move a window, put the mouse pointer in the window title bar, click and drag the window to a new location, then release. The button you click to do this depends on how you have your mouse set up.

Similarly, to size a window, put the mouse pointer in the border at the side or corner of the window and click and drag it. The mouse pointer changes shape when it is in the right place to size the window. As you drag the window side or corner, the window changes shape. When the window reaches the required size and shape, release the mouse button.

To close a window, double-click on the system menu icon at the top left corner of the window.

To move between windows on the desktop, click on part of the window you want to move to. (If you click on any of the icons in the title bar, you activate the icon.)

If the window is not visible, select the required window from the taskbar and switch to it.

The current window (that is, the one that is active) has a colored title bar.

For more information on manipulating windows, refer to your operating system's documentation.

1.3.3 Dialog Boxes

A dialog box is a type of window that enables users to enter data of some kind. It cannot be resized and cannot have a menu bar. You can add any of the Dialog System control objects (such as a push button or a list box) to it. A dialog box can be created by another window, or by the desktop. (It is called a child of the window that creates it, and that window is called the parent of the dialog box.)

Dialog boxes stay in place until they are closed by user actions. Typically, a user clicks a push button to cause Dialog System to accept user actions (for example, the OK button to accept a selection from a list). Alternatively, a user may click a push button to cause Dialog System to ignore user actions (for example, the Cancel button to close a dialog box, ignoring any input).

Dialog boxes are often used to create File Selection boxes. These enable users to choose from a selection of files or other items and to enter their selections in another field.

1.3.4 Message Boxes

A message box is another type of window that appears on the screen to give users a message. It can contain only text and graphics to give a message, and push buttons to respond to the message. It must be explicitly cleared by the user clicking one of the push buttons.

You can use message boxes to give warnings when incorrect data has been entered, or to ask users to confirm that they want to continue with a potentially destructive action (such as deleting an object).

1.3.5 Controls

Controls are Dialog System objects that you can add to windows or dialog boxes to enable users to interact with the application. Control objects can only be placed inside a window or dialog box. Dialog System provides a wide range of control objects such as entry fields, push buttons, list boxes, selection boxes and bitmaps. See the chapter Control Objects and the Help for full information on the control objects available.

1.3.6 Selecting Objects

In a GUI system, the application is driven by users selecting objects and then selecting actions to be applied to the objects.

Dialog System provides the following selection methods that are applicable to most objects:

• To select a single object, move the mouse pointer to the object and click.

• To select several objects with the mouse, one of the mouse buttons must be set to Select (see the section Mouse Actions).

  If you hold down the shift key, you can select multiple individual objects by clicking on them, rather than by clicking and dragging.

• To select objects using the menu or keyboard, use Select area or Select all on the Edit menu. Select area selects one or more objects. Select all selects all objects in the current window or dialog box.

Dialog System provides the following selection methods applicable to specific objects:

• To select a menu choice, either move the mouse pointer to the choice and click, or select the choice using the cursor arrows and press Enter.

• To select an entry in a selection box, scroll through the list in the box until the desired entry appears, move the mouse pointer to it and click. If you double-click on a list item, the default action is performed. Clicking on another item cancels the first selection and selects the new one.

• To select an entry in a list box, scroll through the list in the box until the desired entry appears, move the mouse pointer to it and click. If you double-click on a list item, the default action is performed. A list box can be set up to enable you to perform a single selection only, to select multiple items, or to select multiple adjacent items.

• To select a radio button choice, click on the button. It is filled in to show it has been selected. If another radio button in the same control group was selected, it will be deselected. (Only one radio button can be selected in a control group.)

• To select a check box choice, click on the check box. The state of the check box is reversed - if it was selected, it is now deselected, and if it was not selected, it is now selected. You can click on any number of check box choices.

• To select a push button action, click on the button. The button changes appearance to look as if it is pushed in. Clicking the button starts the action.

1.3.7 Scrolling

Some windows contain scrollable areas. These are indicated by scroll bars at the right hand edge (for vertical scrolling) and the bottom edge (for horizontal scrolling). Each scroll bar contains a slider which moves along the bar, and arrows indicating the direction of scrolling.

• To scroll line-by-line, click on the scroll arrow that points in the direction you want to scroll.

• To scroll a screen at a time, click on the scroll bar itself, next to the slider. Scrolling is towards the point where you clicked.

• To scroll more than a screen at a time, click and drag the slider in the appropriate scroll bar in the desired direction. Release the mouse button when you reach the desired part of the window.

1.4 Further Information

The next chapter Introduction to Dialog System explains the basic concepts that you need in order to start using Dialog System.