GUI Design Notes


The following sections describe how the GUI is composed for each screen view.  For each component of the GUI there are three pictures:

  • A screen shot of the completed GUI

  • A Three-Dimensional diagram that represents the manner in which components are nested to build the GUI.  Note that this is never the only way that the GUI can be constructed; it is merely an example.

  • A textual tree description of the way the components are nested.   The colors of the text in this description match the colors on the three-dimensional diagram to help match the representations.

 

The Notepad

The notepad is a simple component that is visually only a TextArea.

jnotepad.gif (4670 bytes)

dnotepad.gif (3743 bytes)

tnotepad.gif (4161 bytes)

 

 

The Phone List

The phone list is deceptively simple in appearance.  The trick is to ensure that the labels for each field line up with the field, and the fields do not expand vertically as the interface grows.  To ensure the text fields do not vertically expand, we've made them the "North" component of a BorderLayout panel that is provided only to contain the TextField.  This parent panel can expand as needed, but because the TextField is the North component, it will always use its preferred height.

The overall look is acheived using a BorderLayout.  The West component is a Panel that contains the labels; the Center is the TextFields and Choice.   Each of these two components are composed of a Panel with a single-column GridLayout.  Each of the components in these GridLayout Panels are the BorderLayout panels mentioned in the previous paragraph.

jphone.gif (4971 bytes)

dphone.gif (7005 bytes)

tphone.gif (15699 bytes)

 

 

The Calculator

The Calculator interface is fairly simple.  We enhanced the display, giving it a black background, green numbers (nothing is typed yet) and the font is 24-point italics.

The calculator is a BorderLayout with two components:  a Label as the North, and a Panel at its Center to contain the buttons.  This panel uses a GridLayout for all its buttons.  The silly C/= buttons are just composed within another GridLayout panel.

jcalc.gif (5221 bytes)

dcalc.gif (5863 bytes)

tcalc.gif (11948 bytes)

 

 

The To-Do List

The to-do-list is a simple add/remove list component.  It's a BorderLayout panel with a TextField in the North, a List in the center, and a FlowLayout panel with two buttons in the South.

jtodo.gif (4243 bytes)

dtodo.gif (4649 bytes)

ttodo.gif (5827 bytes)


Copyright © 1996-1997 MageLang Institute. All Rights Reserved.