Laying Out ComponentsLaying Out Components

Interior Design for GUIs

Nov 04

2

What is Widget Layout?What is Widget Layout?

Positioning widgets in their container (typically a JPanel or a JFrame’s content pane)Basic idea: each widget has a size and positionMain problem: what if a window changes size?

Example

Nov 04

3

Resizing a WindowResizing a Window

Menu wraps

Buttonslost

Scrollbar added

Nov 04

4

Hierarchical Widget Hierarchical Widget LayoutLayout

Widgets are arranged hierarchically, relative to the parent (recall containment hierarchy)

Nov 04

5

HierarchicalHierarchicalLayout (2)Layout (2)

Nov 04

6

Size PropertiesSize Properties

When a component is instantiated, it takes on size properties…

Preferred sizeMinimum sizeMaximum size

These properties are used to determine component size during (a) initial layout and (b) resize operationsSize also affected by layout manager policies (more on this later)

Nov 04

7

Example ProgramExample Program

DemoSizeProperties.java

DemoSize.java

DemoPosition.java

Nov 04

8

Programming Programming ChallengeChallenge

Create a new version of DemoSizeProperties that presents the component name, class, and size properties in a JTableName the new program…

PC_SizeProperties.java

Nov 04

9

Widget Layout ModelsWidget Layout Models

Absolute (aka fixed)Control for component size and position

Struts and springsControl for component position

Variable intrinsic sizeControl for component size

Nov 04

10

Absolute PositioningAbsolute Positioning

Component position and size explicitly specified…

X and Y screen coordinatesWidth and height of componentUnits: pixels (typically)

Nov 04

11

Absolute Positioning Absolute Positioning (2)(2)

AdvantagesSimple to implementWidgets retain their position and size when window is resized (sometimes this is desirable)Simple to build a resource editor (drag and drop widgets onto a screen; e.g., Visual Basic)

DisadvantagesDifficult to change layout (too many ‘magic numbers’ or defined constants)Poor response to resizing the window because…

Enlarging: too much empty space (ugly!)Shrinking: components lost instead of wrapping

Nov 04

12

Example ProgramExample Program

DemoAbsolute.java

Nov 04

13

Struts and SpringsStruts and Springs

GoalsEasy to use Handles window resizing appropriately

IdeaAdd constraints to define geometric relationships between widgets

Nov 04

14

Struts and Springs (2)Struts and Springs (2)

Place struts and springs into layoutStruts ( ) - fixed regions (they don’t change)Springs ( ) - can be compressed or stretched

AdvantageWhen the window is resized, widget position is determined automatically by constraint equations

Text Field Button

Nov 04

15

Variable Intrinsic SizeVariable Intrinsic Size

Each component has intrinsic size properties (i.e., preferred size, minimum size, maximum size)During layout, components report their size properties to the layout manager (recursively, if necessary)Designers have limited control over this

Some layout managers respect size properties, while others do not!

Nov 04

16

Widget CommunicationWidget Communication

Scenario #1: A scrollbar moves the enclosed text also moves Scenario #2: A window is resized components change in position and sizeHow does this happen?Pseudo-events are used for widget to widget communication“Pseudo” because they are responses to an implicit event (the reaction of one widget to another)Accomplished by subclassing or parent notification

Nov 04

17

SubclassingSubclassing

Most widgets are subclasses of other widgetsMethods in superclass are overridden to handle updating the widget as well as notifying other widgetsDisadvantages:

Large number of unique widget classesActions for entire window scattered throughout the code

Nov 04

18

Parent NotificationParent Notification

Widgets notify their parent (enclosing widget) of any changes that have occurredParent does the “right thing” (e.g., ask a scrollbar for its position and move the text window)

Nov 04

19

Java’s Layout ManagersJava’s Layout Managers

BorderLayoutFlowLayoutGridLayoutBoxLayoutGridBagLayoutCardLayoutOverlayLayoutetc.

Nov 04

20

BorderLayoutBorderLayout

Places components in one of five regionsNorth, South, East, West, Center

Support for struts and springsStruts ()

Can specify ‘hgap’, ‘vgap’

Springs ()Inter-component space is fixed

Support for variable intrinsic size ()Components expand to fill space in region

Nov 04

21

Border Layout (2)Border Layout (2)

Components ‘expand’ (or ‘stretch’) to fill space as follows

North

South

West EastCenter

Expand direction

Nov 04

22

Example ProgramExample Program

DemoBorderLayout.java

usage: java DemoBorderLayout arg1

where 'arg1' = strut size in pixels

Example (next 2 slides)

Nov 04

23

Example ProgramExample Program

Launch Resize

Invocation: java DemoBorderLayout 0

No struts

Variable intrinsic size

Nov 04

24

Example ProgramExample Program

Launch Resize

With struts : hgap = vgap = 10 pixels

Invocation: java DemoBorderLayout 10

Struts

Nov 04

25

FlowLayoutFlowLayout

Arranges components in a group, left-to-rightGroup alignment: left, center, rightWraps components to new line if necessarySupport for struts and springs

Struts () Can specify ‘hgap’, ‘vgap’Springs () Inter-component space is fixed

Support for variable intrinsic size ()Component size is fixed

Space is added before/after/below the entire group of components to fill available space

Nov 04

26

Example ProgramExample Program

DemoFlowLayout.java

usage: java DemoFlowLayout arg1 arg2

where 'arg1' = strut size in pixels

and 'arg2' is one of c = center alignment l = left alignment r = right alignment

Example (next 2 slides)

Nov 04

27

Example Program (2)Example Program (2)

Launch

Resize

Default for FlowLayout… struts : hgap = vgap = 5, alignment = center

Invocation: java DemoFlowLayout 5 c

Fill available space before/after/below group of components

Nov 04

28

Example Program (3)Example Program (3)

Launch

Resize

Invocation: java DemoFlowLayout 10 r

With struts : hgap = vgap = 10, alignment = right

Nov 04

29

GridLayoutGridLayout

Arranges components in a rectangular gridThe grid contains equal-size rectanglesSupport for struts and springs

Struts ()Can specify ‘hgap’, ‘vgap’

Springs ()Inter-component space is fixed

Support for variable intrinsic size ()Components expand to fill rectangle

Nov 04

30

Example ProgramExample Program

DemoGridLayout.java

usage: java DemoGridLayout arg1

where 'arg1' = strut size in pixels

Example (next 2 slides)

Nov 04

31

Example Program (2)Example Program (2)

Launch Resize

Invocation: java DemoGridLayout 0

No struts

Equal-size rectangles

Nov 04

32

Example Program (3)Example Program (3)

Launch Resize

Invocation: java DemoGridLayout 10

With struts : hgap = vgap = 10

Nov 04

33

BoxLayoutBoxLayout

Arranges components vertically or horizontallyComponents do not wrapSupport for struts and springs

Struts ()Can specify ‘rigid areas’

Springs ()Can specify ‘horizontal glue’ or ‘vertical glue’

Support for variable intrinsic size ()Components expand if maximum size property is set

Nov 04

34

Example ProgramExample Program

DemoBoxLayout.java

usage: java DemoBoxLayout arg1 arg2

where 'arg1' is one of c = centre alignment l = left alignment r = right alignment

and 'arg2' is one of e = enable struts and springs demo d = disable struts and springs demo

Example (next 2 slides)

Nov 04

35

Example Program (2)Example Program (2)

Invocation: java DemoBoxLayout r d

Invocation: java DemoBoxLayout l d

Invocation: java DemoBoxLayout c d

Default is left align

Nov 04

36

Example Example Program (3)Program (3)

Invocation: java DemoBoxLayout c e

Launch Resize Resize more

Struts (10 pixels)

Springs

Enable struts and springs demo