Working with templates

Ariadne is built on the concepts of objects and templates. Templates are the way to define how your website or application looks and works. Objects define the content of the site. This chapter will show you how to create, use and re-use Ariadne templates to maximum effect.

In the previous chapter, you've already made your first templates, but we skipped over a few important details. One of the first things you should know is that you can define a template at any point in the Ariadne object tree. A template is generally only visible to objects below that point.

The template list

To create or edit a template, open the template list at any object in Ariadne, by clicking on the 'templates' link in the settings menu. This opens a dialog similar to this:


This dialog shows a list of templates which are defined on this object in the Ariadne object tree. There may be more templates that affect the current object, but are defined in a parent object.

Note: It is best practice to only define templates on the Project or Site root object. This way you don't have to search the entire site to find a template you need to change.

The templates list shows the type, name, language, filesize and last modification date of each template. The language is shown using a small flag icon, if the language is set to 'Any', a white flag with an asterisk (*) is used. If a template is defined in more than one language, the language column will show multiple flags. Each of these flags is clickable and will open the template editor with the template for that language.

You can change the sort order for the list by clicking on any of the headers of the list. Clicking on the same header again reverses the sort order.

The search bar allows you to search all the templates for a specific text. If a template contains the search text, it will show up on the right of the template in the list, like this:

By clicking on the snippet of code, the template editor opens at the line shown.

The template editor

The default template editor in Ariadne looks like this:


It shows the path in Ariadne you are working in in the title. It tells the name, object type and language of the current template and allows you to change this. If you change any of these three and press 'Save' or 'Apply', the template will be copied and the original won't be changed. Note however that if a template with that same object type, name and language already exists, it will be overwritten without a warning.

With the 'Default' checkbox unchecked, the template is only available on the object it is defined. So if you define it on /projects/chocoluck/, only this exact object will use it.

The default template editor is a normal textarea with two extensions: it shows the linenumbers of the template on the left and it allows you to enter a 'tab' character in the template. This makes it easier to indent your code with tabs.

In Ariadne 2.7.6 and up you can also choose to use an advanced text editor, called Ace, which among other things has syntax highlighting, auto indent and a lot of other features. You can enable this editor by changing the template editor in the preferences dialog. This editor looks like this:


The Ace editor has a number of features only available through keyboard shortcuts.

How Ariadne finds the correct template

As mentioned before, the default template Ariadne uses if you don't specify a template explicitly, is view.html. So if you browse to /projects/chocoluck/ and define a view.html on the Page type there, this template will only be used for objects in that subtree. If you browse to another subtree, say /projects/example/, and click on 'show webpage' there, you will see a different page layout. This is the most basic way Ariadne allows you to control the way your site looks. 

Another way to control the site layout is by creating extra view.html templates on different object types. At the same point in the object tree, /projects/chocoluck/, you can create a new view.html template, but instead of the type Page, choose the type Directory. When browsing through your site Ariadne will automatically search for a template that matches the type of object that you are at. So if you open a directory for viewing, using 'show webpage' again, you will notice it is now using the newly defined view.html template for a directory.

But not only a directory will use this template, but also the Photobook, Newspaper, Section and even the Site object types uses this template. That is because all these object types are a variant of a directory, or better: implement the directory class. This makes it possible for you to define templates only in one location, the root of the website, and still have different views in different parts of the website. The type of an object now defines how it will look.

The class tree in the programmers reference shows the full relation between the different object types so you know what effect your template will have on the layout of your website.

Finally you can also create different templates with the same name and object type, but a different language. This is most useful for text dictionaries, which we'll dicuss in the chapter on multilingual sites. For now just keep it set to 'Any'.

To recap: you can use the name, object type, language and location of the definition of a template to control your layout. When you enter a url like this:

Ariadne will start searching for a matching template at /projects/chocoluck/. Assuming this object is a Site object and its default language is english, Ariadne will look for a template named view.html for object type 'Site' and language 'english'. It will start the search at /projects/chocoluck/. If it cannot find a match, it will try the same template for 'any' language. Then it will repeat these two steps for the parent class of Site - 'Section'. It will repeat this untill it has tried the Object class. If no matching template is found, it will then repeat the whole process one step higher in the Ariadne object tree, at /projects/ and finally at /. If no matching template is found at all, it will finally fire an onnotfound event and call the user.notfound.html template

If you add a specific template name to the url like this:

Ariadne will use this - form.html - as the template name instead of the default view.html

Note: Any template you define can be called on any matching object like this - just by entering the correct url in your browser. This means it is easy to test any template seperate from any other, but it also means you can never assume a user cannot access a specific template. Only by using the grants system and the checkgrant() method can you disallow access to certain information.