Templates

Overview

All Web frameworks use templates for creating dynamic HTML content from data prepared. As Archetype allow you to build your whole application in the client side, it also need its template solution.

In facts, Archetype will grab from the server the static file of the template you wrote and use a JavaScript implementation of the template interpretation to evaluate the final HTML content.

There is a huge number of templates languages existing. PHP syntax is one of them (escapes codes are used to start and finished code insertion into the HTML content), JSP is antother with an extension point with taglibs. We can also speek about Freemarker in Java, Tal (often associated with Python), Smarty (a PHP framework) and many others.

According to the philosophy of Archetype, better than choose one, there is an abstraction layer on what we called the template engine. With a wrapper for each template engine integrated, it's possible to choose the engine you want with a configuration described in the template configuration page

Template API

The main template engine you choosed by Archetype.template is accessible with a template constructor in Archetype.Template. If you load more than one template engines, you can use all of them in Archetype.Templates.{MyTemplateEngine}Template

To use a template, you have to instanciate the template object:

• new Archetype.Template(/*String*/ content) : Instanciate a template object with content as template and the default template engine set by configuration.
• new Archetype.{MyTemplateEngine}Template(/*String*/ content) : Instanciate a template object with content as template and MyTemplateEngine as template engine. You have to load tour template engine before, only the default engine is loaded by default.
• evaluate(/*HashMap*/ data) : evaluate your engine with data. All keys of the data HashMap will be avalaible as vars into the template (With default graphicalComponent mecanism data will be the component object).

Templates engine integrated

Archetype is able to use any JavaScript template implementation. It already integrates bests engine we found on the web.

• Trimpath : Smarty like template engine. All informations needed to use it are available on the TrimPath Official website .
• EJS : Simple and performant ERB like template system. All informations needed to use it are available on the EJS Official website
• TAL : a JavaScript TAL (Template Attribute Language) interpreter. TAL is a very good template syntax used by Zope. You can have documentation in the TAL Specification and a Zope oriented tutorial here .

Integration with components

Templates mecanism is used by the graphical components in order to use it as view. To add a template to a graphical component, you have to use the dependency managment of the component to load templates files you need. The html key of the dependency HashMap (see Graphical components page) must contains an HashMap in order to use keys as identifiers.

If you do nothing more, the template engine used will be the application default one. You can set setup.template in your component to override the default template engine locally in the component.

this.templates.{templateKey} : will be automaticly setted with the template object build with the content of the html file. The template engine used will be the application default template engine or the component default template engine.

With the last example seen in the graphical component page, templates integration allow to override default implementation of rendering like this:

$C.Extend(["Archetype.component.graphicalComponent"], {
    name: "Slidy.components.container",
    setup: {
        dependencies: {
            components: {
                slideManager: "Slidy.components.slideManager",
                slideChangeHandler: "Slidy.components.slideChangeHandler",
                slideCounter: "Slidy.components.slideCounter"
            },
            lib: ["Slidy.libs.shjs.sh_main", "Slidy.libs.shjs.sh_javascript", "Slidy.libs.shjs.sh_html"],
            css: ["Slidy.css.slidy", "Slidy.css.w3c-blue", "Slidy.libs.shjs.sh_typical"],
            html: {
                main: "Slidy.templates.container" 
            }
        }
    },
    initialize: function() {
        //Insert in the main template evaluation into the element mached by the selector
        this.render($$("#bodyContent")[0]);

        new this.components.slideChangeHandler();
        new this.components.slideCounter();
        new this.components.slideManager();
    },
    renderViewAsString: function() {
        return this.templates.main.evaluate(this);
    }
});