 




|
|
Building the GUI
This section is a help section that describes in detail how to build the
GUI. If you came here by mistake, press the Back button on your browser.
Overall GUI
- Create a new class MiniPim by using the Class SmartGuide in the Workbench. (Press
the New Class button on the toolbar.) Name the class MiniPim and set the following
information:
- Superclass java.awt.Frame
- Design the class visually should be checked
- Press Finish.
When the Visual Composition Editor appears, bring up the property sheet for the Frame
and set the following property values:
- set layout to BorderLayout
- set title to MiniPim
- Add a menu bar with menu "File". It should have the following menu
items:
- Add a com.magelang.TabSplitter as the "Center" component of the Frame
- Add four panels to the TabSplitter -- click in dark area just above the light gray
rectangle to add these.
- Bring up the property sheet for the TabSplitter
- Set tab names to
- Note Pad
- Phone List
- Calculator
- To-Do List
- Bring up beans list
- Change the bean names of the panels to
- notePad
- phoneList
- calculator
- toDoList
- Note: You'll probably need to use the Beans List frequently during this Magercise.
It is very helpful for accessing components that are hidden behind others and for
changing the layout constraints (such as "North" vs "Center")
- Save/Test the bean.
Creating the Notepad
- Select the notePad panel in beans list.
- Set the layout properyt of that panel to BorderLayout
- Add a TextArea bean as the "Center" component of the note pad panel
- Set the background color of the TextArea to white
- Save/Test the bean
Creating the Phone List
- Select the phoneList panel in the beans list.
- Set the layout property of that panel to BorderLayout.
- Add a panel as its "Center" component, and give it a FlowLayout.
- change its bean name to phoneButtons
- Add two buttons to phoneButtons and label them "Add" and "Remove".
Set their bean names to addPhoneButton and removePhoneButton.
- Change the constraint of the phoneButtons panel to "South".
- Add a panel as the "Center" of phoneList w/ BorderLayout.
- Set its bean name to phoneInfo
- Add a panel as the "Center" of phoneFields
- Set its layout to GridLayout with cols=1, rows=0
- Set its bean name to phoneLabels
- Add four panels to phoneLabels and give each a BorderLayout.
- Add a label as the north component of each of those four.
- Change the label texts to
- Name:
- Business:
- Home:
- Fax:
- Change the constraint of phoneLabels to "West".
- Add a panel as the "Center" of phoneInfo
- Set its bean name to phoneFields
- Set its layout to GridLayout with cols=1, rows=0
- Add four panels to phoneInfo and give each a BorderLayout.
- Add a Choice as the "North" part of the topmost panel.
- Set its background to white
- Add TextFields as the North of the next three.
- Save/Test the bean
Creating the Calculator
- Select calculator from the beans list
- Set layout to borderlayout
- Add label as the "North" component.
- Set bean name to calcDisplay
- Set background to black
- Set foreground to green
- Set font to dialog bold italic 24
- Set text to 0
- Set alignment to RIGHT
- add a panel as the "Center" component of calculator
- Set its bean name to calcButtons
- Set its layout to GridLayout with cols=4, rows=0.
- Add 14 buttons to calcButtons
- Add a panel as the 15th component
- Set its layout to GridLayout with cols=1, rows=0
- add two buttons to it
- Add another button to the calcButtons
- Set labels on buttons per pictures
- Save/Test the bean
Creating the To-Do List
- Select toDoList in beans list
- Set its layout to BorderLayout
- Add a TextField as the north component
- Set its bean name to toDoItem
- Set its background to white
- Add a panel outside the frame
- Set its bean name to toDoButtons
- Set its layout to FlowLayout
- Add two buttons labelled Add and Remove
- Move toDoButtons to South component of toDoList
- Add a List as the Center component
- Set bean name to toDoStuff
- Save/Test the bean
Wrapup
Now you have a complete GUI for your MiniPIM application! In the next section,
you'll be adding functionality via Java source code and Visual Composition Editor
Connections.
|