Lesson 33: Layout management and drawing – Java GUI

Drawing in a frame 1.We will use the graphics and the Jframe together with a simple loop that creates references for a line. 2.The line needs a starting x,y coordinate and an ending x,y coordinate 3.We will use the class Star for definition and the class StartTest for executing our star Recap

Drawing in a frame // StarTest.java - display a starburst import java.awt.*; import javax.swing.*; class StarTest{ public static void main (String[] args){ JFrame frame = new JFrame("StartTest"); Container pane = frame.getContentPane(); Star star = new Star(); pane.add(star); frame.pack(); frame.show(); } Recap

Drawing in a frame Recap

The layout manipulations

// FlowLayoutTest.java - demo flowlayout import java.awt.*; import javax.swing.*; class FlowLayoutTest{ public static void main (String[] args){ JFrame frame = new JFrame("FlowLayoutTest.CENTER"); Container pane = frame.getContentPane(); pane.setLayout(new FlowLayout(FlowLayout.CENTER)); pane.add(new JButton("Button 1")); pane.add(new JLabel("Label 2")); pane.add(new JButton("Button 3")); pane.add(new JLabel("Label 4")); pane.add(new JButton("Button 5")); frame.pack(); frame.show(); } Importing the libraries Creating a class called FlowLayoutTest Creating a main section Creating a frame named frame and labeled Flowlayout.CENTER

// FlowLayoutTest.java - demo flowlayout import java.awt.*; import javax.swing.*; class FlowLayoutTest{ public static void main (String[] args){ JFrame frame = new JFrame("FlowLayoutTest.CENTER"); Container pane = frame.getContentPane(); pane.setLayout(new FlowLayout(FlowLayout.CENTER)); pane.add(new JButton("Button 1")); pane.add(new JLabel("Label 2")); pane.add(new JButton("Button 3")); pane.add(new JLabel("Label 4")); pane.add(new JButton("Button 5")); frame.pack(); frame.show(); } Formatting the container to FlowLayout.Center Creating a container named pane, and associating it with our frame called frame.

// FlowLayoutTest.java - demo flowlayout import java.awt.*; import javax.swing.*; class FlowLayoutTest{ public static void main (String[] args){ JFrame frame = new JFrame("FlowLayoutTest.CENTER"); Container pane = frame.getContentPane(); pane.setLayout(new FlowLayout(FlowLayout.CENTER)); pane.add(new JButton("Button 1")); pane.add(new JLabel("Label 2")); pane.add(new JButton("Button 3")); pane.add(new JLabel("Label 4")); pane.add(new JButton("Button 5")); frame.pack(); frame.show(); } Showing the frame Packing the frame to smallest size Creating buttons and labels and adding them to the container

We can resize the window using standard features in the frame:

The output Program Compile Result

The LEFT layout // FlowLayoutTest.java - demo flowlayout import java.awt.*; import javax.swing.*; class FlowLayoutTest{ public static void main (String[] args){ JFrame frame = new JFrame("FlowLayoutTest.LEFT"); Container pane = frame.getContentPane(); pane.setLayout(new FlowLayout(FlowLayout.LEFT)); pane.add(new JButton("Button 1")); pane.add(new JLabel("Label 2")); pane.add(new JButton("Button 3")); pane.add(new JLabel("Label 4")); pane.add(new JButton("Button 5")); frame.pack(); frame.show(); } CENTER LEFT

Adding buttons to actions and frames -Another example

Adding a button to StartTest // StarTestQuit.java - add a quit button to StartTest import java.awt.*; import javax.swing.*; class StarTestQuit{ public static void main (String[] args){ JFrame frame = new JFrame("StartTest"); Container pane = frame.getContentPane(); Star star = new Star(); JButton Quit = new JButton("Quit"); pane.setLayout(new FlowLayout()); Quit.addActionListener(new GoodBye()); pane.add(Quit); pane.add(star); frame.pack(); frame.show(); } Importing the libraries Creating a class called StartTestQuit Creating a main section Creating a frame named frame and labeled StarTest

Adding a button to StartTest // StarTestQuit.java - add a quit button to StartTest import java.awt.*; import javax.swing.*; class StarTestQuit{ public static void main (String[] args){ JFrame frame = new JFrame("StartTest"); Container pane = frame.getContentPane(); Star star = new Star(); JButton Quit = new JButton("Quit"); pane.setLayout(new FlowLayout()); Quit.addActionListener(new GoodBye()); pane.add(Quit); pane.add(star); frame.pack(); frame.show(); } Formatting the container to FlowLayout.Center Creating a container named pane, and associating it with our frame called frame. Creating a button named Quit and labeled Quit Creating a star based on the star class (as before)

Adding a button to StartTest // StarTestQuit.java - add a quit button to StartTest import java.awt.*; import javax.swing.*; class StarTestQuit{ public static void main (String[] args){ JFrame frame = new JFrame("StartTest"); Container pane = frame.getContentPane(); Star star = new Star(); JButton Quit = new JButton("Quit"); pane.setLayout(new FlowLayout()); Quit.addActionListener(new GoodBye()); pane.add(Quit); pane.add(star); frame.pack(); frame.show(); } Adding an actionlistener to the button based on the GoodBye class (from earlier class example) Adding the button and the star to the container Showing the frame Packing the frame to smallest size

ProgramCompile Run Exit

A simple Drawing program

// SimplePaint.java - drawing with a mouse import java.awt.*; import javax.swing.*; class SimplePaint{ public static void main (String[] args){ JFrame frame = new JFrame("SimplePaint"); Container pane = frame.getContentPane(); DrawingCanvas canvas = new DrawingCanvas(); PaintListener listener=new PaintListener(); canvas.addMouseMotionListener(listener); pane.add(canvas); frame.pack(); frame.show(); } Importing the libraries Creating a class called SimplePaint Creating a main section Creating a frame named frame and labeled SimplePaint Creating a container named pane, and associating it with our frame called frame.

// SimplePaint.java - drawing with a mouse import java.awt.*; import javax.swing.*; class SimplePaint{ public static void main (String[] args){ JFrame frame = new JFrame("SimplePaint"); Container pane = frame.getContentPane(); DrawingCanvas canvas = new DrawingCanvas(); PaintListener listener=new PaintListener(); canvas.addMouseMotionListener(listener); pane.add(canvas); frame.pack(); frame.show(); } Creating a new object named canvas based on the DrawingCanvas class (we will look at it later) Creating a listener based on the PaintListener class Associating the listener to the canvas

// SimplePaint.java - drawing with a mouse import java.awt.*; import javax.swing.*; class SimplePaint{ public static void main (String[] args){ JFrame frame = new JFrame("SimplePaint"); Container pane = frame.getContentPane(); DrawingCanvas canvas = new DrawingCanvas(); PaintListener listener=new PaintListener(); canvas.addMouseMotionListener(listener); pane.add(canvas); frame.pack(); frame.show(); } Adding the canvas object to the container Showing the frame Packing the frame to smallest size

// DrawingCanvas.java - a blank canvas import javax.swing.*; import java.awt.*; class DrawingCanvas extends JComponent{ public Dimension getMinimumSize(){ return new Dimension(SIZE, SIZE); } public Dimension getPreferredSize(){ return new Dimension(SIZE, SIZE); } private static final int SIZE=500; } Importing libraries Setting our preferred and minimum size to the container manager This class is an extension of the JComponent class from the swing library Private protected variable

// PaintListener.java import java.awt.*; import java.awt.event.*; class PaintListener implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas canvas = (DrawingCanvas)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} private int radius =3; private int diameter = radius*2; } Importing libraries This class implements the interface MouseMotionListener The interface MouseMotionListener requires that two methods are implemented: 1)mouseDragged (button clicked and held down) 2)mouseMoved (no button clicked and held down)

// PaintListener.java import java.awt.*; import java.awt.event.*; class PaintListener implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas canvas = (DrawingCanvas)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} private int radius =3; private int diameter = radius*2; } Each time the mouse is moved – while the position of the over the component that is being listened to, the mouseDragged() method is called. Each change in position detected by the system generates another call to mouseDragged(). This results in many calls by a single dragging of the mouse. Each call is passed a a MouseEvent object that contains, among other things, a reference to the component that generated the event and the coordinates of the mouse at that time the event was generated. The calls e.getSource() returns a generic reference to the component that generated the event. In general the event could have come from any component not just DrawingCanvas. Here it is explicitly cast to the reference a DrawingCanvas object

// PaintListener.java import java.awt.*; import java.awt.event.*; class PaintListener implements MouseMotionListener{ public void mouseDragged(MouseEvent e) { DrawingCanvas canvas = (DrawingCanvas)e.getSource(); Graphics g = canvas.getGraphics(); g.fillOval(e.getX()-radius, e.getY() - radius, diameter, diameter); } public void mouseMoved(MouseEvent e){} private int radius =3; private int diameter = radius*2; } Returning nothing when the mouse is moved over the component being listened to Simply filling an oval when the mouseDragged event occurs (as before)

The outcome