如何使用model/view/controller方法创建GUI？

Question

我需要理解model/view/controller方法背后的概念，以及如何以这种方式编写GUI。这里有一个非常基本的，简单的GUI。有人能给我解释一下如何用MVC重写这段代码吗？

from tkinter import *

class Application(Frame):
    """ GUI application that creates a story based on user input. """
    def __init__(self, master):
        """ Initialize Frame. """
        super(Application, self).__init__(master)  
        self.grid()
        self.create_widgets()

    def create_widgets(self):
        """ Create widgets to get story information and to display story. """
        # create instruction label
        Label(self,
              text = "Enter information for a new story"
              ).grid(row = 0, column = 0, columnspan = 2, sticky = W)

        # create a label and text entry for the name of a person
        Label(self,
              text = "Person: "
              ).grid(row = 1, column = 0, sticky = W)
        self.person_ent = Entry(self)
        self.person_ent.grid(row = 1, column = 1, sticky = W)

        # create a label and text entry for a plural noun
        Label(self,
              text = "Plural Noun:"
              ).grid(row = 2, column = 0, sticky = W)
        self.noun_ent = Entry(self)
        self.noun_ent.grid(row = 2, column = 1, sticky = W)

        # create a label and text entry for a verb
        Label(self,
              text = "Verb:"
              ).grid(row = 3, column = 0, sticky = W)
        self.verb_ent = Entry(self)
        self.verb_ent.grid(row = 3, column = 1, sticky = W)

        # create a label for adjectives check buttons
        Label(self,
              text = "Adjective(s):"
              ).grid(row = 4, column = 0, sticky = W)

        # create itchy check button
        self.is_itchy = BooleanVar()
        Checkbutton(self,
                    text = "itchy",
                    variable = self.is_itchy
                    ).grid(row = 4, column = 1, sticky = W)

        # create joyous check button
        self.is_joyous = BooleanVar()
        Checkbutton(self,
                    text = "joyous",
                    variable = self.is_joyous
                    ).grid(row = 4, column = 2, sticky = W)

        # create electric check button
        self.is_electric = BooleanVar()
        Checkbutton(self,
                    text = "electric",
                    variable = self.is_electric
                    ).grid(row = 4, column = 3, sticky = W)

        # create a label for body parts radio buttons
        Label(self,
              text = "Body Part:"
              ).grid(row = 5, column = 0, sticky = W)

        # create variable for single, body part
        self.body_part = StringVar()
        self.body_part.set(None)

        # create body part radio buttons
        body_parts = ["bellybutton", "big toe", "medulla oblongata"]
        column = 1
        for part in body_parts:
            Radiobutton(self,
                        text = part,
                        variable = self.body_part,
                        value = part
                        ).grid(row = 5, column = column, sticky = W)
            column += 1

        # create a submit button
        Button(self,
               text = "Click for story",
               command = self.tell_story
               ).grid(row = 6, column = 0, sticky = W)

        self.story_txt = Text(self, width = 75, height = 10, wrap = WORD)
        self.story_txt.grid(row = 7, column = 0, columnspan = 4)

    def tell_story(self):
        """ Fill text box with new story based on user input. """
        # get values from the GUI
        person = self.person_ent.get()
        noun = self.noun_ent.get()
        verb = self.verb_ent.get()
        adjectives = ""
        if self.is_itchy.get():
            adjectives += "itchy, "
        if self.is_joyous.get():
            adjectives += "joyous, "
        if self.is_electric.get():
            adjectives += "electric, "
        body_part = self.body_part.get()

        # create the story
        story = "The famous explorer "
        story += person
        story += " had nearly given up a life-long quest to find The Lost City of "
        story += noun.title()
        story += " when one day, the "
        story += noun
        story += " found "
        story += person + ". "
        story += "A strong, "
        story += adjectives
        story += "peculiar feeling overwhelmed the explorer. "
        story += "After all this time, the quest was finally over. A tear came to "
        story += person + "'s "
        story += body_part + ". "
        story += "And then, the "
        story += noun
        story += " promptly devoured "
        story += person + ". "
        story += "The moral of the story? Be careful what you "
        story += verb
        story += " for."

        # display the story                                
        self.story_txt.delete(0.0, END)
        self.story_txt.insert(0.0, story)

# main
def main():
    root = Tk()
    root.title("Mad Lib")
    app = Application(root)
    root.mainloop()

main()

Answer 1

Tkinter文档中的“Toy MVC（Model-View-Controller）设计”可能正是您想要的。我个人会设计一些不同的东西，但这基本上是有意义的。

关键是分离出模型和视图，然后控制器就是连接模型和视图的所有位。

因此，与其使用包含所有内容的Application，不如使用这些类：

• StoryModel：一个故事的模型。
• StoryView：一个窗口或其他小部件，你可以把它粘在框架内，尽管在Tk中，你也可以很容易地把它变成框架本身。
• StoryController：给定一个StoryModel和一个StoryView的类，它将告诉它的StoryView来创建适当的小部件来显示这个故事，然后监视模型和视图的更改，并将它们从一个传递到另一个。

鉴于此，您可以创建一个简单的Application，它创建一个StoryModel、一个StoryView、一个用于放置视图的框架窗口和一个用于连接模型和视图的StoryController。

例如，StoryModel可能如下所示：

class StoryModel(object):
    body_parts = ['bellybutton', 'big toe', 'medulla oblongato']
    def __init__(self):
        self.person = ObservableStr('')
        # ...
        self.is_itchy = ObservableBool(False)
        # ...
    def tell(self):
        story = "The famous explorer "
        # ...
        return story

然后，您可以想象并创建一个以不同方式显示相同信息的AlternateStoryView，并将Application更改为创建每个视图中的一个，并为每个视图创建一个控制器，附加到同一模型。例如，您可以创建一个不使用网格的视图，而是自动布局：

class AlternateStoryView(Frame):
    def __init__(self, master):
        super(StoryView, self).__init__(master)
    def add_label(label):
        label = Label(self, text=label)
        label.pack()
        return label

如果您知道trace方法，您可能会注意到Observable与使用Tkinter.StringVar等方法实际上没有任何区别，但其优点（除了没有trace这种笨拙的语法外）是，这种方式对模型没有任何特定的Tkinter。

因此，您可以创建一个GtkStoryView或CursesStoryView，而无需更改Model和Controller中的任何代码。（这对ToyMVC不太管用，因为像addButton.config(command=self.addMoney)这样的东西不会完全转化为Gtk+或curses，除非您构建了一个大的Tk仿真层……但是您不必在设计中犯这个错误。）

另外，请注意，在所有模型变量周围使用Observable包装器绝对不是连接控制器的唯一方法，甚至不一定是最变态的方法。

Answer 2

如果您想使用python语言开始/学习MVC web开发，我建议您从Django Framework开始