
|
|
4. Comparison of OS/2 and Java GUI Components
- 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
- 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,
- Looks and acts the same as Java's java.awt.Button
- Looks and acts the same as Java's java.awt.Checkbox
- Looks and acts the same as Java's java.awt.Checkbox inside a java.awt.CheckboxGroup
- Formed by grouping checkboxes in a Static Window.
- 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
- 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
- Single line of editable input text.
- Looks and acts like Java's java.awt.TextField.
- A basic window with title bar and control buttons.
- Looks and acts like Java's java.awt.Frame.
- A scrollable list of text strings.
- Looks and acts like Java's java.awt.List.
- Menus can be pull-down or pop-up windows.
- Most PM Menu parts, such as menu bars and menu items have AWT counterparts.
- Multiple lines of text can be entered.
- Can be read-only or read-write.
- Looks and acts like Java's java.awt.TextArea.
- Complex compound window allowing other controls to be organized in "pages".
- Can achieve similar effects with combinations of AWT components.
- Used with various types of windows to access non-visible parts of window.
- Looks and acts like Java's java.awt.Scrollbar.
- Similar to a ScrollBar, but without arrows.
- Can be linear or circular and can show gradations.
- 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.
- 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 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.
- 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.
- Suppose you wanted to mimic the interface of WS FTP, an FTP program on Windows.
- (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!)
- First, determine the most reasonable "chunks" of interface:
- Ignore decorative borders and list "headings".
- Examine from the outside edges inward.
- Do components that bump against the edge and have fixed width or height? (yes!)
- 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!
- 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.
- So far so good!
- The green area represents what we've done so far...
- 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.
- So far so good!
- Notice how we're "dividing and conquering the interface...
- 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.
- So far so good!
- Now we've got three horizontal groups to deal with.
- The center section stays constant size
- The two side sections split the remaining space
- 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)
- 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.
- So far so good!
- Now we're down to the two file lists.
- 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.
- So far so good!
- Finally, each of the remaining sections is a fixed-width GridLayout of buttons to the East, and a List to the Center.
- So far so good!
- And after we set the background colors and run our example, we get
- For comparison...
|