MVC Pattern Basics

The MVC pattern describes a way to organize the components of a graphical user interface. Therefore it must cover all aspects of a user’s interaction with an application.
If we take an analytic look at a graphical user interface we will understand why the MVC pattern is composed of the 3 elements model, view and controller.

• Model
  A model is an abstraction of something that you want to present the user in a view.
  Therefore there are two stereotypes of models:
  • UI-model
    A ui model is an abstraction of a ui component’s state. Therefore it has properties like: focus, enablement, selection and so on. A good example for a ui model is the java swing ButtonModel
  • Data-model
    A data model abstracts the data that is presented to the user by view components. They encapsulate a data structure and not their representation. Data models do not depend on the view component that presents the data to the user, This is the great benefit, because it allows developers to replace the data’s representation (view) without touching the data. Of course the data’s structure often couples the model to a specific view, but in most cases you can adapt one model to another. A concrete example will show this later. Examples of data models are ListModel. TableModel or Document.
• View
  A View covers the aspects of how data is presented to the user and how visual componets are organized (painted, layouted, clipped, parent – child, etc.). A view gets it’s state from a UI model and the data that it presents from a data model. Examples of views are JList, JTable or JTextArea.
• Controller
  A controller is a component that is invoked as a result of a user’s action on a view. Most controllers are invoked because of button clicks, but they might also be invoked due to a selection in a list or combo box. In general every input that a user can make (like keyboard input, mouse input) can execute controllers. Controllers can further be divided into controllers that execute application logic code (e.g. by invoking an application service) and controllers that are responsible for restructuring the ui. In most cases the restructuring of the ui is decoupled from the application logic controller code. E.g. the controller returns an identifier and a controller execution framework takes this identifier to decide which restructuring has to be applied.

The following figure shows an architectural perspective on the MVC pattern.

A concrete MVC example

Now we want to leave the abstract level and take a look at a concrete MVC design and how it works.
Suppose an application that let you search for persons. The UI must have a text field where the user can enter a search string and it might have a button to start the search. Finally it must have an area where the search results are displayed. In our case it is implemented with a list component.
The normal use case is:

1. The user enters a search string in the text field
2. The user clicks the search button.
3. The search result is displayed in the result list.

The following sequence diagram shows how the user’s botton click moves through the application until the result gets finally displayed in the list component.

Java Swing MVC

The java swing architecture is very likely MVC based and the best place to get a deep insight into the architecture is the article “A Swing Architecture Overview” that was written by Amy Fowler. Unfortunatly the images are not displayed in the article since it moved from Sun’s website to the Oracle website. So you better start a google search for “A Swing Architecture Overview PDF Amy Fowler“. You should find a PDF document that was published by the “swing connection”. This document contains the images and diagrams that give you the great overview over the swing architecture.

A Swing Design Example

The best way to get closer to the java swing architecture is an example that is easy enough to understand and complex enough to give an idee of how it can be implemented.
Therefore I tried to create such an example application and designed it in the following way:

1) An action in swing is a model of something that can be executed as well as the execution implementation (controller logic) itself. It has ui model properties like a name, icon or accelerator key and implements an ActionListener. Therefore an action fulfills the aspects of a controller and a UI model. The actionPerformed() method of the ActionListner executes the controller code. Some developers use the actionPerformed() method to write the controller code while others decouple an Action from a Controller by defining a own Controller.execute(…) interface. Depending on your needs and the application compexity you should decide how you want to implement it, If the application is easy or small I prefer to write the controller code directly in an Action. If the application gets bigger or more complex it is often useful to decouple an Action from the controller code.

The Swing MVC Design Example shows how a normal swing application is designed. In my case I have a JFrame as the base container for the components I want to display. The JFrame contains a JTable, JList, JComboBox and a JMenu with a JMenuItem. These components represent the views of the MVC pattern and are highlighted in green.

• To adapt the application’s data I defined a PersonsTableModel, a ListAdapterListModel, and a ListComboBoxModel. The starting point of these models is the ListAdapterListModel that is a javax.swing.ListModel and it simply takes a java.util.List of objects. So it simply adapts a java.util.List to an javax.swing.ListModel.

The resulting application looks like this:

Try it now

using Java Webstart 

or download and run it from command line

java -jar mvc-with-java-swing-2-SNAPSHOT.jar

Source code of the “Swing MVC Implementation Example”

If you want to study the example’s source code you need:

• Maven 3 to build it
• Java SDK 1.7
• Source Code: https://github.com/link-intersystems/blog/tree/master/mvc-with-java-swing

EDIT on 28.06.2023

A pluggable Java Swing MVC architecture

I recently published another github repository that contains an example of how to create a pluggable Swing MVC application and also discusses the MVC pattern in general.

Take a look at https://github.com/link-intersystems/java-swing-mvc-plugin-architecture

---

Recommended Reading

---