How You Create a GUI

Designing a Graphical User Interface › GUIs and User-Centered Design › How You Create a GUI

How You Create a GUI

To create a GUI design, you have some preliminary decisions to make concerning the interface. CA Gen tools can often assist you as you make these decisions, but, overall, many of the preliminary decisions can be made independently of the tools.

For example, as you decide on the overall form and function of the interface, you would typically address tasks such as shown next:

Determine the flow between windows and dialogs that corresponds to the order in which the user is most likely to use the application.
Decide on any interface standards for the application, which could include decisions about:
- When to use tool bars and status bars
- The bitmap images to use as objects
- The font and the foreground and background colors for windows, dialogs, and controls

After you have a preliminary design, you perform several major tasks with the Window Design functionality. Each of these major tasks has subtasks associated with it. The major tasks tend to group into the following broad categories:

Tasks to create windows and menu items
Tasks to create controls and specify control characteristics (controls are components that allow selection of choices, entry of information, or both)
Tasks to fine tune the interface

The major tasks tend to be iterative. For example, since one procedure may have many windows associated with it, you would iterate the tasks of specifying the characteristics for each window, the characteristics for each control, and so forth.

You can follow the major tasks in sequence to create a GUI interface. This is not the only sequence in which you could build a GUI. The major tasks show one sequence that can guide you as you create your application. As you become more familiar with the Window Design functionality, you may prefer a different sequence.

The following table lists the tasks to create windows and menu items.

Task	Primary Subtasks
Add a window	Choose a procedure or procedure step with which you want to associate a window or dialog.
Specify window characteristics	Name the window. Specify if the window is the primary one with which the user interacts. Specify where on the desktop the window appears when first invoked. Specify if the window can remain open while the user performs other tasks. Specify if the window uses a bitmap for a background.
Add menu items to a window	Name the menu options that appear in the menu bar and menu bar pull downs. Determine the arrangement (hierarchy) of the menu options. Specify font and colors for menu items.
Specify menu item characteristics	Specify the text for the menu item. Specify the result that occurs when the user selects the menu item. Specify the command, if any, associated with the menu item.

The following table lists the tasks to create controls and specify control characteristics.

Task	Primary Subtasks
Add controls that implement views of attributes	Select attribute views. Specify the type of control. Specify prompts and edit patterns. Place the control on a window.
Add controls that do not implement views of attributes	Specify the result that occurs when the user selects the control. Specify the text for the control. Place the control on a window.
Specify control characteristics	Map import and export views. Specify the text for the control. Specify prompts and edit patterns. Specify behavioral results of the user interacting with the control. Behavioral results also includes event processing, which is listed as a separate major task because of the amount of information associated with events.
Add events	Add an event type. Create a name for the event action. Specify the action diagram logic for the event action. This subtask is performed with the Action Diagram tool.

The following table lists tasks to fine tune the interface.

Task	Primary Subtasks
Test the flow of user tasks from window to window	Decide which windows open or close which other windows. Test the flow from window to window.
Refine the overall appearance of the interface	Verify the implementation of any application-wide standards. Verify the use of tool bars and status bars. Rearrange the controls in a manner that satisfies the object/action flow in which a user performs tasks. Group related controls together. Disable controls where appropriate. Create or update any bitmap images to use as objects. Verify the choices for the font and the foreground and background colors for windows, dialogs, and controls.

Task

Primary Subtasks

Test the flow of user tasks from window to window

Decide which windows open or close which other windows.

Test the flow from window to window.

Refine the overall appearance of the interface

Verify the implementation of any application-wide standards.

Verify the use of tool bars and status bars.

Rearrange the controls in a manner that satisfies the object/action flow in which a user performs tasks.

Group related controls together.

Disable controls where appropriate.

Create or update any bitmap images to use as objects.

Verify the choices for the font and the foreground and background colors for windows, dialogs, and controls.