layout managers arranges and lays out the gui components on a container
TRANSCRIPT
![Page 1: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/1.jpg)
Layout Managers
Arranges and lays out the GUI components on a container
![Page 2: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/2.jpg)
9/04/2005Copyright 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() );
![Page 3: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/3.jpg)
9/04/2005Copyright 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
![Page 4: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/4.jpg)
9/04/2005Copyright 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 )
![Page 5: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/5.jpg)
9/04/2005Copyright 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
![Page 6: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/6.jpg)
9/04/2005Copyright 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"));
![Page 7: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/7.jpg)
9/04/2005Copyright 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.
![Page 8: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/8.jpg)
9/04/2005Copyright 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
![Page 9: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/9.jpg)
9/04/2005Copyright 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.
![Page 10: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/10.jpg)
9/04/2005Copyright 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"));
![Page 11: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/11.jpg)
9/04/2005Copyright 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.
![Page 12: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/12.jpg)
Advanced Layouts (optional)
![Page 13: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/13.jpg)
9/04/2005Copyright 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
![Page 14: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/14.jpg)
9/04/2005Copyright 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.
![Page 15: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/15.jpg)
9/04/2005Copyright 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
![Page 16: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/16.jpg)
9/04/2005Copyright 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.
![Page 17: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/17.jpg)
9/04/2005Copyright 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
![Page 18: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/18.jpg)
9/04/2005Copyright 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.
![Page 19: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/19.jpg)
Event Handling
![Page 20: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/20.jpg)
9/04/2005Copyright 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
![Page 21: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/21.jpg)
9/04/2005Copyright 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 )
![Page 22: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/22.jpg)
9/04/2005Copyright 2005, by the authors of these slides, and Ateneo
de Manila University. All rights reserved
L13: Layout Managers
Slide 22
The Applet as the ListenerMyApplet
(implements ActionListener)b1 = new Button( “1” );
b1.addActionListener( this );
Button b1
0
1
2
ButtonactionListeners
b1
…
inside init() …
b2 = new Button( “2” );b2.addActionListener( this );
Button b2
0
1
2
ButtonactionListeners
b2…
public void actionPerformed(ActionEvent e){ if ( e.getSource() == b1 ) { … } else if ( e.getSource() == b2 ) { … }}
create an ActionEvent objectfor each ActionListener, call actionPerformed(…)
when b2 is pressed …
ActionEventsource
actionPerformed(…)
![Page 23: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/23.jpg)
9/04/2005Copyright 2005, by the authors of these slides, and Ateneo
de Manila University. All rights reserved
L13: Layout Managers
Slide 23
Events Exampleimport 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 +
"!" ); } }}
![Page 24: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/24.jpg)
9/04/2005Copyright 2005, by the authors of these slides, and Ateneo
de Manila University. All rights reserved
L13: Layout Managers
Slide 24
Events Example 2import 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 ); } } }
![Page 25: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/25.jpg)
9/04/2005Copyright 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
![Page 26: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/26.jpg)
Mouse Event Listeners
![Page 27: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/27.jpg)
9/04/2005Copyright 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 )
![Page 28: Layout Managers Arranges and lays out the GUI components on a container](https://reader035.vdocuments.us/reader035/viewer/2022062517/56649f1e5503460f94c36753/html5/thumbnails/28.jpg)
9/04/2005Copyright 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