GUMP

Project Design


Written October 28, 1998
Last modified December 17, 1998
Paul DeJong, Abraham Fowler, David Tong, Brandon Wood
CPSC 247: Software Engineering
Professor Vander Linden
Calvin College

Table of Contents

  1. Introduction

  2. Object Design

  3. Human-Computer Interface Design

  4. References


I. Introduction

  1. 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.

  2. 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.

  3. Related Documents
    The design for GUMP is based on the requirements in the
    GUMP Requirements Specification document.

II. Object Design

  1. 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.

    Overall, simple use cases
    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.

    Use cases that modify the model
    Figure 2.
  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.

    The class diagram of the model
    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.

    The class diagram of
the view and controller
    Figure 4.
  3. 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.

  4. Class dictionary

    GUMP Model

    CLASS: ModelElement
    This is an external class which is already a part of the ISE package. It is included in this object design dictionary for completeness, since GUMPModelElement is a subclass of ModelElement.

    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.

    Data members:
    Vector properties
    Methods:
    getProperty() : get the value of a property
    setProperty() : set the value of a property
    enumerateProperties() : get all properties from the 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.

    Data members:
    Vector widgets
    JFrame frame

    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.

    Data members:
    GUMPFrame parent : the frame which is the widget's geometrical parent (that is, the frame which contains the widgets)
    Methods:
    draw() : allows the widget to draw itself on the frame
    refresh() : causes the widget to refresh the properties of the Swing widget from the GUMPWidget's own set of properties

    CLASS: GUMPText ("IS-A" GUMPWidget)
    GUMPText represents a SWING textbox widget.

    Data members:
    Swingtext textbox : the SWING representation of the GUMPText

    CLASS: GUMPButton ("IS-A" GUMPWidget)
    GUMPButton represents a SWING pushbutton widget.

    Data members:
    Swingbutton button : the SWING representation of the GUMPButton

    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.

    Data members:
    Vector elements : the collection of GUMPModelElements
    Methods:
    addElement() : adds an element the elements Vector
    getElements() : returns all elements currently in the Vector
    removeElement() : removes an element from Vector elements
    save() : saves the current GUMP frame and all its widgets and properties to the 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.

    Data members:
    String Name
    String Value

    GUMP View

    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.

    Data members:
    GUMPMainWindow mainWindow : the window containing the menu and toolbar
    GUMPPropertiesWindow : the window containing the properties for the currently selected object
    GUMPFrame currentFrame : the GUMPFrame the user is currently working on
    GUMPWidget selectedElement : the element the user has selected, and whose properties are currently displayed in the GUMPPropertiesWindow.
    GUMPModel model : a link to the GUMPModel class
    Methods:
    addWidgetToFrame() : adds a widget to the current frame
    removeWidgetFromFrame() : removes a widget from the current frame
    deleteWidgetFromModel() : deletes a widget entirely from the project
    selectWidget() : selects a widget
    addFrame() : adds a frame to the current project
    deleteFrame() : deletes a frame entirely from the current project
    hideFrame() : hides the current frame from the view
    showFrame() : shows a frame in the view

    CLASS: GUMPPropertiesWindows
    GUMPPropertiesWindow is the window which displays the properties of the currently selected object.

    Data members:
    GUMPController controller: a link back to the GUMPController
    Methods:
    refresh() : refresh the list of properties

    CLASS: GUMPMainWindow ("IS-A" JFrame)
    GUMPMainWindow contains the menu items the user can choose from. It is a subclass of the SWING JFrame class.

    Data members:
    GUMPController controller: a link back to the GUMPController
    Vector menuItems: all of the SWING-implemented menu options the user can choose from
    GUMPToolbar toolbar : a link to an instance of the GUMPToolbar 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.

    Data members:
    Vector tools: all of the tools the user may choose from (a collection of GUMPTools)
    int currentToolIndex: the index of the tool in the Vector most recently selected by the user
    Methods:
    addTool(): add a new tool to the tools Vector
    selectTool(): change the value of currentToolIndex when the user selects a certain tool
    currentTool(): return the tool pointed to by currentToolIndex

    CLASS: GUMPTool
    GUMPTool is an abstract class which contains information common to all GUMP tools.

    Methods:
    mouseDown() : handler for mouse down event
    mouseMove() : handler for a mouse move
    mouseUp() : handler for mouse up event

    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.

III. Human-Computer Interface Design

  1. 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.

  2. 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.

    Interface mock-up
    Figure 5.

IV. References

GUMP Project Requirements (http://www.calvin.edu/~afowle17/cs247/docs/requirements.html)
The requirements specification document for GUMP.

Integrating Task Modeling and Object Oriented System Modeling
Keith Vander Linden and Steve Carlson
Calvin College, 1998

CPSC 247 - Design Specification (http://holmes.calvin.edu/CS/247/private/design.html)
The outline for this document.

The Swing Connection (http://java.sun.com/products/jfc/tsc/index.html)
The center of all things Swing.

JavaHelp (http://java.sun.com/products/javahelp/)
The JavaHelp engine is the basis for GUMP's help system.


Index / Maintained by Abraham Fowler / Last modified October 1998