An introductory lesson to the Zope page templating language.

1. PLONE SYMPOSIUM EAST 2011
Intro to TAL
Chrissy Wainwright

2. What is TAL?
PLONE SYMPOSIUM EAST 2011
* Zope Templating Language
* Allow for dynamic content in HTML
* Does not render in the site

3. TAL Syntax
PLONE SYMPOSIUM EAST 2011
<div tal:content=”context/Title”></div>
<tal:title content=”context/Title” />
Use an HTML tag or <tal:whatever...

4. TAL Syntax
PLONE SYMPOSIUM EAST 2011
<a tal:attributes=”href url;
class linkClass”>
* separate multiple declarations with a semicolon
* align variables/attributes on the left

5. TAL Syntax
PLONE SYMPOSIUM EAST 2011
<div tal:condition=”python:phone and fax”>
Python expressions allow us to put Python code
directly in the template. This is not meant for
long, complex expressions.

6. TAL Syntax
PLONE SYMPOSIUM EAST 2011
<a tal:attributes=
”href string:${item/url}/folder”>
With string expressions, we can add static text to
dynamic content or combine multiple variables

7. TAL Commands
PLONE SYMPOSIUM EAST 2011
* define
* condition
* repeat
* content/replace
* attributes
* omit-tag

8. tal:define
PLONE SYMPOSIUM EAST 2011
* defines variables
<div id=”portal-breadcrumbs”
tal:define=”breadcrumbs view/breadcrumbs”>

9. tal:condition
PLONE SYMPOSIUM EAST 2011
* evaluates an expression
* display element if True
* omit element if False

10. tal:condition
PLONE SYMPOSIUM EAST 2011
<tal:item define=”is_last repeat/crumb/end”>
<span tal:condition=”not: is_last”>
This
</span>
<span tal:condition=”is_last”>
That
</span>
</tal:item>

11. tal:repeat
PLONE SYMPOSIUM EAST 2011
* repeats over a set of elements
* available variables:
* index / number
* even / odd
* start / end
* length

12. tal:repeat
PLONE SYMPOSIUM EAST 2011
<span tal:repeat=”crumb breadcrumbs”>
<a tal:attributes=”href crumb/absolute_url”
tal:content=”crumb/Title”>crumb</a>
</span>

13. tal:content
PLONE SYMPOSIUM EAST 2011
* determines what content will display inside a
tag
* any content inside the tag in the template will
not display in the site
<span tal:content=”title”>The Title</span>

14. tal:content
PLONE SYMPOSIUM EAST 2011
use ‘structure’ for content with HTML code,
so the code is not rendered as text
<tal:body content=”structure context/getText” />

15. tal:replace
PLONE SYMPOSIUM EAST 2011
* determines what content will display in place
of a tag
* the tag will not display in the site
<span tal:replace=”title”>The Title</span>

16. tal:replace
PLONE SYMPOSIUM EAST 2011
* replacing an element with ‘nothing’ will not
render in the site
* good for commenting out parts of the code
<div tal:replace=”nothing”>
This is a comment
</div>

17. tal:attributes
PLONE SYMPOSIUM EAST 2011
allows you to set a dynamic value to an attribute
(href, src, class, etc)
<a href=”#”
tal:content=”crumb/Title”
tal:attributes=”href crumb/absolute_url”></a>

18. tal:omit-tag
PLONE SYMPOSIUM EAST 2011
* similar to condition, evaluates an expression
* if true, the wrapping tag is omitted, and only
the content is displayed
* if false, the tag displays
* omit-tag=”” will also omit the tag

19. tal:omit-tag
PLONE SYMPOSIUM EAST 2011
<a href=”#”
tal:define=”url crumb/absolute_url”
tal:omit-tag=”not:url”
tal:attributes=”href url”>

20. Macros
PLONE SYMPOSIUM EAST 2011
The Macro Expansion Template Attribute
Language (METAL) allows us to create macros
within our page templates, which saves us from
repeating code.
* define-macro / use-macro
* define-slot / fill-slot

21. Macros
PLONE SYMPOSIUM EAST 2011
<div metal:define-macro=”footer”>
&copy; 2011 Company Name
</div>
<metal:foot
use-macro=”context/my_macros/macros/footer”>
</metal:foot>

22. Macro Slots
PLONE SYMPOSIUM EAST 2011
<h1 metal:define-slot=”content-title”>
<span tal:replace=”context/Title”></span>
</h1>
<h1 metal:fill-slot=”content-title”>
Custom Title
</h1>

23. PLONE SYMPOSIUM EAST 2011
eck out
Ch
p. com/d emos
six feetu