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
• The paintComponent() 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
Container
Window
Panel
JPanel
Frame
JComponent
...
JFrame
JButton
JLabel
JCheckBox
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.setDefaultCloseO
peration( 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 content panes 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

• Javas 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 i1 i lt 10 i)
container.add(new JButton(Componenti))
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(tru
e)
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)
• where constraint is
• 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(i1 ilt9 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
  components background and foreground colors
• setBackground(Color c)
• setForeground(Color c)
• Example
• setBackground(Color.yellow) setForeground(Color.r
  ed)

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)