07 Mar 2008
Zoop uses the excellent Smarty templating system. Zoop's Gui component provides some extra functionality not provided in the core Smarty system, but for the most part it is Smarty. One of the large differences is that Smarty uses a Smarty object called $smarty by default, in Zoop that object is called $gui. For the most part it is just a little easier to type $gui than $smarty as it is fewer characters.
Zoop is completely usable without the gui component (Smarty) and you are welcome to echo all of your content to the browser inside of your page functions, however we strongly recommend using the gui component for most projects as there are so many advantages to doing so.
The usage of a templating system such as Smarty helps to promote MVC or a separation of logic and layout.
Location
In Zoop by default the template files are located in app_dir/templates/default.
Settings for the gui component are defined in app_dir/config/gui.php.
Also by default gui compiles templates and caches them. The temporary cached files are created in app_dir/tmp/gui which must be writable by the web server. Substantial speed benefits can be achieved by using this compile and cache method and we recommend using it (it is enabled by default).
Format
The Zoop Gui Component uses the standard Smarty template file format.
Smarty template files are a mixture of HTML and Smarty tags. A Smarty tag looks like {$var}. Smarty template files have the extension .tpl.
Extend Hello World to use Templates.
Let's use some templates in our Hello World application. First step is to create a template file. Create the file app_dir/templates/default/helloworld.tpl and place the following content into it.
<html> <head><title>{$hw}</title></head> <body> <h1>{$hw}</h1> </body> </html>
Now lets return to the zone_default.php file and edit the pageDefault function we used previously.
The $gui object is a global object already instantiated for us. All we need to do is to declare it as global to be able to access it in our page function. Once we have access to the $gui object we need to tell it what to set the {$hw} variable to that we referenced in the tpl file. Lastly we need to tell the $gui object to display this tpl.
Our pageDefault function should look like this:
pageDefault($inPath) { global $gui; $gui->assign("hw", "Hello World"); $gui->display("helloworld.tpl"); }
Lets visit the same page in the web browser as we did previously, http://example.com/app_dir/ . We should see something similar to the screenshot below.