Build UI in Python using the MVC pattern

Model-View-Controller

This story follows the User Interfaces series. You can find the other related stories here:

When it comes to building user interfaces, you have to be methodical and organized, otherwise, the code can quickly become unreadable, even messy.

I built my first UI without using any pattern, and when I wanted to scale it or modify it, it was just impossible because of the bad code. Then, I discovered the MVC pattern, and it makes things much easier.

What is the MVC Pattern

The MVC pattern is a Design Pattern (a way to structure a functionality in the code). It specifies that an application consists of 3 layers: a model, a view, and a controller linking them.

• The model contains the pure application data, and is usually linked to a backend, or is the backend itself.
• The view is what is shown to the user. It displays the data in a readable format and allows interactions between the user and the application in an easy and intuitive way.
• The controller is what links the model and the view. It listens to events or actions executed by the user on the view and executes the corresponding actions on the data layer. The view is then updated either by the controller or by the model.

This pattern can be quite difficult to understand, so let’s see an example of an implementation in Python.

MVC Implementation in Python

I don’t want to bother you with UI packages like Tkinter or PyQt, so I’ll show you an implementation without using any dependencies.

We’ll build a sample supermarket app. It will be able to display items it contains, add new items, or remove existing ones.

Model

First, let’s define our model. It’s a supermarket. It should contain a list of the items we can find in this supermarket. It should also implement methods to add or remove items from this list. Lastly, it should also implement methods to get items.

View

After building the model, we’ll build the view. It should contain methods to display items to the user. It should also contain a method to inform the user about the status of the model. Lastly, we’ll build it as if it was a UI, so we’ll add 3 buttons:

• A button to add an item to the supermarket.
• A button to remove an item from the supermarket.
• A button to display all the items contained in the supermarket.

As I don’t use any external dependency, let’s start with creating a Button class:

How does it work?

A button stores a function that will be executed when it will be clicked. This function is not defined in the view, but is defined in the controller and then connected to the button. It makes the view independent from the actions you can execute with it and linked easily to the model.

Now, we can create our view:

Controller

Let’s connect the view and the model with the controller now. It should contain methods you find in the view and in the controller, but while adding the interactions between these 2 entities.

Let’s begin with the code, and then I’ll explain it:

First, we initialize our controller while providing it a view and a model as parameters. So it can then create interactions between them.

connect_view is used to connect the view to the controller. It’s in this method that we assign actions to the buttons. So, we connect each button with a method from the controller.

When the “add” button will be clicked on the view, it will execute the add_item method from the controller. This method adds an item to the model and updates the status of the view to display that an item has been added to the model. When the “remove” button will be clicked, it will execute the remove_item method, which is similar to the add_item method.

When the “display” button will be clicked, it will execute the display_items method. This method just retrieves all the items from the model and calls the display_items method from the view.

Now I think you understand what I was saying when I said that the controller links the view and the model.

We can finally try our application in a little main :

First, we define our items (an apple, a banana, etc…). Then, we initialize our application’s objects. And finally, we just try our application by simulating clicks on buttons. Here is the output we get:

Nice, it’s working!

Final Note

I hope you’ve understood this pattern. There are many versions of it, depending on what is required sometimes the view can interact directly with the model. For me, I like to keep purposes separated so I never mix the view and the model.

You can find the other stories of this series here:

To explore more of my Python stories, click here! You can also access all my content by checking this page.

If you liked the story, don’t forget to clap, comment, and maybe follow me if you want to explore more of my content :)

You can also subscribe to me via email to be notified every time I publish a new story, just click here!

If you’re not subscribed to medium yet and wish to support me or get access to all my stories, you can use my link: