Section 2.3. The Template View Pattern
Divide and Conquer > The Template View Pattern
2.3. The Template View Pattern
If using PEAR gives you access to ready-to-use code, you should also reuse well-known algorithms instead of reinventing the wheel in every new project that comes your way.
Design patterns can help you find ready-to-use descriptions of how to solve common problems. There is a large number of available patterns, divided into the following categories:
-
Domain Logic
-
Data Source Architectural
-
Object-Relational Behavioral
-
Object-Relational Structural
-
Object-Relational Metadata Mapping
-
Web Presentation
-
Distribution
-
Offline Concurrency
-
Session State
-
Base
For our problem, we need a pattern that represents a solution to a web presentation problem. There are many candidates in the Web Presentation category, each having different characteristics fitting different scenarios. We'll follow the Template View Pattern.
The Template View Pattern is best described as a way to write a dynamic web page (as you would do with a static page) but with markers indicating where you want dynamic content to be fetched and displayed.[#]
[#] For a complete description of the pattern, see Fowler, M., "Patterns of Enterprise Application Architecture," Addison-Wesley Professional, November 2002 (http://www.martinfowler.com/eaaCatalog/templateView.html).
The biggest advantage of the Template View Pattern is that it allows web designers to compose the content of the page simply by looking at the page structure. This means that you can efficiently split the tasks of development and web design within your team.
Take a look at the UML diagram in Figure 2-1, which illustrates the behavior of the Template View Pattern, This example displays a book's title and author inside an HTML template.
Figure 2-1. Template View Pattern UML diagram
Many authors support the use of the Transform View Pattern instead of the Template View. According to the Transform View Pattern,[**] layout is generated from within PHP code or even with the help of another language, usually XSL.[
]
[**] For a complete description of the pattern, see Fowler, M., "Patterns of Enterprise Application Architecture," Addison-Wesley Professional, November 2002 (http://www.martinfowler.com/eaaCatalog/transformView.html).
[
] XSL Extensible Stylesheet Language is a W3C-backed standard for defining XML document transformation and presentation (http://www.w3.org/Style/XSL/).
The main disadvantage of the Transform View approach is that when you need to make changes in your layout, you'll have to manipulate code in PHP or in some transformation language. You can't render final XHTML pages without the help of a developer.
Let's see how you can implement the Book example in PHP and Smarty, following the Template View approach. First, we write the Book class:
<?php class Book { // Create some private properties. private $title = 'PHP and Smarty on Large Scale Development'; private $author = 'Bruno Pedro, Vitor Rodrigues'; public function getTitle () { return $this->title; } public function getAuthor () { return $this->author; } } ?>For the purpose of this example, the Book class has two methods that simply return the book's title and author. Notice how the returned values don't include any kind of markup or layout whatsoever. Later on, we explain why this is such a big issue.
Now, you start the Smarty engine and make the Book class available from within the template code:
<?php // Load required libraries. require_once 'Smarty.class.php'; require_once 'Book.php'; // Instantiate a Smarty object. $smarty = new Smarty; // Instantiate a Book object. $book = new Book; // Register the Book object into the Smarty engine. $smarty->register_object('Book', $book); // Interpret and display the template. $smarty->display('book.tpl'); ?>As you can see, first a Book object is instantiated and then it is registered into the Smarty engine. Then the engine displays the book template.
Finally, write the Smarty template that displays content from the Book object:
<html> <body> {Book->getTitle}, by {Book->getAuthor} </body> </html>
Making It Work
That's it. You now have a working Smarty environment. |
Notice how simple the template is: pure HTML with calls to the Book class methods described earlier. Notice how readable those calls are. You can immediately see what the template is doing just by looking at it.
The only considerable disadvantage of this approach is that it offers the possibility of putting too-complicated logic directly on the page. You can prevent this by creating a set of rules that the team must follow, like calling helper code instead of writing intricate logic.
The previous example was just a starting point to understand this development approach. Next we show how to automate the middle layer of Smarty initialization and configuration, letting you focus on what really matters: logic and presentation.
