{"id":2489,"date":"2021-10-11T12:05:52","date_gmt":"2021-10-11T12:05:52","guid":{"rendered":"https:\/\/www.pythontutorial.net\/?page_id=2489"},"modified":"2022-09-07T01:03:37","modified_gmt":"2022-09-07T01:03:37","slug":"tkinter-mvc","status":"publish","type":"page","link":"https:\/\/www.pythontutorial.net\/tkinter\/tkinter-mvc\/","title":{"rendered":"Tkinter MVC"},"content":{"rendered":"\n

Summary<\/strong>: in this tutorial, you’ll learn how to structure a Tkinter application using the model-view-controller (MVC) pattern.<\/p>\n\n\n\n

Introduction to Tkinter MVC #<\/a><\/h2>\n\n\n\n

As your application grows, its complexity also increases. To make the application more manageable, you can use the model-view-controller design pattern.<\/p>\n\n\n\n

The MVC design pattern allows you to divide the application into three main components: model, view, and controller. This structure helps you focus on the logic of each part and make it more maintainable, especially when the application grows.<\/p>\n\n\n\n

The following diagram illustrates the MVC design pattern:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Model #<\/a><\/h3>\n\n\n\n

A model in MVC represents the data. A model deals with getting data from or writing data into storage such as a database or file. The model may also contain the logic to validate the data to ensure data integrity.<\/p>\n\n\n\n

The model must not depend on the view and controller. In other words, you can reuse the model in other non-Tkinter applications such as web and mobile apps.<\/p>\n\n\n\n

View #<\/a><\/h3>\n\n\n\n

A view is the user interface that represents the data in the model. The view doesn’t directly communicate with the model. Ideally, a view should have very little logic to display data. <\/p>\n\n\n\n

The view communicates with the controller directly. In Tinker applications, the view is the root window<\/a> that consists of widgets. <\/p>\n\n\n\n

Controller #<\/a><\/h3>\n\n\n\n

A controller acts as the intermediary between the views and models. The controller routes data between the views and models. <\/p>\n\n\n\n

For example, if users click the save button on the view, the controller routes the “save” action to the model to save the data into a database and notify the view to display a message.<\/p>\n\n\n\n

Tkinter MVC example #<\/a><\/h2>\n\n\n\n

We’ll take a simple example to illustrate how to apply the MVC design pattern in a Tkinter application:<\/p>\n\n\n\n

\"python<\/figure>\n\n\n\n

The application that you’ll build contains an entry for entering an email. When you click the save button, the controller calls the model to validate the email.<\/p>\n\n\n\n

If the email is valid, the model saves the email into a text file and the view shows a success message:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If the email is not valid, the view shows an error message:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

We’ll hide the message after 3 seconds.<\/p>\n\n\n\n

Model class #<\/a><\/h3>\n\n\n\n

The following defines the Model class that has an email property:<\/p>\n\n\n

class<\/span> Model<\/span>:<\/span>\n    def<\/span> __init__<\/span>(self, email)<\/span>:<\/span>\n        self.email = email\n\n    @property<\/span>\n    def<\/span> email<\/span>(self)<\/span>:<\/span>\n        return<\/span> self.__email\n\n    @email.setter<\/span>\n    def<\/span> email<\/span>(self, value)<\/span>:<\/span>\n        \"\"\"\n        Validate the email\n        :param value:\n        :return:\n        \"\"\"<\/span>\n        pattern = r'\\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Z|a-z]{2,}\\b'<\/span>\n        if<\/span> re.fullmatch(pattern, value):\n            self.__email = value\n        else<\/span>:\n            raise<\/span> ValueError(f'Invalid email address: {value}<\/span>'<\/span>)\n\n    def<\/span> save<\/span>(self)<\/span>:<\/span>\n        \"\"\"\n        Save the email into a file\n        :return:\n        \"\"\"<\/span>\n        with<\/span> open('emails.txt'<\/span>, 'a'<\/span>) as<\/span> f:\n            f.write(self.email + '\\n'<\/span>)<\/code><\/span>Code language:<\/span> Python<\/span> (<\/span>python<\/span>)<\/span><\/small><\/pre>\n\n\n
How it works:<\/p>\n\n\n\n