Templates

Riot uses FreeMarker as view technology. If you are not familiar with the FreeMarker syntax, this document is a good starting point.

In the default project layout all views are located under webapp/WEB-INF/view. The directory contains a sub-folder called “pages” where all views reside, that belong to a page. (Other types of views will be discussed later.)

Note: When you look at the various views that are part of the riot-skeleton, you'll see that several macro libraries are used. If you wonder what such a macro or function does, you can refer to the generated fmdoc documentation.

One extremely useful library is the one imported under the “template” namespace. These macros allow you to define a base template which contains common mark-up and so-called blocks, which can be overwritten in child templates.

default.ftl

<@template.root>
    <html>
        <body>
            <div id="header">
                <@template.block name="header">
                    <h1>Welcome</h1>
                </@template.block>
            </div>
            <div id="content">
                <@template.block name="content">
                    This is the default content from the root template.
                </@template.block>
            </div>
        </body>
    </html>
</@template.root>

In the example above a block called “content” is defined which can be overwritten in another file:

alternative.ftl

<@template.extend file="default.ftl">
    <@template.block name="content">
        Alternative content
    </@template.block>
</@template.extend>