COMP201 Java Programming Part II: GUI Programming

1. COMP201 Java Programming Part II: GUI Programming Topic 8: Basics of Graphics Programming Reading: Chapter 7

2. Outline • Introduction: Ingredients of Swing GUI • Creating a frame (window) • Displaying information in a panel • Displaying texts • 2D shapes • Colors and fonts • Images

3. Introduction: Ingredients of Swing GUI Build GUI with javax.Swing, JDK1.2 Better than java.awt, JDK1.1 • Top-level container: JFrame (Window) in this case • Menu bar (optional) • contentPane: contains all visible components • Intermediate containers to organize various GUI components: JPanels in this case JPanel2 JPanel1 JPanel3

4. Introduction: Ingredients of Swing GUI • To create a swing GUI • Create a top-level container: JFrame • Get contentPane of the top-level container • Create JPanels and add GUI components to the JPanels • Layout the JPanels onto the contentPane. • JPanels can contain • Atomic components such as JButtons and Jlabels (Topic 10) • Custom graphics such as text, shapes, and images (This Topic)

5. Creating a Frame Frame: top-level window, not contained inside another window. Use JFrame class in javax.swing package. What can you do with JFrame: toFront/ toBack - Create a new one - is/ setResizable - get/ setSize - dispose - - get/ setLocation setIconImage - - get/ setTitle - show/hide

6. Object JFrame Window Frame JPanel Creating a Frame Most methods for working with JFrame inherited from superclasses: Ancestor of all GUI objects Component Container JComponent

7. Creating a Frame • java.awt.Component: getLocation, setBounds, setLocation, getSize, setSize, setBackground, setForeground, repaint, …… • java.awt.Window: toFront, toBack, show, hide, …… • java.awt.Frame: dispose, setResizable, setTitle, setIcomImage, ……

8. Creating a Frame • Example: class SimpleFrame extends JFrame { public SimpleFrame() { setSize(WIDTH, HEIGHT); } public static final int WIDTH = 300; public static final int HEIGHT = 200; } Default constructor of JFrame is called. Default size of a JFrame: 0x0

9. Creating a Frame • Things to know about coordinates • Units are expressed pixels (depends on resolution) • Coordinate system is vertically-flipped from Cartesian • (0,0) is upper left corner of screen • Frame defaults to location (0,0) and size (0,0)

10. Creating a Frame import javax.swing.*; public class SimpleFrameTest { public static void main(String[] args) { SimpleFrame frame = newSimpleFrame(); frame.setDefaultCloseOperation (JFrame.EXIT_ON_CLOSE); frame.show(); } } // SimpleFrameTest.java • Create a SimpleFrame. • Show it. JDK1.3 feature

11. Internal Structure of JFrame JFrame JRoot JLayerPane menu bar Button content pane glass pane

12. Instance fields of JRootPane: protected JMenuBar menuBar protected Container contentPane protected JLayeredPane layeredPane • Manages the menu bar and content pane. • Menu bar positioned at top of frame and content pane fills the remaining area protected Component glassPane The glass pane that overlays the menu bar and content pane, so it can intercept mouse movements and such. …..

13. Creating a Frame • Frame Positioning: Want a frame that • Is centered in the middle of the screen • Covers ¼ of the screen (Run CenteredFrameTest.java). • Coordinate system: • Units are expressed in pixels (effects depend on monitor resolution)

14. Creating a Frame • Also need dimension of screen, which is platform dependent • Get system-dependent info using java.awt.Toolkit class: getDefaultToolkit --- static method for creating a Toolkit object getScreenSize --- get size of screen getImage --- load image

15. class CenteredFrame extends JFrame { public CenteredFrame() { // get screen dimensions Toolkit kit = Toolkit.getDefaultToolkit(); Dimension screenSize = kit.getScreenSize(); int screenHeight = screenSize.height; int screenWidth = screenSize.width; // center frame in screen setSize(screenWidth / 2, screenHeight / 2); setLocation(screenWidth / 4, screenHeight / 4); // set frame icon and title Image img = kit.getImage("icon.gif"); setIconImage(img); setTitle("CenteredFrame"); }} //CenteredFrameTest.java

16. Displaying Information in a Frame • An Example: • To create a GUI • Create a top-level container: JFrame • Get contentPane of the top-level container • Create JPanels and add GUI components to the JPanels • Add the JPanels onto the contentPane.

17. Displaying Information in a Frame • How to add JPanel onto the contentPane of JFrame? JPanel p = new JPanel(); Container cPane = frame.getContentPane(); cPane.add(p);

18. Displaying Information in a Frame • How to add custom graphics, in this case a text string, to JPanel? • A JPanel draws its contents by calling its paintComponent method (inherited from JComponent). • We can: • Define a new class that extends JPanel • Override the paintComponent method to draw what we want. Class MyPanel extendsJPanel { public paintComponent(Graphics g) { super.paintComponent(g); // draw background // code for drawing } }

19. Displaying Information in a Frame Method paintComponent is called automatically when opening, resizing, and moving window. Never call it explicitly. Use the repaint method of Component to force repainting.

20. Displaying Information in a Frame • How to tell paintComponent(Graphics g)what and how to draw? • The method takes a java.awt.Graphics object as input. • We encapsulate information about what/how to draw in the Graphics object. • Next: • Displaying texts • Colors and fonts • 2D shapes • Images

21. Example: NotHelloWorld • Step1. Derive a new class NotHelloWorldPanel by extending JPaneland specify what we want to draw on the panel and how. classNotHelloWorldPanel extends JPanel { public voidpaintComponent(Graphics g) { // Draw background super.paintComponent(g); g.drawString("Not a Hello, World program", MESSAGE_X, MESSAGE_Y); } public static final int MESSAGE_X = 75; public static final int MESSAGE_Y = 100; } //NotHelloWorld.java

22. Step2 : Derive a new classNotHelloWorldFrame by extending JFrame, create a NotHelloWorldPanel and add it to the contentPane of the frame. class NotHelloWorldFrame extends JFrame { public NotHelloWorldFrame() { setTitle("NotHelloWorld"); setSize(WIDTH, HEIGHT); // add panel to frame NotHelloWorldPanel panel = new NotHelloWorldPanel(); Container contentPane = getContentPane(); contentPane.add(panel); } public static final int WIDTH = 300; public static final int HEIGHT = 200; } //NotHelloWorld.java

23. Step3 : Create a NotHelloWorldFrame and show it. import javax.swing.*; import java.awt.*; public class NotHelloWorld { public static void main(String[] args) { NotHelloWorldFrame frame = new NotHelloWorldFrame(); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.show(); } }

24. Using Text Fonts • Class java.awt.Font • Create Font objects: Font f1 = new Font(“Serif”, Font.PLAIN, 20); Font f2 = new Font(“Serif”, Font.PLAIN + Font.ITALIC, 16); • Using fonts: Graphics g; g.setFont(f1); g.drawString("Not a Hello, World program", 75, 100);

25. Using Text Fonts • Only 5 font families guaranteed to exist • SansSerif, Serif, Monospaced, Dialog, DialogInput • Can ask for others by name(“Arial”) but may not get what you want • Find out all available fonts on a machine using the getAvailableFontFamilyNames method of the GraphicsEnvironment class. • Style limited to PLAIN, BOLD, ITALIC • Default using plain 12pt SansSerif

26. Using Text Fonts • Class java.awt.FontMetrics Methods for getting information about fonts: NotHelloWorld2.java

27. Using Colors • Class java.awt.Color • Create new color objects: Color c = new Color(100, 25, 200); • Red-green-blue (RGB) color model • Each component can have in range 0 to 255 • 13 predefined color constants Color.black, Color.red, Color.green, etc. • Using Colors: Graphics2D g; g.setPaint(Color.pink); g.drawString(“Hi”, 55, 55); g.setPaint(c); g.drawString(“there”, 80, 55);

28. public void paintComponent(Graphics g) { super.paintComponent(g); setFonts(g); String s1 = "Not a "; String s2 = "Hello, World"; String s3 = " Program"; int w1 = fm.stringWidth(s1); int w2 = fim.stringWidth(s2); int w3 = fm.stringWidth(s3); Dimension d = getSize(); int cx = (d.width - w1 - w2 - w3) / 2; int cy = (d.height - fm.getHeight()) / 2 +fm.getAscent(); g.setFont(f); g.drawString(s1, cx, cy); cx += w1; g.setFont(fi); g.setColor(Color.red); g.drawString(s2, cx, cy); cx += w2; g.setFont(f); g.drawString(s3, cx, cy); }

29. 2D Shapes • You can draw lines, rectangles, ellipses, etc, using class java.awt.Graphics drawLine, drawArc, drawPolygon drawPolyline, drawRect, drawRoundRect, draw3DRect, fillRect, • The subclassjava.awt.Graphics2D is better • Need cast: public void paintComponent(Graphics g) { Graphics2D g2 = (Graphics2D) g; … }

30. 2D Shapes • You can draw by using the methods shown on the previous slides. • It’s better to use the geometric shape classes: java.awt.geom.* Line2D, Rectangle2D, Ellipse2D, Point2D, … • All those classes implement the Shape interface and Graphics2Dhas method draw(Shape s) • All are abstract classes with two concrete static inner classes. E.g. Rectangle2D.Double, Rectangle2D.Float • Usually use the Double version. • The Float version saves space but is troublesome float f = 1.2; //illegal. Need cast: float f = (float) 1.2; See DrawTest.java

31. 2D Shapes: draw rectangles public void paintComponent(Graphics g) { super.paintComponent(g); Graphics2D g2 = (Graphics2D)g; // draw a rectangle double leftX = 100; double topY = 100; double width = 200; double height = 150; Rectangle2D rect = new Rectangle2D.Double(leftX, topY,width, height); g2.draw(rect);

32. 2D Shapes:draw line and circle // draw the enclosed ellipse Ellipse2D ellipse = new Ellipse2D.Double(); ellipse.setFrame(rect); g2.draw(ellipse); // draw a diagonal line g2.draw(new Line2D.Double(leftX, topY, leftX + width, topY + height)); // draw a circle with the same center double centerX = rect.getCenterX(); double centerY = rect.getCenterY(); double radius = 150; Ellipse2D circle = new Ellipse2D.Double(); circle.setFrameFromCenter(centerX, centerY, centerX + radius, centerY + radius); g2.draw(circle);}}

33. Drawing Lines and Shapes • Paint Mode • Default: last drawn shape covers earlier one. • XOR mode: If you draw one shape twice in XOR mode, the second one erases the first one.

34. Displaying Images Java Toolkit objectcan read GIF and JPEG files. Get image from file Image image = Toolkit.getDefaultToolkit().getImage(FileName); Get image from the Net: URL u = new URL(http://www.somehwere/ImageFile); Image image = Toolkit.getDefaultToolkit().getImage(u); Display image: g.drawImage(image, x, y, null);

35. Displaying Images Java spawn a separate thread to load image, which run in parallel with the main thread. Use MediaTracker class to wait until image is completely loaded before drawing public ImagePanel() { image = Toolkit.getDefaultToolkit().getImage ("Cat.gif"); MediaTracker tracker = new MediaTracker(this); tracker.addImage(image, 0); try { tracker.waitForID(0); } catch (InterruptedException e) {} } Example: ImageTest.java

36. Summary • To create a Swing GUI • Create JPanels and add GUI components to the JPanels • Custom graphics: • Override the paintComponent(Graphics g) method • Encapsulate what and how to draw in the graphics object • Predefined GUI components: simply add to the panel (Topic 10) • Hierarchical: Panels can contain other panels • Create a top-level container: JFrame and layout the JPanels onto the contentPane of the container