View
3.667
Download
4
Category
Tags:
Preview:
DESCRIPTION
An introductory lesson to the Zope page templating language.
Citation preview
PLONE SYMPOSIUM EAST 2011
Intro to TALChrissy Wainwright
PLONE SYMPOSIUM EAST 2011
What is TAL?
* Zope Templating Language * Allow for dynamic content in HTML * Does not render in the site
PLONE SYMPOSIUM EAST 2011
TAL Syntax
<div tal:content=”context/Title”></div>
<tal:title content=”context/Title” />
Use an HTML tag or <tal:whatever...
PLONE SYMPOSIUM EAST 2011
TAL Syntax
<a tal:attributes=”href url; class linkClass”>
* separate multiple declarations with a semicolon* align variables/attributes on the left
PLONE SYMPOSIUM EAST 2011
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.
PLONE SYMPOSIUM EAST 2011
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
PLONE SYMPOSIUM EAST 2011
TAL Commands
* define * condition * repeat * content/replace * attributes * omit-tag
PLONE SYMPOSIUM EAST 2011
tal:define
* defines variables
<div id=”portal-breadcrumbs” tal:define=”breadcrumbs view/breadcrumbs”>
PLONE SYMPOSIUM EAST 2011
tal:condition
* evaluates an expression * display element if True * omit element if False
PLONE SYMPOSIUM EAST 2011
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>
PLONE SYMPOSIUM EAST 2011
tal:repeat
* repeats over a set of elements * available variables: * index / number * even / odd * start / end * length
PLONE SYMPOSIUM EAST 2011
tal:repeat
<span tal:repeat=”crumb breadcrumbs”> <a tal:attributes=”href crumb/absolute_url” tal:content=”crumb/Title”>crumb</a></span>
PLONE SYMPOSIUM EAST 2011
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>
PLONE SYMPOSIUM EAST 2011
tal:content
use ‘structure’ for content with HTML code,so the code is not rendered as text
<tal:body content=”structure context/getText” />
PLONE SYMPOSIUM EAST 2011
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>
PLONE SYMPOSIUM EAST 2011
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>
PLONE SYMPOSIUM EAST 2011
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>
PLONE SYMPOSIUM EAST 2011
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
PLONE SYMPOSIUM EAST 2011
tal:omit-tag
<a href=”#” tal:define=”url crumb/absolute_url” tal:omit-tag=”not:url” tal:attributes=”href url”>
PLONE SYMPOSIUM EAST 2011
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
PLONE SYMPOSIUM EAST 2011
Macros
<div metal:define-macro=”footer”> © 2011 Company Name</div>
<metal:foot use-macro=”context/my_macros/macros/footer”></metal:foot>
PLONE SYMPOSIUM EAST 2011
Macro Slots
<h1 metal:define-slot=”content-title”> <span tal:replace=”context/Title”></span></h1>
<h1 metal:fill-slot=”content-title”> Custom Title</h1>
PLONE SYMPOSIUM EAST 2011
Check out
sixfeetup.com/demos
Recommended