The template code is very easy but quite long, we suggest you to see it on Dreamweaver or another HTML application.
<!-- INCLUDE BLOCK : header -->
<!-- START BLOCK : title -->
<h3>{title}</h3>
<!-- END BLOCK : title -->
<!-- START BLOCK : Msg -->
<p class="Warn">{message}</p>
<!-- END BLOCK : Msg -->
<!-- START BLOCK : Error -->
<p class="Error_page">{message}</p>
<!-- END BLOCK : Error -->
<!-- START BLOCK : Exit -->
<p>
<input name="exit" type="button" id="exit" onclick="MM_goToURL('parent','{exitUrl}');return document.MM_returnValue" value="{exit}" />
</p>
<!-- END BLOCK : Exit -->
<!-- START BLOCK : Edit -->
<script language="javascript" type="text/javascript">
// Vars should be declared in JavaScript include
function validateOnSubmit(f) {
var elem;
var errs=0;
// execute all element validations in reverse order, so focus gets
// set to the first one in error.
if (!validateLength(f.I_NAME, 'err_I_NAME' ,4,50 , true)) errs += 1;
if (errs>1) alert('There are fields which need correction before sending');
if (errs==1) alert('There is a field which needs correction before sending');
return (errs==0);
};
</script>
<form name="editForm" method="post" action="" onsubmit="return validateOnSubmit(this);">
<table width="90%" border="0" cellpadding="0" cellspacing="2" class="nice">
<tr>
<td class="inverse">{lbl_I_NAME}</td>
<td ><input name="I_NAME" type="text" class="input_Medium" id="I_NAME" value="{I_NAME}" onchange="validateLength(this, 'err_I_NAME' ,3,40 , true);" />
<span class="Error" id="err_I_NAME"> {err_I_NAME}</span> </td>
</tr>
<tr>
<td valign="top"> </td>
<td ><span id="msgajax"> </span></td>
</tr>
<tr>
<td><input name="mode" type="hidden" id="mode;" value="{mode}" />
<input name="I_IDCATEGORY" type="hidden" id="I_IDCATEGORY" value="{I_IDCATEGORY}" />
</td>
<td ><input name="btnAjax" type="button" id="btnAjax" value="{saveajax}" onclick="saveformajax(this.form, '{saveajaxUrl}','I_IDCATEGORY');" />
<input name="Submit" type="submit" value="{submit}" />
<input name="Cancel" type="button" id="Cancel" onclick="MM_goToURL('parent','{exitUrl}');return document.MM_returnValue" value="{exit}" />
</td>
</tr>
</table>
</form>
<!-- END BLOCK : Edit -->
<!-- START BLOCK : View -->
<table width="90%" height="61" border="0" cellpadding="0" cellspacing="2" class="nice">
<tr>
<td height="28" class="inverse">{lbl_I_NAME}</td>
<td > {I_NAME} </td>
</tr>
<tr>
<td height="27"></td>
<td ><input name="goEdit" type="button" id="goEdit" onclick="MM_goToURL('parent','index.php?task=categories&mode=Edit&I_IDCATEGORY={I_IDCATEGORY}');return document.MM_returnValue" value="{edit}" />
<input name="goDelete" type="button" id="goDelete" onclick="ConfirmAndgoToURL('index.php?task=categories&mode=Delete&I_IDCATEGORY={I_IDCATEGORY}','{delete_confirm} {labelDelete}?')" value="{delete}" />
<input name="Cancel" type="button" id="Cancel" onclick="MM_goToURL('parent','index.php?task=categories&mode=Browse');return document.MM_returnValue" value="{exit}" /></td>
</tr>
</table>
<!-- END BLOCK : View -->
<!-- START BLOCK : List -->
<table border="0" cellpadding="2" cellspacing="1" class="sortable2">
<thead>
<tr>
<th >{lbl_I_NAME}</th>
<th class="skipsort">{lbl_view}</th>
</tr>
</thead>
<tbody class="scrollable">
<!-- START BLOCK : row -->
<tr class="{cssstyle}">
<td>{I_NAME}</td>
<td><a href="{viewLink}">{view}</a></td>
</tr>
<!-- END BLOCK : row -->
</tbody>
<tfoot>
<th> <input name="addNew" type="button" id="addNew" onclick="MM_goToURL('parent','{addNewUrl}');return document.MM_returnValue" value="{addNew}" />
</th>
<th class="pages">
<!-- START BLOCK : pagination -->
<ul class="pagination">
<!-- START BLOCK : linkpage -->
<li {class}><a href="{url}">{label}</a></li>
<!-- END BLOCK : linkpage -->
</ul>
<!-- END BLOCK : pagination --></th>
</table>
<!-- END BLOCK : List -->
<!-- START BLOCK : ajax -->
<?xml version="1.0" encoding="iso-8859-1"?>
<r>
<status>{status}</status>
<idx>{idx}</idx>
<msg>{msg}</msg>
</r>
<!-- END BLOCK : ajax -->
<!-- INCLUDE BLOCK : footer -->
Ok, don't get scared if you know HTML you will see there's nothing in here, all is pure HTML code, with some CSS, some javascript for validation and table sorting and a pagination block so you get the whole idea.
- Header: PHP block that is common to all pages
- Block Title, a heading to show where we are to the user
- Block Message and Error, messages, you can customize to show icons or anything else
- Block Exit, add a button to navigate out of the page
- Block Edit,
- Javascript to validate name is entered
- A table with text controls
- Some hidden fields
- buttons
- Block View;
- A table with the fields for display
- Block List,
- A table that uses some cool css / javascript to make it sortable
- Block ROW, the block the code that has to repeat for each category
- Add new button
- Pagination block (In case you have lots)
- A block for ajax (not required)
- The footer, same as header common PHP /HTML code
Studying the code
You can see all code is pure HTML the blocks are HTML comments, there is some not required javascript, some pagination blocks etc. We believe any designer can use/create a similar template with some guidelines, then you Javascript developer or yourself can add the JS blocks.
As you see there is no language entries, titles, or text in the file and not a single control structure, IF, ELSE, FOR, WHILE, LOOP,etc..
You can go now to
the view page or read more about templates in Tequila!
The template technology
We have use many templates and unfortunately I belong to the small group of people that believe most template engines got it all wrong :(
Templates are made for:
- Separate code from presentation
- Make easy to update / modify the look of a system
- Have different views for different clients
Why template engines got it wrong?
Originally the idea was to keep designers making nice pages and developers doing the coding, so template engines were born, unfortunately they got so complex that they become another language in the equation. A language that I believe no one needs..
The HTML is still not clean and well you cannot code it in PHP now you need to learn your template language; Conditionals, object access, loops.. Is this the job of a designer? or a developer? I think none, so well we didn't separate presentation from code, we just use a new one.
So what Tequila likes
After using many I decide to implement a template that I liked for long time, unfortunately is not free for commercial projects but well is not expensive. In the future when we get some time we will replace this template engine for one that allows commercial projects (want to participate? we know is not hard, we just have no time, contact me pls if you want to get involved! all info on sourceforge, or add a comment)
We use a slightly modified version of
templatepower you can check the help in the site to get all the grammar.
This template use PURE html code + HTML comments to mark blocks and normal {placeholders}, there is no variables, object access or anything else.
What do I need to know for my template?
Not really much you pretty much just need to know,
<!-- START BLOCK : yourblock -->
{a_placeholder}
<!-- START BLOCK : mynestedblock-->
{another_placeholder}
<!-- START BLOCK : mynestedblock-->
<!-- END BLOCK : yourblock -->
Next -The view
