1 guis, layout, drawing rick mercer. 2 event-driven programming with graphical user interfaces most...
TRANSCRIPT
![Page 1: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/1.jpg)
1
GUIs, Layout, Drawing
Rick Mercer
![Page 2: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/2.jpg)
2
Event-Driven Programming with Graphical user Interfaces
Most applications have graphical user interfaces (GUIs) to respond to user desires
![Page 3: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/3.jpg)
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
![Page 4: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/4.jpg)
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
![Page 5: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/5.jpg)
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 … }}
![Page 6: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/6.jpg)
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
![Page 7: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/7.jpg)
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
![Page 8: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/8.jpg)
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);
![Page 9: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/9.jpg)
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
![Page 10: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/10.jpg)
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);
![Page 11: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/11.jpg)
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"));
![Page 12: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/12.jpg)
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
![Page 13: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/13.jpg)
13
Null Layout
L
![Page 14: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/14.jpg)
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
![Page 15: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/15.jpg)
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
![Page 16: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/16.jpg)
16
The Coordinate System
<0, 0>
<x, y>
<x-1, y-1>
x
y
![Page 17: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/17.jpg)
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)
![Page 18: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/18.jpg)
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); }}
![Page 19: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/19.jpg)
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
![Page 20: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/20.jpg)
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
![Page 21: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/21.jpg)
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…
![Page 22: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/22.jpg)
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);
![Page 23: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/23.jpg)
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
![Page 24: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/24.jpg)
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
![Page 25: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/25.jpg)
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(); } }
![Page 26: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/26.jpg)
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);}
![Page 27: 1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces Most applications have graphical user interfaces (GUIs)](https://reader035.vdocument.in/reader035/viewer/2022062313/56649f505503460f94c72a03/html5/thumbnails/27.jpg)
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); }}