Template

We are nearly done now!, But missing parts are normally the hardest in all frameworks. The view..

What makes the view in Tequila?

    • A basic HTML template

    • A PHP file that uses the template

    • A language file

First let's see the code

In Tequila we only use one template per page, there are already enough files around to create one more for each method!

Add a file:

templates/basic/categories.html

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}" />

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.

</p>

<!-- END BLOCK : Exit -->

    • Header: PHP block that is common to all pages

<!-- START BLOCK : Edit -->

    • Block Title, a heading to show where we are to the user

<script language="javascript" type="text/javascript">

    • Block Message and Error, messages, you can customize to show icons or anything else

// Vars should be declared in JavaScript include

    • Block Exit, add a button to navigate out of the page

function validateOnSubmit(f) {

    • Block Edit,

var elem;

      • Javascript to validate name is entered

var errs=0;

      • A table with text controls

// execute all element validations in reverse order, so focus gets

      • Some hidden fields

// set to the first one in error.

      • buttons

if (!validateLength(f.I_NAME, 'err_I_NAME' ,4,50 , true)) errs += 1;

    • Block View;

if (errs>1) alert('There are fields which need correction before sending');

      • A table with the fields for display

if (errs==1) alert('There is a field which needs correction before sending');

    • Block List,

return (errs==0);

      • 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

</script>

      • Add new button

<form name="editForm" method="post" action="" onsubmit="return validateOnSubmit(this);">

      • Pagination block (In case you have lots)

<table width="90%" border="0" cellpadding="0" cellspacing="2" class="nice">

    • A block for ajax (not required)

<tr>

    • The footer, same as header common PHP /HTML code

<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);" />

Studying the code

<span class="Error" id="err_I_NAME">&nbsp;{err_I_NAME}</span> </td>

</tr>

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.

<tr>

<td valign="top">&nbsp;</td>

<td ><span id="msgajax">&nbsp;</span></td>

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

</tr>

<tr>

You can go now to the view page or read more about templates in Tequila!

<td><input name="mode" type="hidden" id="mode;" value="{mode}" />

<input name="I_IDCATEGORY" type="hidden" id="I_IDCATEGORY" value="{I_IDCATEGORY}" />

The template technology

</td>

<td ><input name="btnAjax" type="button" id="btnAjax" value="{saveajax}" onclick="saveformajax(this.form, '{saveajaxUrl}','I_IDCATEGORY');" />

We have use many templates and unfortunately I belong to the small group of people that believe most template engines got it all wrong :(

<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}" />

Templates are made for:

</td>

</tr>

    • Separate code from presentation

</table>

    • Make easy to update / modify the look of a system

</form>

    • Have different views for different clients

<!-- END BLOCK : Edit -->

<!-- START BLOCK : View -->

Why template engines got it wrong?

<table width="90%" height="61" border="0" cellpadding="0" cellspacing="2" class="nice">

<tr>

<td height="28" class="inverse">{lbl_I_NAME}</td>

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

<td > {I_NAME} </td>

</tr>

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.

<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}" />

So what Tequila likes

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

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)

<!-- END BLOCK : View -->

<!-- START BLOCK : List -->

<table border="0" cellpadding="2" cellspacing="1" class="sortable2">

We use a slightly modified version of templatepower you can check the help in the site to get all the grammar.

<thead>

This template use PURE html code + HTML comments to mark blocks and normal {placeholders}, there is no variables, object access or anything else.

<tr>

<th >{lbl_I_NAME}</th>

<th class="skipsort">{lbl_view}</th>

What do I need to know for my template?

</tr>

</thead>

Not really much you pretty much just need to know,

<tbody class="scrollable">

<!-- START BLOCK : row -->

<!-- START BLOCK : yourblock --> {a_placeholder} <!-- START BLOCK : mynestedblock--> {another_placeholder} <!-- START BLOCK : mynestedblock--> <!-- END BLOCK : yourblock -->

<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}" />

Next -The view

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