Web technologies -- Laboratory 10 -- Templating engines -- 2007-2008 -- info.uvt.ro

These pages are somehow outdated and it is recommended to consult the newer version at Web technologies -- 2009-2010 -- info.uvt.ro (by Marc Frâncu).

Web technologies -- 2007-2008 -- info.uvt.ro

Template Engines

References

Documentation, tutorials, articles

Discussion points

Separating presentation and business logic
- Separation of concerns.
- Pluggable user interface
- Division of tasks
- Easier testing

Template Engines
- What are they ?
- What do we need them for:
  - Enforce the separation
  - Promote division of labor
  - Provide easier syntax
  - Increase security

- Comparison of template engines
  - Things to keep in mind when choosing a template engine!
  - Types of template engines:
    - 1.Use the base programming language syntax
    - 2.Provide custom syntax
    - 3.Use XML attributes instead of custom tags
    - 4.Using XSLT as an attribute language
    - 5.Others...

Composite templates
- Assembling a web page from pluggable, reusable components

Examples

PHP
- No template engine


<?php
require_once 'UserLoader.php';
$loader = new UserLoader;         
$users = $loader->loadAll();                                     
?>
<html>
  <head>
    <title>Email Address Book</title>
  </head>
  <body>
    <div id="content">
      <h1>Email Address Book</h1>
    <table id="UserList" cellspacing="0">                     
    <tr>
      <th>First Name</th>
      <th>Last name</th>
      <th>Email address</th>
      <th></th>
    </tr>
    <?php foreach ($users as $u) : ?>  
      <tr>
        <td><?php echo htmlentities($u->getFirstName()) ?></td>  
        <td><?php echo htmlentities($u->getLastName()) ?></td>   
        <td><?php echo htmlentities($u->getEmail()) ?></td>      
        <td><a href="userform.php?id=<?php 
             echo htmlentities($u->getID()) ?>"
              class="CommandLink">Edit</a>
      </tr>
    <?php endforeach; ?>                                         
    </table>
    </div>
  </body>
</html>

- Pure PHP template engine


<?php
require_once 'UserLoader.php';
$loader = new UserLoader;
$users = $loader->loadAll();
include 'userlist_template.php';
?>

- Smarty

addressbook.tpl

<html>
  <head>
    <title>Email Address Book</title>
  </head>
  <body>
    <div id="content">
      <h1>Email Address Book</h1>
    <table id="UserList" cellspacing="0">
    <tr>
      <th>First Name</th>
      <th>Last name</th>
      <th>Email address</th>
      <th></th>
 </tr>
    {section name=u loop=$users}
      <tr>
      <td>{$users[u]->getFirstname()|escape:"htmlall"}</td>
      <td>{$users[u]->getLastname()|escape:"htmlall"}</td>
      <td>{$users[u]->getEmail()|escape:"htmlall"}</td>
      <td><a href="userform.php?id={$users[u]->getID()}">Edit</a>
      </tr>
    {/section}
    </table>
    </div>
  </body>
</html>

addressbook.php

<?php
require_once 'UserLoader.php';
define('SMARTY_DIR','/usr/local/lib/php/Smarty/');
require(SMARTY_DIR.'Smarty.class.php');
$loader = new UserLoader;
$users = $loader->loadAll();
$smarty = new Smarty;
$smarty->assign('users',$users);
$smarty->display('addressbook.tpl');
?>

- Phptal

addressbook.tal

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">  
  <head>
    <title>
      Email Address Book
    </title>
  </head>
  <body>
    <div id="content">
      <h1>
        Email Address Book
      </h1>
      <table id="UserList" cellspacing="0">
        <tr>
          <th>First Name</th>
          <th>Last name</th>
          <th>Email address</th>
          <th>
          </th>
        </tr>
        <tr tal:repeat="user users">   
          <td tal:content="user/getFirstname">John</td>        
          <td tal:content="user/getLastname">Doe</td>        
          <td tal:content="user/getEmail">john@dasdeda.com</td>
          <td>
            <a href="userform.php?id=$user/getID"  
              class="CommandLink">Edit</a> 
          </td>
        </tr>
        <tr tal:replace="">                 
          <td>example text</td>                  
          <td>example text</td>                  
          <td>example text</td>                    
          <td>example@example.com</td>      
          <td>example text</td>                
          <td>                              
            <a href="userform.php?id=42"    
              class="CommandLink">Edit</a>  
          </td>                             
        </tr>                               
      </table>
    </div>
  </body>
</html>

addressbook.php

<?php
require_once 'HTML/Template/PHPTAL.php';
require_once 'UserLoader.php';
$loader = new UserLoader;
$users = $loader->loadAll();
$template = new PHPTAL('addressbook.tal');
$template->set("users",$users);
echo $template->execute();
?>

Java

- No Template Engine

email_address_book.java

import java.util.*;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class email_address_book extends HttpServlet {
UserLoader loader = new UserLoader();
static List<user> users= new ArrayList<user>();
users= loader.loadAll();
		out.println("<html> <head> <title>Email Address Book</title> </head> <body> <h1>Email Address Book</h1> <table>");
		
		out
		.println("<tr"> <td>First Name</td> <td>Last Name</td> <td>Email</td> </tr>");
		for (int i = 0; i < users.size(); i++) {
			out.println("<tr>");
			
			out.print("<td>" + users.get(i).getFirstName() + "</td>");
			out.print("<td>" + users.get(i).getLastName() + "</td>");
			out.print("<td>" + users.get(i).getEmail() + "</td>");	
			out.println("</tr>");
		}
		out.println("</table></body></html>");

}

- Velocity

addressbook.vm

<html>
 	<head> 
		<title>Email Address Book</title> 
	</head> 
	<body> 
	<h2>Email Address Book</h2> 
	<table border="1">
	<tr> 
	<td>FirstName</td> 
	<td>LastName</td> 
	<td>email</td> 
	</tr>
	<tr>
	 #foreach($user in $users)
     <td> $user.FirstName</td>
	<td> $user.LastName</td>
	<td> $user.email</td>
      #end
	</tr>
	</table>
	</body>
</html>

email_address_book.java

import org.apache.velocity.Template;
      import org.apache.velocity.app.Velocity;
      import org.apache.velocity.context.Context;
      import org.apache.velocity.exception.ParseErrorException;
      import org.apache.velocity.exception.ResourceNotFoundException;
      import org.apache.velocity.servlet.VelocityServlet;
 
      import javax.servlet.ServletConfig;
      import javax.servlet.http.HttpServletRequest;
      import javax.servlet.http.HttpServletResponse;
      import java.util.*;

public class email_address_book extends VelocityServlet {
UserLoader loader = new UserLoader();
static List<user> users= new ArrayList<user>();
users= loader.loadAll();
        protected Properties loadConfiguration(ServletConfig config) {
        Properties properties = new Properties();
        properties.setProperty(Velocity.FILE_RESOURCE_LOADER_PATH,   config.getServletContext().getRealPath("/"));
 
        return properties;
       }
      public Template handleRequest(HttpServletRequest request, HttpServletResponse response, Context context) {
 
        context.put("users", users);
        Template tpl = null;
        try {
         tpl = getTemplate("addressbook.vm");
        } catch (ResourceNotFoundException e) {
         e.printStackTrace();
        } catch (ParseErrorException e) {
         e.printStackTrace();
        } catch (Exception e) {
         e.printStackTrace();
        }
        return tpl;
       }
      }

Navigation

Template Engines

References

Documentation, tutorials, articles

Discussion points

Examples