Object-Oriented Programming with Java Lecture Notes

24 April 2008 • Swing Layout

Outline

• Review and first principles.

• Basic layout.

  • Case study.

• More advanced models.

Today’s Question

How do you go from this

to this ?

Review

• A component (a JLabel, a JMenuBar) is a displayed entity.

• A container (a JPanel, A JFrame) holds zero or more components.

• A container is-a component; one container can hold another.

• Components and containers are represented as rectangles.

  • Upper-left corner, height and width.

Layout

• A container's layout is the arrangement of its constituent components.

  • That is, an assignment of

    upper-left corner, height and width

    to each component in the container.

• Defining a component's layout is the layout problem.

• A layout manager is a solution to the layout problem.

Absolute Layout

• Absolute Layout is the simplest layout manager.

• Explicitly locate components in the container's rectangle.

  • Assign values to each component's upper-left corner, height and width.

• Easy to understand, easy to use, and universal.

  • Unless you think about it a little bit.

Absolute-Layout Example

JLabel nameLabel = new JLabel("Name:")
add(nameLabel)
nameLabel.setBounds(x1, y1, w1, h1)

Relative Absolute Layout

• A container can hold another container.

• Components are located within the innermost container.

  Components are absolute with respect to the innermost container. relative with respect to outer containers.

Problem Solved?

• Inter-component relations are completely undocumented in the absolute layout.

  • Recovering relations is hard for simple relations and impossible for complex ones.

  • Absolute layouts are a maintence and enhancement nightmare.

• Absolute layouts do not respond well to size changes.

  • Either from the environment or from the components.

Normalized Absolute Layout

• In science, unimportant magnitudes are eliminated by normalizing the data to be in the range [0, 1].

• In normalized absolute layout, every container is a unit square.

  X and y coordinates are percentages. Height and width are a bit more trickey.

Normalized Layout Example

Layout Models

• A layout model (or policy is a way of thinking about component arrangement.

  • A layout manager implements some layout model.

• The abstract and normalized-abstract managers use the Cartesian grid as a layout model.

• The search for a suitable layout manager is a search for a suitable layout model.

  • And it seems a search for the Holy Grail.

Border Layout

• The border-layout manager BorderLayout divides its associated container into five areas.

  BorderLayout.NORTH BorderLayout.SOUTH BorderLayout.EAST BorderLayout.WEST BorderLayout.CENTER

• Border layout is the default manager for JFrames.

  JContainer.setLayout(new BorderLayout())
  

Border Sizing

• A component in a border area has height and width determined in one of two ways:

  1. natural sizing: the size dictated by the component.

  2. unconstrained sizing: the size dictated by available space.

• The sizing technique applied to each dimension depends on the border area.

Component Sizing

• Component dimensions depend on border area.

  

  Install the Java plug-in to see this applet. See the code.

  Install the Java plug-in to see this applet. See the code.

Component Dimensions

• A component has four sets of dimensions:

  1. The maximum dimensions getMaximumSize(),

  2. the minimum dimensions getMinimumSize(),

  3. the prefered dimensions getPreferredSize(), and

  4. the current dimensions getSize().

• Layout managers are free to treat these as they see fit.

Flow Layout

• The flow-layout manager FlowLayout does word-processing-style layout:

  • Components are placed first-come, first serve.

  • Components are placed left to right from top to bottom in the container.

    • Just like the words typed into a word-processed document.

• Flow layout is the default for JPanels.

Flow Placement

• Components are naturally sized in both dimensions.

  A line of components is centered by default. Left and right justification is also avaiable.

• Inter- and intra-line component spacing can also be specified.

Flow-Layout Examples

• The same panel at different dimensions.

• Keeping the flow layout consistent is difficult.

  • Particularly under changing conditions, both internal and external.

Case Study

• How can the UI

  

  be laid out?

Border Layout

• It seems a border layout would work:

  • Text in the center part.

  • Appearence radio buttons in the east part.

  • I-O buttons in the south part.

• But how can the south and east parts hold more than one component?

  • Each component added replaces the previous component, if any.

Recursion!

• The south part should hold three buttons.

• Put the buttons in a container and add the container to the south part.

• Because the buttons are horizontally centered, a JPanel (along with flow layout) does the job.

  JPanel io = new JPanel() io.add(new JButton("erase")) io.add(new JButton("read")) io.add(new JButton("write")) add(io, BorderLayout.SOUTH) add(new JTextArea())

To The East

• Unfortunately, the same trick fails for the east part.

  ButtonGroup buttonGroup = new ButtonGroup(); JPanel appearence = new JPanel(); JRadioButton radioButton = new JRadioButton("normal", false); buttonGroup.add(radioButton); appearence.add(radioButton); radioButton = new JRadioButton("italic", false); buttonGroup.add(radioButton); appearence.add(radioButton); radioButton = new JRadioButton("bold", true); buttonGroup.add(radioButton); appearence.add(radioButton); add(appearence, BorderLayout.EAST);

Vertical Layout

• Flow layout is horizontally oriented.

• A Border layout can provide vertical orientation.

  appearence.setLayout(new BorderLayout()) JRadioButton radioButton = new JRadioButton("normal", false) buttonGroup.add(radioButton) appearence.add(radioButton, BorderLayout.NORTH) radioButton = new JRadioButton("italic", false) buttonGroup.add(radioButton) appearence.add(radioButton, BorderLayout.CENTER) radioButton = new JRadioButton("bold", true) buttonGroup.add(radioButton) appearence.add(radioButton, BorderLayout.SOUTH)

General Border Layout

• The Grid-layout manager Grid generalizes border layout.

• The layout model is a n×m matrix of areas.

  • All areas have the same height and width.

  • 1/n-th and 1/m-th of the container's height and width.

    • Preferred component dimension? What's that?

Grid-Layout Example

• A 3×1 matrix can provide vertical alignment.

  appearence.setLayout(new GridLayout(3, 1)) JRadioButton radioButton = new JRadioButton("normal", false) buttonGroup.add(radioButton) appearence.add(radioButton) radioButton = new JRadioButton("italic", false) buttonGroup.add(radioButton) appearence.add(radioButton) radioButton = new JRadioButton("bold", true) buttonGroup.add(radioButton) appearence.add(radioButton)

Box Layout

• The n×m grid layout model is esoteric.

  • The 1×m (row) and n×1 (column) models are more useful.

• The Box-layout manager Box lays out components horizontally or vertically.

  • Components may be separated by spacers to provide more control over layout.

Box Example

• Box vbox = Box.createVerticalBox() vbox.add(radioButton) radioButton = new JRadioButton("italic", false) buttonGroup.add(radioButton) vbox.add(radioButton) radioButton = new JRadioButton("bold", true) buttonGroup.add(radioButton) vbox.add(radioButton) vbox.add(Box.createGlue()) panel.add(vbox)