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.
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
:
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.
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.
CSS class names for informational messages
For help information. Remember that information displayed using this style will be hidden unless the user decides to click on the help button.
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.
Displays a warning, e.g. if you want to make sure the user knows he is about to delete some data.
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:
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.
The actions that the user can execute for each row in a listing are center-aligned using this style.
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.