GUIs, Layout, Drawing

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.swingpackage 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 • importjavax.swing.JFrame; • publicclassShowSomeLayoutsextends JFrame { • publicstaticvoid main(String[] args) { • // Construct an object that has all the methods of JFrame • JFrame aWindow = newShowSomeLayouts(); • aWindow.setVisible(true); • } • // Set up the GUI • publicFirstGUI() { • // 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 • JButtonclickMeButton = • newJButton("Nobody is listening to me"); • JLabelaLabel = • newJLabel("Button above, text field below"); • JTextFieldtextEditor = • newJTextField("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 1st • There are many layout managers

10. FlowLayout • You can change the default layout strategy with a setLayout message • setSize(600, 200); • setLocation(200, 200); • setLayout(newFlowLayout()); // Change layout Strategy • add(clickMeButton); • add(textEditor); • add(aLabel);

11. GridLayout • Use this for evenly spaced layouts public GridLayout(int rows, int cols, inthgap, intvgap) • setLayout(newGridLayout(2, 2, 4, 4)); • add(clickMeButton); • add(textEditor); • add(aLabel); • add (newJButton("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(newJButton("Add")); • buttonPanel.add(newJButton("Remove")); • buttonPanel.add(newJButton("Quit")); • add(buttonPanel); // Add to the 4thGridLayout spot

13. Null Layout • 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 <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

16. <0, 0> x y <x, y> <x-1, y-1> The Coordinate System

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 • importjava.awt.*; • publicclassDrawingPanelextendsjavax.swing.JPanel { • // Override the paintComponent method in JPanel • @Override • publicvoidpaintComponent(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'sGraphics 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(newGridLayout(2, 2, 4, 4)); • add(clickMeButton); • add(textEditor); • add(aLabel); • add(newDrawingPanel()); // Adds a Panel to the 4th 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 methodthat 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 • Extend JPanel • Declare Image instance variables in that class • Let the constructor initialize the images • OveridepaintComponent • get a Graphics2D object named g2 perhaps • send drawImage messages to g2

25. Example code that needs6 jpg files in images • publicclassCardsOnTheWaterextends JPanel { • private Image ocean, card1, card2, card3, card4, card5; • publicCardsOnTheWater() { • 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 redrawn • @Override • publicvoid 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 • importjavax.swing.JFrame; • importjavax.swing.JPanel; • publicclassDrawCardsOnWaterMainextends JFrame { • publicstaticvoid main(String[] args) { • newDrawCardsOnWaterMain().setVisible(true); • } • publicDrawCardsOnWaterMain() { • setSize(250, 250); • setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); • JPanel panel = newCardsOnTheWater(); • add(panel); • } • }