Model View Controller Notes

Introduction to Java's Swing Library: StopWatch Program

  • The StopWatch program displays the number of centiseconds since the Start button was pressed.

  • The display updates every centisecond.

  • The Start button resets the timer and disables itself, while enabling the Stop button.

  • The Stop button stops the timer, disables itself, and enables the Start button.

  • All functionality is contained within one file, without using the Model-View-Controller (MVC) pattern.

import java.awt.Container;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.text.NumberFormat;
import javax.swing.BoxLayout;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JTextField;
import javax.swing.Timer;

public class StopWatch extends JFrame {
 private long startTime = 0;
 private JFrame frame;

 public StopWatch() {
 frame = new JFrame("Digital Stopwatch");
 JPanel buttonPanel = new JPanel();
 JButton startButton = new JButton("Start");
 JButton stopButton = new JButton("Stop");
 JTextField timeField = new JTextField();
 Timer timer = new Timer(10, null);

 buttonPanel.setLayout(new BoxLayout(buttonPanel, BoxLayout.X_AXIS));
 buttonPanel.add(startButton);
 buttonPanel.add(stopButton);
 stopButton.setEnabled(false);

 timer = new Timer(10, e -> timeField.setText(calcTimeFieldText()));

 startButton.addActionListener(new ActionListener() {
 public void actionPerformed(ActionEvent e) {
 startTime = e.getWhen();
 timer.start();
 stopButton.setEnabled(true);
 startButton.setEnabled(false);
 }
 });

 stopButton.addActionListener(new ActionListener() {
 public void actionPerformed(ActionEvent e) {
 timeField.setText(calcTimeFieldText());
 timer.stop();
 stopButton.setEnabled(false);
 startButton.setEnabled(true);
 }
 });

 Container content = frame.getContentPane();
 content.setLayout(new BoxLayout(content, BoxLayout.Y_AXIS));
 timeField.setEditable(false);
 content.add(timeField);
 content.add(buttonPanel);
 frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 frame.pack();
 frame.setVisible(true);
 }

 public String calcTimeFieldText() {
 long elapsed = System.currentTimeMillis() - startTime;
 long centisecs = elapsed / 10;
 long seconds = centisecs / 100;
 long minutes = seconds / 60;
 long hours = minutes / 60;

 NumberFormat nf = NumberFormat.getNumberInstance();
 nf.setMinimumIntegerDigits(2);

 String time = "" + nf.format(hours) + ":" + nf.format(minutes % 60) + ":"
 + nf.format(seconds % 60) + "." + nf.format(centisecs % 100);
 return time;
 }

 public static void main(String[] args) {
 new StopWatch();
 }
}
Code for Stopwatch Program

  • Imports necessary Java AWT and Swing libraries:

    • java.awt.Container

    • java.awt.event.ActionEvent

    • java.awt.event.ActionListener

    • java.text.NumberFormat

    • javax.swing.BoxLayout

    • javax.swing.JButton

    • javax.swing.JFrame

    • javax.swing.JPanel

    • javax.swing.JTextField

    • javax.swing.Timer

  • The StopWatch class contains:

    • A JFrame named frame with the title "Digital Stopwatch".

    • A long variable startTime initialized to 0.

StopWatch() Constructor

  • Creates a JPanel called buttonPanel.

  • Creates JButton instances for "Start" and "Stop".

  • Creates a JTextField called timeField.

  • Declares a Timer object.

  • Sets the layout of buttonPanel to BoxLayout.X_AXIS.

  • Adds startButton and stopButton to buttonPanel.

  • Disables stopButton initially using stopButton.setEnabled(false).

  • Creates a Timer that executes every 100 milliseconds (every tenth of a second).

    • The Timer updates timeField with the calculated time using a lambda expression: timefield.setText(calcTimeFieldText());

ActionListeners for Buttons

  • startButton's ActionListener:

    • Sets startTime to the event's time using e.getWhen().

    • Starts the timer.

    • Enables stopButton and disables startButton.

  • stopButton's ActionListener:

    • Updates timeField with the current time.

    • Stops the timer.

    • Disables stopButton and enables startButton.

Setting up the Content Pane

  • Gets the content pane of the frame.

  • Sets the layout of the content pane to BoxLayout.Y_AXIS.

Adding Components and Frame Settings

  • Sets timeField to non-editable using timeField.setEditable(false).

  • Adds timeField and buttonPanel to the content pane.

  • Sets the default close operation for the frame to exit the application using frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE).

  • Packs the frame to fit its contents using frame.pack().

  • Makes the frame visible using frame.setVisible(true).

calcTimeFieldText() Method

  • Calculates the elapsed time in milliseconds: long elapsed = System.currentTimeMillis() - startTime;

  • Converts elapsed time to centiseconds, seconds, minutes, and hours.

    • long centisecs = elapsed/10;

    • long seconds = centisecs/100;

    • long minutes = seconds/60;

    • long hours = minutes/60;

  • Uses NumberFormat to ensure a minimum of two digits for each time unit.

    • NumberFormat nf = NumberFormat.getNumberInstance();

    • nf.setMinimumIntegerDigits(2);

  • Formats the time as a string in the format "HH:MM:SS.CC".

    • String time = "" + nf.format(hours) + ":" + nf.format(minutes%60) + ":" + nf.format(seconds%60) + "." + nf.format(centisecs%100);

main() Method

  • Creates a new instance of the StopWatch class to start the application.

    • new StopWatch();

Class Diagram of StopWatch Program

  • No details provided of Class Diagram

Anonymous Inner Classes vs Lambda Expressions

  • Anonymous Inner Classes:

    • Traditional way of implementing event listeners.

    • Requires creating a new instance of an interface or class.

    • Example:

startButton.addActionListener(new ActionListener() {
 @Override
 public void actionPerformed(ActionEvent e) {
 // code for start button
 }
});

interface ActionListener {
 public void actionPerformed(ActionEvent e);
}

  • Lambda Expressions:

    • More concise syntax for implementing functional interfaces.

    • Reduces boilerplate code.

    • Example:

startButton.addActionListener((ActionEvent e) -> {
 // code for start button
});

Traffic Light Program without MVC

  • The initial Traffic Light program mixes state management and display logic within a single class.

  • If the greenField displays “ON”, the change() method sets greenField to “OFF” and amberField to “ON”.

Problem with Traffic Light Program

  • The code that models the state and the code that displays the state are intertwined.

  • Changing the way lights are displayed (e.g., using colored circles) requires modifying the state-changing logic.

  • This violates the design principle that each class should have only one responsibility.

  • Solution: Separate the state (model) from the display (view).

    • Model: Represents the state.

    • View: Displays the state.

    • When the state changes, the view should not need to change, and vice versa.

The Concept of Model View Controller

Separating Model and View

  • Responsibility of the View:

    • Display the lights.

    • Observe the model and update the lights when the model changes.

  • Responsibility of the Model:

    • Store the state.

    • Change the state when required.

    • Notify the view when the state changes.

  • The model does not depend on the view, allowing for multiple views.

Separating Controller from Model and View

  • Controller:

    • A separate class responsible for converting user inputs (e.g., mouse clicks) into actions that change the model.

    • May choose not to convert certain inputs.

    • Can also modify the view (e.g., disabling buttons).

  • Example:

    • The Run button disables the Change and Initialise buttons and enables the Stop button.

  • Controller Actions:

    • Manipulates the model.

    • Updates the views.

    • Queries the model.

Implementing MVC in Java

  • Uses the Observer pattern.

Observer Pattern

  1. View Subscribes: The view registers with the model by calling addObserver.

  2. Model Publishes: The model notifies its observers (views) of changes by calling setChanged() followed by notifyObservers().

  3. View Requests State: The view retrieves the new state from the model by calling methods like getRed(), getGreen(), etc.

Traffic Light Model

Code and Class Diagram for Traffic Light Model

  • TLModel class extends Observable.

  • Attributes:

    • private boolean red

    • private boolean amber

    • private boolean green

  • Getter methods to access the state:

    • public boolean getRed()

    • public boolean getAmber()

    • public boolean getGreen()

change() Method

  • Implements the traffic light state transition logic.

  • State transitions:

    • Red -> Amber

    • Red & Amber -> Green

    • Green -> Amber

    • Otherwise -> Red

  • Notifies observers after the state change:

    • setChanged();

    • notifyObservers();

initialise() Method

  • Initializes the traffic light to the red state.

    • red = true;

    • amber = false;

    • green = false;

  • Notifies observers after initialization.

TLModel() Constructor

  • Calls the initialise() method to set the initial state.

Traffic Light View

Code for Traffic Light View

  • TLView class implements the Observer interface.

  • Attributes:

    • private static final Dimension PANEL_SIZE = new Dimension(200,200);

    • private TLModel model

    • private TLController controller

    • private JFrame frame

    • private JPanel panel

    • private JTextField redField, amberField, greenField

    • private JLabel redLabel, amberLabel, greenLabel

    • private JButton changeButton, initialiseButton

TLView() Constructor

  • Takes a TLModel and TLController as arguments.

  • Sets the model and controller.

  • Registers the view as an observer of the model: model.addObserver(this);

  • Calls createControls() to initialize the UI components.

  • Sets the view for the controller using controller.setView(this);

  • Calls update(model, null) to set the initial display.

createControls() Method

  • Creates the main JFrame.

    • Sets the default close operation to exit the application.

  • Gets the content pane and sets its layout to BoxLayout.X_AXIS.

  • Calls createPanel() to create the panel with the traffic light components.

  • Adds the panel to the content pane.

  • Packs the frame and sets it to non-resizable.

  • Makes the frame visible.

createPanel() Method

  • Creates a JPanel and sets its layout to GridLayout(4,2).

  • Sets the text fields to non-editable.

  • Adds labels and text fields for red, amber, and green lights.

  • Creates and adds changeButton and initialiseButton with their respective action listeners that call the appropriate controller methods.

  • Sets the preferred size of the panel using panel.setPreferredSize(PANEL_SIZE);

update() Method

  • Implements the update method from the Observer interface.

  • Updates the text fields based on the model's state