 




|
|
Help: GUI Conversion 1
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.
The component you need is a java.awt.Frame. You can create this component by
pushing the "Create new class/interface..." button on the toolbar of the
WorkBench. Choose a name for the class and make it a subclass of java.awt.Frame.
Task 2
Set up the menus for the GUI. The menu structure looks like:
- File
- New
- Open
- Save
- Save as
- (separator)
- Open Audio file...
- Save Audio file...
- Edit
- Generate AVI file from images...
- (separator)
- Merge Audio with Video
- Split Audio from Video
- (separator)
- Change interleave ratio...
- Change audio chunk skew...
- (separator)
- Options
- View
- Chunk ID and length
- Headers
- Index
- Status Information
- (separator)
- Packed
- RIFF format
- (separator)
- Decimal (checkbox menuitem, selected)
- Hexadecimal (checkbox menuitem, not selected)
- Help
- Help index...
- General help...
- Using help...
- (separator)
- Product information...
Do the following to create these menus:
- Select the "Menus" category in the beans palette.
- Select the "MenuBar" bean
- Click inside the frame in the design area. It creates a menu bar. Notice that the first
menu has already been created.
- Rename the first menu to "File." The easiest way to do this is to hold the
"Alt" key and click on the torn-off menu. Then type File and press
Enter.
- Click on the "Menu" bean
- Click the "Sticky" checkbox
- Click on the menu bar to the right of the "File" menu three times. This
creates three new menus.
- Click on the "Sticky" checkbox to turn it off.
- Rename the menus "Edit", "View" and "Help".
- Select the "MenuItem" bean
- Select "sticky" and click on the torn-off "File" menu four times.
Then unselect "Sticky." This creates four menu items at the top of the file
menu. Notice that when you click on the File menu it adds the menu items to the top of the
menu. If you hold the mouse down and drag it down the list of menu items, a red line will
appear to indicate the position of the new item.
- Select the "MenuSeparator" bean
- Click on the File menu and drag the separator down. Make it the last item in the
menu.
- Add two more menu items
to the file menu, after the separator.
- Rename the menu items as in the specification above.
- The other menus are set up in the same manner.
Note that two items in the "View" menu are CheckBoxMenuItems . Make sure you set the
"state" property of these to true if the item is selected, false otherwise.
Task 3
Determine how the GUI is laid out, and create it. (See the help for details.)
Examine which parts of the GUI have a fixed-height and are at the top or bottom of the
container that holds them. These are idea candidates for BorderLayout.
There are three main chunks to the GUI:
- A label at the top.
- A TextArea in the middle.
- A row of buttons at the bottom.
The GUI layout can be described in the following diagram:

The outermost part, (colored ) represents the outer Frame for the
GUI. All of the other parts are nested within it. We can't decide the layout
manager to use for this component until we talk about the components that are conatined
within it. The components In these diagrams, nested components are shown "on
top" of their parent. Looking at the next level of the GUI:

The components highlighted this diagram are:
The label "Audio file: <none>. This has a fixed height
(based on the font size), but the width could really grow as the Frame expands.
The TextArea of display options. The text area should be able to
expand/shrink both horizontally and vertically.
The panel that contains the buttons. This has a fixed height (based on
the size of the tallest button inside it), but the width doesn't really matter. The
buttons contained within this panel are all the "required" size for that button,
centered as a group, and flow from left to right. So we'll give this panel a FlowLayout
with its default "CENTER" alignment.
Based on the sizing and locations, it sounds like a BorderLayout
might be a good choice for the parent Frame. The Label should be
the "North" component, the TextArea the "Center" component, and the Button
Panel the "South" component.
So how do we set up this GUI? Do the following:
- Bring up the propery sheet for the frame and set its layout property to BorderLayout
- We're actually going to add two labels; one for the words "Audio file:" and one for
the name of the audio file. We'll add them in a panel that takes up that "North"
position. This panel will have a BorderLayout, with the "Audio" label as its "West"
component and the "" label as the "Center" component.
- Select the "Containers" category on the Beans palette
- Select the "Panel" bean
- Click in the center of the frame and hold the mouse button. Drag it up until a dotted
rectangle appears to cover the top portion of the Frame. Release the mouse button
and you've now added the panel at the "North" position of the Border layout.
- Bring up the Frame's properties and set its layout to BorderLayout.
- Select the "Data Entry" category on the Beans palette
- Select the "Label" bean
- Click in the panel you just added and hold the mouse. Add the label as the "West"
component of the panel. You'll need to use the Beans List to do this.
- Add another Label as the Center component of the panel.
- Rename the labels texts to "Audio file:".  and ""; The easiest way
to do this is to hold the Alt key and click on the text of the label. You can then
type the new text. When you're finished, press Enter, or click somewhere else
- Select the "Data Entry" category on the bean palette
- Select the "TextArea" bean
- Click near the center of the Frame and drag until the dotted rectangle appears
completely in the center of the Frame, then release. You've now added a TextArea
component to the "Center" position of the Frame.
- Select the "Containers" category on the bean palette
- Select the "Panel" bean
- Click near the center of the Frame and drag until the dotted rectangle appears to cover
the bottom portion of the Frame, then release. You've now added a Panel component
to the "South" position of the Frame. note that it doesn't seem to show
up. This is because it collapses to "no size" when there are no components in
it. We'll have to use the Beans list to add the buttons to it.
- Open the Beans List by selecting the "Tools->Beans List" menu item. The
Beans list shows you the hierarchy of the components in the GUI.
- Expand the items in the Beans List until you can see "Panel1". That's the Panel
you added to the "South" of the Frame.
- Select the "Buttons" category from the bean palette
- Select the "Button" bean
- We need five buttons, so select "Sticky"
to make life easier.
- Click five times on the "Panel1" bean in the Beans List. Don't click too fast
or it will think you're double-clicking...
- Nothing showing up? That's because we haven't assigned a layout manager for the Panel.
Bring up the property list for "Panel1" and set it's layout property to FlowLayout.
This will flow the buttons horizontally and center them.
- Poof! The buttons appear! Rename them to match the buttons on the GUI we are mimicing.
Remember that you can easily change the label on a button by holding the Alt key,
clicking on the text, and typing the new text.
|