1 guis, layout, drawing rick mercer. 2 event-driven programming with graphical user interfaces most...
TRANSCRIPT
1
GUIs, Layout, Drawing
Rick Mercer
2
Event-Driven Programming with Graphical user Interfaces
Most applications have graphical user interfaces (GUIs) to respond to user desires
3
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
4
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
5
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 … }}
6
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
7
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
8
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);
9
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
10
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);
11
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"));
12
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
13
Null Layout
L
14
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
15
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
16
The Coordinate System
<0, 0>
<x, y>
<x-1, y-1>
x
y
17
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)
18
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); }}
19
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
20
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
21
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…
22
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);
23
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
24
Summary
To draw a png, jpg, or gif1. Extend JPanel
2. Declare Image instance variables in that class
3. Let the constructor initialize the images
4. Overide paintComponent
5. get a Graphics2D object named g2 perhaps
6. send drawImage messages to g2
25
Example code that needs6 jpg files in images
public class CardsOnTheWater extends JPanel {
private Image ocean, card1, card2, card3, card4, card5;
public CardsOnTheWater() {
try { ocean = ImageIO.read(new File("images/ocean.jpg")); card1 = ImageIO.read(new File("images/14h.jpg")); card2 = ImageIO.read(new File("images/13h.jpg")); card3 = ImageIO.read(new File("images/12h.jpg")); card4 = ImageIO.read(new File("images/11h.jpg")); card5 = ImageIO.read(new File("images/10h.jpg")); } catch (IOException e) { e.printStackTrace(); } }
26
This method is called when the panel needs to be redrawn
@Overridepublic 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);}
27
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); }}