Effective Layout Management: Magercise 4: Mini Personal Information Manager GUI

Print-friendly Version

[Help | API Docs | Short Course | Magercises]

For this magercise, you will create the GUI for a small Personal Information Manager (PIM). This tool has three components:

• Calculator.
• To-do list.
• Notepad.

The provided skeleton code has the necessary event handling structures in place; you'll just need to fill in the code inside the event-handling setup. Do not concern yourself with the event-handling mechanism; just fill in the requested code.

To start, run the demonstration. Watch for the following things:

• What each of the three main screens look like.
• Which menus and menu items are defined.
• Which menu items are enabled for each screen.
• What the "Help | About" dialog looks like.
• How each screen adapts to window resizing.

Magercise 4 Prerequisites

None.

MiniPIM.java

Tasks:

1. Draw a picture! While looking at the expected output, draw pictures that represent what your screen should look like.

2. Annotate your picture with the expansion behavior. Define how you think the GUI should expand and contract when the window size changes.

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

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.

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.

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.

7. Replace the NotePad label with a TextArea. That's really all that sub-GUI is.

   Compile and test your program.

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.

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.

Where help exists, the task numbers above are linked to the step-by-step help page.

Solution Source

minipim/MiniPIM.java

Demonstration

Demonstration

Short Course

About This Short Course

Copyright © 1998-1999 MageLang Institute. All Rights Reserved.