Context Navigation

Changes between Version 26 and Version 27 of GenshiTutorial

Timestamp:: Aug 30, 2007, 11:17:09 AM (17 years ago)
Author:: cmlenz
Comment:: Simplify data model, comments no longer hierarchical

Legend:

: Unmodified
: Added
: Removed
: Modified

GenshiTutorial

-                      v26
+                      v27
 #!/usr/bin/env python
+import os
+import pickle
+import sys
+import operator, os, pickle, sys
 import cherrypy
 …
+def main(filename):
+    # Some global configuration; note that this could be moved into a configuration file
+    cherrypy.config.update({
+        'request.throw_errors': True,
+        'tools.encode.on': True, 'tools.encode.encoding': 'utf-8',
+        'tools.decode.on': True,
+        'tools.trailing_slash.on': True,
+        'tools.staticdir.root': os.path.abspath(os.path.dirname(__file__)),
+    })
+    # Initialize the application, and add EvalException for more helpful error messages
+    app = cherrypy.Application(Root(data))
+    app.wsgiapp.pipeline.append(('paste_exc', EvalException))
+    cherrypy.quickstart(app, '/', {
+        '/media': {
+            'tools.staticdir.on': True,
+            'tools.staticdir.dir': 'static'
+        }
+    })
+if __name__ == '__main__':
+    main(sys.argv[1])
+}}}
+Enter the tutorial directory in the terminal, and run:
+{{{
+$ PYTHONPATH=. python geddit/controller.py geddit.db
+}}}
+You should see a log message pointing you to the URL where the application is being served, which is usually http://localhost:8080/. Visiting that page will respond with just the string “Geddit”, as that's what the `index()` method of the `Root` object returns.
+Note that we've configured !CherryPy to serve static files from the `geddit/static` directory. !CherryPy will complain that that directory does not exist, so create it, but leave it empty for now. We'll add static resources later on in the tutorial.
+== Basic Template Rendering ==
+So far the code doesn't actually use Genshi, or even any kind of templating. Let's change that.
+Inside of the `geddit` directory, create a directory called `templates`, and inside that directory create a file called `index.html`, with the following content:
+{{{
+#!genshi
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:py="http://genshi.edgewall.org/">
+  <head>
+    <title>$title</title>
+  </head>
+  <body>
+    <div id="header">
+      <h1>$title</h1>
+    </div>
+    <p>Welcome!</p>
+    <div id="footer">
+      <hr />
+      <p class="legalese">© 2007 Edgewall Software</p>
+    </div>
+  </body>
+</html>
+}}}
+This is basically an almost static HTML file with some simple variable substitution.
+We now need to change the controller code so that this template is used. First, add the Genshi `TemplateLoader` to the imports at the top of the `geddit/controller.py` file, and instantiate a loader for the `geddit/templates` directory:
+{{{
+#!python
+import cherrypy
+from genshi.template import TemplateLoader
+from paste.evalexception.middleware import EvalException
+loader = TemplateLoader(
+    os.path.join(os.path.dirname(__file__), 'templates'),
+    auto_reload=True
+)
+}}}
+Next, change the implementation of the `index()` method of the `Root` class to look like this:
+{{{
+#!python
+    @cherrypy.expose
+    def index(self):
+        tmpl = loader.load('index.html')
+        return tmpl.generate(title='Geddit').render('html', doctype='html')
+}}}
+This asks the template loader for a template named `index.html`, generates the output stream, and finally serializes the output to HTML. When you now reload the page in your browser, you should get back the following HTML response:
+{{{
+#!xml
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <title>Geddit</title>
+  </head>
+  <body>
+    <div id="header">
+      <h1>Geddit</h1>
+    </div>
+    <p>Welcome!</p>
+    <div id="footer">
+      <hr />
+      <p class="legalese">© 2007 Edgewall Software</p>
+    </div>
+  </body>
+</html>
+}}}
+== Data Model ==
+To continue, we'll need to first add some Python classes to define the data model the application will use. As mentioned above, we're using a simple pickle file for persistence, so all we need to do here is create a couple of very simply Python classes.
+Inside the `geddit` directory, create a file named `model.py`, with the following content:
+{{{
+#!python
+from datetime import datetime
+class Submission(object):
+    def __init__(self, username, url, title):
+        self.username = username
+        self.url = url
+        self.title = title
+        self.time = datetime.utcnow()
+        self.code = hex(hash(tuple([username, url, title, self.time])))[2:]
+        self.comments = []
+    def __repr__(self):
+        return '<%s %r>' % (type(self).__name__, self.title)
+    def add_comment(self, username, content):
+        self.comments.append(Comment(username, content))
+class Comment(object):
+    def __init__(self, username, content):
+        self.username = username
+        self.content = content
+        self.time = datetime.utcnow()
+    def __repr__(self):
+        return '<%s>' % (type(self).__name__)
+}}}
+You'll need to import those classes in `geddit/controllers.py`, just below the other imports:
+{{{
+#!python
+from geddit.model import Submission, Comment
+}}}
+And in the `main()` function, let's add some code to read our data from the pickle file, and write it back:
+{{{
+#!python
 def main(filename):
     # load data from the pickle file, or initialize it to an empty list
 …
             fileobj.close()
     else:
+        data = []
+    # save data back to the pickle file when the server is stopped
+        data = {}
     def _save_data():
+        # save data back to the pickle file
         fileobj = open(filename, 'wb')
         try:
 …
     cherrypy.engine.on_stop_engine_list.append(_save_data)
+    # Some global configuration; note that this could be moved into a configuration file
+    cherrypy.config.update({
+        'request.throw_errors': True,
+        'tools.encode.on': True, 'tools.encode.encoding': 'utf-8',
+        'tools.decode.on': True,
+        'tools.trailing_slash.on': True,
+        'tools.staticdir.root': os.path.abspath(os.path.dirname(__file__)),
+    })
+    # Initialize the application, and add EvalException for more helpful error messages
+    app = cherrypy.Application(Root(data))
+    app.wsgiapp.pipeline.append(('paste_exc', EvalException))
+    cherrypy.quickstart(app, '/', {
+        '/media': {
+            'tools.staticdir.on': True,
+            'tools.staticdir.dir': 'static'
+        }
+    })
+if __name__ == '__main__':
+    main(sys.argv[1])
+}}}
+Enter the tutorial directory in the terminal, and run:
+}}}
+Now let's add some initial content to our “database”.
+ '''Note: You'll need to stop the !CherryPy server to do the following, otherwise your changes will get overwritten'''.
+In the terminal, from the tutorial directory, launch the interactive Python shell by executing `PYTHONPATH=. python`, and enter the following code:
+{{{
+#!pycon
+>>> from geddit.model import *
+>>> submission1 = Submission(username='joe', url='http://example.org/', title='An example')
+>>> submission1.add_comment(username='jack', content='Bla bla bla')
+>>> submission1.add_comment(username='joe', content='Bla bla bla, bla bla.')
+>>> submission2 = Submission(username='annie', url='http://reddit.com/', title='The real thing')
+>>> import pickle
+>>> pickle.dump({
+...     submission1.code: submission1, submission2.code: submission2
+... }, open('geddit.db', 'wb'))
+}}}
+You should now have two submissions in the pickle file, with the first submission having a comment, as well as a reply to that comment. Restart the CherryPy server by running:
 {{{
 …
 }}}
+You should see a log message pointing you to the URL where the application is being served, which is usually http://localhost:8080/. Visiting that page will respond with just the string “Geddit”, as that's what the `index()` method of the `Root` object returns.
+Note that we've configured !CherryPy to serve static files from the `geddit/static` directory. !CherryPy will complain that that directory does not exist, so create it, but leave it empty for now. We'll add static resources later on in the tutorial.
+== Basic Template Rendering ==
+So far the code doesn't actually use Genshi, or even any kind of templating. Let's change that.
+Inside of the `geddit` directory, create a directory called `templates`, and inside that directory create a file called `index.html`, with the following content:
+{{{
+#!genshi
+<html xmlns="http://www.w3.org/1999/xhtml"
+      xmlns:py="http://genshi.edgewall.org/">
+  <head>
+    <title>$title</title>
+  </head>
+  <body>
+    <div id="header">
+      <h1>$title</h1>
+    </div>
+    <p>Welcome!</p>
+    <div id="footer">
+      <hr />
+      <p class="legalese">© 2007 Edgewall Software</p>
+    </div>
+  </body>
+</html>
+}}}
+This is basically an almost static HTML file with some simple variable substitution.
+We now need to change the controller code so that this template is used. First, add the Genshi `TemplateLoader` to the imports at the top of the `geddit/controller.py` file, and instantiate a loader for the `geddit/templates` directory:
+{{{
+#!python
+import cherrypy
+from genshi.template import TemplateLoader
+from paste.evalexception.middleware import EvalException
+loader = TemplateLoader(
+    os.path.join(os.path.dirname(__file__), 'templates'),
+    auto_reload=True
+)
+}}}
+Next, change the implementation of the `index()` method of the `Root` class to look like this:
+== Extending the Template ==
+Now let's change the `Root.index()` method in `geddit/controller.py` to pass the submissions list to the template:
 {{{
 …
     @cherrypy.expose
     def index(self):
+        submissions = sorted(self.data.values(),
+                             key=operator.attrgetter('time'))
         tmpl = loader.load('index.html')
+        return tmpl.generate(title='Geddit').render('html', doctype='html')
+}}}
+This asks the template loader for a template named `index.html`, generates the output stream, and finally serializes the output to HTML. When you now reload the page in your browser, you should get back the following HTML response:
+{{{
+#!xml
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+  <head>
+    <title>Geddit</title>
+  </head>
+  <body>
+    <div id="header">
+      <h1>Geddit</h1>
+    </div>
+    <p>Welcome!</p>
+    <div id="footer">
+      <hr />
+      <p class="legalese">© 2007 Edgewall Software</p>
+    </div>
+  </body>
+</html>
+}}}
+== Data Model ==
+To continue, we'll need to first add some Python classes to define the data model the application will use. As mentioned above, we're using a simple pickle file for persistence, so all we need to do here is create a couple of very simply Python classes.
+Inside the `geddit` directory, create a file named `model.py`, with the following content:
+{{{
+#!python
+from datetime import datetime
+class Submission(object):
+    def __init__(self, username, url, title):
+        self.username = username
+        self.url = url
+        self.title = title
+        self.time = datetime.utcnow()
+        self.comments = []
+    def __repr__(self):
+        return '<%s %r>' % (type(self).__name__, self.title)
+    def add_comment(self, username, content):
+        comment = Comment(username, content, in_reply_to=self)
+        self.comments.append(comment)
+        return comment
+class Comment(object):
+    def __init__(self, username, content, in_reply_to=None):
+        self.username = username
+        self.content = content
+        self.in_reply_to = in_reply_to
+        self.time = datetime.utcnow()
+        self.replies = []
+    def __repr__(self):
+        return '<%s>' % (type(self).__name__)
+    def add_reply(self, username, content):
+        reply = Comment(username, content, in_reply_to=self)
+        self.replies.append(reply)
+        return reply
+}}}
+You'll need to import those classes in `geddit/controllers.py`, just below the other imports:
+{{{
+#!python
+from geddit.model import Submission, Comment
+}}}
+Now let's add some initial content to the “database”.
+ '''Note: You'll need to stop the !CherryPy server to do that, otherwise the data is overwritten'''.
+In the terminal, from the tutorial directory, launch the interactive Python shell by executing `PYTHONPATH=. python`, and enter the following code:
+{{{
+#!pycon
+>>> from geddit.model import *
+>>> data = []
+>>> submission = Submission(username='joe', url='http://example.org/', title='An example')
+>>> comment = submission.add_comment(username='jack', content='Bla bla bla')
+>>> comment.add_reply(username='joe', content='Bla blabla bla bla bla')
+>>> data.append(submission)
+>>> submission = Submission(username='annie', url='http://reddit.com/', title='The real thing')
+>>> data.append(submission)
+>>> data
+[<Submission 'An example'>, <Submission 'The real thing'>]
+>>> import pickle
+>>> pickle.dump(data, open('geddit.db', 'wb'))
+>>> ^D
+}}}
+You should now have two submissions in the pickle file, with the first submission having a comment, as well as a reply to that comment. Restart the CherryPy server by running:
+{{{
+$ PYTHONPATH=. python geddit/controller.py geddit.db
+}}}
+== Extending the Template ==
+Now let's change the `Root.index()` method in `geddit/controller.py` to pass the submissions list to the template:
+{{{
+#!python
+    @cherrypy.expose
+    def index(self):
+        tmpl = loader.load('index.html')
+        stream = tmpl.generate(submissions=self.data)
+        stream = tmpl.generate(submissions=submissions)
         return stream.render('html', doctype='html')
 }}}
 …
     <ol py:if="submissions">
       <li py:for="submission in submissions">
+      <li py:for="submission in reversed(submissions)">
         <a href="${submission.url}">${submission.title}</a>
         posted by ${submission.username}
 …
             # TODO: validate the input data!
             submission = Submission(**data)
             self.data.append(submission)
+            self.data[submission.code] = submission
             raise cherrypy.HTTPRedirect('/')
 …
                 data = form.to_python(data)
                 submission = Submission(**data)
                 self.data.append(submission)
+                self.data[submission.code] = submission
                 raise cherrypy.HTTPRedirect('/')
             except Invalid, e: