Graphics

1. Graphics Dr. Tim Margush University of Akron

2. Goals • Understand basic Graphics concepts • To use basic graphics objects (shapes, colors, and text) in a GUI Application setting • Explore the use of coordinate transformations • Obtain user input in a graphical application via a dialog box

3. Frames • A Frame is the container for an application's GUI • GUI = Graphical User Interface • Frame is a class in java.awt providing a title bar and a border • JFrame is a class in javax.swing extending Frame adding support for JFC/Swing components

4. A Frame (JFrame) has properties for its title (passed via constructor or setTitle method) size (width and height) location (default location used, setLocation(x,y) behavior (usually exits application when closed) visibility (starts hidden) JFrame jf = new JFrame("Sample Frame Title"); jf.setSize(200, 300); jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); jf.setVisible(true); Instantiating JFrames

5. Adding Content to JFrames • Graphical content is displayed in the JFrame's content pane • jf.add(someComponent); • Before Java 1.5, use: jf.getContentPane().add(someComponent); • getContentPane() returns a Container object • add(someComponent) adds a Component object to the Container.

6. Graphical Hierarchy Component A small subset of the hierarchy tree Button CheckBox Container JComponent Panel JPanel JScrollPane JOptionPane Applet JApplet

7. Drawing on Components • Use a JComponent for a basic graphics canvas • Graphics commands are executed from the paintComponent method • paintComponent is called by the graphics system when it appears the canvas needs to be refreshed • public void paintComponent(Graphics g); • java.awt.Graphics

8. java.awt.Graphics • The Graphics object represents the canvas where drawing can occur • Methods include • drawArc, drawOval, fillRect, drawPolygon • fillArc, fillOval, fillRect, fillPolygon • drawImage, drawLine • setColor • setFont, drawString

9. java.awt.Graphics2D • A subclass of Graphics adding new and improved methods • public void paintComponent(Graphics g){ • //g is actually a Graphics2D object when • // supplied by a swing component • Graphics2D g2 = (Graphics2D) g; //cast • Graphics2D objects have methods: • draw, drawString, fill, draw3DRect, setPaint, setStroke, setBackground, …

10. Coordinate system Top left is (0,0) X increases to the right Y increases downward (over, down) Methods exist to alter the transform used to specify coordinates and to draw text, shapes, and images Y = 100 units X = 300 units (300,100) Coordinate System (0,0) Increasing X coords 72 dpi Increasing Y coords Click to view animation steps Animation Complete

11. public class NameComponent extends JComponent{ public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D) g; //Add you custom drawing commands here g2.setFont(new Font("SansSerif", Font.ITALIC, 24)); g2.drawString("Java Jerry", 20, 40); } } … jf.add(new NameComponent()); jf.setVisible(true); Customizing a JComponent

12. Drawing Shapes public class NameComponent extends JComponent{ public void paintComponent(Graphics g){ Graphics2D g2 = (Graphics2D) g; //Add you custom drawing commands here g2.setColor(Color.RED); g2.fill(new Rectangle(20, 50, 100, 30)); g2.setColor(Color.BLUE); g2.draw(new Rectangle(10, 75, 25, 100)); } }

13. Applet • Java program that executes inside a client window (browser) • Has a Graphical Interface • Is limited in power by local security settings • Applets are embedded in HTML documents • Browser loads page • Applet tag in page causes browser to load and run the applet <applet code="MyApplet.class" width="200" height="100"></applet>

14. Building a JApplet • Define a class that extends JApplet • Inherit all of the properties and methods of the JApplet class (java.applet.Applet and javax.swing.JApplet) • Defines interface between browser and your program • Customize the inherited behavior • Add a Graphics container for your custom use • Override key methods • Add appropriate properties

15. A Simple Applet public class MyApplet extends javax.swing.JApplet{ public void init(){ add(new NameComponent()); } } • The init method (not the constructor) is used to setup the JApplet contents • Add a component with your custom drawing commands (via its paintComponent method) • Swing JApplets do not use the paint method found in older style awtApplets

16. Create an awt.Font object to control the text appearance Font(String fontName, int style, int size); Use Graphics.setFont to establish font settings void setFont(awt.Font); Use Graphics.setColor to specify drawing color void setColor(awt.Color); Use Graphics2D.drawString to display text void drawString(String str, int x, int y); (x, y) is location of left edge of first characters baseline Text Related Objects and Methods

17. Text Rendering Example • Font f1= new Font("Courier", Font.BOLD, 32); • g2.setFont(f1); • g2.drawString("Red Rover", 0, 32); • g2.setColor(Color.RED); • g2.setFont(new Font("Serif", Font.ITALIC, 20)); • g2.drawString("Font with Serifs", 50, 100); (0,32) (50,100)

18. (20, 60) h = 100 units w = 300 units Shapes • Use java.awt.geom classes to create basic shapes • Rectangle2D.Double(double x, double y, double w, double h) • Ellipse2D.Double(double x, double y, double w, double h) • Point2D.Double(double x, double y) • Line2D.Double(double x1, double y1, double x2, double y2) • Line2D.Double(Point2D a, Point2D b) • Use the Graphics2D setStroke method and BasicStroke object to control line weight • g2.setStroke(new BasicStroke(3.F)); • Draw the shape • g2.draw(new Ellipse2D.Double(20, 60, 300, 100));

19. Creating Shape Classes • Use a bounding box approach • Constructor specifies x, y, and perhaps a scaling factor • public someshape(int x, int y, double scale); • Provide a draw method that accepts a Graphic2D object as the canvas to draw on • public void draw(Graphics2D g2){//details • Use drawing capabilities to draw shape on g2 • g2.translate(x,y); //translate origin to (x,y) • g2.draw(new Rectangle2D.Double(… • g2.translate(-x, -y); //restore original coords

20. Bird b1 = new Bird(100, 100, 10); Bird b2 = new Bird(100, 100, 20); b1.draw(g2); g2.setColor(Color.red); b2.draw(g2); Sample Shape Class public Bird(double x, double y, double scale){ left=x; top = y; sf = scale; //instance variables } public void draw(Graphics 2D g2){ Stroke save_stroke=g2.getStroke(); Color save_color=g2.getColor(); g2.translate(left, top); g2.setStroke(new BasicStroke(1f); g2.draw(new Ellipse2D.Double(1*sf, 0*sf, 2*sf, 2*sf)); g2.draw(new Ellipse2D.Double(2*sf, 1*sf, 5*sf, 3*sf)); g2.setStroke(new BasicStroke(6f); Etc. g2.setStroke(save_stroke); //restore original settings g2.setColor(save_color); g2.translate(-left,-top); } Click to view animation steps Animation Complete

21. Text Input • There are two basic methods of accepting text input in a graphical application • Provide an input widget in the app's GUI • This is a bit more advanced • Pop up a dialog to accept user input • JOptionPane makes this quite easy! String response = javax.swing.JOptionPane.showInputDialog("Prompt"); Click to view animation steps Animation Complete

22. jOptionPane.showInputDialog • showInputDialog is a static method • It requires at least one argument, the prompt for information • A second (optional) argument specifies a default or initial value for the response • The dialog is modal (blocking) • Returns null if Cancel button clicked • Do not call from the paintComponent method • Call from the JComponent's constructor (if in an application) and store responses in instance variables • Using this in a JApplet really requires some more advanced knowledge about threads, however, for experimenting, the above technique will still work

23. Summary • A JFrame is the basic container for GUI applications • A browser or other client is the container for a JApplet • Applets are classes that extend the swing class, JApplet • JApplet and JFrame objects have a content pane • Use the add method to place a component in the container's content pane • JComponents provide a graphics environment that can be embedded in a JFrame or JApplet

24. Summary (2) • The Graphics2D class provides an object-oriented approach to drawing shapes via the draw method • The drawString method allows text to be displayed as a graphic element • Colors and Fonts are controlled using Graphics methods • setColor, setFont (Font and Color objects are also used) • The JOptionPane class provides a simple way to input text in a GUI context • Use the static showInputDialog method