modelviewcontroller

Note about using MVC for pyjamas development

Introduction

MVC (model-view-controller) is a popular way to structure user-interface applications because it makes the application components more reusable and the application itself becomes easier to change.

How can you get started using this marvellous technique with pyjamas? It's the same as you would with wxPython or any other ui toolkit; create a model, controller, and views!

The Models

If your application keeps any data structures, that's the model. Preferences - also the model. Any kind of data could count as the model. The model is generally composed of a set of objects which encapsulate the data your application operates on, without any inkling of how the data will be displayed, or how the application logic is working. It's goal is to store it's data and provide that to its clients (the views and the controller).

One piece of complex logic you will often find in a model object is a mechanism to broadcast changes; the views are always very interested in being notified of the latest values in a model object. For this reason, I suggest writing a simple base class which provides a method to broadcast change notifications, and to listen for those notifications. Then, each set() method on the model object notifies all the listeners that it has been changed. This seems like a bit of overhead but it has to be done!

The Controller

The controller is responsible for managing the logic and state of the application. It keeps pointers to the root model object, and creates views. It provides methods that the views will invoke in response to user actions.

For example, if you're writing a mortgage calculator, clicking "calculate" causes the "onCalculate" method of the view to trigger, perhaps, but rather than performing the calculation itself immediately calls back to the controller, telling the controller to perform the calculation. Why? This means that later, if you want to change or fix the calculation, you'll know where to find it. Also, if you change the way you're displaying your mortgage calculator, you don't have to worry about moving that calculation logic to the new view object; it's kept safely away in the controller.

The controller also is responsible for creating views; some initial views when the page loads, and some others when the user performs certain actions. The controller should manage the RootPanel object of the DOM, and add the new root views to that panel.

Make the controller your root class in pyjamas. A good naming scheme is calling it Controller, or something that ends with Controller (MySiteController).

The Views

A view is displaying the data to the user. To create a view class, I suggest making a subclass of one of the Panel subclasses, HTML, or one of the Table classes. Then it's just a matter of creating widgets and arranging them appropriately. This class is then instantiated by the Controller and inserted into the right parent panel (might be a RootPanel()). If you have pieces of views that seem re-usable, make them a class too, and re-use them in the different views that contain them.

You'll probably write a subclass of Panel or HTML in order to implement your views so that you can add view-specific logic to them. There is also a class in addons called "TemplatePanel" which allows you to load an HTML template and attach your new widgets to it; that's useful when you want to be able to have a web designer (or just web design software) create the look of your view, and then insert the functionality seperately.

Conclusion

I hope this helps you get started writing an MVC application, using pyjamas.

Notes from Jim on MVC and puremvc in Pyjamas

This was in response to a statement that it would be nice to see examples of MVC in pyjamas

The employeeadmin and timesheet examples in pyjamas both use puremvc, if
that is what you mean.  

I find puremvc an excellent way to divide the responsibilities in a
pyjamas app.

The provided examples do not do much with the "model" aspect, but that
is where communication (JSON-RPC) with the server would take place.

Particularly nice in puremvc is the event system, where a component can
send notification of an event, and any other component listening for
that notification can react.  This eliminates a lot of
self.find_that_other_component() code.

If you are putting together an app that has several components that need
to sync or communicate with one another or with the server, it is
definitely worth your time to "wrap your brain around" puremvc.

- Jim Washington 

Comment by cornelis.bos, Aug 10, 2009

PureMVC is now usable in pyjamas.