Purpose and Content of this Document
This document outlines the structural and graphical design of GUMP. It
contains detailed explanations of the object design and the Human-Computer
Interface design. It also includes use-case diagrams and class
diagrams.
GUMP
GUMP (GUI Modeling Program) will allow a user to
visually create a graphical user interface for an application without
entering actual programming language code. It is a component of a CASE
tool that the Fall 1998 CPSC 247 class will be developing. This CASE tool
is an Integrated Software Engineering (ISE) tool that encompasses various
parts of the design of an object-oriented program. All parts of the tool
will be unified by a common database substrate.
GUMP will be written in Java using Sun's JDK 1.1.x and the Swing widget set. The graphical user interfaces built using GUMP will also use the Swing widget set. The user will generally be able to select a canvas and add widgets like buttons and text fields. The graphical elements available to use in GUMP could either be created in GUMP directly or created as classes in another part of the ISE tool.
Related Documents
The design for GUMP is based on the requirements in the GUMP Requirements Specification
document.
Use case diagrams
The basic overall use cases are illustrated in Figure 1. The designer (the user of GUMP) should be able to create a new model, open a model, save a model, and exit the program.
Figure 1. |
The use cases that modify the model are illustrated in Figure 2. These fall within the overall use case of creating a new model. All of them have to do with building a user interface, and all of them have an effect on the underlying model that represents the user's work.
Figure 2. |
Class diagrams
The class diagram of the model and its related classes are in Figure 3. The ModelElement class is part of the ISE project that we had to extend in order to integrate with it. The GUMPProperty class gives us the greatest flexibility and ease of coding for subclasses with different attributes. For convenience's sake, we have included references to GUMPWidgets both in the GUMPModel (through inheritance from GUMPModelElement) and in the GUMPFrame. We also did not want to have any part of Swing tied into the model (as in the GUMPFrame class, which has a JFrame field frame), but found no way to get around it.
Figure 3. |
The class diagram of the view and controller and related classes are in Figure 4. [Note: the class structure has changed a bit since this diagram was made. The main change is that GUMPMainWindow assimilated GUMPToolbar.] The GUMPController handles all events and in general controls everything, dispatching messages to all the other appropriate classes. For example, it delegates all mouse events on the active frame to the currently selected GUMPTool object. The currently selected subclass of GUMPTool handles those events, polymorphically selecting the proper actions based on the tool. The GUMPPropertiesWindow updates itself on demand from the controller, and modifies properties on the selected element when the user changes the values in its table.
Figure 4. |
Attached is the full class diagram, which encompasses and relates these two subdiagrams. It has been updated to reflect several changes since the above two diagrams were made.
Class dictionary
CLASS: GUMPModelElement ("IS-A" ModelElement)
GUMPModelElement is a child class of ModelElement. It is an abstract
class which contains a vector of GUMPProperties, and accessor methods to
allow this vector to be enumerated, or to add properties to this vector.
CLASS: GUMPFrame ("IS-A" GUMPModelElement)
GUMPFrame represents the frame displayed on the screen to which
various widgets are added by the user. It is a subclass of
GUMPModelElement. It contains a vector of those widgets which it
contains, and a JFrame which is the SWING representation of this GUMPFrame
once it is displayed on the desktop.
CLASS: GUMPWidget ("IS-A" GUMPModelElement)
GUMPWidget is an abstract class which contains information common to
all types of widgets placed by the user on the frame.
CLASS: GUMPText ("IS-A" GUMPWidget)
GUMPText represents a SWING textbox widget.
CLASS: GUMPButton ("IS-A" GUMPWidget)
GUMPButton represents a SWING pushbutton widget.
CLASS: GUMPModel
GUMPModel contains a Vector of GUMPModelElements which exist in the
current view. It contains accessors to these elements, and also allows
the current collection of elements to be saved to the ISE database.
CLASS: GUMPProperty
This class contains the name and value of a single property of a
GUMPModelElement. A collection of GUMPProperties is stored in
GUMPModelElement.properties.
CLASS: GUMPController
GUMPController is the "point of entry" into the GUMP view. It
contains all of the windows which make up the GUMP view, including the
toolbar, properties window for the currently selected object, and so on.
It also contains "callback" methods which add, select, and remove frames
and widgets. These callbacks are called by the menu items and
instances of subclasses of the GUMPTool class.
CLASS: GUMPPropertiesWindows
GUMPPropertiesWindow is the window which displays the properties of
the currently selected object.
CLASS: GUMPMainWindow ("IS-A" JFrame)
GUMPMainWindow contains the menu items the user can choose from. It
is a subclass of the SWING JFrame class.
CLASS: GUMPToolbar
GUMPToolbar displays the tool buttons. It contains a Vector of all
the tools the user may choose from, the index of tool the user has most
recently selected (that is, what "mode" the program is in), and accessors
for those tools.
CLASS: GUMPTool
GUMPTool is an abstract class which contains information common to all
GUMP tools.
CLASS: GUMPSelectionTool ("IS-A" GUMPTool)
GUMPSelectionTool selects widgets on the frame.
CLASS: GUMPWidgetTool ("IS-A" GUMPTool)
GUMPWidgetTool is an abstract class which contains information common
to all widget creation buttons.
CLASS: GUMPButtonTool ("IS-A" GUMPWidgetTool)
GUMPButtonTool creates a new button on the current frame, allowing the
user to place the button where (s)he wishes it to go.
CLASS: GUMPTextTool ("IS-A" GUMPWidgetTool)
GUMPTextTool creates a new textbox on the current frame, allowing the
user to place the textbox where (s)he wishes it to go.
User Task Narratives
Once GUMP is running, the user will see three floating windows on the screen. The first window (the top most window) contains the Main Menu, Pull Down Menu, and the icons of the widget tools that the user can choose. A pointer icon on the left will be followed by a button icon, a text field icon, and so on. By default, the pointer icon is initially selected every time GUMP is running.
The second window (left window) is the working space, called a frame. The user will place widgets on this frame.
The third window (right window) displays the properties of the widget or frame object currently selected. At any time, there can only be one active frame that the user can work on. By selecting the frame names under Frame Menu, the user can make active any frame he/she has created.
The user can create as many frames as he/she likes--corresponding to different windows in the user's project--by selecting New under Frame menu. The default name of the new frame will be set to Frame[n] where n is the number of the frames the user has created. The user can change the frame's name from the properties window. In addition to creating a new frame, the user also has the option to delete the current active frame from the model only by selecting the 'Delete Frame from Model' option under the Frame Menu (no shortcut key). Once a frame is deleted from the Model, the user cannot bring it back, and all its widgets will become available for placing on other frames.
The user can select any widget tool (text, button, and so on) by clicking its icon on the first window or by selecting the widget tool under the Tool Menu. Once the user has selected the tool he/she desires, the user can put the desired tool anywhere on the active frame just by clicking the position where he/she wants the tool to be placed. GUMP will display that widget tool on the active frame by putting it on the place the user clicked. Once the widget tool has been put on the frame, GUMP will automatically update the properties window with the properties of the newly created widget. These properties will include the widget's name, description, xpos and ypos, as well as any other widget-specific properties such as color, width, height, and so on. At this point, the user will be able to change the widget's properties, including the xpos and ypos if the user wants to move the widget anywhere else on the screen. Any changes made to the properties at this point will only affect the current widget (the active widget).
The user can make active any widget on the active frame just by clicking on the arrow tool (if it's not already selected) and then clicking on the widget itself. The properties panel will always display the properties of the current active widget the user set active.
The user can also remove any widget from the frame by making the widget active and either pressing the delete key or by selecting the 'Remove from Frame' option under Edit Menu. This will not, however, delete the widget from the model. It will just remove it from the active frame. If the user wants to delete this widget from the model, then he/she has to select the option 'Delete from Model' option under Edit Menu (no shortcut key). But once the widget is deleted from model, then the only way the user can bring it back is by creating the widget again from the beginning. Unlike the delete option, the user can always bring back a widget that has been removed.
The user can also place widgets that are in the model--but not already on any frame--onto the active frame. Clicking the 'existing' icon or selecting the 'Insert Existing Widget' option under the Tool Menu will bring the list of all the widgets not already on any frame. From this list the user can select a widget to place on the active frame. The user must click on the frame to set the new position (xpos and ypos) of the widget. The widget will, however, keep all other properties that were set before it was placed.
Online help is available to the user at any time. The user can find help by topic or find any information in the master index list. In addition to that, the user will also be able to take a small tutorial--one of the best and most efficient types of help a new user can have--that will teach the user how to use GUMP.
There is more desired functionality for GUMP. It will be implemented as time permits. One such set of functions is cut/copy/paste of widgets from or to any frame. Another is the ability to generate the Java source code for the GUI by selecting the 'Generate Code' option under the Tool Menu.
Finally, the user will always be able to save the current project any time by selecting the 'Save' option under the File Menu. Once saved, the user can exit GUMP by selecting the 'Exit' option under File Menu. Since all the information regarding all elements of the project (frames, widgets, and so on) are saved, the user will always be able to get back to his/her project by running GUMP and open the already saved project by selecting the 'Open' option under File Menu.
Interface Mock-up
A mock-up of the GUMP interface is in Figure 5. The main window is along the top, and the menus that pull down from the main menu bar are lined up along the bottom. The Frame being worked on is on the left, and the Properties window is on the right.
Figure 5. |