We have already learned about Swing and its basic components. Now it’s time to go deeper and learn more about Swing architecture.

Model-View-Controller

Swing framework is based on the Model-View-Controller (MVC) pattern. MVC divides the program logic into three independent parts: model, view, and controller, where:

  • The model is responsible for keeping the state of the objects;
  • The view is responsible for the visual representation of data, such as charts, diagrams;
  • The controller is responsible for handling events.

Take a look at the diagram that illustrates the MVC logic:

Model-delegate

Swing uses a more simplified version of MVC called model-delegate. This design merges the view and the controller into a single element called UI-delegate. This means that each component in Swing contains a model and a UI delegate. The delegate, in turn, includes view and controller:

The model is responsible for maintaining the state of the component. For example, it manages the data concerning the state of a button: whether it is pressed or not. The UI delegate takes care of how to present this information to the user on the screen. For example, the size, shape, and location of the button.

For better understanding, let’s take a look at an example of Swing components. JTable is a component that can be used to represent tabular data in GUI applications. Each JTable has an underlying TableModel which is responsible for controlling the data provided in the table.

Example in Swing

Although Swing architecture is not a classic example of Model-View-Controller, we can build an application with pure MVC architecture by creating custom classes as shown below.

Now, let’s look at an example of the code. We want to create a program that increases the window label number each time a button is pressed. The architecture of the project will be the following:

  • the model represented by an integer value;
  • the view represented by a button, a label, and a frame;
  • the controller is represented as a function that handles pressing the button and increases the model value.

The Model class keeps the state of objects:

class Model {
    private int number;

    public Model(int number) {
        this.number = number;
    }

    public int getNumber() {
        return number;
    }

    public void increment() {
        this.number++;
    }
}

The View class represents user interface throughout JLabelJButton, and JFrame:

class View {
    private JFrame frame;
    private JLabel label;
    private JButton button;

    public View() {
        frame = new JFrame("View");
        label = new JLabel();
        button = new JButton("Button");
        frame.getContentPane().setLayout(new BorderLayout());
        // closes on exit
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        // window size
        frame.setSize(500, 500);
        frame.setVisible(true);
        frame.getContentPane().add(label, BorderLayout.CENTER);
        frame.getContentPane().add(button, BorderLayout.SOUTH);
    }

    public void setText(String str) {
        label.setText(str);
    }

    public JButton getButton() {
        return button;
    }
}

The Controller class handles the event: when the button is pressed, the Label‘s value is increased.

class Controller {
    private Model model;
    private View view;
    private ActionListener actionListener;

    public Controller(Model model, View view) {
        this.model = model;
        this.view = view;
    }

    public void control() {
        actionListener = actionEvent -> {
            model.increment();
            view.setText(Integer.toString(model.getNumber()));
        };
        view.getButton().addActionListener(actionListener);
    }
}

We hope that this example helped you to understand MVC architecture in practice.

Conclusion

In this topic, we studied Model-View-Controller architecture and got introduced to its lighter version called UI-delegate, which is used by Swing. The main idea of MVC is splitting the program logic into independent parts, which makes the code reusable and modifiable.

Some important advantages of MVC are:

  • the ability to modify one part of the application without affecting the others;
  • the reusability of one model with different views.

Leave a Reply

Your email address will not be published.