I’ve done a little more work on ‘my’ approach to templating. One thing I’ve only mentioned in passing, is that there are other templating engines out there that work in this fashion — both in Python and Java. HTMLTemplate, is a python module I’ve already mentioned previously. Tapestry is a Java framework, which I haven’t personally used, but seem to recall uses an attribute language for its templates. And there are others, so what I’m experimenting with is hardly anything new. But I have yet to see one that I think goes far enough with the removal of markup from view components. Not to harp on about it too much (not half).
Continuing from the code started here, I’ve added data for the central section of the page; which uses the dom from an imported template. The engine has been changed slightly to re-calculate the ID attributes of imports so that they remain unique in the page. This is something that the user/developer would need to be aware of, but not necessarily the template designer.
template['main:top-content'] = engine.load('multi-col-content.html')
template['main:top-content:heading'] = 'Treat Yourself'
template['main:top-content:img'] = [ template2.get(None, src='amazon_fp_files/1887521003.jpg', alt='some title text'),
template2.get(None, src='amazon_fp_files/1887521003.jpg', alt='some other title text'),
template2.get(None, src='amazon_fp_files/0316015849.jpg', alt='some title text') ]
template['main:top-content:title'] = [ 'Some title text', 'Some other title text', 'More title text' ]
template['main:top-content:author'] = [ 'by Someone', 'by Another Person', 'by Yet Another Person' ]
template['main:top-content:price'] = [ ' ', '$10.99', '$15.25' ]
template['main:top-content:link'] = template2.hidden()
template['main:repeated-content'] = [ engine.load('multi-col-content.html'),
engine.load('multi-col-content.html') ]
template['main:repeated-content:1:heading'] = 'Up to 50% Off Bostonian Shoes'
template['main:repeated-content:1:img'] = [ template2.get(None, src='amazon_fp_files/B0007MCQCQ.jpg', alt='shoe1'),
template2.get(None, src='amazon_fp_files/B0007MCQR6.jpg', alt='shoe2'),
template2.get(None, src='amazon_fp_files/B000BYIBA6.jpg', alt='shoe3') ]
template['main:repeated-content:1:title'] = template2.hidden()
template['main:repeated-content:1:author'] = template2.hidden()
template['main:repeated-content:1:price'] = template2.hidden()
template['main:repeated-content:1:link'] = [ template2.get('link1 text', href='http://localhost/amazon/somelink1'),
template2.get('link2 text', href='http://localhost/amazon/somelink2'),
template2.get('link3 text', href='http://localhost/amazon/somelink3') ]
template['main:repeated-content:2:heading'] = 'Free Shipping on the New Samsung DLP HDTVs'
template['main:repeated-content:2:img'] = [ template2.get(None, src='amazon_fp_files/B000F2N7D0.jpg', alt='tv1'),
template2.get(None, src='amazon_fp_files/B000F2P300.jpg', alt='tv2'),
template2.get(None, src='amazon_fp_files/B000F2PHDI.jpg', alt='tv3') ]
template['main:repeated-content:2:title'] = template2.hidden()
template['main:repeated-content:2:author'] = template2.hidden()
template['main:repeated-content:2:price'] = template2.hidden()
template['main:repeated-content:2:link'] = [ template2.get('link1 text', href='http://localhost/amazon/somelink1'),
template2.get('link2 text', href='http://localhost/amazon/somelink2'),
template2.get('link3 text', href='http://localhost/amazon/somelink3') ]
The template itself, at this point is remarkably uncomplicated, meaning that most of the complexity stays in the code (something I don’t personally have a problem with):
<div id="main">
<div>
<h2>Main Column</h2>
<span id="main:top-content">
top content pane here
</span>
</div>
<div>
todo: replace this with 'specials' section
</div>
<div id="main:repeated-content">
repeated content here
</div>
</div>
The imported template is also simple. The cell contents are defined once, then repeated in code using a list of imported templates (engine.load(...) statements), and finally content is applied to those imported elements; and in some cases removed, using the template2.hidden() statement.
<div>
<h4 id="heading">heading here</h4>
<table class="multicol">
<tr>
<td id="img"><img src="" alt="" /></td>
</tr>
<tr>
<td id="title">title text here</td>
</tr>
<tr>
<td id="author">author text here</td>
</tr>
<tr>
<td id="price">$0.00</td>
</tr>
<tr>
<td id="link"><a href="">link text</a></td>
</tr>
</table>
</div>
Resources:
No comments yet.