Layout Managers

1
Session 30

• Layout Managers

2
An Exercise

• Add to our CannonWorld a button that allows the
  user to change the color of the cannonball from
  blue to red to yellow to blue....
• Place the button on the lefthand side of the
  window.

3
Steps to the solution

• 1. Add a button to the CannonWorld.
• 2. Add a listener class to CannonWorld.
• The listeners actionPerformed method needs to
  tell the ball to take the next color. It could
  have an if-statement that toggles the colors in
  sequence, but...
• Shouldnt the ball be controlling its own
  color, rather than the application using the
  ball?
• So in my solution, I decided to have the
  CannonBall respond to a nextColor() message and
  toggle its own color.

4
More Steps to the Solution

• The next question is, do I add a nextColor()
  method directly to the CannonBall class, or do I
  create a subclass?
• In general, if we need a new kind of object, then
  we should create a new kinds of object.
• (If a particular method turns out to be more
  generally useful than we anticipate, then we can
  always refactor the solution so that the method
  lives higher in the class hierarchy.)
• So
• 3. Implement a ChangingCannonBall class.
• 4. Use instances of ChangingCannonBall in the
  CannonWorld.

5
Layout Managers

• JFrame is a subclass of the Container class
• so it can hold objects such as buttons, scroll
  bars, etc.
• layout manager assigns locations to these objects
  within the container
• the default LayoutManager is BorderLayout

6
Layout Managers

• Five standard types of layout managers
• BorderLayout
• GridLayout - creates an rectangular array of
  components
• FlowLayout - places components in rows left to
  right, top to bottom
• CardLayout - stacks components vertically with
  only one visible at any one time
• GridBagLayout - most general, but most complex.
  It allows for a nonuniform grid of squares with
  components placed in various positions within
  each square.

7
Using GridLayout and Panels

• MemoPad uses GridLayout exclusively, but it nests
  GridLayouts using Panels
• MemoPad frame is GridLayout( 3, 1 )
• top row contains a Panel with GridLayout( 2, 2 )
• middle row contains a Panel with GridLayout( 1, 3
  )

8
Using GridLayout

• MemoPad frame is GridLayout( 3, 1 )

9
Using GridLayout
public class MemoPad extends JFrame public
MemoPad() super() setLayout(
new GridLayout( 3, 1 ) ) setSize( 300, 140
) setTitle( "Memo Pad " )
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE)
database new DefaultMemoDatabase()
fieldPanel new FieldPanel()
fieldPanel.setSize( 300, 80 ) add(
fieldPanel ) buttonPanel new
ButtonPanel( this ) buttonPanel.setSize(
300, 30 ) add( buttonPanel )
messagePanel new MessagePanel( ".. No messages
.." ) messagePanel.setSize( 300, 30 )
add( messagePanel )
10
Using GridLayout
public class FieldPanel extends JPanel
private JTextField keyField private
JTextField valueField public FieldPanel()
setLayout( new GridLayout( 2, 2 ) )
keyField new JTextField( 20 )
valueField new JTextField( 20 ) add(
new JLabel( "Key" ) ) add( keyField )
add( new JLabel( "Value" ) ) add(
valueField ) ...
11
Using GridLayout
public class ButtonPanel extends JPanel
private MemoPad memos public ButtonPanel(
MemoPad p ) memos p setLayout(
new GridLayout( 1, 3 ) ) JButton
insertButton new JButton( "Insert" )
insertButton.addActionListener( new
InsertButtonListener() ) add( insertButton
) JButton findButton new JButton(
"Find" ) findButton.addActionListener( new
FindButtonListener() ) add( findButton
) JButton removeButton new JButton(
"Remove" ) removeButton.addActionListener(
new RemoveButtonListener() ) add(
removeButton ) ...
12
Using Panels with BorderLayout

• BorderLayout seems very restrictive, but you can
  use a Panel to hold several components in each
  direction.

13
An Exercise

• Place the change color button in a Panel with
  the fire button along the top of the window.

14
One Solution

• JPanel buttonPanel new JPanel()
• buttonPanel.setLayout(new GridLayout(1,2) )
• JButton fire new JButton( "fire" )
• fire.addActionListener( new FireButtonListener()
  )
• buttonPanel.add( fire )
• JButton colorButton new JButton( "Change" )
• colorButton.addActionListener(new
  ColorButtonListener() )
• buttonPanel.add( colorButton )
• getContentPane().add( "North", buttonPanel )