GUIs Layout Drawing Rick Mercer 1 EventDriven Programming

GUIs, Layout, Drawing Rick Mercer 1

Event-Driven Programming with Graphical user Interfaces w Most applications have graphical user interfaces (GUIs) to respond to user desires 2

A Few Graphical Components w A Graphical User Interface (GUI) presents a graphical view of an application to users. w 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, . . . w Let's first consider some of Java's GUI components: — windows, buttons, and text fields 3

Classes in the swing package w 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 JText. Field: Allows editing of a single line of text 4

Get a window to show itself import javax. swing. JFrame; public class Show. Some. Layouts extends JFrame { public static void main(String[] args) { // Construct an object that has all the methods of JFrame a. Window = new Show. Some. Layouts(); a. Window. set. Visible(true); } // Set up the GUI public Show. Some. Layouts() { // Make sure the program terminates when window closes this. set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); // … more to come … } } 5

Some JFrame messages w Set the size and locations of the window with set. Size(400, 200); set. Location(200, 200); — — The first int is the width of the window in pixels the second int is the height of the window in pixels 6

Building components w So far we have an empty window w Let us add a button, a label, and an editable line w First construct three graphical components JButton click. Me. Button = new JButton("Nobody is listening to me"); JLabel a. Label = new JLabel("Button above, text field below"); JText. Field text. Editor = new JText. Field("You can edit this text "); w Next, add these objects to a JFrame 7

Add components to a window w Could use the default Border. Layout and add components to one of the five areas of a Jframe add(click. Me. Button, Border. Layout. NORTH); add(text. Editor, Border. Layout. CENTER); add(a. Label, Border. Layout. SOUTH); 8

The 5 areas of Border. Layout w By default, JFrame objects have only five places where you can add components — a 2 nd add wipes out the 1 st Very old w There are many layout strategies 9

Flow. Layout w You can change the default layout strategy with a set. Layout message set. Layout(new Flow. Layout()); // Change layout Strategy add(click. Me. Button); add(text. Editor); add(a. Label); 10

Grid. Layout w Use this for evenly spaced layouts public Grid. Layout(int rows, int cols, int hgap, int vgap) set. Layout(new Grid. Layout(2, 2, 4, 4)); add(click. Me. Button); add(text. Editor); add(a. Label); add (new JButton("Fourth component")); 11

JPanel Objects w Layout is made much easier using Jpanels — JPanel can hold several things, treated as one JPanel button. Panel = new JPanel(); // Default layout strategy for JPanels is Flow. Layout button. Panel. add(new JButton("Add")); button. Panel. add(new JButton("Remove")); button. Panel. add(new JButton("Quit")); button. Panel. set. Background(Color. RED); add(button. Panel, Border. Layout. NORTH); 12

Null Layout w Easiest way to locate components w Explicitly state where each component goes w Must use set. Size and location before adding w And set the layout of the JFrame or any JPanel to null this. set. Layout(null); click. Me. Button. set. Size(200, 25); click. Me. Button. set. Location(150, 5); this. add(click. Me. Button); 13

Also set JPanels to a null layout JPanel panel = new JPanel(); panel. set. Background(Color. PINK); panel. set. Size(225, 80); panel. set. Location(100, 80); panel. set. Layout(null); JLabel label = new JLabel("Label 1 (120, 55)"); label. set. Size(120, 55); label. set. Location(80, 35); panel. add(label); this. add(panel); 14

Drawing with a Graphics Object w The use of graphics is common among modern software systems w 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 3 D rendering 15

The Coordinate System w A simple two-dimensional coordinate system exists for each graphics context or drawing surface w Each point on the coordinate system represents 1 pixel w 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 g 2. draw. String("is in Panel 1", 20, 40); w A drawing surface has a width and height w Anything drawn outside of that area is not visible 16

The Coordinate System <0, 0> x y <x, y> <x-1, y-1> 17

Draw on a JPanel w Need to extend a class that extends JComponent — JPanel is good w To draw things: extend JPanel — override paint. Component — panel surface is transparent: send drawing messages inside paint. Component to the graphic context — • Use an improved Graphics 2 D object (g 2) 18

Put something in a JPanel w Create a JPanel class that draws a few strings import java. awt. *; public class Drawing. Panel extends javax. swing. JPanel { // Override the paint. Component method in JPanel @Override public void paint. Component(Graphics g) { Graphics 2 D g 2 = (Graphics 2 D)g; // Use improved Graphics 2 D g 2. draw. String("Draw in the graphics context g 2", 20); g 2. draw. String("that is in a instance of JPanel", 20, 40); g 2. draw. String("which will be added to a JFrame", 20, 60); } } 19

The Graphics Object w paint. Component'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 w The actual object passed to every JPanel is a Graphics 2 D, so you can cast to Graphics 2 D w Never send paintcomponent messages — send repaint() messages instead 20

Add the JPanel to a JFrame set. Layout(new Grid. Layout(2, 2, 4, 4)); add(click. Me. Button); add(text. Editor); add(a. Label); add(new Drawing. Panel()); 21

Drawing an Image w Java’s Image class in java. awt abstracts a bitmap image for use in drawing. w Images can be drawn on a panel w But first… 22

How do we load an image? contains a method that returns an image from a file on your disk w java. awt Image img = Image. IO. read(new File("file. Name")); w Once we have an image and a graphics object to draw on, we can render that image // 'g 2' is a Graphics context object and img // is an initialized Image. 12 is x, 24 is y (location) g. draw. Image(img, 12, 24, null); 23

Drawing Our Image w This code would draw img at the coordinates (12, 24) on the panel w The final ‘this’ is for an Image. Observer object, which we won’t be using 24

Summary w To draw a png, jpg, or gif 1. 2. 3. 4. 5. 6. Extend JPanel Declare Image instance variables in that class Let the constructor initialize the images Overide paint. Component get a Graphics 2 D object named g 2 perhaps send draw. Image messages to g 2 25

Example code that needs 6 jpg files in images public class Cards. On. The. Water extends JPanel { private Image ocean, card 1, card 2, card 3, card 4, card 5; public Cards. On. The. Water() { } try { ocean = Image. IO. read(new card 1 = Image. IO. read(new card 2 = Image. IO. read(new card 3 = Image. IO. read(new card 4 = Image. IO. read(new card 5 = Image. IO. read(new } catch (IOException e) { e. print. Stack. Trace(); } File("images/ocean. jpg")); File("images/14 h. jpg")); File("images/13 h. jpg")); File("images/12 h. jpg")); File("images/11 h. jpg")); File("images/10 h. jpg")); 26

This method is called when the panel needs to be redrawn @Override public void paint. Component(Graphics g) { Graphics 2 D g 2 = (Graphics 2 D) g; g 2. draw. Image(ocean, 0, 0, this); g 2. draw. Image(card 1, 10, this); g 2. draw. Image(card 2, 30, 15, this); g 2. draw. Image(card 3, 50, 20, this); g 2. draw. Image(card 4, 70, 25, this); g 2. draw. Image(card 5, 90, 30, this); } 27

Still need to Add JPanel to a JFrame import javax. swing. JFrame; import javax. swing. JPanel; public class Draw. Cards. On. Water. Main extends JFrame { public static void main(String[] args) { new Draw. Cards. On. Water. Main(). set. Visible(true); } public Draw. Cards. On. Water. Main() { set. Size(250, 250); set. Default. Close. Operation(JFrame. EXIT_ON_CLOSE); JPanel panel = new Cards. On. The. Water(); add(panel); } } 28