Initial Requirements for the Graphical User Interface Development Tool

Programming Environments

Computer Science 233, Fall, 1999

Richards C. Gilbert

Overview

The Graphical User Interface Development Tool (GUIDT) will be a drag-and-drop environment for creating simple, static user interfaces. The GUIDT will be compatible with and initially work with Java Swing, but it will have a sufficiently open architecture to allow for later expansion of functionality as well as the importing of other GUI components (including "Third Party" GUI components). The GUIDT will automatically create Java code defining the created user interface. There will also be simple and intuitive attribute and action definition for applicable GUI compo- nents. The main design goal with the GUIDT is ease of use over complexity.

The Workspace Environment Overview

The tool itself will consist of a graphical window that will be called the "workspace". The tool will have a graphical menu bar that will house the GUI components to be used. It will also have a textual menu bar that will control special commands and preferences. The developer will be able to drag components from the graphical menu onto the workspace. From there, he/she will be able to modify the appearance and functionality of each component at will. For working simplicity, the developer will by default have access to a limited subset of each component's attributes. This is in keeping with the uncluttered, ease-of-use design philosophy mentioned above. However, the developer will also be able to access more of the modifiable options of the components through menus.

Drag-and-Drop GUI Development

• The main purpose of creating the GUI Development Tool is to allow users of the proposed IDE easy and intuitive creation of GUI's. The initial goal for the GUIDT is not necessarily to be able to use all the functionality of particular GUI components, but rather to quickly create prototype or testing interfaces that can then be easily user-modified for more detailed pur- poses. The user will be able to choose from a graphical menu of component options and drag a desired component into the workspace. Once in the workspace, the component should be easily and visually manipulatable as the user desires.
• Basic parameters such as size and position will be easily manipulated using the mouse in a drag-and-drop manner.
• Some degree of events and event handling will be definable at the graphical workspace level. This includes simple action control of relevant components.
• Text and labels of components will be easily changeable without awkward menus. For exam- ple, the user will be able to middle-click on a text label, and it will be editable.
• The amount of control and information available to the user at the graphical workspace level will be controllable by preference pages within the GUIDT.

GUI Component Specification

• Each GUI component that is to be used with the system will have its interface detailed in XML in a particular file. There can be multiple XML sheets per specification file, but each file will correspond to a grouping of components (e.g., groups could include "Text Compo- nents", or "Buttons", etc.). This will make component selection easier within the tool. The GUIDT will then read the specification sheet upon starting and insert the appropriate compo- nents into the tool itself, ready to be chosen and used by the user. This will also make the addition of new GUI classes (including Third-Party classes) a relatively easy matter.

Component Attribute Modification

• The GUI components that are brought down to the workspace will be easily modifiable. Some intelligence will be used with each component to include Left/Middle/Right button click com- mands that will enable the developer to modify the attributes of a given component. Pressing the right button will bring up a pop-up menu that presents the user with the basic attributes of the con- trol. These attributes will include color, exact size / location, border style, an event menu, etc. The middle button will be used to make quick changes to the most obvious attribute. For exam- ple, labels or text on a button or control will be instantly editable by pressing the middle button.

Automatic Code Creation

• For each form that is created within the GUIDT by the user, the system will automatically generate two files. One file will be a java file containing the class information for the form. This will include initialization of the form itself, individual component declarations and ini- tialization, as well as the appropriate listener declarations. This first file will be read-only as it is not intended to be modified by the user. The second file will consist of a class that is inher- ited from the first file's class. The GUIDT will generate the second file with "stubs" of event- handling functions that the user can then modify. Because of the inheritance, this will also enable the user to modify any parameters of the form itself directly from the second file.
• Within the graphical workspace of the tool, the user will be able to specify which events he/ she would like to listen for. The user will then be prompted for the corresponding function name that he/she would like to handle the selected event. This is the function name that will appear in the user-modifiable java file (file two above).

Layout Managers

• The GUI Development Tool will have functionality associated with Swing's layout managers. Automatic layout management will be accessible through preference menus at the top of the tool's window. Initially, this will include FlowLayout, GridLayout, BorderLayout, CardLayout, Grid- BagLayout, and BoxLayout. Simply choosing these options will set the current form in one of these layouts. Each subsequent component that is added to the current form will also be subject to the chosen layout manager.

Textual Menus

There will be some of the standard user menus at the top of the tool. More menus and more options under the menus can be added in the future if desired. Outlined below is a simple set of choices to make the initial prototype of the tool worthwhile to use.

• File Menu: This will consist of the options "New", "Open", "Save", "Save As", "Print" (Which will print a screen capture of the current form), and "Close". Except for the Print function, they will all correspond to the obvious commands. The New function will open a dialog box with options as to what the user would like. This would include some templates such as "Blank Form", or "Dialog Box", etc. After the user chooses what he/she would like, the form is created and displayed in editing mode.
• Edit Menu: This menu will have "Undo", "Cut", "Copy", and "Paste" for the initial proto- type. Again, they will correspond to the obvious commands. In the Edit menu, there will also be a choice for "Preferences". It is from this option that the user can choose various environ- mental options. These options include the amount of information that will be displayed for a given component, auto-save options, and other special preferences that are not accessed at other places in the tool.
• View Menu: This menu will have options to view more information about the various com- ponents. The menu option, "Minimal Detail" will set the right-click popup menu to display the minimal attributes. This will be the default. "Some Detail" will display the attributes of the tool with a bit more detail than described above. "Full Detail" will display all that is known about a chosen component. There will also be an option, "Show Attribute Menu". When this option is chosen, a menu will persist in the workspace corresponding to the pop-up menu that appears when the user right-clicks a component. The amount of detail shown in this docked menu will correspond to the detail choice as described above. The information in this display will correspond to the attributes of the currently chosen component. All attributes that are changed in these menus will actually be modified in the code itself and will be shown in the graphical representation of the component in the workspace.
• Format Menu: The format menu will have options for "Font", "Size" and "Style".
• Layout: This menu will be where the user can choose which layout you would like to use for his/her form.