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
- Selected
- Edit
- 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:

The main component (the 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

There are two pieces that make up this layer. The top portion contains all
the text fields and checkboxes. The bottom section 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:

These two sections are the "text field section" and the
"check box section" . 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...

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 - 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?

There are three pieces here:
A Label entitling the section "Drives to search:"
A lone CheckBox for "All drives"
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 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:

The section as textfields, which could expand or shrink based on their
horizontal size. The section has check boxes, which have a fixed size.
So their parent panel could be a BorderLayout with as its "East" component and
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:

There are three parts to the bottom section:
A Label with text "Files found:". This has a
fixed height, but the width can be whatever...
A List of files that were found matching the search criteria.
This should expand/shrink based on the size of the GUI.
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
Set the overall Frame's layout property to BorderLayout.
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.
Set Panel1's layout property to BorderLayout.
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.
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.
Add a Label to Panel3 (should be the topmost in the design
area). Change its text to "Drives to search:".
Add a CheckBox after the Label in Panel3. Change its text to
"All drives".
Add another Panel after the Checkbox in Panel3. This is Panel4.
Set its layout to FlowLayout with hgap=0 and alignment=LEFT.
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."
- Open up the Beans List.
- Set the layout constraints for Panel1 and Panel3 to "North".
- Set the layout constraints for Panel2 to "East".
Next we build the left half of the top section.
- Add a new Panel to Panel1 (the panel that now spans the top half of the GUI) as
its "Center" component. This is Panel5.
- Set the layout of Panel5 to GridLayout with cols=1, rows=0.
- Add a Label to Panel5 with text "File to search for:"
- Add a TextField after the Label to Panel5.
- Add a Label to Panel5 with text "Text to search for (if any):"
- Add a TextField after the Label to Panel5.
- Add a Label to Panel5 with text "Editor filespec::"
- Add a TextField after the Label to Panel5 with text "e.exe".
- Change the background color of the TextFields to white.
Next, we'll build the bottom section.
- Add a Panel to Panel1 as its "Center" component. This is
Panel6.
- Set Panel6's layout property to BorderLayout.
- Add a Label as the "North" component of Panel6. Set its text to
"Files found:".
- 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.
- Set Panel7's layout property to FlowLayout.
- Add four Buttons to Panel7. Change their text to "Search",
"Stop", "Open" and "Help" from left to right.
- Change the border constraints of Panel7 to "South" to move it where it
belongs.
- Add a List as the "Center" component of Panel6.
- Change the List's background color to white.
|