Section 7.2. Dashboard Templates | Rapid Web Applications with TurboGears: Using Python to Create Ajax-Powered Sites

7.2. Dashboard Templates

The next logical place to go in our WhatWhat code walkthrough is the template code that displays the Dashboard. You can see a sample of this template's output in Figure 7.1.

Figure 7.1. Dashboard Listing of open projects

This is by far the largest Kid template we've seen, so it should help you to see how to put everything together in a more complex page.

The first thing the whatwhat.templates.dashboard.index template does is use Kid's <?python ?> syntax to embed a brief snippet of Python into the template:

<?python        from whatwhat.model import STATUS_BEHIND_SCHEDULE ?>

In general, it's a good idea to use <?python ?> directly at the top of your template whenever you need it. Unlike ASP, JSP, or PHP, you can't return results directly to your rendered template from a <?python ?> statement, and it makes this difference, and your code in general, a lot clearer if you don't start mixing Python code segments into the middle of your XHTML.

Here are the contents of the dashboard.kid file:

<body>   <h2>Project Dashboard</h2>   <h3>Active Projects</h3>   <div         onclick="document.location.href='${tg.url('/project/%s' % project.id)}'"        py:for="project in projects">     <div >       <h3 py:content="project.name" />       <span py:if="project.status != STATUS_BEHIND_SCHEDULE"         py:content="status_codes.get(project.status)" />        <span py:if="project.status == STATUS_BEHIND_SCHEDULE"          py:content="status_codes.get(project.status)" />     </div>     <div >       <span >         <span >Contact:</span>         <a href="mailto:$project.contact.emailAddress" py:content="project.contact.  displayName" />        </span>        <span >         <span py:replace="len(project._total_risks())">some</span> risks,         <span py:replace="len(project._total_issues())">some</span> issues,         <span py:replace="len(project._total_notes())">some</span> notes,         <span py:replace="len(project._total_files())">some</span> files,         <span py:replace="len(project._total_questions())">some</span> questions,         <span py:replace="len(project._total_answers())">some</span> answers         <br/>           <span py:if="len(project.delayed_subprojects) > 0">           and <span py:replace="len(project.delayed_subprojects)" /> delayed sub-  projects           (<a py:for="i, sub_project in enumerate(project.delayed_subprojects)"  href="/project/$sub_project.id" title="$sub_project.name">${i+1}&#160;</a>)          </span>        </span>      </div>    </div>    <br/>

This chunk of code creates a couple of static headings, and then goes into a giant loop that iterates over every project in the projects list that was passed into our template by the index method in dashboard.py. Each project has two display sections, which are organized into two different div tags. The first div contains a header with the Project name and the status. This is where they are using the STATUS_BEHIND_SCHEDULE variable from our <?python ?> statement at the top of the template. This keeps project status encoding information in one place (our model), so that if for any reason it ever changes (say we need to create a "pending approval" status), we only have to update our code in one place. The py:if statements allow WhatWhat to set the class attribute to "good" for all projects that are not behind schedule, and bad for the projects that are behind schedule. This allows WhatWhat to color code these items through standard CSS.

Here's what the relevant portion of the dashboard.css file looks like:

As you can see, all span elements in div.project are styled here. If you aren't familiar with CSS, you might want to check out the references on our website. But, in brief, this CSS file contains the visual display information for the HTML created by the dashboard.kid template. It looks for class attributes on the various HTML elements in our page and applies the correct styling. In this case, the h3 tags will be aligned on the left, have a 14px font, and so forth. Status information will be on the right and will be color coded based on whether it's good or bad. The great thing about using Kid templates and CSS is that it makes it easy to get help from a designer when you need to work out the details of how everything should look. They can open up your templates in their tool of choice and play with the CSS.

Now we come to the bottom div (inside the project div). There's not much new here, but it's worth a second look because it's a bit more complicated than anything you've seen before. The first attribute creates a mailto: link to the contact for the current project. This is immediately followed by a section that shows how many risks, notes, issues, files, questions, and answers are in the database for this project.

Remember: All of this is still happening inside the big project loop that iterates over the top-level projects. Every subelement of original project div, where py:for "project in projects" was called, is part of that loop. So, this whole thing is going to be repeated for all the top-level projects in the database.

Which brings us to the next section of code. WhatWhat creates another loop inside the main loop, which gets each of the subprojects for the current top-level project and displays the information for that subproject.