JOTWeb Examples

Displaying Dynamic Content

The following displays the current time in the web-page. It demonstrates calling arbitrary Python code.

Rendered Page:

The current time is 16:50:31

Source, html/ex1.html:

The current time is <b tal:replace="sitecode/ex1/now">Placeholder</b>

Source, code/sitecode.py:

import ex1

Source, sitecode/ex1.py:

def now():
   import time
   return(time.strftime('%H:%M:%S'))

Iterating

The following code demonstrates iterating over Python data-structures. This could, of course, be put inside a table, but my current page layout doesn't like having tables in it for some reason.

Rendered Page:

jafo 500
ant 501
efm 502
kevin 503

Source, html/ex2.html:

<span tal:repeat="row sitecode/ex2/userList" tal:omit-tag="">
   <span tal:repeat="col row" tal:omit-tag="">
      <span tal:replace="col"></span>
   </span><br />
</span>

Source, code/sitecode.py:

import ex2

Source, code/ex2.py:

userList = [
   ( 'jafo', 500 ),
   ( 'ant', 501 ),
   ( 'efm', 502 ),
   ( 'kevin', 503 ),
   ]

Iterating, With Tables

This is the above example, with a link to a page that displays the table output.

Page, ex3.html:

Follow this link to the sample form.

Source, html/ex3.html:

<h1>User List</h1>

<table border="1">
   <tr><th>Login</th><th>User ID</th></tr>
   <tr tal:repeat="row sitecode/ex3/userList">
      <td tal:repeat="col row" tal:content="col"></td></tr>
</table>

Source, code/sitecode.py:

import ex3

Source, code/ex3.py:

userList = [
   ( 'jafo', 500 ),
   ( 'ant', 501 ),
   ( 'efm', 502 ),
   ( 'kevin', 503 ),
   ]

Form Processing

This example shows a slightly complicated form processing example. There is a single .html file, which includes the base form and also the logic for displaying validation errors and displaying the results. The Python code gets the form information and validates it -- notice how short it is...

Page, html/form.html:

Follow this link to the sample form.

Source, code/ex4.html:

<div tal:define="data sitecode/form/formdata">
<!-- Form was filled in -->
   <div tal:condition="exists:data/subscribe">
<!-- Form had no errors -->
      <div tal:condition="not:data/geterrors">
         <h1><font color="#00ff00">Form Success</font></h1>
      </div>

<!-- Form has errors -->
      <div tal:condition="data/geterrors">
         <h1><font color="#ff0000">Form Errors</font></h1>

         <p />The following errors were found in your form input:

         <ul>
            <li tal:repeat="value data/geterrors" tal:content="value">Error</li>
         </ul>
         <h2>Fix form:</h2>
         <form method="POST">
            Email Address: <input type="text" name="EmailAddr"
               tal:attributes="value data/EmailAddr" /><br />
            Full Name: <input type="text" name="FullName"
               tal:attributes="value data/FullName" /><br />
            <input type="submit" name="subscribe" value="Subscribe" /><br />
         </form>
      </div>
   </div>

<!-- Form was not filled in -->
   <div tal:condition="not:exists:data/subscribe">
      <h1>Fill in form:</h1>
      <form method="POST">
         Email Address: <input type="text" name="EmailAddr" /><br />
         Full Name: <input type="text" name="FullName" /><br />
         <input type="submit" name="subscribe" value="Subscribe" /><br />
      </form>

      <p />Try entering invalid data above.  FullName only takes letters,
      digits, spaces, and a few others...  Try entering "*", and a badly
      formed e-mail address, etc...  FullName must be between 3 and
      20 characters.
   </div>
</div>

Source, code/sitecode.py:

import form
from mod_python import util   #  work-around for mod_python bug

Source, code/form.py:

from jotweb2.input import SimpleForm

formdata = SimpleForm.FormHandler()

if formdata.vdt_required('EmailAddr'):
   formdata.vdt_emailaddr('EmailAddr')
if formdata.vdt_required('FullName'):
   formdata.vdt_realname('FullName')
   formdata.vdt_length('FullName', 20, 3)