Personal tools
You are here: Home Documentation Tutorials Adder: an adding machine sample application A Grok View and a Grok Template

A Grok View and a Grok Template

By design, our Model is not capable of interacting directly a web browser. Components that can respond to requests, typically returning HTML, are called View components. Since mixing HTML inside Python can get very messy, a Template component may be associated with a View component.
The most basic Grok app that is still of some use: an adding machine with tape.
Page 3 of 4.

We can create a View simply by inheriting from the grok.View base class.

class Index(grok.View):

There is a Grok convention that if you only have a single Model object in a module, then all Views will automatically be associated with that Model. It's possible to explicitly override this behaviour, and it's required to associate your View with a specific Model if you have more than one Model class in a module.

When an adding error happens we display a message. We'll define the default messsage to be displayed as None.

message = None

If your Grok View has a method with the special name of update() then this will be called before your HTML template is rendered. This can be used to respond to user input, interact with your Models, and set attributes on the View object so that they will be available in to your template.

def update(self, term=None):
    if self.request.has_key('bt_clear'):
        self.context.clear()
    elif term:
        try:
            term = float(term)
        except ValueError:
            self.message = "Invalid number."
        else:
            self.context.addTerm(term)

Grok will marshall key/value pairs in the HTTP Request and automatically supply them as arguments to the update() method.

A Grok Template

The default templating language in Grok is called the Zope Page Templates. These use a sytnax called the Template Attribute Language (TAL), to include templating instructions as XML attributes. This has the advantage of allowing you to write templates that are valid XHTML syntax, as well as allowing your templates to look very similar to the XHTML output that they produce. A disadvantage to TAL is that they can only work with XML content. Views can either use the render() method to output text directly from the View, or you can use one of the many other Python templating languages with Grok.

The Grok convention is to associate templates with the name of module that contains the View. In these case the module is named app.py, and the View class is named Index, so it will be automatically associated with a template in the app_templates directory named index.pt. This template looks like this.

<html>
  <head>
    <link rel="stylesheet" type="text/css" tal:attributes="href static/adder.css">
    <title>Grok Adder</title>
    <script type="text/javascript">
        window.onload = function() { document.forms[0].term.focus() };
    </script>
  </head>
  <body>
    <h1>Adder</h1>
    <span tal:condition="view/message" tal:content="view/message" />
    <form tal:attributes="action view/url">
      <input type="text" name="term" />
      <input type="submit" value="+" name="bt_add" />
      <hr />
      <input tal:condition="context/terms" type="submit" value="Clear" name="bt_clear">
    </form>
    <table tal:condition="context/terms">
     <tr>
       <th>Total</th>
       <th tal:content="context/total"></th>
     </tr>
     <tr tal:repeat="term context/terms" tal:attributes="class repeat/term/even">
       <td class="count" tal:content="repeat/term/number">11</td>
       <td tal:content="term">11</td>
     </tr>
    </table>
  </body>
</html>

You will also want to include some CSS style with your application. We do this with the following line.

<link rel="stylesheet" type="text/css" tal:attributes="href static/adder.css">

This will make the CSS file from static/adder.css available to add the necessary style to your application. You can also put static Javascript files and images in this directory.

That's it!

You've now explored a complete, working Grok application. You've looked at the simplest possible persistent Model, a single View and template.