TurboGears: Kid Template System

# Kid: Designer and programmer friendly templates

# Kid in-an-instant

### Home page

kid.lesscode.org

### Fearless Leader

Ryan Tomayko

### Claim-to-fame

Pythonic, XML-based Templating

### What's so great?

Standard XHTML makes the templates easy-to-use for designers. The programming syntax is a no-brainer for Python programmers. Also includes an easy XSLT-like "match" command. Produces syntactically correct output.

Your designer will love you for using Kid. As far as they're concerned, they're just giving you XHTML that you put some extra stuff into. The designs they put together can even have sample data that hangs around and gets replaced by the real data when the time comes.

OK, sure. Not everyone works with a designer. (I've seen lots of pages that prove that. I've made lots of pages that prove that!) That's OK... Kid is friendly for programmers, too.

## It's just Python

If you were generating your output in straight Python, you could do something like this:

<![CDATA[ print "<table>" for person in people: print "<tr>" print "<td>%s</td>" % (person.name) print "</tr>" print "</table>" ]]>

In a Kid template, you just do it like this:

<![CDATA[ <table> <tr py:for="person in people"> <td><span py:content="person.name">Kevin Bacon</span></td> </tr> </table> ]]>

The expressions in Kid's "for" and "if" commands are standard Python! Note also that the example above is the "designer-friendly" form that would have nice sample data to show in an editor or browser. If you want, you can use the more succinct "$${person.name}" instead of having the extra <span>.

## Applying consistent templating throughout

Sure, we all use CSS these days to apply consistent style throughout our apps, but you still need a mechanism for consistent headers and footers. Kid provides a couple of useful ways to do this.

### Template Inheritance

You can create a header in a "template function" in a master template that looks something like this:

<![CDATA[ <div py:def="header(title)"> <h1>$${title}</h1> <p>Here is yet another groovy page of ours.</p> </div> ]]>

Then, your individual templates will "extend" your master template and call the function to insert the header:

<![CDATA[ <div py:replace="header('Foo!')">This will go away and be replaced by the header.</div> ]]>

### Matching

Kid has a great feature that gives you some of XSLT's power without XSLT's syntax: the "match" command. As in the previous example, you'd have your template extend a master template. However, rather than explicitly calling a header function, the master template will add the header through matching.

<![CDATA[ <body py:match="item.tag == '{http://www.w3.org/1999/xhtml}body'"> <h1>$${title}</h1> <p>Here is yet another groovy page of ours.</p> <div py:replace="item[:]"> ]]>

By putting the code above in your master template, all you have to do is extend the master template for each separate page you make. The headers (and footers, if desired) will automatically be added. Plus, other changes could be made to the final document, if you need to!

## I really want to write code in my template!

OK, if you must. Just don't tell anyone... Kid lets you don't what you need to do. You can incorporate some Python directly into your template by enclosing it in <?python?>. Since this is a processing instruction, your template remains valid XHTML.

## Kid won't give you garbage

Many template systems make it possible to leave tags hanging or mismatched. With Kid, your template must be valid XML, so you're guaranteed to not have mismatched tags. Many browsers don't properly support XHTML. When the time comes to deliver your content to a web browser, TurboGears will transparently output HTML based on your XHTML template and your data.

Return to About TurboGears.