Commits

Christian Scholz committed 4abbb51

started a tutorial, incomplete for now

Comments (0)

Files changed (1)

docs/tutorial.txt

+==========
+Tutorial
+==========
+
+Here is a little tutorial on how to setup a dynamic page using :mod:`quantumcore.dynamicpage`. The goal of this tutorial is the following:
+
+ * We display some document content inside a slot
+ * The user can click an edit button to replace this content by a form
+ * The user can submit this form to update the document and display the new contents
+ * It should be possible to directly render the edit form
+ 
+What we don't implement here is any sort of storage or concept of a content type. We simply store the actual document content inside a dictionary. In order to display all of this we use a very simply stylesheet and we use the ``wsgiref`` implementation in Python 2.5 to render the document. We also only support this one page.
+
+.. note::
+    You can find this example inside the :mod:`quantumcore.dynamicpage` inside the ``examples`` folder
+
+
+Creating the WSGI application
+=============================
+
+Lets start with the basics and create a simple WSGI application to render our page::
+
+    import wsgiref.simple_server
+    
+    class Application(object):
+        
+        def __call__(self, environ, start_response):
+            start_response("200 Ok", [('Content-Type', 'text/html'),])
+            return "Hello, world!", 
+            
+    app = Application()
+    wsgiref.simple_server.make_server('', 8080, app).serve_forever()
+
+
+Store this in ``main.py`` and run it with ``python main.py``. You should then be able to point your web browser at ``http://localhost:8080`` and get a ``Hello, world!`` as a response.
+
+
+Using a page and template
+=========================
+
+So lets make this more useful and lets use some sort of template to render that page. First we create a simple template and stylesheet. For this we create a ``templates`` folder and store the template inside ``main.pt``:#
+
+.. code-block:: html
+
+    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
+     "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
+
+    <html>
+      <head>
+          <title>Test</title>
+          <style>
+            body { background: #f0f0f0; 
+                   font-family: Helvetica, Arial, sans-serif; }
+            #container {margin: 0 auto; 
+                        width: 750px;}
+            #footer {clear: both;}
+            #content {background: #fff; 
+                      padding: 10px;}
+            #editbutton {display: inline-block; 
+                        padding: 3px 10px 3px 10px; 
+                        margin: 10px 0;
+                        text-decoration: none;
+                        color: #420;
+                        font-weight: bold;
+                        background: #fa0; 
+                        border: 2px solid #a20;}
+          </style>
+      </head>
+
+      <body>
+        <div id="container">
+            <div id="header">
+                <h1>Example Application</h1>
+            </div>
+            <div id="main">
+
+                <div id="content">
+                    This is the document content.
+                </div>
+
+                <a href="edit" id="editbutton">Edit</a>
+            </div>
+
+            <div id="footer">
+                blablablablblablablabla
+            </div>
+        </div>
+      </body>
+    </html>
+
+    
+
+    
+    
+
+    
+