Graphics

1. Graphics

2. Objectives • Learn about the types of Graphics that are available • Develop a basic Graphics applet • Develop a basic Graphics application • Review the Java API and use it to enhance the previous projects • (You won’t be learning the cutting-edge graphics for games, just the basics.)

3. Vocabulary • Here are some terms that you’ll encounter in your lesson on graphics: • AWT • Swing • Applet/JApplet • Graphics object • init() • GUI

4. Can Java do graphics? • Graphics can be simple or complex, but they are just data like a text document or sound. • Java is very good at graphics, especially for the web and small devices like phones.

5. Java Graphics • Java can write applications or applets, as you know by now. • It can make graphics in either one, and has two libraries to do it with: • Swing (the newer kind) or AWT (Abstract Windowing Toolkit, the older kind).

6. Java Graphics • To start, here’s a basic applet that demonstrates Java graphics using AWT: • import java.awt.*; • import java.applet.Applet; • public class BasicGraphics extends Applet { • public void paint(Graphics g) { • g.setColor(Color.red); • g.fillRect(10, 20, 40, 40); • } // end paint() • } // end class BasicGraphics Try to compile this code and run it as an applet. What do you see?

7. Java Graphics - The Core • import java.awt.*; • import java.applet.Applet; • public class BasicGraphics extends Applet { • public void paint(Graphics g) { • g.setColor(Color.red); • g.fillRect(10, 20, 40, 40); • } // end paint() • } // end class BasicGraphics The first lines are import statements, to load the AWT and Applet libraries. If you were making a Swing version, you would load Swing libraries.

8. Java Graphics - The Core • import java.awt.*; • import java.applet.Applet; • public class BasicGraphics extends Applet { • public void paint(Graphics g) { • g.setColor(Color.red); • g.fillRect(10, 20, 40, 40); • } // end paint() • } // end class BasicGraphics Our class is called BasicGraphics, and it extends Applet to inherit Applet properties.

9. Java Graphics - The Core • import java.awt.*; • import java.applet.Applet; • public class BasicGraphics extends Applet { • public void paint(Graphics g) { • g.setColor(Color.red); • g.fillRect(10, 20, 40, 40); • } // end paint() • } // end class BasicGraphics Inside the applet, we have just one method: paint() (Remember from Applets that other methods are optional.) It has one parameter, called the “abstract Graphics object”, and we call it “g”. Get used to this, you need to tell paint() what to paint on!

10. Java Graphics - The Core • import java.awt.*; • import java.applet.Applet; • public class BasicGraphics extends Applet { • public void paint(Graphics g) { • g.setColor(Color.red); • g.fillRect(10, 20, 40, 40); • } // end paint() • } // end class BasicGraphics paint() has two methods inside of it: setColor and fillRect g.setColor(Color.red); is the command to color whatever graphic “thing” we have “red”. The computer still doesn’t know what Graphic “thing” g is going to be!

11. Java Graphics - The Core • import java.awt.*; • import java.applet.Applet; • public class BasicGraphics extends Applet { • public void paint(Graphics g) { • g.setColor(Color.red); • g.fillRect(10, 20, 40, 40); • } // end paint() • } // end class BasicGraphics g.fillRect(10, 20, 40, 40) tells the applet to make g into a “fillRect”, which is a “filled rectangle”. 10 is the starting x-position in the applet, 20 is the starting y-position in the applet 40 is the width and the other 40 is the height. Remember what color will fill it? Red!

12. Java Reverse Geometry 0,0 By they way, a computer screen has reverse geometry, kind of. It’s still (x, y), but the “origin” is the upper left corner. Then you add to the right and/or down. The box on the left demonstrates how you would measure an 800x600 screen. “X” is at about (400, 100). 800,0 X 0,600 800,600

13. Java Graphics API How do you remember all of this stuff? You don’t! All of this is listed in the Java API. To see the methods that you can use on “g”, our Graphics object, look at this link: http://java.sun.com/j2se/1.5.0/docs/api/java/awt/Graphics.html#method_summary Want to see a simple edit? Change g.fillRect to g.fillOval in your program. You can do whatever changes you want, just find it in the API and make sure your parameters are filled in correctly!

14. Java - Swing What would that applet look like if we used Swing instead of the old AWT? import javax.swing.*; import java.awt.*; public class BasicSwingGraphics extends javax.swing.JApplet { public void paint(Graphics g) { /* Draw the square. */ g.setColor(Color.red); g.fillOval(10, 20, 40, 40); } // end paint() } // end class BasicSwingGraphics

15. Java Graphics - Why two? Why is there a Swing and an AWT? AWT was the original graphics library for Java. However, all programs looked like their “host”. That is, when they ran on a Mac, they looked like Mac programs, and when they ran on Windows, they looked like Windows programs. Programmers wanted to force the “look and feel”, so they built Swing on top of AWT. Yes, Swing includes all of AWT. AWT is still seen as better for applets, but that’s fading due to AJAX, another web programming technique.

16. Java Swing Application Applets need a web page to run, but applications can run on their own. Now we’ll take a look at an application written in Swing!

17. Java Swing Application import javax.swing.*; public class SimpleFrame extends JFrame{       public SimpleFrame()       {              setBounds(50,100,400,150);              setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);              setVisible(true);              setTitle("This is a test frame!");       }       public static void main(String[] args)       {              new SimpleFrame();       }} //from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html First, we import the Swing libraries (notice it’s javax.swing) to support our work.

18. Java Swing Application Then, we begin our class. We don’t extend Applet, we extend JFrame, because applications use them to hold graphics. import javax.swing.*; public class SimpleFrame extends JFrame{       public SimpleFrame()       {              setBounds(50,100,400,150);              setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);              setVisible(true);              setTitle("This is a test frame!");       }       public static void main(String[] args)       {              new SimpleFrame();       }} //from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html

19. Java Swing Application import javax.swing.*; public class SimpleFrame extends JFrame{       public SimpleFrame()       {setBounds(50,100,400,150);              setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);              setVisible(true);              setTitle("This is a test frame!");       }       public static void main(String[] args)       {              new SimpleFrame();       }} //from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html • The class constructor creates: • location and size of the frame

20. Java Swing Application import javax.swing.*; public class SimpleFrame extends JFrame{       public SimpleFrame()       {              setBounds(50,100,400,150);setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);              setVisible(true);              setTitle("This is a test frame!");       }       public static void main(String[] args)       {              new SimpleFrame();       }} //from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html • The class constructor creates: • the way it closes (this one is that little “X” box on the top right

21. Java Swing Application import javax.swing.*; public class SimpleFrame extends JFrame{       public SimpleFrame()       {              setBounds(50,100,400,150);              setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);setVisible(true);              setTitle("This is a test frame!");       }       public static void main(String[] args)       {              new SimpleFrame();       }} //from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html • The class constructor creates: • visibility (you can see it) • title (the blue bar on top)

22. Java Swing Application import javax.swing.*; public class SimpleFrame extends JFrame{       public SimpleFrame()       {              setBounds(50,100,400,150);              setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);              setVisible(true);              setTitle("This is a test frame!");       }      public static void main(String[] args)       {              new SimpleFrame();       }} //from http://cs.guc.edu.eg/courses/onlinetutorial/gui.html Finally, we have a main method to create the frame! Compile and run it!

23. Java - Next Steps Now you’re an expert on Java Graphics – NOT!!! However, you did create your first “Graphical User Interface”, or GUI (pronounced “gooey”, like something on your shoe at the movies). It’s a vast subject, but plenty of free resources. See more at: http://java.com – examples of Java game and cellphone graphics http://java.sun.com/docs/books/tutorial/uiswing/index.html - The beginner’s tutorial book to Swing graphics And search the web for other examples. Don’t forget the API!

24. Java - Assignments Now try the “Graphics Lab”. You’ll build on the applets you saw in this lesson.