Intro to TAL

4,418 views
4,200 views

Published on

An introductory lesson to the Zope page templating language.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,418
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Intro to TAL

  1. 1. PLONE SYMPOSIUM EAST 2011Intro to TALChrissy Wainwright
  2. 2. What is TAL? PLONE SYMPOSIUM EAST 2011* Zope Templating Language* Allow for dynamic content in HTML* Does not render in the site
  3. 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. 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. 5. TAL Syntax PLONE SYMPOSIUM EAST 2011<div tal:condition=”python:phone and fax”>Python expressions allow us to put Python codedirectly in the template. This is not meant forlong, complex expressions.
  6. 6. TAL Syntax PLONE SYMPOSIUM EAST 2011<a tal:attributes= ”href string:${item/url}/folder”>With string expressions, we can add static text todynamic content or combine multiple variables
  7. 7. TAL Commands PLONE SYMPOSIUM EAST 2011* define* condition* repeat* content/replace* attributes* omit-tag
  8. 8. tal:define PLONE SYMPOSIUM EAST 2011* defines variables<div id=”portal-breadcrumbs” tal:define=”breadcrumbs view/breadcrumbs”>
  9. 9. tal:condition PLONE SYMPOSIUM EAST 2011* evaluates an expression* display element if True* omit element if False
  10. 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. 11. tal:repeat PLONE SYMPOSIUM EAST 2011* repeats over a set of elements* available variables: * index / number * even / odd * start / end * length
  12. 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. 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. 14. tal:content PLONE SYMPOSIUM EAST 2011use ‘structure’ for content with HTML code,so the code is not rendered as text<tal:body content=”structure context/getText” />
  15. 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. 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. 17. tal:attributes PLONE SYMPOSIUM EAST 2011allows 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. 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. 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. 20. Macros PLONE SYMPOSIUM EAST 2011The Macro Expansion Template AttributeLanguage (METAL) allows us to create macroswithin our page templates, which saves us fromrepeating code.* define-macro / use-macro* define-slot / fill-slot
  21. 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. 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. 23. PLONE SYMPOSIUM EAST 2011 eck outCh p. com/d emossix feetu

×