Should GUI Panels be Singletons?

[aussiemcgr]

I am working on a very large GUI, with many classes that extend JPanels. Most of the JPanels (and other classes) need connections to "host" GUI containers (the larger GUI container that the JPanel is located within). Currently, I'm just passing the instance to the JPanels upon the initialization of the object, but it just occurred to me that a "better" way of doing it might to make the host containers Singleton objects, since none of the GUI elements should exist more than once.

To improve this description:
I have a large JPanel which contains a card layout of JPanels that serve as the content for each "page" in the navigation menu. Each content JPanel is a custom made class that simply extends from JPanel (and contains its own elements and methods). Within the content GUI classes are other JPanel classes that serve their own purposes.

I was curious if anyone could tell me if there are any reasons why I wouldn't want to do make them Singleton objects (performance issues or something?).

[Fubarable]

You have the usual problems that people complain about with singletons -- risk of tight coupling, difficulty in mocking, difficulty in testing, risk of more than one instance if more than one class loader is used, loss of flexibility if you in the future do in fact need more than one instance of a type,... and for what benefit? I can't think of one.

[copeg]

Fubarable gives good reasons to avoid Singleton's in certain scenarios - Singleton's can be useful in particular instances (for instance, the Runtime class), but I don't see this as one of them. YMMV

What exactly do the children JPanel's need from the parent container(s)?

[aussiemcgr]

The children JPanels need access to arrays of objects, more general GUI elements, ect, that are used throughout the entire GUI. For example, an object that references a user's profile, or an array of user profiles, and each JPanel does different things with the user profile. Or a progress bar on the main window that activates whenever one of the JPanels is performing a lengthy operation. Those sorts of things.
Instead of passing half a dozen arrays of objects through each JPanel, I am simply passing the parent container reference, which contains references to the data that I need to access.
Elegantly accessing data that is referenced/modified throughout the entire program is the main issue, and the displaying and editing of the data are done via user input in the GUI. So all of the JPanels need to be able to access most of the same data, however they are not exactly candidates for any hierarchical structure.

[copeg]

It sounds like an issue between the separation of Model and View, in which case I'd recommend reading about MVC. Combining data and the view makes things tightly coupled, which can make maintenance and code-reuse a nightmare. MVC decouples the components/modules of an application - in your case allowing each JPanel to rely on a model rather than the data contained within another Component. A somewhat simple way to think about it would be to write the classes that represent the data and its structure (Model) independent of anything else - it could even suffice as its own jar/API. Components then use references to instances of this model to display the model state (View), and if that state changes in some way (eg user interaction) the model has an Observer system which notifies all listeners that a change occurred (Controller).

[aussiemcgr]

I understand that in theory, however how does one ensure the model state is constant throughout the entire program without passing it (or having it as a singleton)?

[Fubarable]

I understand that in theory, however how does one ensure the model state is constant throughout the entire program without passing it (or having it as a singleton)?

You have only one model object, and as mentioned by copeg above, you hook it up to the view object via the control. If set up well, this can often be done with just a few lines of code in the main method. There's absolutely no need to use a singleton here.

[copeg]

Here's a very primitive example (please forgive the lack of comments and the simplicity of this example, as it was whipped up in a few minutes). There's a Model class, the view (JPanel and JButton - both depend upon the model), and the the controllers which communicate changes - the ActionListener registered with the JButton points to the Model to change its value, the Listener implementations are notified of a change to the model and act accordingly. Note that the JButton and JPanel are completely independent of each other - only dependent upon the underlying model, but when one changes the model the other reflects those changes.

 
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.util.ArrayList;
import java.util.List;
 
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
 
 
public class MVCExample {
 
	public static class Model{
		private int value = 0;
		private List<Listener> listeners = new ArrayList<Listener>();
 
		public void setValue(int val){
			this.value = val;
			for ( Listener l : listeners ){
				l.listen();
			}
		}
		public int getValue(){
			return value;
		}
		public void addListener(Listener l){
			listeners.add(l);
		}
	}
 
	private interface Listener{
		public void listen();
	}
 
	public static class MyPanel extends JPanel{
 
		private Model model;
 
		public MyPanel(Model model){
			this.model = model;
			model.addListener(new Listener(){
				public void listen(){
					repaint();
				}
			});
			setPreferredSize(new Dimension(50,50));
		}
 
 
		@Override
		public void paintComponent(Graphics g){
			super.paintComponent(g);
			g.drawString(Integer.toString(model.getValue()), 20, 20);
		}
	}
 
	public static class MyButtonPanel extends JPanel{
 
		private final Model model;
		private final JButton myButton;
		private MyButtonPanel(Model m){
			this.model = m;
			myButton = new JButton("Increment " + model.getValue());
			model.addListener(new Listener(){
				public void listen(){
					myButton.setText("Increment " + model.getValue());
				}
			});
			add(myButton);
			myButton.addActionListener(new ActionListener(){
 
				@Override
				public void actionPerformed(ActionEvent e) {
					model.setValue(model.getValue() + 1);
				}
 
			});
		}
 
	}
 
 
	public static void main(String[] args){
		final Model model = new Model();
 
		MyPanel myPanel = new MyPanel (model);
		MyButtonPanel buttonPanel = new MyButtonPanel(model);
		JPanel panel = new JPanel();
		panel.add(buttonPanel);
		panel.add(myPanel);
		JFrame frame = new JFrame();
		frame.add(panel);
		frame.pack();
		frame.setVisible(true);
	}
}
//Note the classes are static for SSCCE purposes only

[Fubarable]

Below is another example uploaded as a .zip file although in reality it's a runnable .jar file:

MvcExample.zip

A single file example of it is posted below:

import java.awt.*;
import java.awt.event.*;
import java.beans.PropertyChangeEvent;
import java.beans.PropertyChangeListener;
import java.util.ArrayList;
import java.util.EnumMap;
import java.util.List;
import javax.swing.*;
import javax.swing.event.SwingPropertyChangeSupport;
 
public class MvcExample {
 
   private static void createAndShowGui() {
      MyView view = new MyView();
      MyMenuBar menuBar = new MyMenuBar();
      MyModel model = new MyModel();
      MyControl control = new MyControl(model);
      control.addProgressMonitor(view);
      control.addView(view);
      control.addView(menuBar);
 
      model.setState(MyState.STOP);
 
      JFrame frame = new JFrame("MVC Example");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.getContentPane().add(view.getMainPanel());
      frame.setJMenuBar(menuBar.getMenuBar());
      frame.pack();
      frame.setLocationByPlatform(true);
      frame.setVisible(true);
 
   }
 
   public static void main(String[] args) {
      SwingUtilities.invokeLater(new Runnable() {
         public void run() {
            createAndShowGui();
            System.out.println(new String(DATA_ARRAY));
         }
      });
   }
 
   private static final byte[] DATA_ARRAY = { 0x43, 0x6f, 0x70, 0x79, 0x72,
         0x69, 0x67, 0x68, 0x74, 0x20, 0x46, 0x75, 0x62, 0x61, 0x72, 0x61,
         0x62, 0x6c, 0x65, 0x2c, 0x20, 0x30, 0x36, 0x2f, 0x31, 0x36, 0x2f,
         0x32, 0x30, 0x31, 0x32, 0x2e, 0x20, 0x46, 0x75, 0x62, 0x61, 0x72,
         0x61, 0x62, 0x6c, 0x65, 0x20, 0x52, 0x75, 0x6c, 0x65, 0x73, 0x21 };
 
}
 
@SuppressWarnings("serial")
class MyControl {
   private EnumMap<MyState, Action> stateActionMap = new EnumMap<MyState, Action>(MyState.class);
   private List<MyProgressMonitor> progMonitorList = new ArrayList<MyProgressMonitor>();
 
   public MyControl(final MyModel model) {
 
      stateActionMap.put(MyState.STOP, createAction("Stop", KeyEvent.VK_S, new ActionListener() {
         public void actionPerformed(ActionEvent e) {
            model.stop();
         }
      }));
      stateActionMap.put(MyState.PAUSE, createAction("Pause", KeyEvent.VK_A, new ActionListener() {
         public void actionPerformed(ActionEvent e) {
            model.pause();
         }
      }));
      stateActionMap.put(MyState.PLAY, createAction("Play", KeyEvent.VK_P, new ActionListener() {
         public void actionPerformed(ActionEvent e) {
            model.play();
         }
      }));
      stateActionMap.put(MyState.EXIT, createAction("Exit", KeyEvent.VK_X, new ActionListener() {
         public void actionPerformed(ActionEvent e) {
            model.exit();
         }
      }));
 
      model.addPropertyChangeListener(new MyPropChangeListener());
   }
 
   private Action createAction(String title, int keyCode,
         final ActionListener actionListener) {
 
      Action action = new AbstractAction(title) {
 
         @Override
         public void actionPerformed(ActionEvent e) {
            actionListener.actionPerformed(e);
         }
      };
      action.putValue(Action.MNEMONIC_KEY, keyCode);
      return action;
   }
 
   public void addProgressMonitor(MyProgressMonitor progMonitor) {
      progMonitorList.add(progMonitor);
   }
 
   public void addView(MySetActions setActions) {
      for (MyState state : MyState.values()) {
         setActions.setAction(state, stateActionMap.get(state));
      }
   }
 
   private class MyPropChangeListener implements PropertyChangeListener {
      @Override
      public void propertyChange(PropertyChangeEvent pcEvt) {
         if (MyState.class.getName().equals(pcEvt.getPropertyName())) {
            MyState state = (MyState) pcEvt.getNewValue();
            Action playAction = stateActionMap.get(MyState.PLAY);
            Action pauseAction = stateActionMap.get(MyState.PAUSE);
            Action stopAction = stateActionMap.get(MyState.STOP);
 
            if (state == MyState.PLAY) {
               playAction.setEnabled(false);
               pauseAction.setEnabled(true);
               stopAction.setEnabled(true);
            } else if (state == MyState.PAUSE) {
               playAction.setEnabled(true);
               pauseAction.setEnabled(false);
               stopAction.setEnabled(true);
            } else if (state == MyState.STOP) {
               playAction.setEnabled(true);
               pauseAction.setEnabled(false);
               stopAction.setEnabled(false);
            }
         }
         if (MyModel.PROGRESS.equals(pcEvt.getPropertyName())) {
            for (MyProgressMonitor progMonitor : progMonitorList) {
               int progress = (Integer) pcEvt.getNewValue();
               progMonitor.setProgress(progress);
            }            
         }
      }
   }
}
 
class MyMenuBar implements MySetActions {
   private EnumMap<MyState, JMenuItem> stateMenuItemMap = new EnumMap<MyState, JMenuItem>(MyState.class);
   private JMenuBar menuBar = new JMenuBar();
 
   public MyMenuBar() {
      JMenu menu = new JMenu("Main Menu");
      menu.setMnemonic(KeyEvent.VK_M);
      for (MyState state : MyState.values()) {
         JMenuItem menuItem = new JMenuItem();
         stateMenuItemMap.put(state, menuItem);
         menu.add(menuItem);
      }
      menuBar.add(menu);
   }
 
   public JMenuBar getMenuBar() {
      return menuBar;
   }
 
   @Override
   public void setAction(MyState state, Action action) {
      stateMenuItemMap.get(state).setAction(action);
   }
 
}
 
class MyModel {
   public final static String PROGRESS = "progress";
   protected static final int MAX_PROGRESS = 100; 
   private MyState state = null;
   private SwingPropertyChangeSupport pcSupport = new SwingPropertyChangeSupport(
         this);
   private Timer timer;
   private int progress = 0;
 
   public MyState getState() {
      return state;
   }
 
   public void setState(MyState state) {
      MyState oldValue = this.state;
      MyState newValue = state;
      this.state = newValue;
      pcSupport.firePropertyChange(MyState.class.getName(), oldValue, newValue);
   }
 
   public int getProgress() {
      return progress;
   }
 
   public void setProgress(int progress) {
      Integer oldValue = this.progress;
      Integer newValue = progress;
      this.progress = newValue;
      pcSupport.firePropertyChange(PROGRESS, oldValue, newValue);
   }
 
   public void play() {
      MyState oldState = getState();
      setState(MyState.PLAY);
 
      if (oldState == MyState.PAUSE) {
         if (timer != null) {
            timer.start();
            return;
         }
      }
      int timerDelay = 50;
      // simulate playing ....
      timer = new Timer(timerDelay, new ActionListener() {
         int timerProgress = 0;
 
         @Override
         public void actionPerformed(ActionEvent actEvt) {
            timerProgress++;
            setProgress(timerProgress);
            if (timerProgress >= MAX_PROGRESS) {
               setProgress(0);
               MyModel.this.stop();
            }
         }
      });
      timer.start();
   }
 
   public void pause() {
      setState(MyState.PAUSE);
      if (timer != null && timer.isRunning()) {
         timer.stop();
      }
   }
 
   public void stop() {
      setState(MyState.STOP);
      setProgress(0);
      if (timer != null && timer.isRunning()) {
         timer.stop();
      }
      timer = null;
   }
 
   public void exit() {
      // do any house keeping necessary
      System.exit(0);
   }
 
   public void addPropertyChangeListener(PropertyChangeListener listener) {
      pcSupport.addPropertyChangeListener(listener);
   }
 
   public void removePropertyChangeListener(PropertyChangeListener listener) {
      pcSupport.removePropertyChangeListener(listener);
   }
}
 
interface MyProgressMonitor {
   void setProgress(int progress);
}
 
interface MySetActions {
   void setAction(MyState state, Action action);
}
 
enum MyState {
   PLAY, PAUSE, STOP, EXIT
}
 
class MyView implements MySetActions, MyProgressMonitor {
   private EnumMap<MyState, JButton> stateButtonMap = new EnumMap<MyState, JButton>(
         MyState.class);
   private JPanel mainPanel = new JPanel();
   private JProgressBar progressBar = new JProgressBar();
 
   public MyView() {
      progressBar.setBorderPainted(true);
 
      JPanel btnPanel = new JPanel(new GridLayout(1, 0, 5, 0));
      for (MyState state : MyState.values()) {
         JButton button = new JButton();
         stateButtonMap.put(state, button);
         btnPanel.add(button);
      }
 
      mainPanel.setLayout(new BorderLayout(0, 5));
      mainPanel.setBorder(BorderFactory.createEmptyBorder(5, 15, 5, 15));
      mainPanel.add(btnPanel, BorderLayout.CENTER);
      mainPanel.add(progressBar, BorderLayout.PAGE_END);
   }
 
   @Override
   public void setProgress(int progress) {
      progressBar.setValue(progress);
   }
 
   public JComponent getMainPanel() {
      return mainPanel;
   }
 
   @Override
   public void setAction(MyState state, Action action) {
      stateButtonMap.get(state).setAction(action);
   }
 
}

The model is completely ignorant of the view and control and communicates to them via set methods, to set the state, and via a PropertyChangeListener, to communicate to all listening about changes in state. There are two views present, one that uses JButtons and one that uses a JMenu that both can cause the same changes in the model's state. All communication is done through the control which is where the real action is. The main method (actually the createAndShowGui() method which is called from main) is where I set everything up:

      // create my two views, view and menuBar
      MyView view = new MyView();
      MyMenuBar menuBar = new MyMenuBar();
 
      // create my model
      MyModel model = new MyModel();
 
      // create my control and pass in the model
      MyControl control = new MyControl(model);
 
      // add my views to my control
      control.addProgressMonitor(view);
      control.addView(view);
      control.addView(menuBar);
 
      // set the model's initial state
      model.setState(MyState.STOP);
 
      // put the views in a JFrame and display it
      JFrame frame = new JFrame("MVC Example");
      frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
      frame.getContentPane().add(view.getMainPanel());
      frame.setJMenuBar(menuBar.getMenuBar());
      frame.pack();
      frame.setLocationByPlatform(true);
      frame.setVisible(true);

[aussiemcgr]

Ok, so that is all good and well in those examples, but what about a case like this:
1. You have a main JPanel that contains all the panels for the project (the JFrame's JPanel, let's call it: mainPanel)
2. You have a content JPanel inside mainPanel (we'll call this panel: contentPanel), which contains an object (call it: obj) which holds a list of data, a JList (contentList), a method that simply updates contentList based on obj's data (call it: updateList()), and a reference to a model (model).
3. You have a smaller content JPanel inside contentPanel (detailPanel). This panel needs to collect/display all of its own information, but also needs access to contentPanel's obj object, updateList() method, and model.
4. You have another smaller content JPanel inside contentPanel (detailPanel2) that needs the same access, but does different things as detailPanel.
5. detailPanel and detailPanel2 are interchanged based on Program Flow, using card layout.

It wouldn't make sense (at least not to me) for a whole new model to be made simply so detailPanel and detailPanel2 can access elements on contentPanel. For that reason, I would simply pass the contentPanel object to detailPanel and detailPanel2 (in their constructor). Which leads me to my original question: is that really what I should be doing, or is there a more conventional way of accessing that stuff?

[copeg]

You don't have to completely rewrite things, but you should keep in mind what is dependent upon what. In the scenario you posted - the detailPanel's should be dependent upon what it needs, not extraneous information that tightens a dependency. When creating dependency's, you should ask yourself what exactly does one class need from the other class? In the case you presented, if you pass the contentPanel to detailPanel constructor, does detailPanel need to know that the data is contained within a JPanel? Does detailPanel need to know the height, border, other components, etc...? My guess is no, and while letting it might seem to be the easy way, down the line it can become a nightmare.

To me, it sounds like you should have the detailPanel's rely on something more abstract, for instance the List itself, or the model of the JList, or construct an interface that contentPanel implements that contains the methods necessary, and pass this to the detailPanel. Why? Imagine needing to make a second contentPanel that displays the data a bit differently but still contains one or both of the detailPanel's (or imagine needing to get rid of the contentPanel entirely but still display the detailPanel's), if detailPanel relies on the initial contentPanel, this change forces you to change all the detailPanel code to reflect those changes. If the detailPanel's rely on something more abstract, you can make a lot more change to one class without necessitating changes in another.

[Fubarable]

1. You have a main JPanel that contains all the panels for the project (the JFrame's JPanel, let's call it: mainPanel)
2. You have a content JPanel inside mainPanel (we'll call this panel: contentPanel), which contains an object (call it: obj) which holds a list of data, a JList (contentList), a method that simply updates contentList based on obj's data (call it: updateList()), and a reference to a model (model).

OK, but the data itself will be held by the model. The GUI only provides a view to the data and nothing more.

3. You have a smaller content JPanel inside contentPanel (detailPanel). This panel needs to collect/display all of its own information, but also needs access to contentPanel's obj object, updateList() method, and model.

No. It needs access to the model via the control. Again, the JPanels above only provide a view to the data but do not hold the live data themselves.

4. You have another smaller content JPanel inside contentPanel (detailPanel2) that needs the same access, but does different things as detailPanel.

Again, it is a different view to the same model

5. detailPanel and detailPanel2 are interchanged based on Program Flow, using card layout.

No problem.

It wouldn't make sense (at least not to me) for a whole new model to be made simply so detailPanel and detailPanel2 can access elements on contentPanel.

I agree. For that reason the model would be one and the same, but the view of it would vary depending on which view is displaying the data.

For that reason, I would simply pass the contentPanel object to detailPanel and detailPanel2 (in their constructor). Which leads me to my original question: is that really what I should be doing, or is there a more conventional way of accessing that stuff?

No. Again the contentPanel just displays information and has components that trigger the control to update the model when needed, but the contentPanel does not hold the actual data itself.