Transcript GUI and Event Processing(Powerpoint)

Graphical User Interface
(GUI)
Two-Dimensional Graphical
Shapes
GUI
Classes

AWT (abstract windows toolkit) java.awt package

Swing - javax.swing package
Take advantage of inheritance
is-a relationships
GUI AWT Components
(adapted from Figure 7.2
JPanel
JComponent
Component
Container
Dialog
JDialog
Frame
JFrame
Window
Lab 7: BallAppSimple
Note:JFrame
package ballappsimple;
import javax.swing.JFrame;
public class BallAppSimple extends JFrame {
public BallAppSimple (String title) {
super(title);
this.setSize(600, 350);
this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
this.add(new BallPanelSimple());
this.setVisible(true);
Adds the panel to the frame
}
public static void main(String[] args) {
BallAppSimple app = new BallAppSimple ("Simple Ball");
}
}
Lab 7: BallAppSimpleNote:JPanel
Import javax.swing.JPanel;
public class BallPanelSimple extends JPanel {
private final int INIT_X = 75;
constant attributes
private final int INIT_Y = 75;
private final int DIAMETER = 60;
private Ball _ball1;
object of type Ball or class Ball
public BallPanelSimple () {
super();
this.setBackground (Color.yellow);
_ball1=new Ball (java.awt.Color.red, this);
_ball1.setLocation(INIT_X, INIT_Y);
_ball1.setSize(DIAMETER, DIAMETER); }
public void paintComponent (java.awt.Graphics aBrush) {
super.paintComponent(aBrush);
java.awt.Graphics2D betterBrush = (java.awt.Graphics2D) aBrush;
_ball.fill(betterBrush);
}
}
paintComponent used by JPanel to paint/repaint a panel
Important call
A shape including
its color and other attributes
public void paintComponent (java.awt.Graphics aBrush)
{
super.paintComponent(aBrush);
Can draw 2D shapes better with
java.awt.Graphics2D betterBrush =
The 2DGraphics (casting)
(java.awt.Graphics2D) aBrush;
_ball.fill(betterBrush);
}
repaint



•
•
Automatically called when:
• panel changes size
• panel changes location
• panel is reopened after being resized
repaint () calls paintComponent
Programmer calls repaint() when
something on the panel has changed
All JPanels have a repaint method
Paintbrush:
Must always instantiate the
super.paintComponent method and pass a
Brush
•
import java.awt.Color;
public class Ball extends java.awt.geom.Ellipse2D.Double
{
Color _fillColor;
public Ball (Color aColor) {
super ();
this.setFillColor (aColor); }
// more readable versions of methods provided by Java
public void setLocation (double x, double y) {
this.setFrame (x, y, this.getWidth(), this.getHeight());
}
public void setSize (int aWidth, int aHeight) {
this.setFrame(this.getX(), this.getY(), aWidth, aHeight);
public void setFillColor (java.awt.Color aColor) {
_fillColor = aColor;
}
public void fill (java.awt.Graphics2D aBetterBrush){
java.awt.Color savedColor = aBetterBrush.getColor();
aBetterBrush.setColor(_fillColor);
aBetterBrush.fill(this);
aBetterBrush.setColor(savedColor); }
}
}
Lab 8: Run the BallAppSimple
Code



Modify program to change height and
width of the JFrame
Modify program to change ball color and
background color of the JPanel
Modify the program to add another
shape, perhaps a rectangle, in a different
color to the JPanel. Experiment with
size and location.
GUI Components and Screen Design
Panel Instance
Frame Instance
GUI Demo
Hello World
Message
Textfield Instance
Label Instance
Display
Clear
Close
Button Instance
Screen Design

Layout Managers facilitate better
programmer control of interfaces!
Layout Managers
• Are objects that place
components within a container
• determines component size
• determines component position
• Specifies a strategy for screen
layout
Predefined Layout
Manager Subclasses
•FlowLayout
•GridLayout
•BorderLayout
• BoxLayout
• CardLayout
• GridBagLayout
Featured in
text
Layout
Managers

Containers have default layout
managers

Programmer can explicitly set the
layout manager

Each has its own rules governing
how components will be arranged
Border Layout
(default for JFrame)
North
West
Center
South
East
North
BorderLayout
West
Center
East
public BallAppSimple (String title) {
super(title);
South
this.setSize(600, 350);
this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
this.add(new BallPanelSimple());
or
this.add (new BallpanelSimple (), java.awt.BorderLayout.CENTER);
this.setVisible(true);
}
Border Layout
(pg 267)

Each area displays a component such as a JPanel

Each of the four outer areas enlarges as needed to
accommodate the component added to it

If nothing is added to the outer areas, they take up
no space and other areas expand to fill the void

The center area expands to fill space as needed
• Methods common to all layouts
• add ()
• remove ()
• setLayout ()
Simple Application
(Example of a Button Panel)
public class ButtonPanelLabApp extends javax.swing.JFrame
{
public ButtonPanelLabApp (String title) {
super(title);
this.setSize(600, 350);
this.setDefaultCloseOperation
(javax.swing.JFrame.EXIT_ON_CLOSE);
this.add(new ButtonPanel());
this.pack();
this.setVisible(true); }
public static void main(String[] args) {
ButtonPanelLabApp app = new ButtonPanelLabApp
("Simple Panel GUI Lab");}
}
Simple Application
Calling pack makes JFrame resize to fit
contents
(default size for JFrame is (0,0) );
here it fits to enclose the button which
has a default size
ButtonPanel
package buttonpanellab;
import javax.swing.JButton;
import javax.swing.JPanel;
public class ButtonPanel extends JPanel {
JButton _button1;
public ButtonPanel ()
{
_button = new JButton ("Click Me");
this.add(_button); }
}
Lab – Creating a Second Panel

Start with the BallAppSimple Code
(Note: if you want to save it as is, make another copy
in another package)
Lab 8 Continued – Add a Create
Button Panelclass to program
•
CreateButton creates a button, extends
javax.swing.JButton
• Receives three parameters
• a color for the button,
• a string message to place on the button, and
• a panel on which the button will be placedl
• Send the message parameter to the super class JButton
• Set the button background to the color that is passed
• Add the button to the passed JPanel
• Do whatever else you desire to finish a button
Flow Layout

Flow layout puts as many components as possible on
a row, then moves to the next row

Rows are created as needed to accommodate all of
the components

Components are displayed in the order they are
added to the container

Each row of components is centered horizontally in
the window by default, but could also be aligned left
or right

The horizontal and vertical gaps between the
components can be explicitly set
Grid Layout

A grid layout presents a container’s components in a
rectangular grid of rows and columns

One component is placed in each cell of the grid, and all cells
have the same size

As components are added to the container, they fill the grid
from left-to-right and top-to-bottom (by default)

The size of each cell is determined by the overall size of the
container
setLayout (new GridLayout (<row>, <col>)
Add another panel class
ButtonPanelGrid.java
public class ButtonPanelGrid extends JPanel
{
JButton _button1,<……………………………..>;
public ButtonPanelGrid () {
super ();
<set the layout to a grid layout of 4 rows with 2 buttons
to each row; note that to apply this to the Panel,
we need to precede the statement with either
a panel name or, in this case “this”>
<create each button in turn for a total of 8 buttons
in this manner, adding and passing whatever is
necessary>
}
}
Add the other JPanel
to the JFrame
public class BallAppSimple2 extends javax.swing.JFrame {
private BallPanelSimple _panel1;
private ColorHolder _holder;
public BallAppSimple2 (String title)
{
super (title);
_holder= new ColorHolder();
BallPanelSimple _panel1 = new BallPanelSimple();
this.setSize(400, 250);
this.setDefaultCloseOperation(javax.swing.JFrame.EXIT_ON_CLOSE);
add(new ButtonPanelGrid (_holder), BorderLayout.EAST);
add(_panel1, BorderLayout.CENTER);
this.setVisible(true); }
public static void main(String[] args) {
BallAppSimple2 app = new BallAppSimple2
("Simple Ball and Buttons");
}
Two Panel Example