Help: GUI Conversion 2


Help is available for each task, or you can go straight to the solution source code.

Task 1

Determine the overall component to use, and create that component in VisualAge.

Because this is an application, you once again want to use a Frame as the main component.  Create a new Class from the Workbench, making it a subclass of java.awt.Frame, and indicate that you want to design the new class visually.

Task 2

Set up the menus for the GUI. The menu structure looks like:
  • File
    • Save
    • Save as
  • Selected
    • Open
    • Process
    • Command...
  • Edit
    • Copy
    • Clear list
  • Options
    • Search subdirectories (checkbox menuitem, selected)
    • Display found text (checkbox menuitem, selected)
    • Ignore case (checkbox menuitem, not selected)
    • Clear on search (checkbox menuitem, selected)
    • (separator)
    • Set defaults
  • Help
    • Help index...
    • General help...
    • Using help...
    • (separator)
    • Product information...

Setup the menus in the same manner as you did for the GUI Conversion 1 Magercise.

Task 3

Determine how the GUI is laid out, and create it. (See help for details).

The following Diagram describes the layout of this GUI:

l1.gif (5778 bytes)

The main component (the c1.gif (862 bytes) colored component) is the Frame for the GUI.  We cannot say what layout is needed for it for a little while...

The next layer looks like

l2.gif (5713 bytes)

There are two pieces that make up this layer.  The top portion c1.gif (862 bytes) contains all the text fields and checkboxes.  The bottom section c2.gif (862 bytes) contains the List and Buttons.  These are both panels, as they will contain other components.

We'll have to wait to determine what layouts these sections use until we really look at what they contain.

Let's concentrate now on the top section.  It's divided into two main parts:

l3a.gif (5700 bytes)

These two sections are the "text field section" c1.gif (862 bytes) and the "check box section" c2.gif (862 bytes) .  Looking at the text field section, we can see that all of its components are text fields and labels, and appear to be evenly spaced.  This looks like a single-column GridLayout.   This layout is acheived by setting the columns property of th GridLayout to 1, and the rows property to 0.

Looking at the checkbox section, we have to dig deeper to see what's really going on...

l4ab.gif (5700 bytes)

If you really look at the interface, it looks like all of the checkboxes are crunched together in the upper half of the checkbox section.  This can be accomplised by adding a "North" panel to the checkbox section, the c1.gif (862 bytes) - colored panel in the above diagram. So we make its parent, the check box section panel, have a BorderLayout, and add this panel as a "North" component.

But how are the checkboxes laid out?

l5.gif (5966 bytes)

There are three pieces here:

  • c1.gif (862 bytes) A Label entitling the section "Drives to search:"

  • c2.gif (862 bytes) A lone CheckBox for "All drives"

  • c3.gif (862 bytes) A Panel containing a series of checkboxes for each drive.  In a real application, we would have the program determine which drives are available and add the appropriate drive checkboxes.  For this exercise, assume that drives A through F exist.

These three are evenly laid out, so we'll use a single-column GridLayout as before.  Because our parent panel is in the "North" section of a BorderLayout, each cell will be the height of the tallest space needed for one of the contained components.  The rest of the space in the check box section is taken up by the "Center" of the parent BorderLayout.  (What?  We said nothing about a "Center" section, you say?  Correct.  Because we realy don't have anything to lay out there, we can just leave it unspecified.  The Panel that actually contains the check boxes is still a "North" component and will adhere to the preferred size of its components (the GridLayout Panel.)

But how is the c3.gif (862 bytes) panel laid out?  It contains several checkboxes, a list of which should grow from left to right, and should not change the size of any of those components.  This is an idea use for FlowLayout, using its LEFT alignment.

One more detail left undone for the top section.  There were two panels that divide the top section:

l3a.gif (5809 bytes)

The c1.gif (862 bytes) section as textfields, which could expand or shrink based on their horizontal size.  The c2.gif (862 bytes) section has check boxes, which have a fixed size.   So their parent panel could be a BorderLayout with c2.gif (862 bytes) as its "East" component and c1.gif (862 bytes) as its "West" component.

Now we have looked at all of the components in the top section of the GUI. All of the components have a fixed height, and should not expand or shrink when the panel changes size.  So the overall layout should be a BorderLayout with this top section as the "North" component.

Now we need to look at the bottom section of the GUI:

l3b.gif (6380 bytes)

There are three parts to the bottom section:

  • c1.gif (862 bytes) A Label with text "Files found:".  This has a fixed height, but the width can be whatever...

  • c2.gif (862 bytes) A List of files that were found matching the search criteria.   This should expand/shrink based on the size of the GUI.

  • c3.gif (862 bytes) A Panel that contains the Buttons that will control the search.  This panel has a fixed height (based on the height of the tallest button) but the width is flexible.  The layout used for this Panel should allow each Button to keep its preferred size, and flow them left to right, centering them all on the panel.  A FlowLayout accomplishes this nicely.

Looking at the sizing information listed above, this looks like a good use of BorderLayout.

Creating the GUI in the Visual Composition Editor

  1. Set the overall Frame's layout property to BorderLayout.

  2. Add a Panel that will be the  "North" component of the Frame as the "Center" component.  This makes sure it's visible to work on.  We'll eventually change it back to "North".   This is Panel1.

  3. Set Panel1's layout property to BorderLayout.

  4. Add a Panel that will be the "East" component of Panel1 as its "Center" component.  We'll use this trick a few times; just make sure we remember to change it back to "East" later.  This is Panel2. Set Panel2's layout to BorderLayout.

  5. Now we're adding components to the "East" part of the top section of the GUI.  We have another BorderLayout to set up, so add another Panel that will be the "North" component as the "Center" component of the current Panel.  Set the layout property of this Panel to GridLayout with cols=1, rows=0.  This is Panel3.

  6. Add a Label to Panel3 (should be the topmost in the design area).  Change its text to "Drives to search:".

  7. Add a CheckBox after the Label in Panel3.  Change its text to "All drives".

  8. Add another Panel after the Checkbox in Panel3.  This is Panel4.   Set its layout to FlowLayout with hgap=0 and alignment=LEFT.

  9. Add six Checkboxes to Panel4.  Change their text to "A" through "F".

Now we're done with the Checkbox section, so we need to change the layout constraints of the Panels we set to "Center."

  1. Open up the Beans List.
  2. Set the layout constraints for Panel1 and Panel3 to "North".
  3. Set the layout constraints for Panel2 to "East".

Next we build the left half of the top section.

  1. Add a new Panel to Panel1 (the panel that now spans the top half of the GUI) as its "Center" component.  This is Panel5.
  2. Set the layout of Panel5 to GridLayout with cols=1, rows=0.
  3. Add a Label to Panel5 with text "File to search for:"
  4. Add a TextField after the Label to Panel5.
  5. Add a Label to Panel5 with text "Text to search for (if any):"
  6. Add a TextField after the Label to Panel5.
  7. Add a Label to Panel5 with text "Editor filespec::"
  8. Add a TextField after the Label to Panel5 with text "e.exe".
  9. Change the background color of the TextFields to white.

Next, we'll build the bottom section.

  1. Add a Panel to Panel1 as its "Center" component.  This is Panel6.
  2. Set Panel6's layout property to BorderLayout.
  3. Add a Label as the "North" component of Panel6.  Set its text to "Files found:".
  4. Add a Panel as the "Center" component of Panel6.  This will actually be the "South" panel, but for now we want it visible.  This is Panel7.
  5. Set Panel7's layout property to FlowLayout.
  6. Add four Buttons to Panel7.  Change their text to "Search", "Stop", "Open" and "Help" from left to right.
  7. Change the border constraints of Panel7 to "South" to move it where it belongs.
  8. Add a List as the "Center" component of Panel6.
  9. Change the List's background color to white.

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