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:

  1. Select the "Menus" category in the beans palette.
  2. Select the "MenuBar" bean
  3. Click inside the frame in the design area. It creates a menu bar. Notice that the first menu has already been created.
  4. 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.
  5. Click on the "Menu" bean
  6. Click the "Sticky" checkbox
  7. Click on the menu bar to the right of the "File" menu three times. This creates three new menus.
  8. Click on the "Sticky" checkbox to turn it off.
  9. Rename the menus "Edit", "View" and "Help".
  10. Select the "MenuItem" bean
  11. 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.
  12. Select the "MenuSeparator" bean
  13. Click on the File menu and drag the separator down. Make it the last item in the menu.
  14. Add two more menu items to the file menu, after the separator.
  15. Rename the menu items as in the specification above.
  16. 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:

l1.gif (3764 bytes)

The outermost part, (colored c1.gif (862 bytes) ) 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:

l2.gif (4079 bytes)

The components highlighted this diagram are:

  • c1.gif (862 bytes) 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.

  • c2.gif (862 bytes) The TextArea of display options.  The text area should be able to expand/shrink both horizontally and vertically.

  • c3.gif (862 bytes) 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:

  1. Bring up the propery sheet for the frame and set its layout property to BorderLayout
  2. 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.
  3. Select the "Containers" category on the Beans palette
  4. Select the "Panel" bean
  5. 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.
  6. Bring up the Frame's properties and set its layout to BorderLayout.
  7. Select the "Data Entry" category on the Beans palette
  8. Select the "Label" bean
  9. 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.
  10. Add another Label as the Center component of the panel.
  11. 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
  12. Select the "Data Entry" category on the bean palette
  13. Select the "TextArea" bean
  14. 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.
  15. Select the "Containers" category on the bean palette
  16. Select the "Panel" bean
  17. 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.
  18. 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.
  19. Expand the items in the Beans List until you can see "Panel1". That's the Panel you added to the "South" of the Frame.
  20. Select the "Buttons" category from the bean palette
  21. Select the "Button" bean
  22. We need five buttons, so select "Sticky" sticky.gif (963 bytes) to make life easier.
  23. Click five times on the "Panel1" bean in the Beans List. Don't click too fast or it will think you're double-clicking...
  24. 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.
  25. 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.

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