Intro to TAL

PLONE SYMPOSIUM EAST 2011

Intro to TALChrissy Wainwright


What is TAL?

* Zope Templating Language * Allow for dynamic content in HTML * Does not render in the site


TAL Syntax

<div tal:content=”context/Title”></div>

<tal:title content=”context/Title” />

Use an HTML tag or <tal:whatever...


TAL Syntax

<a tal:attributes=”href url; class linkClass”>

* separate multiple declarations with a semicolon* align variables/attributes on the left


TAL Syntax

<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.


TAL Syntax

<a tal:attributes= ”href string:${item/url}/folder”>

With string expressions, we can add static text to dynamic content or combine multiple variables


TAL Commands

* define * condition * repeat * content/replace * attributes * omit-tag


tal:define

* defines variables

<div id=”portal-breadcrumbs” tal:define=”breadcrumbs view/breadcrumbs”>


tal:condition

* evaluates an expression * display element if True * omit element if False


tal:condition

<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>


tal:repeat

* repeats over a set of elements * available variables: * index / number * even / odd * start / end * length


tal:repeat

<span tal:repeat=”crumb breadcrumbs”> <a tal:attributes=”href crumb/absolute_url” tal:content=”crumb/Title”>crumb</a></span>


tal:content

* 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>


tal:content

use ‘structure’ for content with HTML code,so the code is not rendered as text

<tal:body content=”structure context/getText” />


tal:replace

* 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>


tal:replace

* 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>


tal:attributes

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>


tal:omit-tag

* 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


tal:omit-tag

<a href=”#” tal:define=”url crumb/absolute_url” tal:omit-tag=”not:url” tal:attributes=”href url”>


Macros

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


Macros

<div metal:define-macro=”footer”> © 2011 Company Name</div>

<metal:foot use-macro=”context/my_macros/macros/footer”></metal:foot>


Macro Slots

<h1 metal:define-slot=”content-title”> <span tal:replace=”context/Title”></span></h1>

<h1 metal:fill-slot=”content-title”> Custom Title</h1>


Check out

sixfeetup.com/demos

Intro to TAL

Technology

Transcript of Intro to TAL