Layout Managers Arranges and lays out the GUI components on a container

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 2 Layout Managers Layout Managers controls the size and position of components in a container. Every container has a default Layout Manager: Panels – FlowLayout Window (e.g. Applets, etc.) – BorderLayout Usage: myContainer.setLayout( new LayoutManger() );

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 3 Layout Managers Basic Layouts FlowLayout BorderLayout GridLayout

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 4 FlowLayout FlowLayout( int align ) FlowLayout() GUI components are placed on a container from left to right in the order in which they are added to the container. Alignments: Left ( FlowLayout.LEFT ) Center ( FlowLayout.CENTER ) Right ( FlowLayout.RIGHT )

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 5 Layout Managers Basic Layouts FlowLayout BorderLayout Panels GridLayout

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 6 BorderLayout GUI components are arranged into 5 regions North – top South – bottom Center – middle East – right West – left Max of 5 Components can be added directly. Usage: c.setLayout(new BorderLayout()); c.add("North", new Button("North"));

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 7 Panels A component that can contain other components. Containers that allow grouping of Components to create complex GUI’s. May have components added to them (including other panels) Default Layout: FlowLayout Each Panel can have a different layout.

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 8 Layout Managers Basic Layouts FlowLayout BorderLayout GridLayout

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 9 GridLayout GridLayout(int rows, int cols) Container is divided into a grid where components are placed in rows and columns. Every component has the same width and height.

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 10 GridLayout Components are added left to right until row is full, starting from the top-left cell of the grid. The process continues left to right on the next row of the grid. Usage: c.setLayout(new GridLayout(1, 1)); c.add(new Button("Button 1"));

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 11 Exercises Create an applet that looks like a phone’s dialing pad. Use buttons and a Grid Layout. Create an applet that looks like a chat window. Create an applet that looks like Windows’ Standard calculator. Use buttons, labels, text fields and several panels to do this.

Advanced Layouts (optional)

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 13 Layout Managers Advanced Layouts CardLayout GridBagLayout BoxLayout

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 14 CardLayout Components are arranged or stacked like a deck of cards. Only the component at the “top” of the deck is visible. Each card is usually a container (i.e. Panel) Each card can use any layout manager.

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 15 Layout Managers Advanced Layouts CardLayout GridBagLayout BoxLayout

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 16 GridBagLayout Similar to GridLayout Arranges components into a grid But more Flexible Each component size can vary. Components can be added in any order.

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 17 Layout Managers Advanced Layouts GridBagLayout CardLayout BoxLayout

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 18 BoxLayout GUI components are arranged left-to-right or top-to-bottom in a container.

Event Handling

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 20 AWT 1.1 Idea: Listeners Idea: each visual object has one or more “listeners” that perform the action for that object Listeners implement an interface and perform some action e.g., ActionListener, MouseListener, etc. You add listeners to each object b.addActionListener( myListener ) When button is pressed, listener’s method is called Efficient – only the added listeners receive the events

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 21 The Applet as the Listener What needs to be done import java.awt.event.*; init() method: create the Button as before goButton = new Button( “Go” ); goButton must be a field of the applet add the applet (“this”) as listener for each button goButton.addActionListener( this ) applet implements ActionListener interface define actionPerformed( ActionEvent e ) method use e.getSource() to get the Button object that was clicked use if statements to determine which button it is if ( e.getSource() == goButton )

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 22 The Applet as the Listener MyApplet (implements ActionListener) b1 = new Button( “1” ); b1.addActionListener( this ); Button b Button actionListeners b1 … inside init() … b2 = new Button( “2” ); b2.addActionListener( this ); Button b Button actionListeners b2 … public void actionPerformed(ActionEvent e) { if ( e.getSource() == b1 ) { … } else if ( e.getSource() == b2 ) { … } create an ActionEvent object for each ActionListener, call actionPerformed(…) when b2 is pressed … ActionEvent source actionPerformed(…)

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 23 Events Example import javax.swing.*; import java.awt.*; import java.awt.event.*; public class HelloWorldApplet2 extends JApplet implements ActionListener { private JButton button; private JTextField textField; private JLabel label; public void init() { Container c = this.getContentPane(); c.setLayout( new FlowLayout() ); label = new JLabel( "Hello, World!" ); c.add( label ); textField = new JTextField( "Enter your name here", 15 ); c.add( textField ); button = new JButton( "Click Me" ); button.addActionListener( this ); c.add( button ); } public void actionPerformed( ActionEvent ae ) { if ( ae.getSource() == button ) { String string = textField.getText(); label.setText( "Hello, " + string + "!" ); }

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 24 Events Example 2 import java.awt.*; import javax.swing.*; import java.awt.event.*; public class HideMessage extends JApplet implements ActionListener { JButton hideButton; JTextField message; public void init() { Container c = this.getContentPane(); hideButton = new JButton( “Hide” ); c.add( hideButton ); hideButton.addActionListener( this ); message = new JTextField( “Hello” ); c.add( message ); } public void actionPerformed( ActionEvent e ) { if ( e.getSource() == hideButton ) { message.setVisible( false ); }

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 25 Exercises Hide and Show Applet add another button TextCopy applet use a TextField, a Label, and a Button When you press the button, the text is copied from the TextField to the Label

Mouse Event Listeners

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 27 Mouse listener interfaces MouseListener void mouseClicked( MouseEvent me ) void mouseEntered( MouseEvent me ) void mouseExited( MouseEvent me ) void mousePressed( MouseEvent me ) void mouseReleased( MouseEvent me ) MouseMotionListener void mouseMoved( MouseEvent me ) void mouseDragged( MouseEvent me )

9/04/2005 Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L13: Layout Managers Slide 28 Mouse Event Represents the state of the mouse pointer when the event occurs Most useful methods: getX() and getY() returns the coordinates of the mouse