4. Comparison of OS/2 and Java GUI Components


Agenda -- Day Two

  • 9:00-10:00am -- Comparison of OS/2 and Java GUI Elements
  • 10:00am-noon -- LAB -- GUI Conversion
  • noon-1:00pm -- Lunch
  • 1:00-2:00pm -- Event Handling in OS/2 and Java
  • 2:00-5:00pm -- LAB -- Event Handling

OS/2 Controls vs. AWT Components

  • Names can be confusing! Watch out!
  • Most controls have a direct counterpart.
  • Most controls look/function the same way, but not always 100%.
  • Some controls can be created by composing Java components.
  • In this section, the slide headers are the names of the OS/2 controls, not necessarily the Java components,

Push Button

  • Looks and acts the same as Java's java.awt.Button

Check Box

  • Looks and acts the same as Java's java.awt.Checkbox

Radio Button

  • Looks and acts the same as Java's java.awt.Checkbox inside a java.awt.CheckboxGroup
  • Formed by grouping checkboxes in a Static Window.

ComboBox

  • Can be simple combo, drop-down combo, or drop-down list.
  • Drop-down list is very similar to AWT Choice.
  • Simple and drop-down combos allow new items to be typed in.
    • AWT does not have this yet -- see JFC

Container

  • Not the same as a Java Container!
  • Complex compound window allowing different views of collections of items.
    • Icon, Name, Tree, and Details views supported.
  • Some independent Java equivalents available for individual views

EntryField

  • Single line of editable input text.
  • Looks and acts like Java's java.awt.TextField.

Frame

  • A basic window with title bar and control buttons.
  • Looks and acts like Java's java.awt.Frame.

ListBox

  • A scrollable list of text strings.
  • Looks and acts like Java's java.awt.List.

Menu

  • Menus can be pull-down or pop-up windows.
  • Most PM Menu parts, such as menu bars and menu items have AWT counterparts.

MultipleLineEntryField

  • Multiple lines of text can be entered.
  • Can be read-only or read-write.
  • Looks and acts like Java's java.awt.TextArea.

Notebook

  • Complex compound window allowing other controls to be organized in "pages".
  • Can achieve similar effects with combinations of AWT components.

ScrollBar

  • Used with various types of windows to access non-visible parts of window.
  • Looks and acts like Java's java.awt.Scrollbar.

Slider

  • Similar to a ScrollBar, but without arrows.
  • Can be linear or circular and can show gradations.

SpinButton

  • A simple compound window with an entry field and increment/decrement buttons.
  • Similar in behavior to the drop-down list window, but doesn't drop down.
  • Should use Java's java.awt.Choice or build a new component.

Static

  • A simple borderless window which can contain text, images, colors, etc.
  • Text Static is similar in behavior to the AWT Label class.
  • Bitmap and other Statics are similar in behavior to the AWT Panel class.

TitleBar

  • TitleBar windows are typically used with a Frame window.
  • Typically used to display program and document titles and indicate active window.
  • AWT provides ways to control the TitleBar of a Frame, but no separate class.

ValueSet

  • A compound window designed for visual selection of a choice.
  • Allow for choice of a bitmap, color, font, etc. from a palette of choices.
  • No AWT counterpart, but can be constructed from AWT components in most cases.

An Example of Interface Design

  • Suppose you wanted to mimic the interface of WS FTP, an FTP program on Windows.

An Example of Interface Design

  • (Note -- it may be easier to construct each piece separately and combine them at the end -- the designer gets a bit crowded... Also -- use the Beans List!)

Example (continued)

  • First, determine the most reasonable "chunks" of interface:
  • Ignore decorative borders and list "headings".

Example (continued)

  • Examine from the outside edges inward.
  • Do components that bump against the edge and have fixed width or height? (yes!)

Example (continued)

  • Looks like the bottom part is a fixed height, containing buttons, and the rest of the interface above it should expand or shrink based on the window size.
  • Sounds like a job for BorderLayout, with the bottom button strip being the "south" component.
  • But how is that button strip laid out? All the buttons are the same width -- sounds like a GridLayout!

Example (continued)

  • First, we create a Frame in VisualAge for the overall interface.
  • We give it a BorderLayout.
  • We add a panel to the southern edge to contain the strip of Buttons.
  • Sounds like a job for BorderLayout, with the bottom button strip being the "south" component.
  • But how is that button strip laid out? All the buttons are the same width -- sounds like a GridLayout!
  • Give the new panel a GridLayout, and add the seven Buttons.

Example (continued)

  • So far so good!

Example (continued)

  • The green area represents what we've done so far...

Example (continued)

  • Next let's look at the message list. Looks like we want it to stay the same size when the rest of the window changes size.
    • Similar to the button bar at the bottom, eh?
  • We'll add a panel as the center part of the overall BorderLayout
  • Make the new panel have a BorderLayout as well.
  • Add a List as its South component.

Example (continued)

  • So far so good!

Example (continued)

  • Notice how we're "dividing and conquering the interface...

Example (continued)

  • Let's do the same thing for those radio buttons.
    • Remember, radio buttons are Checkboxes with an associated CheckboxGroup
    • Looks like they are flowed within that space... Use FlowLayout for this new Panel.

Example (continued)

  • So far so good!

Example (continued)

  • Now we've got three horizontal groups to deal with.
    • The center section stays constant size
    • The two side sections split the remaining space

Example (continued)

  • This one will either require a GridBagLayout or a custom layout.
    • We'll use a fast GridBagLayout. (Look it up for details -- this will be brief)

Example (continued)

  • Set up the middle panel to be a GridBaglayout.
  • Add two buttons, the second below the first.
  • Set up an overall panel to be the "Center" part of what's remaining in the display.
  • Add a panel to it, the two button panel we created, then another panel, all in a row.
  • Set up the two side panels to use weightx = 0.5, and fill = BOTH.

Example (continued)

  • So far so good!

Example (continued)

  • Now we're down to the two file lists.

Example (continued)

  • Now we're down to the two file lists. Notice how they are identical in structure.
    • These might be good candidates to make a separate bean an include two instances of it!
  • Each of these lists has three vertical parts:
    • Label
    • Choice
    • File list/vertical button bar.
  • The label and choice components have a fixed height, so we could use two nested Border layouts.

Example (continued)

  • So far so good!

Example (continued)

  • Finally, each of the remaining sections is a fixed-width GridLayout of buttons to the East, and a List to the Center.

Example (continued)

  • So far so good!

Example (continued)

  • And after we set the background colors and run our example, we get

Example (continued)

  • For comparison...

Another Example


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