Widget Layout and Communication

1
Widget Layout and Communication

• CS160 Fall 1999
• Scott Klemmer

2
Outline

• What is layout?
• Examples
• Layout models
• Widget communication
• Widget design issues

3
What is Layout?

• Position of widgets in the containing window
• Main problem is what to do when the window
  changes size

4
Hierarchical Layout

• Widgets positioned relative to their parent

5
Hierarchical Layout
6
How Not To Do Layout (both bad)

• Before
• After

7
More Bad Examples

• Netscape

• xv

8
Small File Dialog Boxes

• Netscape

9
Platform Dependence
10
Layout Models

• Fixed Position
• Visual Basic
• Struts and Springs
• NeXTStep, SUIT
• Tk packer (sort of)
• Java Swing
• Intrinsic Size Variable Intrinsic Size
• InterViews, Fresco
• Java AWT, Swing

11
Fixed Position

• Store a rectangle for each component
• e.g. Visual Basic
• Simple to implement
• Resource editor is simple
• Widgets stay where you put them
• Problems?

12
Struts and Springs

• We want something as easy to use as fixed
  position but also handle resizing

TitleBar
Title
CloseButton
Always want centered
Fixed Width
CloseButton.RIGHT TitleBar.RIGHT -
5 Title.CENTER TitleBar.CENTER
13
Struts and Springs (cont.)

• Place struts and springs in the layout
• Struts represent fixed lengths
• Springs push as much as they can
• Advantages?

14
Intrinsic Size

• Size of widget determined by sizes of items
  within
• e.g. Menus, most Java widgets
• Advantages?

New Window Open Page Save Save as
Cut Copy Paste
Label
15
Variable Intrinsic Size

• Intrinsic size does not handle resizing
• Variable Intrinsic Size
• Each widget reports its size needs (recursively
  if necessary)
• Each widget also reports how much it can be
  reasonably squeezed or expanded

16
Widget Communication

• How do widgets communicate and interact with
  each other?
• e.g. if scrollbar is moved, corresponding text
  should also move

17
Widget Communication (cont.)

• Pseudo-events
• Create new events for inter-widget communication
• Send pseudo-event to the right widget
• Pseudo because it does not represent real input

18
Widget Communication (cont).

• Direct sibling access
• Specify sibling as property (Tk)
• Specify sibling in code (subArctic, AWT)
• Example

19
Widget Communication (cont.)

• Parent notification
• Each widget has a unique identifier
• Widgets notify parent widget of any changes that
  have occurred
• Parent does the right thing

20
Internationalization

• Writing an application suitable for a global
  audience

21
Localization

• Customizing an application for a particular
  language or region
• Colors
• Currency formats
• Date and time formats
• Graphics
• Icons
• Labels
• Messages
• Number formats
• Online help
• Page layouts
• Personal titles
• Phone numbers
• Postal addresses
• Sounds
• Units of measurement

22
Summary

• Layout lets us position widgets in an abstract
  manner for resizing purposes
• Widget communication allows widgets to interact
  with each other