![]() |
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:
|
The notepad is a simple component that is visually only a TextArea.
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.
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.
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.
Copyright © 1996-1997 MageLang Institute. All Rights Reserved. |