Object-Oriented Software Engineering Using Threads and simple Animation.

Slides:



Advertisements
Similar presentations
2D Graphics Drawing Things. Graphics In your GUI, you might want to draw graphics E.g. draw lines, circles, shapes, draw strings etc The Graphics class.
Advertisements

Made with love, by Zachary Langley Applets The Graphics Presentation.
Web Design & Development Lecture 19. Java Graphics 2.
1 Drawing C Sc 335 Object-Oriented Programming and Design Rick Mercer.
Multithreading : animation. slide 5.2 Animation Animation shows different objects moving or changing as time progresses. Thread programming is useful.
Computer Science 209 Graphics and GUIs. Working with Color The class java.awt.Color includes constants for typical color values and also supports the.
GUI and Swing, part 2 The illustrated edition. Scroll bars As we have previously seen, a JTextArea has a fixed size, but the amount of text that can be.
Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Mouse Events and Keyboard Events
Object-Oriented Software Engineering PersonGui (Mark 2) Case Study.
Object-Oriented Software Engineering Java with added Swing.
Unit 11 Object-oriented programming: Graphical user interface Jin Sa.
Chapter 6: Graphical User Interface (GUI) and Object-Oriented Design (OOD) J ava P rogramming: Program Design Including Data Structures Program Design.
Lesson 35: Review of the Java GUI. The JFrame, Container and JButton.
Mouse Events. Handling Mouse Events Java provides two listener interfaces to handle mouse events: MouseListener;  MouseListener;  MouseMotionListener.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
Java Programming: From Problem Analysis to Program Design, Second Edition1  Learn about basic GUI components.  Explore how the GUI components JFrame,
Lesson 27: Introduction to the Java GUI. // helloworldbutton.java import java.awt.*; import javax.swing.*; class HelloButton{ public static void main.
CSE 219 Computer Science III Images. HW1 Has been posted on Blackboard Making a Game of Life with limited options.
Adding Graphics to a Frame Application Applets: Can generate drawings by overriding paint Frame: Do not draw directly on a frame. Draw graphics on a JPanel.
(c) University of Washington08-1 CSC 143 Models and Views Reading: Ch. 18.
tiled Map Case Study: Rendering with JPanel © Allan C. Milne v
Chapter 12 Event Handling. Chapter Goals To understand the Java event model To install action and mouse event listeners To accept input from buttons,
Cs884(Prasad)java12AWT1 Abstract Windowing Toolkit Support for Graphical User Interface (Event-driven programming)
Java GUI’s are event driven, meaning they generate events when the user interacts with the program. Typical events are moving the mouse, clicking a mouse.
CS 112 Department of Computer Science George Mason University CS 112 Department of Computer Science George Mason University Writing Graphic Applications.
CSE 501N Fall ‘09 20: Event Handling and Inner Classes 17 November 2009 Nick Leidenfrost.
SD2071 Games Programming Abstraction, inheritance and interfaces Exceptions Two dimensional arrays Java collections framework Files Aaron Kans.
Previous programs used a JLabel for OUTPUT. Another Swing component that can be used for both user input and output is the JTextfield. Suppose we want.
Lesson 34: Layering Images with Java GUI. The FlowLayout RECAP.
Field Trip #19 Animations with Java By Keith Lynn.
1 CSC111H Graphical User Interfaces (GUIs) Introduction GUIs in Java Understanding Events A Simple Application The Containment Hierarchy Layout Managers.
Graphic User Interface. Graphic User Interface (GUI) Most of us interact with computers using GUIs. GUIs are visual representations of the actions you.
The Drawing program – Java Applets
MSc Workshop - © S. Kamin, U. ReddyLect 3 - GUI -1 Lecture 3 - Graphical User Interfaces r GUI toolkits in Java API r JFrame r GUI components.
Copyright © 2002, Systems and Computer Engineering, Carleton University b-Gui2.ppt * Object-Oriented Software Development Part 18-b Building.
MSc Workshop - © S. Kamin, U.Reddy Lect 4 - Events - 1 Lecture 4 – Event Handling r Painting r Event types r Catching different event types.
CSE 219 Computer Science III Image Manipulation. HW 1 Has been posted on Blackboard Making a Game of Life with limited.
Creating Your Own Widgets CompSci 230 S Software Construction.
Concurrent Programming and Threads Threads Blocking a User Interface.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
Creating Windows. How can we use Java to create programs that use windows (GUI applications)? How can we use Java to create programs that use windows.
Object-Oriented Software Engineering
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 21.1 Test-Driving the Painter Application.
Creating a GUI with JFC/Swing. What are the JFC and Swing? JFC –Java Foundation Classes –a group of features to help people build graphical user interfaces.
(C) 2010 Pearson Education, Inc. All rights reserved.  Class Graphics (from package java.awt) provides various methods for drawing text and shapes onto.
1 GUIs, Layout, Drawing Rick Mercer. 2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces (GUIs)
©2000, John Wiley & Sons, Inc. Horstmann/Java Essentials, 2/e Chapter 10: Event Handling 1 Event Handling.
Java Programming: From Problem Analysis to Program Design, 3e Chapter 6 Graphical User Interface (GUI) and Object-Oriented Design (OOD)
Java Dynamic Graphics.
GUI DYNAMICS Lecture 11 CS2110 – Fall GUI Statics and GUI Dynamics  Statics: what’s drawn on the screen  Components buttons, labels, lists, sliders,
Java Programming: From Problem Analysis to Program Design, Second Edition1 Lecture 5 Objectives  Learn about basic GUI components.  Explore how the GUI.
©2000, John Wiley & Sons, Inc. Horstmann/Java Essentials, 2/e Chapter 10: Event Handling 1 Chapter 10 Event Handling.
Mouse Listeners Moving the mouse will also generate events like the Timer –To have your program respond, you must implement either or both of MouseListener.
Review_6 AWT, Swing, ActionListener, and Graphics.
Java Swing One of the most important features of Java is its ability to draw graphics.
1/18H212Mouse and Timer Events H212 Introduction to Software Systems Honors Lecture #16: Mouse and Timer Events October 26, 2015.
Mouse Events GUI. Types of Events  Below, are some of the many kinds of events, swing components generate. Act causing EventListener Type User clicks.
Lesson 28: More on the GUI button, frame and actions.
Lesson 33: Layout management and drawing – Java GUI.
GUI Tutorial Day 4. More GUI action  adding a Mouse Listener  SimpleDots  Simple mouse listener  Draw an oval where the mouse is clicked  Box example.
Prepared by: Dr. Abdallah Mohamed, AOU-KW Unit7: Event-driven programming 1.
Creating Your Own Widgets
Computer Science 209 Graphics and GUIs.
Chapter 4 Interface Types and Polymorphism Part 2
Object-Oriented Software Engineering
ITEC324 Principle of CS III
ITEC324 Principle of CS III
Chapter 6 Inheritance.
Presentation transcript:

Object-Oriented Software Engineering Using Threads and simple Animation

UniS Contents CoordinatesDemo (Mark 1) case study Painting Graphic Objects Primitive Animation with Move Repaint Cycle The paintComponent method Dynamic thread creation, MouseInputListener interface. Resource Contention, Racing Threads

UniS CoordinatesDemo (Mark1)Thread Case Study Square created by mouse click Square oscillates across grid and exits left. Square is created and controlled by thread class DrawRect. CoordinateArea JFrame draw_rect: DrawRect Full code available on web site for this lecture

UniS CoordinatesDemo Inner Classes CoordinateAreaDrawRect Can access all methods of outer class Instances are created dynamically by Mouse event

UniS Class Diagram CoordinatesDemo CoordinateArea DrawRect JComponent MouseInputListener Thread inner class dependency inner class dependency JFrame contained in Graphics paints with Black triangles indicate direction to read association

UniS Painting Graphic Objects Animation is achieved in Java application by the CoordinateArea continually 'repainting' itself every few mille-seconds. Every Swing component that extends JComponent can override the protected void paintComponent(Graphics g) method. CoordinateArea

UniS createAndShowGUI method private static void createAndShowGUI() { //Make sure we have nice window decorations. JFrame.setDefaultLookAndFeelDecorated(true); //Create and set up the window. JFrame frame = new JFrame("CoordinatesDemo"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); //Set up the content pane. CoordinatesDemo controller = new CoordinatesDemo(); controller.buildUI(frame.getContentPane()); //Display the window. frame.pack(); frame.setVisible(true); } This part as usual Here we have to directly manipulate content pane of JFrame to animate graphics

UniS buildUI method private void buildUI(Container container) { container.setLayout(new BoxLayout(container, BoxLayout.PAGE_AXIS)); CoordinateArea coordinateArea = new CoordinateArea(this); container.add(coordinateArea); label = new JLabel(); resetLabel(); container.add(label); //Align the left edges of the components. coordinateArea.setAlignmentX(Component.LEFT_ALIGNMENT); label.setAlignmentX(Component.LEFT_ALIGNMENT); //redundant } value will be frame.getContentPane() attach the coordinateArea to the content panecreate new coordinateArea whose parent, this, is the CoordinatesDemo application

UniS Overview of createAndShowGUI method controller: CoordinatesDemo frame:JFrame coordinateArea: CoordinateArea > getContentPane() container container: Container add(coordinateArea)

UniS frame: JFrame container (frame's content pane) coordinateArea

UniS Painting Graphic Objects When an JComponent is first created its paintComponent method is called. From then on if something is modified, the component can be made to repaint itself with a call to the repaint( ) method.

UniS Painting Graphic Objects When a left mouse click occurs, this creates an instance of a new thread, DrawRect. The square is created and controlled by the separate thread. The run( ) method of the thread gradually moves the square across the content pane. The thread moves the square within the graphical object belonging to the content pane, and then repaints the content pane.

UniS Move Repaint while ((x + rect_size) > 0) { try { Thread.currentThread().sleep(40); x -= 2; new_y = new Double(y + Math.cos(x/(Math.PI*2))*10); point = new Point(x, new_y.intValue()); controller.updateClickPoint(point); repaint(); } catch (InterruptedException exp2) { // do nothing } move Code fragment from run( ) method of DrawRect thread sleep controls rate of motion repaint to make changes appear on content pane repaint( ) move

UniS protected void paintComponent(Graphics g) protected void paintComponent(Graphics g) { //Paint background if we're opaque. if (isOpaque()) { g.setColor(getBackground()); g.fillRect(0, 0, getWidth(), getHeight()); } //Paint 20x20 grid. g.setColor(Color.GRAY); drawGrid(g, 20); // Draw rectangle according to modified values defined by DrawRect thread if (point != null) { g.setColor(getForeground()); g.fillRect(point.x - rect_ofset, point.y - rect_ofset, rect_size, rect_size); }

UniS Graphics Objects For this course we are not concerned with the detailed behaviour of graphics rendering within a GUI. Roughly a Graphics object captures the current context for manipulating the appearance of a content pane. Graphics object defines coordinate system for controlling exact location of shapes within content pane. Graphics object has a number of methods for making simple shapes appear in the content pane. E.g. g.fillRect(x,y,width, height)

UniS CoordinateArea Constructor public CoordinateArea(CoordinatesDemo controller) { this.controller = controller; //Add a border of 5 pixels at the left and bottom, //and 1 pixel at the top and right. setBorder(BorderFactory.createMatteBorder(1,5,5,1, Color.RED)); addMouseListener(this); addMouseMotionListener(this); setBackground(Color.WHITE); setOpaque(true); } Mouse listener and mouse motion listener added to CoordinateArea itself

UniS Dynamic thread creation, MouseInputListener interface. public void mouseClicked(MouseEvent e) { int x = e.getX(); int y = e.getY(); int itr_rect = 6; if (point == null) { point = new Point(x, y); } else { point.x = x; point.y = y; } DrawRect draw_rect = new DrawRect(point); draw_rect.start(); } get coordinates modify point to store coordinates start new thread

UniS MouseInputListener interface. public void mouseMoved(MouseEvent e) { controller.updateCursorLocation(e.getX(), e.getY()); } public void mouseExited(MouseEvent e) { controller.resetLabel(); } public void mouseReleased(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mousePressed(MouseEvent e) { } public void mouseDragged(MouseEvent e) { } must implement all methods of interface, even if with empty methods when mouse not over content pane

UniS Mouse Left Click Event coordinateArea: CoordinateArea e:Mouse Event > left_mouse_click notify(e ) query event > draw_rect: DrawRect start( ) coordinateArea notifies itself when a mouse event occurs

UniS Point Object Point object is an easy way to pass (x,y) coordinates around in a Graphics context. (x,y) values of a Point object are given by p.x and p.y where p is an instance of Point point instance field of CoordinateArea used to control where square appears within content pane. point.x = 145, point.y = 30

UniS Resource Contention, Race Each mouse click creates an instance of DrawRect Each DrawRect object is an independent thread There can only be one occurrence of a square in the content pane Each thread will set the location of the square according to where it was created Hence the location of the square will change when each thread becomes active This leads to racing between the DrawRect threads with unpleasant results.

UniS Overview Sequence Diagram for Race point:Point coordinateArea: CoordinateArea draw_rect(1) :DrawRect draw_rect(2) :DrawRect change value repaint( ) change value repaint( ) looppar

UniS Notation for sequence diagram Parallel construct, keyword par, denotes different regions that occur at the same time. More precisely regions that are interleaved in an arbitrary manner. In a sequence diagram a region can contain a loop that will iterate some arbitrary number of times. This has keyword loop. When a par is contained in a loop, the contents of the par will be interleaved with each iteration of the loop. BUT each time the interleaving may be different.