Help is available for each task.
Task 1
Draw a picture! While looking at the expected output, draw pictures that
represent what your screen should look like.
Your pictures should look pretty much like the GUI found under the
demonstration applet.
Task 2
Annotate your picture with the expansion behavior. Define how you think
the GUI should expand and contract when the window size changes.
There is no "one correct answer" here. Take a look at the expected behavior
for the resize behavior we used. If you disagree, feel free to resize your
GUI differently.
Task 3
Starting with the skeleton code provided,
define the three selection buttons at the top of the GUI and a
CardLayout-managed panel for the center section. Create
three labels, one for each sub-GUI, just listing the name of the sub
GUI. Try adding these labels as the components of the CardLayout.
Lastly, add a call to create the window in the main() routine.
For these selection buttons, use the buttons already defined and created
in the skeleton. They are predefined so the included event handlers have
something to attach to.
You are doing this to get your initial CardLayout panel
working properly, although the code to make the CardLayout
panel swap cards is not present yet.
When finished, compile and test your code to see if it looks right
Your overall GUI should be a BorderLayout. The NORTH component
will be the panel containing the selection buttons. The CENTER component
should be a panel that will contain the sub-GUIs.
Your NORTH panel might use a FlowLayout to position
the selection buttons, though you can also implement this using a
GridLayout (though it would not have the same appearance).
Your CENTER panel should use a CardLayout which will
contain each of the labels.
When adding the labels to the CardLayout, make sure you
use key names that are meaningful.
Task 4
Fill in the CardLayout-switching code in the selection button
event handlers. This will set up the actions to swap cards.
When finished, compile and test your code to see if the buttons switch labels.
You will need to use the show() method of CardLayout.
There are two ways you can get at this method:
-
If you have an instance variable that keeps track of the
CardLayout, you can directly use that instance variable to call the show() method.
-
If you did not keep an instance variable pointing to the
CardLayout, you can use getLayout() to access the CardLayout. Note that getLayout() returns a reference to a LayoutManager, so you'll need to cast it to a CardLayout.
Task 5
Define the menus and menu items. Do not worry about enabling and disabling
them yet.
At this point, just compile and check to see that they appear properly.
No help is available.
Task 6
Set the enable/disable behavior of the menu items. Initially, the
Open, Save and Save As items should be disabled,
as they do not apply to the calculator sub-GUI. All others should be enabled.
Add code to the event handlers that switch between sub-GUIs to enable and
disable those three options as necessary.
Compile and test your program.
The way to enable a menu item is to call setEnabled(true) for
it. To disable the menu item call setEnabled(false).
Task 7
Replace the NotePad label with a TextArea. That's really all
that sub-GUI is.
Compile and test your program.
No help is available.
Task 8
Define the To-Do List GUI.
This GUI should contain a List, a TextField and
two Button components. Don't worry about event handing—the
buttons won't do anything.
Replace the To-Do List label with this new sub-GUI.
Compile and test your program.
The To-Do List GUI can be composed as follows:
-
Panel, layout=BorderLayout
-
CENTER=List
-
SOUTH=Panel, layout=BorderLayout
-
NORTH=TextField
-
SOUTH=panel, layout=FlowLayout
- Button ("Add")
- Button ("Remove")
The example has added some entries to the list before displaying it. If
you want to do this, you can use the addItem() method of
List.
Task 9
Define the Calculator GUI.
This GUI should a label for its display and a keypad of calulator keys.
Note that the example changed the foreground color, background color, and
font of the Label. You do not have to do this to complete the
exercise.
Replace the Calculator label with this new sub-GUI.
Compile and test your program.
The Calculator GUI can be composed as follows:
-
Panel, layout=BorderLayout
-
NORTH=Label
-
Background color=Color.black
-
Foreground color=Color.green
-
Font = Font("monospaced", Font.ITALIC, 24)
-
CENTER=Panel, layout=GridLayout(4,0)
-
Button("7")
-
Button("8")
-
Button("9")
-
Button("/")
-
Button("4")
-
Button("5")
-
Button("6")
-
Button("X")
-
Button("1")
-
Button("2")
-
Button("3")
-
Button("-")
-
Button("0")
-
Button(".")
-
Button("=")
-
Button("+")
Copyright © 1998-1999
MageLang Institute.
All Rights Reserved.
