Lecture 4: Standard Java Graphics Spring 2017 Guest Lecture: Alexandra Papoutsaki

Java Graphics For details, see document on course web page associated with lecture. Also see GUI cheat sheet in documentation and handouts section.

Overview Graphical User Interfaces (GUI) Graphics Events JFrame (window), JPanel (grouping) JButton, JTextField, JSlider, JChooser, … Graphics Drawing items on the screen Events Generated by mouse actions, button clicks etc. Use MouseListener, MouseMotionListener, ActionListener, etc. to respond

Graphical User Interfaces (GUIs) AWT - The Abstract Windowing Toolkit is found in the package java.awt. Heavyweight components. Implemented with native native code written for that particular computer. The AWT library was written in six weeks! Swing – Java 1.2 extended AWT with the javax.swing package. Lightweight components Written in Java Graphical user interface is a type of user interface that allows users to interact with electronic devices through graphical icons instead of text-based user interfaces such CLIs. Java has two main packages that you can use to create graphical user interfaces. The first is called AWT, it stands for Abstract Windowing Toolkit and you can found it in java.awt. We say that AWT is a heavyweight toolkit because it uses OS’s API to draw the widgets and is written with native code of that particular computer. That makes it not uniform across platforms and not very fast. Swing extended Java 1.2, it is a mature toolkit that is lightweight, that means that it paints it's own widgets.

JFrame javax.swing.JFrame inherits from java.awt.Frame The outermost container in an application. To display a window in Java: create a JFrame set the size set the location set it visible So we’ll start with the notion of a Jframe which is window with a title bar, a resizable border, and possibly a menu bar. Potentially add JFrame contains a JRootPane, which is where all of the components are added › The JRootPane is shared among all container objects to support good OO design › When components are added to a JFrame, they are actually added to the content pane (JRootPane) › There are other sections in a JFrame outside of the JRootPane, such as the location for a JMenuBar

import javax.swing.JFrame; public class MyFirstGUI extends JFrame{ public MyFirstGUI() { super("First Frame"); setSize(500, 300); setLocation(100, 100); setVisible(true); } public static void main(String[] args) { MyFirstGUI mfgui = new MyFirstGUI(); Ask about differences between extending and implements. Super. Ask a user to help you read. Compile code in eclipse. Play with location, size, visibility.

Assume 1440x900 screen resolution Screen Location (0,0) (1440,0) Increasing X Assume 1440x900 screen resolution Increasing Y (1440,900) (0,900)

import javax. swing. JFrame; import java. awt. Dimension; import java import javax.swing.JFrame; import java.awt.Dimension; import java.awt.Toolkit; public class MySecondGUI extends JFrame{ public MySecondGUI() { super(”Second Frame"); setSize(500, 300); Toolkit toolkit = getToolkit(); Dimension size = toolkit.getScreenSize(); setLocation(size.width/2 - getWidth()/2, size.height/2 - getHeight()/2); setVisible(true); } Change location of the window within the screen.

Closing a GUI The default operation of the quit button is to set the visibility to false The program does not terminate! setDefaultCloseOperation can be used to control this behavior. mfgui.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Exits the application using System.exit(0) More options (hide, do nothing, etc). Add that in my first gui

Basic Controls

Interactive Displays

Graphics Create objects you want to draw: Rectangle2D.Double, Line.Double, etc. Constructors take x,y coords and dimensions, but don’t actually draw items. All drawing takes place in paint method using a “graphics context” Triggered implicitly by uncovering window or explicitly by calling repaint method. Adds repaint event to event queue — eventually draws it Graphics context It's an object you can use to draw graphics primitives on a SWING/AWT program.

Graphics context All drawing is done in “paint” method of component public void paint(Graphics g) g is a Graphics context provided by system “pen” that does the drawing Programmer calls repaint(), not paint!! Need to import classes from java.awt.*, java.awt.geom.*, javax.swing.* See MyGraphicsDemo The classes defined below are found in packages java.awt and java.awt.geom. Thus you will need to include statements to import java.awt.* and java.awt.geom.*. paint(g) is called automatically when a window is created or uncovered in a window. It can also be forced to execute by sending a repaint() message to a component. That method schedules a call to an update(g)method as soon as possible. The inherited update(g) method erases the component and then calls paint(g). The Graphics object g for the component is automatically provided by the system. The user overrides paint(g) to actually draw something on the component. All drawing commands are either in this method or in a method called from paint. The Graphics object should be thought of like a pen that is responsible for doing the actual drawing. The newer Java graphics actually use a class called Graphics2D, which extends Graphics, and that is the one actually passed to the paint method. Unfortunately, for compatibility with old code, the parameter type is still Graphics. To use the newer method described below, you must begin by casting the graphics context to Graphics2D: A graphics context provides the capabilities of drawing on the screen. The graphics context maintains states such as the color and font used in drawing, as well as interacting with the underlying operating system to perform the drawing. In Java, custom painting is done via the java.awt.Graphics class, which manages a graphics context, and provides a set of device-independent methods for drawing texts, figures and images on the screen on different platforms.

General Graphics Applications Create an extension of component (either JPanel, JFrame, or JApplet) and implement paint method in the subclass. See main method of demo to get window to show At start of paint method cast g to Graphics2D to get access to new methods Call repaint() on component every time you make a change. Causes OS to schedule call of paint in event queue Called automatically if window obscured and revealed

Geometric Objects Objects from classes Rectangle2D.Double, Line2D.Double, etc. from java.awt.geom There are also float versions Constructors take params x, y, width, height, but don’t draw object Rectangle2D.Double RoundRectangle2D.Double Ellipse2D.Double Arc2D.Double Line2D.Double, …

java.awt.Color

Methods myObj.setFrame(x,y,width,height) can move object g2.draw(myObj) -- gives outline g2.fill(myObj) -- gives filled version g2.drawString(“a string”,x,y) draws string

MyGraphicsDemo Class extends JFrame, which creates window. Constructor calls super with title of window. main method creates object, sets size, visibility, and enables go-away box. paint method creates and draws objects.

PostItApplication More sophisticated. JFrame contains two JPanels. JFrame uses BorderLayout, so add controls to JPanel in SOUTH, drawing canvas in CENTER of the JFrame. DrawingCanvas extends JPanel -- contains paint method Note use of ArrayList to hold PostIts.

BorderLayout An invisible Container used to hold components or to draw on.