The MVC pattern is the most common pattern when it comes to web framework, but when building a rich client with swing or by using a rich client framework such as,
Eclipse Rich Client Platform, Eclipse RCP , or
Spring Rich Client Project, Spring RCP or trying to develop a similar platform yourself, thing tends to fast get very complicated. Why is that? Well, first Swing is very low tech. To do even the most simple thing requires quite a lot of lines of code. Another reason is that a lot of people have not taken their time to fully understand the MVC pattern. And maybe last there are a lot of misunderstanding what a view is in the MVC pattern and the Swing model. The Swing model is entire a presentation necessity and therefore only belong to the view.
So hopefully what I will achieve in this blog is to explain the MVC pattern and how to implement it with Swing. What I will not do in this blog is to explain how to use certain Swing components, their are quite a few tutorials out there, e.g. Oracle own Swing Tutorial,
http://docs.oracle.com/javase/tutorial/uiswing/.
Last start with explaining the MVC pattern fundamental. Maybe the easiest way to explain MVC is to look at how things work in the web world.
What happens:
- The View builds the graphical interface and reacts to user interaction, by redirecting the request to the Controller.
- The Controller respond to the request, do logic and sends response to a view.
- The View takes these parameters and presents them in a view to the user.
And as you already might have guessed the above request and response parameters is the
Model in the MVC pattern.
Before continue I would like to stress a few things extra hard:
- All graphical components are created and layed out in the view. Nowhere else!
- The Controller is neutral to whatever graphical user interface technique used! A simple control question is. Think that you must change graphical technique, from example Swing to SVT. Will you controller classes be affected? This question might feel quite theoretical but is a good eye opener if you have successfully separated the view concern from the controller concern.
- The Model should also be plain old Java object, POJO, and not infected with presentation specific codes. And again check that by asking yourself if you were forced to change presentation technique. How would that affect your model classes?
And a final reminder about the model in the MVC pattern and the model in Swing. The Swing model should not be confused with the model in the MVC pattern. The Swing model is entirely part of the choosen presentation technique, i.e. Swing and belongs only in the view and should not be mixed with the model in the MVC pattern.
The last thing before diving into concrete code is the concern of
Object Instances Lifecycle. Now you might start to wonder what that has to do with MVC. And the question is none, but the problem is still real and I think one must adress this with some thinking and strategy, because it is so vital to the application and programmers daily life. And not to mention testability. Which is something I will not go into any deeper in this blog, but I can recommned the FEST test framework. Anyhow which Swing test framework you choose you must before have a clear lifecycle handle of object in your rich client. Otherwise you will end up with untestable code.
So lest start with the
View. What does a view do?
- Layout the graphical components.
- Responds to user interaction (and sends the request to the Controller).
- Updates the view (requested from the Controller).
Lets starts with the layout.
package se.msc.examples.mvcframework;
import javax.swing.JComponent;
public abstract class AbstractView<c extends JComponent> {
private final AbstractFrame mainFrame;
private final C contentPane;
public AbstractView(AbstractFrame mainFrame) {
this.mainFrame = mainFrame;
this.contentPane = layout();
}
protected abstract C layout();
protected AbstractFrame getMainFrame() {
return mainFrame;
}
public C getContentPane() {
return contentPane;
}
}
package se.msc.examples.demo.view;
import static se.msc.examples.mvcframework.ComponentFactory.button;
import static se.msc.examples.mvcframework.ComponentFactory.buttons;
import static se.msc.examples.mvcframework.ComponentFactory.panel;
import static se.msc.examples.mvcframework.ComponentFactory.table;
import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import se.msc.examples.demo.controller.PersonController;
import se.msc.examples.demo.model.Person;
import se.msc.examples.mvcframework.AbstractFrame;
import se.msc.examples.mvcframework.AbstractView;
import se.msc.examples.mvcframework.BeanTableModel;
public class PersonListView extends AbstractView<jpanel> {
private BeanTableModel<person> tableModel;
private JTable table;
public PersonListView(AbstractFrame mainFrame) {
super(mainFrame);
}
@Override
protected JPanel layout() {
tableModel = new BeanTableModel<person>(Person.class, new String[] { "Id", "Created", "Name" });
table = table(tableModel);
JPanel panel = panel(new BorderLayout(), null);
panel.add(new JScrollPane(table), BorderLayout.CENTER);
panel.add(buttons(button("Create", new CreatePerson()), button("Retrieve", new RetrievePerson()), button("Delete", new DeletePerson())), BorderLayout.SOUTH);
return panel;
}
// ------------ Request Code Goes Here
// ------------ Response Code Goes Here
// ------------ Test Code Goes Here
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
showFrame(frame("PersonListView", new PersonListView(null).getContentPane(), null));
}
});
}
}
Try not to bother about the static component methods, such as frame, etc. they are all methods in a ComponentFactory that do all the Swing plumbing construction. I will later show them in the Appendix.
But our application will certaintly contains several views, so lets we refactor out the main method in a class thats holds the JFrame instance. What we also will do in our frame class is to solve the problem of object lifecycle and dependencies to those. We will create a map that hold all the views and another that holds the controllers. And finally we will inject the instance of the main frame to all views and controllers. In this way, we will have only one instance of all the views and controllers, but also they will be accessable everywhere.
package se.msc.examples.mvcframework;
import static se.msc.examples.mvcframework.ComponentFactory.showFrame;
import java.util.HashMap;
import java.util.Map;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JPanel;
public abstract class AbstractFrame {
protected final JFrame frame;
protected final Map<Class<? extends AbstractView<? extends JComponent>>, AbstractView<? extends JComponent>> views = new HashMap<Class<? extends AbstractView<? extends JComponent>>, AbstractView<? extends JComponent>>();
protected final Map<Class<? extends AbstractController>, AbstractController> controllers = new HashMap<Class<? extends AbstractController>, AbstractController>();
public AbstractFrame() {
registerAllViews();
registerAllControllers();
this.frame = layout();
}
protected abstract void registerAllViews();
protected abstract void registerAllControllers();
protected abstract JFrame layout();
protected void show() {
showFrame(frame);
}
@SuppressWarnings("unchecked")
public <v extends AbstractView<? extends JComponent>> V getView(Class<v> viewClass) {
return (V) views.get(viewClass);
}
@SuppressWarnings("unchecked")
public <v extends AbstractView<JPanel>> InternalFrameView<v> getInternalFrameView(Class<v> viewClass) {
return (InternalFrameView<v>) views.get(viewClass);
}
@SuppressWarnings("unchecked")
public <c extends AbstractController> C getController(Class<c> controllerClass) {
return (C) controllers.get(controllerClass);
}
}
package se.msc.examples.demo.main;
import static se.msc.examples.mvcframework.ComponentFactory.frame;
import javax.swing.JFrame;
import se.msc.examples.demo.controller.PersonController;
import se.msc.examples.demo.view.PersonFormView;
import se.msc.examples.demo.view.PersonListView;
import se.msc.examples.mvcframework.AbstractFrame;
public class MainFrame extends AbstractFrame {
@Override
protected void registerAllViews() {
views.put(PersonListView.class, new PersonListView(this));
}
@Override
protected void registerAllControllers() {
controllers.put(PersonController.class, new PersonController(this));
}
@Override
protected JFrame layout() {
return frame("Demo MVC Framework", getView(PersonFormView.class).getContentPane(), null);
}
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
new MainFrame().show();
}
});
}
}
Now lets get back to the View and add code for the user interaction request.
package se.msc.examples.demo.view;
import static se.msc.examples.mvcframework.ComponentFactory.button;
import static se.msc.examples.mvcframework.ComponentFactory.buttons;
import static se.msc.examples.mvcframework.ComponentFactory.frame;
import static se.msc.examples.mvcframework.ComponentFactory.panel;
import static se.msc.examples.mvcframework.ComponentFactory.showFrame;
import static se.msc.examples.mvcframework.ComponentFactory.table;
import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import se.msc.examples.demo.controller.PersonController;
import se.msc.examples.demo.model.Person;
import se.msc.examples.mvcframework.AbstractFrame;
import se.msc.examples.mvcframework.AbstractView;
import se.msc.examples.mvcframework.BeanTableModel;
public class PersonListView extends AbstractView<jpanel> {
private BeanTableModel<person> tableModel;
private JTable table;
public PersonListView(AbstractFrame mainFrame) {
super(mainFrame);
}
@Override
protected JPanel layout() {
tableModel = new BeanTableModel<person>(Person.class, new String[] { "Id", "Created", "Name" });
table = table(tableModel);
JPanel panel = panel(new BorderLayout(), null);
panel.add(new JScrollPane(table), BorderLayout.CENTER);
panel.add(buttons(button("Create", new CreatePerson()), button("Retrieve", new RetrievePerson()), button("Delete", new DeletePerson())), BorderLayout.SOUTH);
return panel;
}
// ------------ Request Code Goes Here
private class CreatePerson implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
getMainFrame().getController(PersonController.class).preCreatePerson();
}
}
private class RetrievePerson implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
Person person = tableModel.getBean(table.getSelectedRow());
getMainFrame().getController(PersonController.class).retrievePerson(person);
}
}
private class DeletePerson implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
Person person = tableModel.getBean(table.getSelectedRow());
getMainFrame().getController(PersonController.class).deletePerson(person);
}
}
// ------------ Response Code Goes Here
public void addPerson(Person person) {
tableModel.insert(person);
}
public void updatePerson(Person person) {
tableModel.setBean(table.getSelectedRow(), person);
}
public void deletePerson() {
tableModel.remove(table.getSelectedRow());
}
// ------------ Test Code Goes Here
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
showFrame(frame("PersonListView", new PersonListView(null).getContentPane(), null));
}
});
}
}
As you can see, it is easy to get instance references to the controller class, but the controller is also used in a type safe way. This approach have several advances compared with external configuration files where you wire views and controllers together through weak string references. What will happen if decide to refactor and change a controller method name?
The view can in the same manner be accessed in the same type safe way. To need for external configuration files, such as XML files.
So this is the basic of MVC. Now look if this holds for more complex GUI. Lets say we want to make a desktop application. Well the layout stays the same, but we need to put theirs panel in internal frame. We could do that in the view, but what happens if requirement changes and these views wants to put in a tabbed panel instead. No lets leave the views intact and instead lets created a decorating view that takes a view of panel as argument.
package se.msc.examples.mvcframework;
import static se.msc.examples.mvcframework.ComponentFactory.internalFrame;
import javax.swing.JDesktopPane;
import javax.swing.JInternalFrame;
import javax.swing.JPanel;
public class InternalFrameView<v extends AbstractView<JPanel>> extends AbstractView<jinternalframe> {
private final JDesktopPane desktopPane;
private final V view;
private final JInternalFrame internalFrame;
public InternalFrameView(AbstractFrame mainFrame, JDesktopPane desktopPane, V view) {
super(mainFrame);
this.desktopPane = desktopPane;
this.view = view;
this.internalFrame = internalFrame(view.getContentPane(), view.getClass().getSimpleName());
}
@Override
protected JInternalFrame layout() {
return internalFrame;
}
// ------------ Request Code Goes Here
// ------------ Response Code Goes Here
public V getView() {
return view;
}
public void show() {
desktopPane.add(internalFrame);
internalFrame.pack();
internalFrame.setVisible(true);
try {
internalFrame.setSelected(true);
} catch (java.beans.PropertyVetoException e) {
}
}
public void close() {
internalFrame.dispose();
desktopPane.remove(internalFrame);
}
}
Then we need to modify our main frame class.
package se.msc.examples.demo.main;
import static se.msc.examples.mvcframework.ComponentFactory.frame;
import javax.swing.JDesktopPane;
import javax.swing.JFrame;
import se.msc.examples.demo.controller.PersonController;
import se.msc.examples.demo.view.PersonFormView;
import se.msc.examples.demo.view.PersonListView;
import se.msc.examples.demo.view.PersonTreeView;
import se.msc.examples.mvcframework.AbstractFrame;
import se.msc.examples.mvcframework.InternalFrameView;
public class MainInternalFrame extends AbstractFrame {
private JDesktopPane desktopPane;
@Override
protected void registerAllViews() {
desktopPane = new JDesktopPane();
views.put(PersonListView.class, new InternalFrameView<personlistview>(this, desktopPane, new PersonListView(this)));
views.put(PersonFormView.class, new InternalFrameView<personformview>(this, desktopPane, new PersonFormView(this)));
}
@Override
protected void registerAllControllers() {
controllers.put(PersonController.class, new PersonController(this));
}
@Override
protected JFrame layout() {
return frame("Demo MVC Framework", desktopPane, new ToolBarView(this).getContentPane());
}
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
public void run() {
new MainInternalFrame().show();
}
});
}
}
package se.msc.examples.demo.view;
import static se.msc.examples.mvcframework.ComponentFactory.button;
import static se.msc.examples.mvcframework.ComponentFactory.buttons;
import static se.msc.examples.mvcframework.ComponentFactory.frame;
import static se.msc.examples.mvcframework.ComponentFactory.panel;
import static se.msc.examples.mvcframework.ComponentFactory.showFrame;
import static se.msc.examples.mvcframework.ComponentFactory.table;
import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTable;
import se.msc.examples.demo.controller.PersonController;
import se.msc.examples.demo.model.Person;
import se.msc.examples.mvcframework.AbstractFrame;
import se.msc.examples.mvcframework.AbstractView;
import se.msc.examples.mvcframework.BeanTableModel;
public class PersonListView extends AbstractView<jpanel> {
private BeanTableModel<person> tableModel;
private JTable table;
public PersonListView(AbstractFrame mainFrame) {
super(mainFrame);
}
@Override
protected JPanel layout() {
tableModel = new BeanTableModel<person>(Person.class, new String[] { "Id", "Created", "Name" });
table = table(tableModel);
JPanel panel = panel(new BorderLayout(), null);
panel.add(new JScrollPane(table), BorderLayout.CENTER);
panel.add(buttons(button("Create", new CreatePerson()), button("Retrieve", new RetrievePerson()), button("Delete", new DeletePerson())), BorderLayout.SOUTH);
return panel;
}
// ------------ Request Code Goes Here
private class CreatePerson implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
getMainFrame().getController(PersonController.class).preCreatePerson();
}
}
private class RetrievePerson implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
Person person = tableModel.getBean(table.getSelectedRow());
getMainFrame().getController(PersonController.class).retrievePerson(person);
}
}
private class DeletePerson implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
Person person = tableModel.getBean(table.getSelectedRow());
getMainFrame().getController(PersonController.class).deletePerson(person);
}
}
// ------------ Response Code Goes Here
public void addPerson(Person person) {
tableModel.insert(person);
}
public void updatePerson(Person person) {
tableModel.setBean(table.getSelectedRow(), person);
}
public void deletePerson() {
tableModel.remove(table.getSelectedRow());
}
// ------------ Test Code Goes Here
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
showFrame(frame("PersonListView", new PersonListView(null).getContentPane(), null));
}
});
}
}
package se.msc.examples.demo.view;
import static se.msc.examples.mvcframework.ComponentFactory.button;
import static se.msc.examples.mvcframework.ComponentFactory.frame;
import static se.msc.examples.mvcframework.ComponentFactory.label;
import static se.msc.examples.mvcframework.ComponentFactory.showFrame;
import static se.msc.examples.mvcframework.ComponentFactory.textField;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.text.SimpleDateFormat;
import javax.swing.JPanel;
import javax.swing.JTextField;
import se.msc.examples.demo.controller.PersonController;
import se.msc.examples.demo.model.Person;
import se.msc.examples.mvcframework.AbstractFrame;
import se.msc.examples.mvcframework.AbstractView;
import com.jgoodies.forms.builder.PanelBuilder;
import com.jgoodies.forms.factories.ButtonBarFactory;
import com.jgoodies.forms.layout.CellConstraints;
import com.jgoodies.forms.layout.FormLayout;
public class PersonFormView extends AbstractView<jpanel> {
private JTextField id;
private JTextField created;
private JTextField name;
private Person person;
public PersonFormView(AbstractFrame mainFrame) {
super(mainFrame);
}
// ------------ Request Code Goes Here
@Override
protected JPanel layout() {
FormLayout formLayout = new FormLayout("right:pref, 2dlu, pref:grow", // columns
"pref, 3dlu, pref, 3dlu, pref, 3dlu, pref"); // rows
PanelBuilder builder = new PanelBuilder(formLayout);
builder.setDefaultDialogBorder();
CellConstraints cc = new CellConstraints();
builder.add(label("Id:", null), cc.xy(1, 1));
builder.add(id = textField(10, false), cc.xy(3, 1));
builder.add(label("Created:", null), cc.xy(1, 3));
builder.add(created = textField(10, false), cc.xy(3, 3));
builder.add(label("Name:", null), cc.xy(1, 5));
builder.add(name = textField(10, true), cc.xy(3, 5));
JPanel pnlSaveCancelButtons = ButtonBarFactory.buildOKCancelBar(button("Save", new Save()), button("Cancel", new Cancel()));
builder.add(pnlSaveCancelButtons, cc.xy(3, 7, "left, center"));
return builder.getPanel();
}
private class Cancel implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
getMainFrame().getController(PersonController.class).cancelCreatePerson();
}
}
private class Save implements ActionListener {
@Override
public void actionPerformed(ActionEvent e) {
getMainFrame().getController(PersonController.class).savePerson(getValues());
}
}
// ------------ Response Code Goes Here
public Person getValues() {
person.setName(name.getText());
return person;
}
public void setValues(Person person) {
this.person = person;
if (person.getId() != null) id.setText(new String(person.getId()));
else id.setText("");
if (person.getCreated() != null) created.setText(new SimpleDateFormat("yyyy-MM-dd HH:mm:ss").format(person.getCreated()));
else created.setText("");
if (person.getName() != null) name.setText(new String(person.getName()));
else name.setText("");
}
// ------------ Test Code Goes Here
public static void main(String[] args) {
javax.swing.SwingUtilities.invokeLater(new Runnable() {
@Override
public void run() {
showFrame(frame("PersonFormView", new PersonFormView(null).getContentPane(), null));
}
});
}
}
package se.msc.examples.demo.controller;
import java.util.Date;
import java.util.UUID;
import se.msc.examples.demo.model.Person;
import se.msc.examples.demo.view.PersonFormView;
import se.msc.examples.demo.view.PersonListView;
import se.msc.examples.mvcframework.AbstractController;
import se.msc.examples.mvcframework.AbstractFrame;
public class PersonController extends AbstractController {
public PersonController(AbstractFrame mainFrame) {
super(mainFrame);
}
public void savePerson(Person person) {
if (person.getId() == null) postCreatePerson(person);
else updatePerson(person);
}
// ------------ CRUD Code Goes Here
public void preCreatePerson() {
// 1. do server logic
Person person = new Person();
// 2. do swing response
getMainFrame().getInternalFrameView(PersonFormView.class).getView().setValues(person);
getMainFrame().getInternalFrameView(PersonFormView.class).show();
}
private void postCreatePerson(Person person) {
// 1. do server logic
person.setId(UUID.randomUUID().toString());
person.setCreated(new Date());
// 2. do swing response
getMainFrame().getInternalFrameView(PersonFormView.class).close();
getMainFrame().getInternalFrameView(PersonListView.class).getView().addPerson(person);
}
public void cancelCreatePerson() {
getMainFrame().getInternalFrameView(PersonFormView.class).close();
}
public void retrievePerson(Person person) {
// 1. do server logic
// 2. do swing response
getMainFrame().getInternalFrameView(PersonFormView.class).getView().setValues(person);
getMainFrame().getInternalFrameView(PersonFormView.class).show();
}
private void updatePerson(Person person) {
// 1. do server logic
// 2. do swing response
getMainFrame().getInternalFrameView(PersonFormView.class).close();
getMainFrame().getInternalFrameView(PersonListView.class).getView().updatePerson(person);
}
public void deletePerson(Person person) {
// 1. do server logic
// 2. do swing response
getMainFrame().getInternalFrameView(PersonListView.class).getView().deletePerson();
}
}
Conclusion
MVC greatly reducing the coupling between seperated classes, but doing right is not always easy.
The complete source code from
https://sourceforge.net/projects/swingframework/files/.
