Getting Started with Graphics Programming

1. Getting Started with Graphics Programming • Graphics Class Hierarchy • Frames • Creating frames, centering frames, adding components to frames • Layout Managers • FlowLayout, GridLayout, BorderLayout • Drawing on Panels • ThepaintComponent()method • Using Colors • Drawing Geometric Figures • Lines, Rectangles, Ovals, Arcs, and Polygons

2. Getting Started with Graphics Programming • Graphics Class Hierarchy • Frames • Layout Managers • Drawing on Panels • Using Colors • Drawing Geometric Figures

3. Graphical User Interface (GUI) • AWT - Abstract Windowing Toolkit import java.awt.*; (Heavyweight) AWT components are automatically mapped to the platform-specific components. • SWING - GUI for Java (since Version 1.2) import javax.swing.*; (Lightweight) Swing components are painted directly on canvas using Java code (excepts for the components that are subclasses of java.awt.Window and java.awt.Panel). Swing components are less dependent on platform and use less of the native GUI resources.

4. GUI Concepts • Component: This is superclass of all user interface classes (Buttons, Text Boxes, Labels, Menus, Lists, etc). • Container: This is to group components. Frames, panels and applets are examples of containers. • Panel: This is invisible container that holds UI components. Panels can be nested. JPanel can be used as a canvas to draw graphics. • Layout Manager: A manager is used to position and place components in a container. • Graphics: This is an abstract class that provides a graphical context for drawing shapes and strings.

5. GUI Concepts, cont. • JComponent: This is superclass for all the lightweight Swing components. Its subclasses (JLabel,JList, JButton,JMenu, etc.) are the basic elements for constructing the GUI. • Color: This class deals with the colors of graphics components. • Font: This is used for string drawing in Graphics. You can specify font type (SansSerif), style (Bold), and size (24 points). • Event Handling:How to respond to events such as mouse clicks, button clicks, keyboard input, frame events.

6. Java Class Hierarchy javax.swing starts with J Object Component Window Container Panel JPanel Frame JComponent ... JFrame JLabel JCheckBox JButton

7. JComponent

8. Frames • Frame is a window that is not contained inside another window. • Frame is the basis to contain other user interface components in Java graphical applications. • The Frame class can be used to create windows.

9. UI Components

10. Creating Frames • import javax.swing.*; • public class MyFrame { • public static void main(String[] args) { • JFrame frame = new JFrame("Test Frame"); • frame.setSize(400,300); • frame.setVisible(true); • frame.setDefaultCloseOperation( • JFrame.EXIT_ON_CLOSE); • } • }

11. Centering Frames • By default, a frame is displayed in the upper-left corner of the screen. • To display a frame at a specified location, use the setLocation(x,y) method in the JFrame class. This method places the upper-left corner of a frame at location (x,y).

12. Centering Frames, cont.

13. Centering Frames • import javax.swing.*; • public class MyFrame { • public static void main(String[] args) { • JFrame frame = new JFrame("Test Frame"); • frame.setVisible(true); • frame.setDefaultCloseOperation( • JFrame.EXIT_ON_CLOSE); • frame.setSize(400,300); • Dimension frameSize = frame.getSize(); • Dimension screenSize = • Toolkit.getDefaultToolkit().getScreenSize(); • int x = (screenSize.width - frameSize.width)/2; • int y = (screenSize.height - frameSize.height)/2; • frame.setLocation(x,y); • } • }

14. Adding Button into a Frame • The button is always centered in the frame and occupies the entire frame no matter how you resize the frame. • This is because components are put in the frame by the contentpane’s layout manager, and the default layout manager for the content pane places the button in the center. • For some functions, such as adding a JComponent, you cannot use JFrame.add, but instead you must first get the associated Container object of the JFrame , ContentPane, with JFrame.getContentPane(), and add to that.

15. Adding Button into a Frame JFrame frame = new JFrame(); frame.setTitle("Test JButton"); Container cp = frame.getContentPane(); JButton button = new JButton("OK"); cp.add(button);

16. Layout Managers • Java’s layout managers provide a level of abstraction to automatically map your user interface on all windowing systems. • The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container.

17. Kinds of Layout Managers • FlowLayout • GridLayout • BorderLayout • GridBagLayout • CardLayout

18. Kinds of Layout Managers CardLayout ... later

19. The FlowLayout Manager • The FlowLayout is the simplest layout manager. • The components are arranged in the container from left to right in the order in which they were added. • When one row becomes filled, a new row is started. • Default layout for panels. • Can be centered, left or right: FlowLayout.LEFT, FlowLayout.CENTER, or FlowLayout.RIGHT.

20. Flow Layout: examples

21. FlowLayout Constructors • public FlowLayout(int align, int hGap, int vGap) Constructs a new FlowLayout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances inpixel between components. • public FlowLayout(int alignment) Constructs a new FlowLayout with a specified alignment and a default gap of five pixels for both horizontal and vertical. • public FlowLayout() Constructs a new FlowLayout with a default center alignment and a default gap of five pixels for both horizontal and vertical.

22. FlowLayout: Example • import javax.swing.*; • import java.awt.*; • public class MyFrame • { • public MyFrame() • { • Container container = getContentPane(); • container.setLayout(new FlowLayout()); • for(int i=1; i <= 10; i++) • container.add(new JButton(“Component”+i)); • } • public static void main(String[] args) { • MyFrame frame = new MyFrame(); • frame.setTitle(“Test FlowLayout”); • frame.setDefaultCloseOperation( • JFrame.EXIT_ON_CLOSE); • frame.setSize(200,200); • frame.setVisible(true); • } • }

23. FlowLayout: Example • Container container = getContentPane(); • container.setLayout(new FlowLayout());

24. The GridLayout Manager • The GridLayout manager arranges componentsin a grid (matrix) formation with the number ofrows and columns defined by the constructor. • The components are placed in the grid from left to right starting with the first row, then the second, and so on.

25. GridLayout Constructors • public GridLayout(int rows, int columns) Constructs a new GridLayout with the specified number of rows and columns. • public GridLayout(int rows, int columns, int hGap, int vGap) Constructs a new GridLayout with the specified number of rows and columns, along with specified horizontal and vertical gaps between components.

26. Border Layout • Screen is divided into 5 areas: Centre, North, South, East, West. • Centre area is greediest (will take as much space as possible). • Others will try to paint at least to their preferred size. • All components will try to maximise themselves. • Most useful one for laying out of main frame.

27. The BorderLayout Manager The BorderLayout manager divides the window into five areas: East, South, West, North, and Center. Components are added to a BorderLayout by using method add(Component, constraint); whereconstraintis BorderLayout.East, BorderLayout.South, BorderLayout.West, BorderLayout.North, or BorderLayout.Center.

28. Example • public MyFrame() • { • Container container = getContentPane(); • container.setLayout(new BorderLayout(5,10)); • container.add(new JButton(“East”, • BorderLayout.East); • container.add(new JButton(“South”, • BorderLayout.South); • container.add(new JButton(“West”, • BorderLayout.West); • container.add(new JButton(“Center”, • BorderLayout.Center); • container.add(new JButton(“Center”, • BorderLayout.North); • }

29. The BorderLayout Manager

30. Using Panels as Containers • Panels act as smaller containers for grouping user interface components. • It is recommended that you place the user interface components in panels and place the panels in a frame. • You can also place panels in a panel.

31. Border Layout Nested

32. Example: Microwave oven This example uses panels to organize components. The program creates a user interface for a microwave oven.

33. Example: Two Panels JPanel p1 = new JPanel(); p1.setLayout(new GridLayout(4,3)); for(i=1; i<=9; i++) { p1.add(new JButton(“ ”+i)); } p1.add(new JButton(“ 0”)); p1.add(new JButton(“Start”)); p1.add(new JButton(“Stop”)); // JPanel p2 = new JPanel(); p2.setLayout(new BorderLayout()); p2.add(new JTextField(“Time to be displayed here”), BorderLayout.NORTH); p2.add(p1,BorderLayout.CENTER);

34. Example: Add Panels Container container = getContentPane(); container.setLayout(new BorderLayout()); container.add(p2, BorderLayout.EAST); container.add(new Button(“Food to be placed here”), BorderLayout.CENTER);

35. Drawing on Panels • JPanel can be used to draw graphics (including text) and enable user interaction. • To draw in a panel, you create a new class that extends JPanel and override the paintComponent() method to tell the panel how to draw things. • You can then display strings, draw geometric shapes, and view images on the panel.

36. The Color Class Color c = new Color(r, g, b); r,g, and b specify a color by its red, green, and blue components. Example: Color c = new Color(128, 100, 100);

37. Setting Colors You can use the following methods to set the component’s background and foreground colors: setBackground(Color c); setForeground(Color c); Example: setBackground(Color.yellow); setForeground(Color.red);

38. Drawing Geometric Figures • To draw in a panel, create a new class that extends JPanel and overrides the paintComponent() method. • Then one can display strings, draw geometrical shapes, and view images on the panel. • Although one can draw things directly in a frame or an applet using the paint() method, using JPanel for to draw messages and shapes and to show images is recommended; this way the drawing does not interfere with other components.

39. Drawing Geometric Figures • The signature of the paintComponent method: public void paintComponent(Graphics g) • The Graphics object g is created automatically by the Java runtime system. This object controls how information is drawn. g.drawLine(x1,y1,x2,y2); g.drawRect(x0,y0,width,height);

40. Drawing Geometric Figures • Drawing Lines • Drawing Rectangles • Drawing Ovals • Drawing Arcs • Drawing Polygons • Drawing Strings

41. Drawing Lines g.drawLine(x1, y1, x2, y2);

42. Drawing Rectangles • g.drawRect(x, y, w, h); • g.fillRect(x, y, w, h);

43. Drawing Rounded Rectangles • g.drawRoundRect(x, y, w, h, aw, ah); • g.fillRoundRect(x, y, w, h, aw, ah);

44. Drawing Ovals • g.drawOval(x, y, w, h); • g.fillOval(x, y, w, h);

45. Drawing Arcs • g.drawArc(x, y, w, h, angle1, angle2); • g.fillArc(x, y, w, h, angle1, angle2);

46. Drawing Polygons int[] x = {40, 70, 60, 45, 20}; int[] y = {20, 40, 80, 45, 60}; g.drawPolygon(x, y, x.length); g.fillPolygon(x, y, x.length);

47. Drawing Polygons, cont. int[] x = {40, 70, 60, 45, 20}; int[] y = {20, 40, 80, 45, 60}; Polygon poly = new Polygon(x,y,5); g.drawPolygon(poly); g.fillPolygon(poly);

48. Example: Drawing import javax.*; import java.awt.*; public class TestGraphics() { public TestGraphics() { setTitle(“Test Draw”); getContentPane().add(new DrawPanel()); } public static void main(Strings[] args) { TestGraphics frame = new TestGraphics(); frame.setSize(300,300); frame.setVisible(true); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); } }

49. Example: Drawing public class DrawPanel extends JPanel { public void paintComponent(Graphics g) { super.paintComponent(g); setBackground(Color.white); g.setColor(Color.red); g.drawRect(100,100,100,100); g.drawString(“Test Draw”,110,230); g.setColor(Color.green); g.drawLine(50,50,250,250); } }