Download Introduction to GUIs and Event - University of Arizona

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the work of artificial intelligence, which forms the content of this project

Transcript
GUIs, Layout, Drawing
Rick Mercer
1
Event-Driven Programming with
Graphical user Interfaces
 Most applications have graphical user interfaces
(GUIs) to respond to user desires
2
A Few Graphical Components
 A Graphical User Interface (GUI) presents a
graphical view of an application to users.
 To build a GUI application, you must:
—
—
—
Have a well-tested model that is independent of the view
Make graphical components visible to the user
Ensure the correct things happen for each event
• user clicks button, moves mouse, presses enter key, ...
 Let's first consider some of Java's GUI components:
—
windows, buttons, and text fields
3
Classes in the swing package
 The javax.swing package has components
that show in a graphical manner
JFrame: window with title, border, menu, buttons
JButton: A component that can "clicked"
JLabel: A display area for a small amount of text
JTextField: Allows editing of a single line of text
4
Get a window to show itself
import javax.swing.JFrame;
public class ShowSomeLayouts extends JFrame {
public static void main(String[] args) {
// Construct an object that has all the methods of JFrame
JFrame aWindow = new ShowSomeLayouts();
aWindow.setVisible(true);
}
// Set up the GUI
public FirstGUI() {
// Make sure the program terminates when window closes
this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// … more to come …
}
}
5
Some JFrame messages
 Set the size and locations of the window with
setSize(400, 200);
setLocation(200, 200);
—
—
The first int is the width of the window in pixels
the second int is the height of the window in pixels
6
Building components
 So far we have an empty window
 Let us add a button, a label, and an editable line
 First construct three graphical components
JButton clickMeButton =
new JButton("Nobody is listening to me");
JLabel aLabel =
new JLabel("Button above, text field below");
JTextField textEditor =
new JTextField("You can edit this text ");
 Next, add these objects to a JFrame
7
Add components to a window
 Could use the default BorderLayout and add
components to one of the five areas of a JFrame
add(clickMeButton, BorderLayout.NORTH);
add(textEditor, BorderLayout.CENTER);
add(aLabel, BorderLayout.SOUTH);
8
The 5 areas of BorderLayout
 By default, JFrame objects have only five
places where you can add components
—
a 2nd add wipes out the 1st
 There are many layout managers
9
FlowLayout
 You can change the default layout strategy
with a setLayout message
setSize(600, 200);
setLocation(200, 200);
setLayout(new FlowLayout()); // Change layout Strategy
add(clickMeButton);
add(textEditor);
add(aLabel);
10
GridLayout
 Use this for evenly spaced layouts
public GridLayout(int rows, int cols,
int hgap, int vgap)
setLayout(new GridLayout(2, 2, 4, 4));
add(clickMeButton);
add(textEditor);
add(aLabel);
add (new JButton("Fourth component"));
11
JPanel Objects
 Layout is made much easier using Jpanels
—
A JPanel can hold several things and be treated
as one element to add to the Jframe
JPanel buttonPanel = new JPanel();
// Default layout for JPanels is FlowLayout
buttonPanel.add(new JButton("Add"));
buttonPanel.add(new JButton("Remove"));
buttonPanel.add(new JButton("Quit"));
add(buttonPanel); // Add to the 4th GridLayout spot
12
Null Layout
L
13
Drawing with a Graphics Object
 The use of graphics is common among modern
software systems
 Java has strong support for graphics
—
—
—
—
—
—
—
coordinate system for Java graphics
drawing shapes such as lines, ovals, rectangles, ...
basic animation techniques
the use of color
the use of fonts
drawing images
3D rendering
14
The Coordinate System
 A simple two-dimensional coordinate system exists for
each graphics context or drawing surface
 Each point on the coordinate system represents 1 pixel
 top left corner of the area is coordinate <0, 0>
// This string will be drawn 20 pixels right,
// 40 pixels down as the lower left corner;
// other shapes are upper right
g2.drawString("is in Panel1", 20, 40);
 A drawing surface has a width and height
 Anything drawn outside of that area is not visible
15
The Coordinate System
<0, 0>
x
y
<x, y>
<x-1, y-1>
16
Draw on a JPanel
 Need to extend a class that extends JComponent
—
JPanel is good
 To draw things:
extend JPanel
— override paintComponent
— panel surface is transparent: send drawing messages
inside paintComponent to the graphic context
—
• Use an improved Graphics2D object (g2)
17
Put something in a JPanel
 Create a JPanel class that draws a few strings
import java.awt.*;
public class DrawingPanel extends javax.swing.JPanel {
// Override the paintComponent method in JPanel
@Override
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D)g; // Use improved Graphics2D
g2.drawString("Draw in the graphics context g2", 20, 20);
g2.drawString("that is in a instance of JPanel", 20, 40);
g2.drawString("which will be added to a JFrame", 20, 60);
}
}
18
The Graphics Object
 paintComponent's Graphics g argument
represents a "graphical context" object.
—
—
You can tell it to draw things on the panel
If you want another method to draw, pass the Graphics object
to it—it like a canvas that understands draws
 The actual object passed to every JPanel is a
Graphics2D, so you can cast to Graphics2D
 Never send paintcomponent messages
—
send repaint() messages instead
19
Add the JPanel to a JFrame
setLayout(new GridLayout(2, 2, 4, 4));
add(clickMeButton);
add(textEditor);
add(aLabel);
add(new DrawingPanel()); // Adds a Panel to the 4th spot
20
Drawing an Image
 Java’s Image class in java.awt abstracts a
bitmap image for use in drawing.
 Images can be drawn on a panel
 But first…
21
How do we load an image?
 java.awt
contains a method that returns an
image from a file on your disk
Image img = ImageIO.read(new File("fileName"));
 Once we have an image and a graphics object to
draw on, we can render that image
// 'g2' is a Graphics context object and img
// is an initialized Image. 12 is x, 24 is y (location)
g.drawImage(img, 12, 24, null);
22
Drawing Our Image
 This code would draw img at the
coordinates (12, 24) on the panel
 The final ‘this’ is for an ImageObserver
object, which we won’t be using
23
Summary
 To draw a png, jpg, or gif
1.
2.
3.
4.
5.
6.
Extend JPanel
Declare Image instance variables in that class
Let the constructor initialize the images
Overide paintComponent
get a Graphics2D object named g2 perhaps
send drawImage messages to g2
24
Example code that needs
6 jpg files in images
public class CardsOnTheWater extends JPanel {
private Image ocean, card1, card2, card3, card4, card5;
public CardsOnTheWater() {
try {
ocean = ImageIO.read(new
card1 = ImageIO.read(new
card2 = ImageIO.read(new
card3 = ImageIO.read(new
card4 = ImageIO.read(new
card5 = ImageIO.read(new
} catch (IOException e) {
e.printStackTrace();
}
File("images/ocean.jpg"));
File("images/14h.jpg"));
File("images/13h.jpg"));
File("images/12h.jpg"));
File("images/11h.jpg"));
File("images/10h.jpg"));
}
25
This method is called when
the panel needs to be redrawn
@Override
public void paintComponent(Graphics g) {
Graphics2D g2 = (Graphics2D) g;
g2.drawImage(ocean, 0, 0, this);
g2.drawImage(card1, 10, 10, this);
g2.drawImage(card2, 30, 15, this);
g2.drawImage(card3, 50, 20, this);
g2.drawImage(card4, 70, 25, this);
g2.drawImage(card5, 90, 30, this);
}
26
Still need to Add JPanel to a JFrame
import javax.swing.JFrame;
import javax.swing.JPanel;
public class DrawCardsOnWaterMain extends JFrame {
public static void main(String[] args) {
new DrawCardsOnWaterMain().setVisible(true);
}
public DrawCardsOnWaterMain() {
setSize(250, 250);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
JPanel panel = new CardsOnTheWater();
add(panel);
}
}
27