Separate GUI Code from Back End Code

[John Storta Jr.]

I am pretty new to Swing development and I am running into a problem getting my head around something.

I can write the GUI interface just fine. I can create the action listeners and have the app do what I want. I can even use SwingWorker to run some processing in the background and update the Swing fields as it progresses using the publish and process methods.

The problem I am having is that I do not like having my processing code within the GUI class. I want to try and keep them separate.

Here is a stream-lined example of what I am doing now.

//TestGui.java

import java.util.List;
import java.util.Date;
import java.awt.FlowLayout;
import javax.swing.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class TestGui extends JFrame implements ActionListener {
    //--- Fields
    JButton startTimerButton;
    JButton stopTimerButton;
    JLabel timerDisplay;
    StopWatchTask timerTask;

    //--- Constructor
    public TestGui() {
        startTimerButton = new JButton("Start");
        stopTimerButton = new JButton("Stop");
        timerDisplay = new JLabel("0");
        
        setTitle("Test GUI");
        setSize(200, 100);
        setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        
        setLayout(new FlowLayout());
        add(timerDisplay);
        add(startTimerButton);
        add(stopTimerButton);
        
        stopTimerButton.setEnabled(false);
        startTimerButton.addActionListener(this);
        stopTimerButton.addActionListener(this);
        
        setVisible(true);
    }
    
    //--- Method overriden from ActionListener
    @Override
    public void actionPerformed(ActionEvent a) {
        if ( a.getSource() == startTimerButton ) {
            //If Start button was pressed, start the timer in a new thread
            startTimerButton.setEnabled(false);
            stopTimerButton.setEnabled(true);
            (timerTask = new StopWatchTask()).execute();
        }
        else if ( a.getSource() == stopTimerButton ) {
            //If Stop button was pressed, stop the timer
            startTimerButton.setEnabled(true);
            stopTimerButton.setEnabled(false);
            timerTask.cancel(true);
            timerTask = null;
        }
    }   

    //--- INNER CLASS #1
    //--- for holding Stopwatch data
    private static class StopWatch {
        private final long startTime;
        private final long stopTime;
        private final long totalTime;
        
        StopWatch( long startTime, long stopTime, long totalTime ) {
            this.startTime = startTime;
            this.stopTime = stopTime;
            this.totalTime = totalTime;
        }
    }
    
    //--- INNER CLASS #2
    //--- Swing Worker to run the timer and update the timerDisplay as it progresses
    private class StopWatchTask extends SwingWorker<Void, StopWatch> {
        @Override
        protected Void doInBackground() {
            long currentTime = new Date().getTime();
            long startTime = currentTime;
            long stopTime = currentTime;
            long totalTime = 0L;
                        
            while (! isCancelled()) {
                do {
                    currentTime = new Date().getTime();
                } while ( (currentTime - (startTime+(totalTime*1000))) < 1000  );
                
                totalTime = (currentTime - startTime) / 1000;
                stopTime = currentTime;
                
                //publish the latest stopwatch tick
                publish( new StopWatch(startTime, stopTime, totalTime));
            }
            
            return null;
        }
        
        //Get the last published update and use that value to update the tiemrDisplay
        @Override
        protected void process(List<StopWatch> ticks) {
            StopWatch latestTick = ticks.get(ticks.size() - 1);
            timerDisplay.setText("" + latestTick.totalTime);
        }
    }
    
    public static void main( String... args) {
        TestGui myApp = new TestGui();
    }
}

This code borrows heavily from the example in the Sun Tutorial regarding SwingWorker.

The app works fine and does what I am trying to do, but I do not like embedding all of that back end code (StopWatch & StopWatchTask) within the Swing class. I would like to be able to have my extended JFrame class simply draw the interface and manage the events, but place the actual code for the StopWatch in a separate .java files. Separate the Model from the View and Controller and all that.

I did some reading on PropertyChangeListeners and setting up beans to fire PropertyChangeEvents, but I have not been able to make it work. I am willing to proceed down that road, but I wanted to see if this is truly the best option for accomplishing what I want to do. This seems like something that would be fairly common and would have an easier solution.

Just looking for some guidance.

Thanks,
John S.

[pete stein]

You have set before you an admirable task, one that I'm trying to learn how to do myself. At this stage what I usually do as a first iteration is separate the model out into its own class, fix errors, and try to add interfaces. Something like this as a first approximation:

import java.awt.FlowLayout;
import javax.swing.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class TestGui extends JFrame implements ActionListener, TimerDisplayable {

   JButton startTimerButton;
   JButton stopTimerButton;
   JLabel timerDisplay;
   StopWatchTask timerTask;

   public TestGui() {
      startTimerButton = new JButton("Start");
      stopTimerButton = new JButton("Stop");
      timerDisplay = new JLabel("0");

      setTitle("Test GUI");
      setSize(200, 100);
      setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

      setLayout(new FlowLayout());
      add(timerDisplay);
      add(startTimerButton);
      add(stopTimerButton);

      stopTimerButton.setEnabled(false);
      startTimerButton.addActionListener(this);
      stopTimerButton.addActionListener(this);

      setVisible(true);
   }

   @Override
   public void actionPerformed(ActionEvent a) {
      if (a.getSource() == startTimerButton) {

         startTimerButton.setEnabled(false);
         stopTimerButton.setEnabled(true);
         (timerTask = new StopWatchTask(this)).execute();
      }
      else if (a.getSource() == stopTimerButton) {

         startTimerButton.setEnabled(true);
         stopTimerButton.setEnabled(false);
         timerTask.cancel(true);
         timerTask = null;
      }
   }

   public static void main(String... args) {
      TestGui myApp = new TestGui();
   }

   @Override
   public void setTimerText(String text) {
      timerDisplay.setText(text);
   }
}

import java.util.Date;
import java.util.List;
import javax.swing.SwingWorker;


public class StopWatchTask extends SwingWorker<Void, StopWatch> {
   private TimerDisplayable timerDisplay;
   
   public StopWatchTask(TimerDisplayable timerDisplay) {
      this.timerDisplay = timerDisplay;
   }
   
   @Override
   protected Void doInBackground() {
      long currentTime = new Date().getTime();
      long startTime = currentTime;
      long stopTime = currentTime;
      long totalTime = 0L;

      while (!isCancelled()) {
         do {
            currentTime = new Date().getTime();
         }
         while ((currentTime - (startTime + (totalTime * 1000))) < 1000);

         totalTime = (currentTime - startTime) / 1000;
         stopTime = currentTime;

         //publish the latest stopwatch tick
         publish(new StopWatch(startTime, stopTime, totalTime));
      }

      return null;
   }

   //Get the last published update and use that value to update the tiemrDisplay
   @Override
   protected void process(List<StopWatch> ticks) {
      StopWatch latestTick = ticks.get(ticks.size() - 1);
      timerDisplay.setTimerText("" + latestTick.getTotalTime());
   }
   
}

public class StopWatch {
   private final long startTime;
   private final long stopTime;
   private final long totalTime;

   StopWatch(long startTime, long stopTime, long totalTime) {
      this.startTime = startTime;
      this.stopTime = stopTime;
      this.totalTime = totalTime;
   }

   public long getTotalTime() {
      return totalTime;
   }
}

public interface TimerDisplayable {

   void setTimerText(String text);

}

[John Storta Jr.]

That was exactly what I was looking for. Interfaces are one of those things that I tend to not think of, but they come in so handy. I had toyed with the idea of having StopWatchTask take a JFrame as a constructor argument, but still thought it was too connected to the GUI. It never even crossed my mind to use an interface as the argument so that it can be associated with any sort of display class.

I must learn to use interfaces more effectively.

Thank you so much for taking the time to get me on the right track.


John S.

[pete stein]

You're welcome.

OK, here's my next iteration where I try to extract the control out of the view. I'm not so sure about whether this is the correct way to do this or not, so please take it with a grain of salt. Corrections and comments are most welcome!

StopwMain.java

import javax.swing.JFrame;

public class StopwMain {
   private static void createAndShowUI() {
      StopwView view = new StopwView();
      StopwControl control = new StopwControl();
      control.setView(view);
      view.setStartAction(control.createStartAction());
      view.setStopAction(control.createStopAction());
      
      JFrame frame = new JFrame("Stop Watch");
      frame.getContentPane().add(view.getComponent());
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.pack();
      frame.setLocationRelativeTo(null);
      frame.setVisible(true);
   }

   public static void main(String[] args) {
      java.awt.EventQueue.invokeLater(new Runnable() {
         public void run() {
            createAndShowUI();
         }
      });
   }

}

TimerViewable.java

import javax.swing.Action;

public interface TimerViewable {

   public void setTimerValue(int value);

   public void setStartAction(Action action);

   public void setStopAction(Action action);

   public void setStartTimerButtonEnabled(boolean enabled);

}

StopwView.java

import javax.swing.*;

public class StopwView implements TimerViewable {
   private JPanel mainPanel = new JPanel();
   private JButton startTimerButton = new JButton();
   private JButton stopTimerButton = new JButton();
   private JLabel timerDisplay = new JLabel("000");

   public StopwView() {
      mainPanel.add(timerDisplay);
      mainPanel.add(startTimerButton);
      mainPanel.add(stopTimerButton);
      stopTimerButton.setEnabled(false);
   }

   public void setTimerValue(int value) {
      String text = String.format("%03d", value);
      timerDisplay.setText(text);
   }
   
   public void setStartAction(Action action) {
      startTimerButton.setAction(action);
   }
   
   public void setStopAction(Action action) {
      stopTimerButton.setAction(action);
   }
   
   public void setStartTimerButtonEnabled(boolean enabled) {
      startTimerButton.setEnabled(enabled);
      stopTimerButton.setEnabled(!enabled);
   }

   public JComponent getComponent() {
      return mainPanel;
   }
}

StopwControl.java

import java.awt.event.ActionEvent;
import javax.swing.AbstractAction;
import javax.swing.Action;

@SuppressWarnings("serial")
public class StopwControl {
   private StopWatchTask task;
   private TimerViewable view;
   
   public void setView(TimerViewable view) {
      this.view = view;
   }
   
   public Action createStartAction() {
      return new AbstractAction("Start") {
         @Override
         public void actionPerformed(ActionEvent e) {
            view.setStartTimerButtonEnabled(false);
            task = new StopWatchTask(StopwControl.this);
            task.execute();
         }
      };
   }
   
   public Action createStopAction() {
      return new AbstractAction("Stop") {
         @Override
         public void actionPerformed(ActionEvent e) {
            view.setStartTimerButtonEnabled(true);
            task.cancel(true);
         }
      };
   }

   public void setTimerValue(int value) {
      view.setTimerValue(value);
   }
}

StopWatchTask.java

import java.util.Date;
import java.util.List;
import javax.swing.SwingWorker;

public class StopWatchTask extends SwingWorker<Void, StopWatch> {
   private StopwControl control;
   
   public StopWatchTask(StopwControl control) {
      this.control = control;
   }
   
   @Override
   protected Void doInBackground() {
      long currentTime = new Date().getTime();
      long startTime = currentTime;
      long stopTime = currentTime;
      long totalTime = 0L;

      while (!isCancelled()) {
         do {
            currentTime = new Date().getTime();
         }
         while ((currentTime - (startTime + (totalTime * 1000))) < 1000);

         totalTime = (currentTime - startTime) / 1000;
         stopTime = currentTime;

         //publish the latest stopwatch tick
         publish(new StopWatch(startTime, stopTime, totalTime));
      }

      return null;
   }

   @Override
   protected void process(List<StopWatch> ticks) {
      StopWatch latestTick = ticks.get(ticks.size() - 1);
      control.setTimerValue((int) latestTick.getTotalTime());
   }
   
}

StopWatch

public class StopWatch {
   private final long startTime;
   private final long stopTime;
   private final long totalTime;

   StopWatch(long startTime, long stopTime, long totalTime) {
      this.startTime = startTime;
      this.stopTime = stopTime;
      this.totalTime = totalTime;
   }

   public long getTotalTime() {
      return totalTime;
   }
}

[John Storta Jr.]

I cannot say if it is 'correct', but I like it. It separates everything out nicely and keeps each class down to a manageable length. Each class then has a very specific function.

The only minor part that took me a couple reads to get my head around was this part in the StopwMain class.

...
StopwView view = new StopwView();  
StopwControl control = new StopwControl();  
control.setView(view);  
view.setStartAction(control.createStartAction());  
view.setStopAction(control.createStopAction());  
...

It seemed cumbersome to declare the view and controller and then have to assign the view to the controller and use two controller methods to configure the view. It is nice having them split out, but at the same time the two classes are so dependent on each other, it results in this kind of required information exchange. I suppose that is the big issue with MVC coding. Trying to separate everything without obfuscating it too much.

Though I blame my slow-moving brain cells more than the code itself for the time it took me to grasp that piece.

I need to read up on Action and AbstractAction. I like that approach better than defining ActionPerformed with an endless if...else construct.

Thanks,
John S.