Templating tasks

So here are some rough sketches of presentation-layer tasks I'd like to use to get a feel for how the various template systems work. These are in no particular order. They all represent things I've had to do in the past.

Form Validation

For my purposes, this does not represent the actual validation of forms (ie, checking that email addresses are correctly formatted, etc), but rather displaying validation results back to the user. The common tasks here are refilling the user's entered data in form fields, displaying error messages, and possibly recoloring form labels.

As a side note, Ian Bicking is doing some interesting work along these lines with his formencode library. The htmlfill part of that library is of particular interest, and I may try to see how easy it is to integrate it into various engines. I don't know of any other libraries that do the same thing, which is somewhat surprising since it's such a common web programming task.

Page layout

By this I mean not only look-and-feel layout (ie, applying a consistent header, footer, sidebar, etc to a set of pages), but dynamic layout as well. That is to say, the navigation elements should be dynamic—if the user is looking in the "shopping" section of the site, then the "shopping" link on the top navigation should be highlighted. If he or she is not logged in to his or her account, there should be a link to the login page, and if he or she is logged in it should change to an account management link.

"Product" thumbnail display

This is really the most basic template task imaginable. Given a product's name, price, image, and so on, make a little chunk of HTML to display to the user. This represents a thumbnail picture of a product that would be displayed on, for example, a category page. Obviously, this doesn't have to be a product per se, it could also represent a user account, an excerpt from a weblog post, etc.

The important part of this task is composition. The way products are displayed should be controllable seperately from the way they are laid out on the screen (which is the next task). There should be an easy way to generate the chunk of HTML given the product information, and then to add that HTML into a layout.

"Product" layout

This task involves positioning an arbitrary number of products (rectangular blocks of HTML from the above task) on a page. As an example, the ThinkGeek gadgets page has its products lined up in two columns, and Target's sofa page displays four rows by four columns of products, unless there are less than sixteen products on a given page (as on page 2 of the above link).

This task involves iterating over a set of products, and rendering HTML in between each one. Note that, as in the four-column example, there may be two nested loops here (one for each row and one for each column in the row). Potentially there could be more complex pages with more levels of iteration as well.

Pagination

Pagination (for example, of search results, products in a category, or forum posts) is generally not a difficult problem. It can all be done in the presentation logic and then handed to the template as a simple list. I include it here because it is a small and self-contained little subsystem, and can potentially have an elegant solution.

A good paginator should be given some simple data and then do the right thing. Given the number of total pages, the current page being displayed, and possibly some configuration type data, it should either display nothing (if there is only one page), or display a list of all pages. If the user is not at the first or last page, the pager should display a little arrow to go to the next or previous page, and maybe links to the first and last page. If there are more than a certain amount of pages, it should use ellipses so the list doesn't get too long.

Next up

With these tasks in mind, I'll move on to thinking of some actual pages that demonstrate these tasks, an possibly making a mock-up or two. From there it's on to working up a fake back-end and figuring out the best environment to test in.

Previous: My background

Home