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 1 st  There are many layout managerslayout 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 4 th GridLayout spot

13 Null Layout L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 // 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 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 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 4 th 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 gif 1. 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 needs 6 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 public 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); }