User Tools

Site Tools

Translations of this page?:

en:tutorial:tutorial03

How to create & edit your own templates ?

If the first Tutorial explains the basics of the template creation, this tutorial is aimed at the file organization when creating and editing your template.

File directory for templates

The json files for the templates are all stored in the src/js/templates/ directory. Yours should go there too. Subdirectories are possible.

Just create your own template, for example myowntemplate.json. You can start from scratch (follow the tutorial), or copy an existing template to serve as a base (a good way to start, in my opinion).

Referencing your template

A single file in the project references all the templates that are presented by Geckos. It's the file src/js/templates/load-templates.js.

If you're on Windows, after creating the json file for your template, you can just launch the script generate-requirejs-template.vbs. It will generate the load-template.js file with all the templates in the directory.

You can also edit the file. It's a simple one :

load-templates.js
define([
'json!templates/templates01.json',
'json!templates/myowntemplate.json'
],
 function(
tpl1, tpl2)
 { return { load: function() {
var list = [ ];
list.push(tpl1);
list.push(tpl2);
return list;
 
} }; });

Editing manually this file is helpful when you want to display / use only a couple of templates. In this example, two templates only are loaded by Geckos.

If you don't reference your template in this file, it won't appear on the UI.

Resource Files

Many templates use external resource files. You could embed them as DataURL, but external files are easier to maintain and use in development mode.

External files for a template are better all in one place. In the src/js/templates directory, create a subdirectory named mytemplate. You will put your images and other external files there.

When you references those files in your templates, the starting point is coming from src directory. It should look like this in the template :

"path": "./js/templates/mytemplate/myfile.png"

Again, look at existing templates to learn a few tips !

en/tutorial/tutorial03.txt · Last modified: 2017/11/12 14:24 by Nicolas Ronvel