1. 24-Jun-15 Simple Animation

2. 2 The bouncing ball The “bouncing ball” is to animation what “Hello world” is to programming With a single Thread, we can either......animate the display...provide controls for the display...but we can’t do both We will use Observer and Observable to help decouple the model from the view To highlight the important portions of the program, I’ll use blue for Thread-relevant code and red for Observer- relevant code

3. 3 The Model class, I import java.util.Observable; class Model extends Observable implements Runnable { final int BALL_SIZE = 20; int xPosition = 0; int yPosition = 0; int xLimit, yLimit; int xDelta = 6; int yDelta = 4; public boolean running = false; // can be changed from outside public void run() {...} void makeOneStep() {...} }

4. 4 The Model class, II void makeOneStep() { xPosition += xDelta; if (xPosition = xLimit) { xPosition = xLimit; xDelta = -xDelta; } yPosition += yDelta; if (yPosition = yLimit) { yDelta = -yDelta; yPosition += yDelta; } } Nothing in here is relevant to Thread s or Observer s

5. 5 The Model class, III public void run() { while (running) { makeOneStep(); this.setChanged(); this.notifyObservers(); try { Thread.sleep(20); } catch (InterruptedException e) { } } }

6. 6 The Controller class, top import java.applet.*; import java.awt.*; import java.awt.event.*; import java.util.*; public class Controller extends Applet { Panel buttonPanel = new Panel(); Button runButton = new Button(" Run "); Thread thread; Model model = new Model(); View view = new View(); public void init() {...} public void start() {...} }

7. 7 The Controller class: init() I public void init() { // Lay out components setLayout (new BorderLayout ()); buttonPanel.add (runButton); this.add (buttonPanel, BorderLayout.SOUTH); this.add (view, BorderLayout.CENTER); // Attach actions to components... // Tell the View about myself (Controller) and about // the Model... }

8. 8 The Controller class: init() II // Attach actions to components runButton.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent event) { if (model.running) { model.running = false; runButton.setLabel(" Run "); } else { model.running = true; runButton.setLabel(" Stop "); thread = new Thread(model); thread.start(); } }}); Notice that we create a new Thread every time the “ Run ” button is clicked

9. 9 The Controller class: init() III // Tell the View about myself (Controller) and about the Model view.model = model; model.addObserver(view); The View has to know about (have a reference to) the Model in order to display information about it The Model doesn’t know anything about the View The Observer is added from the outside (here, in the Controller class) The only thing in the Model class about this is that it has to extend Observable To be in a separate Thread, the Model has to implement Runnable and supply a public void run() method

10. 10 The Controller class, start() public void start() { // Getting the view size MUST be done in the start() method model.xLimit = view.getWidth() - model.BALL_SIZE; model.yLimit = view.getHeight() - model.BALL_SIZE; } The Model class needs to know the size of the area that it’s bouncing the ball around in You can request the size only after the Applet has been inited The start() method is your first chance for this If you want to be able to change the size of the Applet (something you can do from appletviewer, but not from a browser), you need to get the size every time you paint When you write an application, you should always allow for the possibility that the user will change the window size

11. 11 The View class import java.awt.*; import java.util.*; class View extends Canvas implements Observer { Model model; int stepNumber = 0; int position = 50; public void paint(Graphics g) { g.setColor(Color.red); g.fillOval(model.xPosition, model.yPosition, model.BALL_SIZE, model.BALL_SIZE); } public void update(Observable obs, Object arg) { repaint(); } }

12. 12 The End