Getting Started with Graphics Programming Graphics Class Hierarchy

Getting Started with Graphics Programming Graphics Class Hierarchy F Frames – Creating frames, centering frames, adding components to frames F Layout Managers F – Flow. Layout, Grid. Layout, Border. Layout F Drawing on Panels – The paint. Component() method Using Colors F Drawing Geometric Figures F – Lines, Rectangles, Ovals, Arcs, and Polygons

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

Graphical User Interface (GUI) F AWT - Abstract Windowing Toolkit import java. awt. *; (Heavyweight) AWT components are automatically mapped to the platform-specific components. F 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.

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

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. F Color: This class deals with the colors of graphics components. F Font: This is used for string drawing in Graphics. F You can specify font type (Sans. Serif), style (Bold), and size (24 points). F Event Handling: How to respond to events such as mouse clicks, button clicks, keyboard input, frame events.

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

JComponent

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

UI Components

Creating Frames import javax. swing. *; public class My. Frame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame. set. Size(400, 300); frame. set. Visible(true); frame. set. Default. Close. Operation( JFrame. EXIT_ON_CLOSE); } }

Centering Frames • By default, a frame is displayed in the upperleft corner of the screen. • To display a frame at a specified location, use the set. Location(x, y) method in the JFrame class. This method places the upperleft corner of a frame at location (x, y).

Centering Frames, cont.

Centering Frames import javax. swing. *; public class My. Frame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame. set. Visible(true); frame. set. Default. Close. Operation( JFrame. EXIT_ON_CLOSE); frame. set. Size(400, 300); Dimension frame. Size = frame. get. Size(); Dimension screen. Size = Toolkit. get. Default. Toolkit(). get. Screen. Size(); int x = (screen. Size. width - frame. Size. width)/2; int y = (screen. Size. height - frame. Size. height)/2; frame. set. Location(x, y); } }

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 content pane’s pane 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 , Content. Pane, with JFrame. get. Content. Pane(), and add to that.

Adding Button into a Frame JFrame frame = new JFrame(); frame. set. Title("Test JButton"); Container cp = frame. get. Content. Pane(); JButton button = new JButton("OK"); cp. add(button);

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

Kinds of Layout Managers F Flow. Layout F Grid. Layout F Border. Layout F Grid. Bag. Layout F Card. Layout

Kinds of Layout Managers Card. Layout. . . later

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

Flow Layout: examples

Flow. Layout Constructors F public Flow. Layout(int align, int h. Gap, int v. Gap) Constructs a new Flow. Layout with a specified alignment, horizontal gap, and vertical gap. The gaps are the distances in pixel between components. F public Flow. Layout(int alignment) Constructs a new Flow. Layout with a specified alignment and a default gap of five pixels for both horizontal and vertical. F public Flow. Layout() Constructs a new Flow. Layout with a default center alignment and a default gap of five pixels for both horizontal and vertical.

Flow. Layout: Example import javax. swing. *; import java. awt. *; public class My. Frame { public My. Frame() { Container container = get. Content. Pane(); container. set. Layout(new Flow. Layout()); for(int i=1; i <= 10; i++) container. add(new JButton(“Component”+i)); } public static void main(String[] args) { My. Frame frame = new My. Frame(); frame. set. Title(“Test Flow. Layout”); frame. set. Default. Close. Operation( JFrame. EXIT_ON_CLOSE); frame. set. Size(200, 200); frame. set. Visible(true); } }

Flow. Layout: Example Container container = get. Content. Pane(); container. set. Layout(new Flow. Layout());

The Grid. Layout Manager F The Grid. Layout manager arranges components in a grid (matrix) formation with the number of rows and columns defined by the constructor. F The components are placed in the grid from left to right starting with the first row, then the second, and so on.

Grid. Layout Constructors F public Grid. Layout(int rows, int columns) Constructs a new Grid. Layout with the specified number of rows and columns. F public Grid. Layout(int rows, int columns, int h. Gap, int v. Gap) Constructs a new Grid. Layout with the specified number of rows and columns, along with specified horizontal and vertical gaps between components.

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

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

Example public My. Frame() { Container container = get. Content. Pane(); container. set. Layout(new Border. Layout(5, 10)); container. add(new JButton(“East”, Border. Layout. East); container. add(new JButton(“South”, Border. Layout. South); container. add(new JButton(“West”, Border. Layout. West); container. add(new JButton(“Center”, Border. Layout. Center); container. add(new JButton(“Center”, Border. Layout. North); }

The Border. Layout Manager

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

Border Layout Nested

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

Example: Two Panels JPanel p 1 = new JPanel(); p 1. set. Layout(new Grid. Layout(4, 3)); for(i=1; i<=9; i++) { p 1. add(new JButton(“ ”+i)); } p 1. add(new JButton(“ 0”)); p 1. add(new JButton(“Start”)); p 1. add(new JButton(“Stop”)); // JPanel p 2 = new JPanel(); p 2. set. Layout(new Border. Layout()); p 2. add(new JText. Field(“Time to be displayed here”), Border. Layout. NORTH); p 2. add(p 1, Border. Layout. CENTER);

Example: Add Panels Container container = get. Content. Pane(); container. set. Layout(new Border. Layout()); container. add(p 2, Border. Layout. EAST); container. add(new Button(“Food to be placed here”), Border. Layout. CENTER);

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

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);

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

Drawing Geometric Figures To draw in a panel, create a new class that extends JPanel and overrides the paint. Component() method. F Then one can display strings, draw geometrical shapes, and view images on the panel. F 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. F

Drawing Geometric Figures F The signature of the paint. Component method: public void paint. Component(Graphics g) F The Graphics object g is created automatically by the Java runtime system. This object controls how information is drawn. g. draw. Line(x 1, y 1, x 2, y 2); g. draw. Rect(x 0, y 0, width, height);

Drawing Geometric Figures F Drawing Lines F Drawing Rectangles Drawing Ovals F Drawing Arcs F Drawing Polygons F Drawing Strings F

Drawing Lines g. draw. Line(x 1, y 1, x 2, y 2);

Drawing Rectangles F g. draw. Rect(x, y, w, h); F g. fill. Rect(x, y, w, h);

Drawing Rounded Rectangles F g. draw. Round. Rect(x, y, w, h, aw, ah); F g. fill. Round. Rect(x, y, w, h, aw, ah);

Drawing Ovals F g. draw. Oval(x, y, w, h); F g. fill. Oval(x, y, w, h);

Drawing Arcs F F g. draw. Arc(x, y, w, h, angle 1, angle 2); g. fill. Arc(x, y, w, h, angle 1, angle 2);

Drawing Polygons int[] x = {40, 70, 60, 45, 20}; int[] y = {20, 40, 80, 45, 60}; g. draw. Polygon(x, y, x. length); g. fill. Polygon(x, y, x. length);

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. draw. Polygon(poly); g. fill. Polygon(poly);

Example: Drawing import javax. *; import java. awt. *; public class Test. Graphics() { public Test. Graphics() { set. Title(“Test Draw”); get. Content. Pane(). add(new Draw. Panel()); } public static void main(Strings[] args) { Test. Graphics frame = new Test. Graphics(); frame. set. Size(300, 300); frame. set. Visible(true); frame. set. Default. Close. Operation( JFrame. EXIT_ON_CLOSE); } }

Example: Drawing public class Draw. Panel extends JPanel { public void paint. Component(Graphics g) { super. paint. Component(g); set. Background(Color. white); g. set. Color(Color. red); g. draw. Rect(100, 100); g. draw. String(“Test Draw”, 110, 230); g. set. Color(Color. green); g. draw. Line(50, 250, 250); } }