5.2. Mason templates

This section will only cover a few basic aspects of writing mason templates, specially those details related to eBox. If you need complete documentation about a certain aspect you should check the mason documentation or the mason book. Additional examples can be found in Chapter 8.

The first thing your mason template will have is the declarations of the arguments it expects. Just write the name of the variables, one per line and you are done. Arguments declared as arrays in the template will be passed as array references by your CGI.

In our example we are going to give the template an array with names, and the template will say hello to each one of them separately. We use an empty array as a default value for the variable, although default values are optional. If none is given and you don't pass that argument to the template an exception will be thrown.

Example 5.8. Declaring arguments in a mason template

<%args>
	@people => ()
</%args>

The next thing is the initialization section, in this section we can write regular perl code. It is optional and most of the times not needed. However all eBox templates have one, because there is always the need to have i18n, so we import EBox::Gettext:

Example 5.9. init section in mason templates

<%init>
use EBox::Gettext;
</%init>

Now we can go on and write the body of the template. The idea is to just write HTML and use a couple of syntactic features to insert perl code wherever we need. First, we'll learn how to do control flow. All lines that start with a % are interpreted as perl code.

Example 5.10. Embedding perl code in a mason template

<ul>
% foreach my $person (@people) {
	<li>Hello</li>
% }
</ul>

We want to print the name of a person in each list item. Embedding perl expressions in the special tags <% %> prints the value of the expression in the output of the template. We are going to use this feature to print the name of the person and translate the "Hello" string (internationalization is explained in Section 2.4).

Example 5.11. Printing strings in a mason template

<ul>
% foreach my $person (@people) {
	<li><% __('Hello') %> <% $person %></li>
% }
</ul>

The ebox m4 macro exports the installation path for mason templates as TEMPLATESPATH, so you should install them under that directory, possibly creating a subdirectory for your module. Whenever you need to reference a template in your code, you can just use a path relative to TEMPLATESPATH. Following our example, will use a subdirectory named hello for our templates, and place a template called world.mas in it.

5.2.1. Standard GUI elements

There are a few GUI elements that are displayed the same way in all eBox modules. Things like tips, messages, warnings, errors, tables and forms keep a common style. All this stuff is defined in the CSS file, so that all modules can show a consistent look and feel. Some of these elements have a dynamic behavior too, the tips are hidden when the page is loaded and shown if the user clicks on a link on the top-right corner of the page. This section gives an overview of all of these elements and how to use them to achieve an user interface that is consistent with all other eBox modules.

All messages you want to display, which could be warnings about a risk if a certain action is performed, error notifications, help messages or other relevant information will be included in the mason templates using the same HTML code, but with different CSS styles.

Example 5.12. HTML snippet for displaying messages

<div class='class-name'>
	Some message.
</div>

CSS class names for informational messages

help

For help information. Remember that information displayed using this style will be hidden unless the user decides to click on the help button.

note

Displays help or other useful information in a persistent way (it's not hidden like the help style). Use it when you want the user to be aware of some information without the need to click the help button.

warning

Displays a warning, e.g. if you want to make sure the user knows he is about to delete some data.

error

For error notifications.

You may want to display a list of data, e.g. a list of users. In this case you should use a table with elements thead and tbody to display the heading and the contents respectively. The CSS style for this kind of tables is dataTable.

Example 5.13. A table to display data

<table class='dataTable'>
	<caption><% __('Object List') %></caption>
	<thead>
		<tr>
			<th class='tleft'><% __('Name') %></th>
			<th class='thOptions'><% __('Action') %></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td class='tcenter'>
				<a href='Del?objectname=<% $obj->{'name'} %>'>
						<img src='/data/images/delete.gif'
						     title="<% __('Delete') %>"
						     alt="<% __('Delete') %>"/>
				</a>
			</td>
		</tr>
	</tbody>
</table>

As you can see in Example 5.13 the table has got a caption tag, which contains the title for the table. It is not required to include it, but it helps the user identify the kind of data we are listing.

The rest of CSS styles are used to align text in the columns:

tleft

The heading columns (thead) are centered by default, we use tleft to force them to be left aligned to make it easier to read the data below.

tcenter

The actions that the user can execute for each row in a listing are center-aligned using this style.

thOptions

It adjusts the column size to the minimum necessary and makes the contents center aligned.

Forms are displayed using a two-column table with the formTable style.

Example 5.14. Data entry form

<table class='formTable'>
	<tr>
		<td class='tright'>
			<span class='ftitle'><% __('Name') %>:</span>	
		</td>
		<td>
			<input class='inputText' type='text' name='name' />
		</td>
	</tr>
	<tr>
		<td></td>
		<td>
			<input class='inputButton' type='submit' />
		</td>
	</tr>
</table>

The first column contains the description for every field that the user is going to type in the form. The description column is right-aligned using the tright style, and text is written inside a span tag with the ftitle style.

Text entries in the right column use the inputText class to decorate the input field.

Form buttons use the inputButton style.