### Navigation

- index
- gtkmvc: A Quickstart Guide 1.99.1 documentation »

# gtkmvc in 45 minutes

This document presents gtkmvc for those who are in hurry, or for curious people who want to have a quick overview of gtkmvc features and capabilities.

Warning

This document is not exhaustive, as many important details are not described. For a complete information refer to the User Manual and to the Tutorial, both coming along with gtkmvc.

It is assumed you already know Python, pygtk and have some experience with design issues. However, here you will find a short introduction presenting the main actors that are going to play a role into an GUI application based on gtkmvc.

## Introduction

### What is gtkmvc, and what it does

gtkmvc is a thin framework for developing GUI applications with Python and the pygtk toolkit.

1. It helps you to organize the source code of your application.
2. It provides some support for making views out of glade files.
3. It separates the data/logic of your application (the model) from the presentation layer (the view).
4. It tries to be as much transparent as possible wrt your application.

### Some terminology

Model

  Contains the logic of the application, the data that are independent on the GUI. For example, in a music player:

  - The list of the mp3 file names.
  - The methods for playing the files in the list.
Observer
  It is an entity interested in observing some parts of one or more Models. Observers are used to react to certain changes in models without creating explicit dependencies or links with them.
Observable Property

  It is an attribute of the Model, that is supposed to be observable by one or more observers connected to the model. For example:

  - The property `current_perc` holding the % of the mp3 file that is being played.

  Observable properties can be concrete (data is phisically stored in the model), or logical (data is function of other properties, or stored outside the model, like in a database.)

View
  Contains a set of widgets, and the methods for manipulating them. The set of widgets can be build out of a GtkBuilder file, or glade file.
Controller

  It is a particular kind of Observer, connected to one model and to one or more views. It contains the GUI logic, and all handlers for GUI signals. E.g.

  - The code that makes a progress bar advance in the view as the music file is played by the model.
Adapter

  Adapts the content of one widget (or a set of widgets) into the view with one observable property into the model. An adapter keeps the content of an observable property up-to-dated with the content of a widget, and viceversa. Adapters live into the controllers. E.g.

  - An adapter that bounds property `current_perc` with a progress bar widget into the view.

Note

All these entities are now presented more in details.

### What is all this complexity for?

The final goal is to improve your life as a designer/programmer. Designing a complex GUI is an easy task only in principle. In fact it is hard to decouple logic and presentation layers, and even harder to separate control code that should be separate. And in the end, it is easy to get spaghetti code especially in the control flow part of the GUI.

In the picture you can see how a middle/large GUI application can be organized and decomposed with gtkmvc.

Spend some time looking at this funny image. On the left, models designed as a pair of separate hierarchies lay. One of the model in the left hierarchy observes one model into the other hierarchy.

On the right, the presentation layer is designed as a hierarchy of three views. Each view may be based on one GtkBuilder/glade file that can be shared among views.

The model and the view sides do not see each other as they are separated by the two depicted barriers. Those red barriers avoid the model to be involved in the presentation layer, and the view to be tempted to access the model part.

In the middle, the control part live. The controllers within it can see through the barriers. Controllers observe some parts of the logic into the model side, and can control some parts of the views.

1. One controller controls one view (and possibly the sub-views)
2. One view can be controller by one or more controllers.
3. One controller control and observes one model.
4. One controller can also observe many other models.
5. One model can be observed by many observers.

The picture shows how a GUI can be decomposed. Keep in mind that decomposition is always intended to couple with (and hopefully reduce) complexity.

For example, you can have a controller controlling the menu and the toolbar of the application, a controller for one sub-view, two controllers for another sub-view, etc. Each controller is connected to one model, which is a part of the application logic.

## Views

A view is a class that is intended to be a container for widgets.

    import gtk
    from gtkmvc import View

    class MyView (View):
       builder = "gtk_builder_file.glade"

       def __init__(self):
           View.__init__(self)

           # possible construction of manual widgets
           self['name_of_new_label'] = gtk.Label("A label manually constructed!")
           self['some_container_in_builder_file'].pack_start(self['name_of_new_label'])

           # possible setup of all widgets
           # ...
           return

       def set_sensitivity(self, flag):
           for wid in (self[x] for x in ('widget1', 'widget2', )):
               wid.set_sensitive(flag)
               pass
           return

       pass # end of class

Your view is derived from base class `gtkmvc.View` that offers several services:

1. Attribute `builder` that is used to tell the view which GtkBuilder file its widgets are taken from. As an alternative, attribute `glade` can be used for deprecated glade files.
2. Attribute `top` which contains the name of the top-level widget.
3. The view instance can be used a container (a dictionary) of widgets, both for accessing named widgets in GtkBuilder files, and for creating new widgets manually.

Views can be decomposed into a hierarchy of views. For example:

    import gtk
    from gtkmvc import View

    class MySuperView (View):
       builder = "view1.glade"
       top = "top_widget_name"

       def __init__(self):
           View.__init__(self)

           self.subview = MySubView()

           # connects the subview to a widget in the containing view
           self['some_container'].add(self.subview.get_top_widget())
           return
       pass # end of class

    class MySubView (View):
       def __init__(self):
           View.__init__(self, builder="view2.glade", top="view2_top_widget")
           # setting of sub view...
           return
       pass # end of class

As you can see:

1. It is possible to construct a hierarchy of views to deal with view composition.
2. Subviews can be connected to known containers widgets into the containing view, like in the example.
3. Class View provides the method `get_top_widget` that returns the View’s top level widget.
4. All attributes `glade`, `builder` and `top` can be overridden or substituted by View’s constructor equivalent parameters.

For simple cases (views offering no services, and only based on a glade file) it is not mandatory to derive our own class:

    from gtkmvc import View
    v = View(builder="myview.glade", top="mytop_widget)

## Models

A model is a class that is intended to contain the application’s logic. A model contains data and methods, and a subset of the data can be declared to be observable.

    from gtkmvc import Model
    class MyModel (Model):
       data1 = 10
       data2 = "a string"
       data3 = "a list of strings".split()

       __observables__ = ("data1", "data3")

       pass # end of class

A model must derive from `gtkmvc.Model` [1] which derives from `Observer` as models may be interested in observing themselves and other models (see Observers below).

Observable Properties are declared through the special attribute `__observables__` which is a sequence of string names.

In the example class attributes `data1` and `data3` are declared to be observable properties. Names in `__observables__` can contain wildcards [2] and all attributes in the class not beginning with a double underscore `__` will be checked for matching. For example `__observables__ = ("data?",)` would match `data1`, `data2` and `data3`.

### Observable Properties

Observable properties live into models and can be assigned to several types of values, included lists, maps, and user defined classes. For all details about the observable properties, see the User Manual for the details.

#### 1. Value Properties

Value Properties are intended to hold values which when are re-assigned observers are notified.

    from gtkmvc import Model
    class MyModel (Model):
       data1 = 5
       data2 = [1,2,3]
       data3 = {}
       data4 = SomeClass()
       __observables__ = ("data?", )
       pass # end of class

    m = MyModel()
    # here the properties are re-assigned
    m.data1 += 15
    m.data2 = [4,5,6]
    m.data3 = { "key" : "value" }
    m.data4 = SomeOtherClass()

Every time a value property gets reassigned, observers observing it will be notified.

#### 2. Logical Properties

Sometimes it is needed to store values of properties outside the model, like in the File System, in a DB, or somewhere in the network via RPC. In other cases values are not stored, but are calculated out of other properties. In these cases it is possible to declare observable properties that do not correspond to any class attribute, but that correspond each to a pair of methods (getter/setter):

    from gtkmvc import Model
    class MyModel (Model):
       data1 = 5
       __observables__ = ("data1", "data_external")

       @Model.getter
       def data_external(self):
           value = get_the_value_somehow()
           return value

       @Model.setter
       def data_external(self, value):
           # store the value somehow...
           return

       pass # end of class

The syntax for declaring getter/setter pair for a property is inpired to the syntax of python decorator `property()`.

It is also possible to define getters and/or setters that takes also the name of the property, making possible to define multi-properties getter/setter pairs:

    from gtkmvc import Model
    class MyModel (Model):
       data1 = 5 # this is a concrete property
       __observables__ = ("data1", "data2", "data3", "data4")

       # this handles data3 and data4
       @Model.getter("data3", "data4")
       def d3_d4_get(self, prop_name):
           if prop_name == "data3": value = ... # get the value of data3 somehow
           elif prop_name == "data4": ...
           # ...
           return value

       # this handles data2, data3 and data4
       @Model.setter("data[234]")
       def d2_d3_d4_set(self, prop_name, value):
           if prop_name == "data2": ... # store the value of data3 somehow
           elif prop_name == 'data3': ...
           # ...
           return

       @Model.getter
       def data2(self):
           value = ... # get the value somehow
           return value

       pass # end of class

Note

Notice the use of pattern matching when defining getter/setter pairs, like for d2_d3_d4_set.

Note

You can exploit custom properties values to perform some custom actions when a property is read or written.

#### 3. Mutable containers

When the value of an observable property is a mutable object, like a sequence or a map, observers may be interested in being notified when a method is called on the object itself:

    # here the object contents are changed:
    m.data2.append(7)
    m.data3['key2'] = "value for key2"

#### 4. Mutable class instances

Properties can be instances of mutable classes. Like for containers objects, observers may be interested in being notified when a method changing the object is called:

    # here the object contents are changed:
    m.data4.some_method_changing_the_instance()

Of course it is needed to declare method `SomeOtherClass.some_method_changing_the_instance` to be observable. For example:

    from gtkmvc.model import Model, Observable
    class SomeOtherClass (Observable):
       """This is a class that is thought to be integrated into the
       observer pattern. It is declared to be 'observable' and the
       methods which we are interested in monitoring are decorated
       accordingly"""

       val = 0

       @Observable.observed # this way the method is declared as 'observed'
       def change(self): self.val += 1

       pass #end of class

Observable properties derive from class `Observable` and methods that change the content of the instance can be declared by using the `Observable.observed` decorator like in the example.

Ok, but what if my class is already existing? It is less natural, but gtkmvc supports observable properties of already existing classes’ instances:

    from gtkmvc import Model, Observer

    class ExistingClass (object):
       """This is an already existing class whose code is not intended to
       be changed. Instead, when instantiated into the model, it is
       declared in a particular manner, so that the model can recognise
       it and wrap it in order to monitor it"""

       val = 0

       def change(self): self.val += 1
       pass #end of class

    class MyModel (Model):

       obj = (ExistingClass, ExistingClass(), ('change',))
       __observables__ = ["obj"]

       pass # end of class

The triplet must contain the name of the class, the instance, and a list naming the methods whose calls can be observed by observers.

#### 5. Signals

Sometimes the models want to communicate to observers that events occurred. For this `Signal` can be used as property value:

    from gtkmvc import Model, Signal
    class MyModel (Model):
       sgn = Signal()
       __observables__ = ("sgn",)
       pass

    m = MyModel()
    m.sgn.emit()
    m.sgn.emit("A value can also be passed here")
    m.sgn = Signal() # here the signal is reassigned

## Observers

An observer is a class that is interested in being notified when some observable properties into one or models it observes gets changed.

Methods in the observer that are intended to receive notifications can be defined through:

1. Statically with a decorator
2. Dynamically

Depending on the type of the observable property, you can see three different types of notifications:

1. Assign notifications (for value change in assignments)
2. Method calls (for containers and class instances)
3. Signal emitting (for signals)

In the example you find assign, before call, after call and signal notifications, presented in the static flavours:

    from gtkmvc import Observer

    class MyObserver (Observer):

       # ------------------------------------------------------
       #    Value change
       # ------------------------------------------------------

       # common notification for multiple properties:
       @Observer.observe("data1", assign=True)
       @Observer.observe("data2", assign=True)
       def assign_notification(self, model, prop_name, info):
           print "assign_notification:", prop_name, info.old, info.new

       # multiple notifications for the same properties are possible:
       @Observer.observe("data1", assign=True)
       def another_assign_notification(self, model, prop_name, info):
           print "another_assign_notification:", prop_name, info.old, info.new
           return

       # ------------------------------------------------------
       #    Before and After method call
       # ------------------------------------------------------
       @Observer.observe("data3", before=True)
       def before_call_notification(self, model, prop_name, info):
           print "before_call_notification:", prop_name, info.instance, info.method_name
           return

       # multiple notification types are allowed:
       @Observer.observe("data3", before=True, after=True)
       def before_after_call_notification(self, model, prop_name, info):
           if "before" in info:
              print "before_after_call_notification: BEFORE:", prop_name, info.instance, info.method_name
           else:
              assert "after" in info
              print "before_after_call_notification: AFTER:", prop_name, info.instance, info.method_name, info.result
              pass
           return

       # ------------------------------------------------------
       #    Signal emitted
       # ------------------------------------------------------
       @Observer.observe("sgn", signal=True, assign=True)
       def signal_notification(self, model, prop_name, info):
           if "signal" in info:
              print "signal_notification: SIGNAL:", prop_name, info.arg
           else:
              assert "assign" in info
              print "signal_notification: ASSIGN:", prop_name, info.old, info.new
              pass
           return
       pass # end of class

Here is how the model and our observer can be connected/unconnected:

    m = MyModel()
    o = MyObserver()
    o.observe_model(m)
    # ...
    o.relieve_model(m)

`Observer` constructor optionally takes a model that it registers into:

    m = MyModel()
    o = MyObserver(m)
    # ...
    o.relieve_model(m)

Now let’s try to modify the assigned value to a property:

    from gtkmvc import Model
    class MyModel (Model):
       data1 = 10
       data2 = "a string"
       data3 = "gtkmvc makes your life easier".split()
       __observables__ = ("data?", )
       pass # end of class

    m = MyModel()
    o = MyObserver(m)

    m.data1 += 1
    print ">>> Here m.data is", m.data1

    m.data2 = "Another string"
    m.data3.append("and fun")
    m.data3[0] = "music"

    m.sgn.emit("Hello world!")
    m.sgn = Signal() # sgn is reassigned

The execution of this example produces the following output:

    assign_notification: data1 10 11
    another_assign_notification: data1 10 11
    >>> Here m.data is 11
    assign_notification: data2 a string Another string
    before_call_notification: data3 ['gtkmvc', 'makes', 'your', 'life', 'easier'] append
    before_after_call_notification: BEFORE: data3 ['gtkmvc', 'makes', 'your', 'life', 'easier'] append
    before_after_call_notification: AFTER: data3 ['gtkmvc', 'makes', 'your', 'life', 'easier', 'and fun'] append None
    before_call_notification: data3 ['gtkmvc', 'makes', 'your', 'life', 'easier', 'and fun'] __setitem__
    before_after_call_notification: BEFORE: data3 ['gtkmvc', 'makes', 'your', 'life', 'easier', 'and fun'] __setitem__
    before_after_call_notification: AFTER: data3 ['music', 'makes', 'your', 'life', 'easier', 'and fun'] __setitem__ None
    signal_notification: SIGNAL: sgn Hello world!
    signal_notification: ASSIGN: sgn <gtkmvc.observable.Signal object at 0x7f88957f5fd0> <gtkmvc.observable.Signal object at 0x7f8895801ad0>

Of course an observer is not limited to observe one model:

    m1 = MyModel()
    o = MyObserver(m1) # o observes m1
    m2 = AnotherModel()
    o.observe_model(m2) # o observes also m2 now

It is usual to see models observing other models, like siblings or sub-models in model hierarchies. For this reason class `Model` derives from class `Observer`:

    m3 = AnotherModel()
    m3.observe_model(m2) # m3 observes m2

## Controllers

Controllers are the most complex structures that are intended to:

1. Contain the GUI logic.
2. Connect one model and one or more views, without making them know.
3. Observe the model they are connected to.
4. Provide handlers for gtk signals (declared in the views connected to it)
5. Setting up widgets that depend on the model. For example setting up of `gtk.TreeView` whose `gtk.TreeModel` lives within the model (see TreeViews and relatives)
6. Setting up Adapters

This is the typical structure of a controller:

    from gtkmvc import Controller

    class MyController (Controller):

        def __init__(self, model, view):
            Controller.__init__(self, model, view)

            # From here on the connected model and view are accessible
            # through fields 'self.model' and 'self.view' respectively.

            # setup internal fields...

            # setup sub-controllers...

            return

        def register_view(self, view):
            # initializes the view if needed

            # setup widgets that need a model, like TreeView (see next section)...

            # setup widgets not specified in glade, like TreeViewColumn...

            # connect additional signals (e.g. for manually constructed widgets...

            return

        def register_adapters(self):
            # setup all adapters (see Adapters below)
            return

        # ------------------------------------------------------------
        #      GTK Signal handlers
        # ------------------------------------------------------------
        def on_button_clicked(self, button):
            # ...
            return

        # ...

        # ------------------------------------------------------------
        #      Notifications of observable properties
        # ------------------------------------------------------------
        @Controller.observe("prop_name", assign=True)
        def notification(self, model, prop_name, info):
            #...
            return

        pass # end of class

As you see, a controller does a lot of work, and tends to blow-up in size. For this reason it is important to split big controllers into sub-controllers. In a typical configuration, the application model is split into sub-modules, say m1, m2 and m3. The application controller is split into several sub-controllers, and there are sub controllers c1, c2 and c3 respectively controlling just m1, m2 and m3.

    # file model.py
    from gtkmvc import Model
    class ApplModel (Model):
      # observable properties...

      def __init__(self):
          Model.__init__(self)

          # sub-models:
          self.m1 = MyModel1(self)
          self.m2 = MyModel2(self)
          self.m3 = MyModel3(self)

          # say you want to observe what happens within m3
          self.observe_model(m3)
          return

      # ...
      pass # end of class

Here only class `MyModel1` is reported:

    # file model.py
    class MyModel1 (Model):
      # observable properties...

      def __init__(self, appl):
          Model.__init__(self)
          self.appl_model = appl
          #...
          return
      pass

The controllers have a similar structure:

    # file ctrl.py
    from gtkmvc import Controller
    class ApplCtrl (Controller):

      def __init__(self, appl_model, appl_view):
          Controller.__init__(self, appl_model, appl_view)

          # sub-controllers

          # appl_view is shared among application and c1 controllers
          self.c1 = MyCtrl1(appl_model.m1, appl_view)

          # c2 controls subview v2
          self.c2 = MyCtrl(appl_model.m2, appl_view.v2)
          #...
          return
      pass

However, it is pretty common to have controllers split also to control different parts of a view. For example, the application (top) level controller made of three sub-controllers, respectively controlling the application main window, the toolbars, and the main component featuring in the main window. The key here is to split the complexity into pieces which can harmoniously live together.

### TreeViews and relatives

`gtk` makes a limited use of the MVC pattern for some widgets. Those are the `TextView`, the `TreeView` and all those widgets that are based on the `TreeModel` class.

How does gtkmvc click on this architecture?

1. Widgets like `TreeView`, `TextView`, etc. live into the view side.
2. Model side of those widgets like `TextBuffer`, `ListStore`, etc. have to live into the model.
3. The controller is responsible for connecting the view parts with the model parts.

The view is based on the glade file shown here:

This is the full code for this example:

    import gtk
    from gtkmvc import View
    class MyView(View):
       glade = "mvc.glade"
       pass # end of class

    from gtkmvc import Model
    class MyModel (Model):
       # ...
       text_buf = gtk.TextBuffer()
       list_store = gtk.ListStore(int, str)
       # ...
       def __init__(self):
           Model.__init__(self)
           text = """gtkmvc is a thin framework for
    developing GUI applications with
    Python and the pygtk toolkit."""
           # fills in some data
       self.text_buf.set_text(text)
           for n, word in enumerate(text.split()):
               self.list_store.append([n+1,word])
               pass
           return

       pass # end of class

    from gtkmvc import Controller
    class MyCtrl (Controller):
       # ...

       def register_view(self, view):
           text_view = view['textview']
       # connects the buffer and the text view
       text_view.set_buffer(self.model.text_buf)

       # connects the treeview to the liststore
       tv = view['treeview']
           tv.set_model(self.model.list_store)

       # creates the columns of the treeview
           rend = gtk.CellRendererText()
           col = gtk.TreeViewColumn('Col1', rend, text=0)
           tv.append_column(col)

           rend = gtk.CellRendererText()
           col = gtk.TreeViewColumn('Col2', rend, text=1)
           tv.append_column(col)
       return
       pass # end of class

    # running triplet
    m = MyModel()
    v = MyView()
    c = MyCtrl(m,v)
    gtk.main()

When executed, this is what pops up:

## Adapters

Adapters adapt widgets in the view and attributes (possibly observable) in the model.

Basically they automatically connect some signal of widgets to align shown data to data stored into the model.

Class `Controller` offers method `register_adapters` that is the ideal place when setting up adapters.

    from gtkmvc import View
    class MyView (View):
       glade = "example.glade"
       pass # end of class

Glade file `example.glade` is shown here in `glade-3`.

There are four widgets we want to keep aligned to the corresponding values stored into the model.

    from gtkmvc import Model
    class MyModel (Model):
       data1 = "Some descriptive message"
       data2 = "Some textual data"
       data3 = 10
       data4 = True # a flag

       __observables__ = ("data?",)

       pass # end of class

Now to connect the view and the model, we need a controller. Here an adapter is built to adapt label `label_data1` to the observable property `data1`.

    from gtkmvc import Controller
    from gtkmvc.adapters import Adapter
    import gtk

    class MyCtrl (Controller):
       def register_view(self, view):
           # we connect manually as the glade file does not contain this signal handler
           view['window1'].connect('destroy', gtk.mainquit)
       return

       def register_adapters(self):
           ad = Adapter(self.model, "data1")
           ad.connect_widget(self.view["label_data1"],
                 setter=lambda w,v: w.set_markup("<big><b>%s</b></big>" % v))
           self.adapt(ad)
       return

       pass # end of class

Optional parameter `setter` is called when it is time to write the value into the given widget. Here it used to markup the text.

Note

There are similar parameters for getting, setting and error handling that can be called both when getting/setting the value from/to the model and the widget. Adapters are complex entities that can be further developed, see the User Manual for a complete description.

Finally, we need only to create a MVC triplet and run `gtk`:

    m = MyModel()
    v = MyView()
    c = MyCtrl(m,v)

    gtk.main()

Here you see the result.

Method `Controller.adapt` is polymorphic, offering several variants. One can be exploited for basic tasks like dry connection of a widget and a corresponding property in the model.

In the example we connect all the widgets very easily:

    from gtkmvc import Controller
    import gtk

    class MyCtrl (Controller):
       def register_view(self, view):
           # we connect manually as the glade file does not contain this signal handler
           view['window1'].connect('destroy', gtk.mainquit)
       return

       def register_adapters(self):
           for name in ("data1", "data2", "data3", "data4"): self.adapt(name)
       return

       pass # end of class

Very compact isn’t it? Here you see the result of this magic, where the widgets’ content reflect the initial values of the observable properties they are attached to.

What is really interesting is that if you change the value of a widget (say, you change the text in the text entry, or in the spinbutton), also the value of the corresponding property in the model gets changed, and viceversa if the properties are also observable.

## Where do you go now?

Good reading so far? If you are interested, you can download and install gtkmvc, see the examples provided along with it, read the User Manual, read the Tutorial, subscribe to the project mailing list, send feedback to the user, and - most of all - start using it!

Footnotes

[1] | Or any class derived from `gtkmvc.Model`, see the User Manual

[2] | See Python module fnmatch for information about accepted wildcards

### Navigation

- index
- gtkmvc: A Quickstart Guide 1.99.1 documentation »