Silverstripe Template Engine

Last Update : 27/04/2010 8:36pm
assets/Uploads/_resampled/SetWidth250-Template.png

MVC on the silverstripe named Sapphire has provided a template engine. This template engine can be easily combined with its controllers. As I discuss in the article Knowing Silverstripe MVC, a page type on the silverstripe will have .ss template file  which contains only the HTML syntax. The .ss file names will be same as the file name of his controllers. So Page.php controllers will have template files Page.ss, and so also for the other files. With this method, programmers and web designers can work with a consistent.

Among the HTML code contained in the .ss file, there are some special characters that will be used by the template engine to insert a data object to a page that will be displayed in the browser. The process of looping and conditions can also easily done. Silverstripe also provides the control and the default variable to help facilitate the designer to create a template.

Variables

Variables will call the method or field of objects with scalar value. Output is converted into a string for display on the template. Each variable will be preceded with the character $. variables are already available by default on a page of which is $Content, $Title, $MenuTitle, $Link, etc..

Example:

<h2>$Title</h2>
$Content

Result:

<h2>Home</h2>
<p>Welcome to <strong>I'm Learning Silverstripe</strong>, this site contains about how to create web sites using <a target="_blank" href="http://www.silverstripe.org">Silverstripe CMS</a>. On this website you will find lots of information about how to use and develop the site made with silverstripe. Everything is based on the experiences suffered by post authors.</p>

Controllers

Controls on silverstripe is a method of a class that ends with _Controller. On file .ss control can be called with the syntax:

<% control [name of control] %>
....
<% end_control %>

The output of the control will be a collection of object (an array of object) then later produced a loop of the contents of the object. In silverstripe already have some controls that can be directly used. Like Menu, Children, Level, etc..

Example:

<ul>
    <% control Menu %>
        <li><a href=”$Link”>$MenuTitle </a></li>
    <% end_control %>
</ul>

Result:

<ul>
    <li><a href=”home”>Home</a></li>
    <li><a href=”about”>About</a></li>
    <li><a href=”contact”>Contact</a></li>
</ul>

Conditions

Selection conditions can also be done by the silverstripe template engine using IF blocks. Some of the following syntax:

<% if condition %>
...
<% else_if  condition %>
...
<% else %>
...
<% end_if %>

IF Block preceded by the <% if condition %> and terminated by <% end_if %>. In this block if there is a section <% if that can determine the conditions we want. Part <% else_if offer an alternative if the block <% if not met. else_if are optional, can consist of one, several or none at all. For the <% else %> is a condition in which all the conditions if and else_if not be met, the else block is also optional.

For the condition element can contain a single variable/control or accompanied by logic == or != And alseo can be combined with logic && (and) and || (or).

Example:

<% if ClassName==Article %>
<title> $Title – [My Article] </title>
<% else %>
<title> $Title – [My Page] </title>
<% end_if %>

Other Controls/Variables

Silverstripe also bring the control or other variables that are available and can be used to assist designers in making the page templates.

  1. $ThemeDir
    This variable is used to give the output path to the directory of themes that are used. For example we're using sslearn directory, so if we write:
    <img src=”$ThemeDir/images/logo.png” />
    The result will be:
    <img src=”themes/sslearn/images/logo.png” />
  2. <% base_tag %>
    This control is used to provide output <base> tag that was used to determine the href of a page. Designers can use this without having to think about a domain name or URL that will be used from the web.
    Example:
    <html>
    <head>
    <% base_tag %>
    <title>
    ....
    The results are:
    <html>
    <head>
    <base href=”http://localhost/sslearn/”>
    <title>
    ...
  3. $Breadcrumbs
    Breadcrumbs are used to display hierarchical navigation of the web. By using breadcrumbs will display the current position of pages viewed by users. Users also get the information hierarchy of the page. For example, if we are on page called sub-menu of whic is the child from the Home, then if we write:
     <div class=”Breadcrumbs”>$Breadcrumbs</div>
    then the result is:
     <div class=”Breadcrumbs”><a href=”/”>Home</a> &raquo; Sub Menu</div>

Besides Control and variables I mentioned above, in fact there are many variables and other controls that can be used  in silverstripe. You can read the documentation in silverstripe home page at http://doc.silverstripe.org/doku.php?id=templates.

 

Post your comment

Comments

Firnas Nadirman said...

Thanks for the correction.
We can use variable on if statement but without $ character.

W3Spor said...

Good blog!

But is it correct to use $Variable/$Condition in if_statement?

RSS feed for comments on this page | RSS feed for all comments