ZPT-JS tutorial - Getting started

Downloading ZPT-JS and its dependencies

Go to Download section and follow the instructions to download ZPT-JS and its dependencies.

Configuring the HTML header

You must add to your web page the javascript code of ZPT-JS and its dependencies(zpt.min.js). Don't forget to add the reference of the javascript file with the invokation to ZPT-JS (for example gettingStarted.js):

<head>
    ...
    <script src="/zpt/zpt.min.js" type="text/javascript" defer></script>
    <script src="gettingStarted.js" type="text/javascript" defer></script>
    ...
</head>
                

Write the template

Customize the body of your HTML document with some of the provided by ZPT-JS statements. One of these is data-content:

<body>
    <p data-content="message">
        the message
    </p>
</body>
                

The resulting HTML document is:

<!DOCTYPE html>
<html> 
    <head>
        <meta charset="utf-8">
        <title>Getting started</title>

        <script src="/zpt/zpt.min.js" defer></script>
        <script src="gettingStarted.js" type="text/javascript" defer></script>
    </head>
    <body>
        <p data-content="message">
            the message
        </p>
    </body>
</html>
                

Build the dictionary

Build a javascript object with key/value pairs. These key/value pairs will be accesible by the whole template:

var dictionary = { 
    message: "Hello, world!"
};
                

Invoke ZPT-JS

Invoke the run method of ZPT:

var zpt = require( 'zpt' );

...

zpt.run({
    root: document.body,
    dictionary: dictionary
});
                

The resulting Javascript file (gettingStarted.js) is:

"use strict";

var zpt = require( 'zpt' );

var dictionary = { 
    message: "Hello, world!"
};

zpt.run({
    root: document.body,
    dictionary: dictionary
});
                

That's all!

The result

The resulting body element is:

<body>
    <p data-content="message">
        Hello, world!
    </p>
</body>
                

The data-content attribute is ignored by browsers: all the data-* attributes are completely ignored by the user agent.

Using ZPT-JS and node.js

That's OK. But... how can we use ZPT-JS at the server side (using node.js)? node-jsdom is needed when no browser is available:

"use strict";

var jsdom = require( 'node-jsdom' ).jsdom;

jsdom.env(
    '<!doctype html>'
	+ '<html>'
	+ '<body><h1 data-content="'hello, world!'">a text</h1></body>'
	+ '</html>', 
    [ 'http://code.jquery.com/jquery.min.js' ], 
    function( err, window ) {

        // Check if an error occurs
        if ( err ) {
            console.error( err );
            return 1;
        }

        // Copy window to global
        global.window = window;

        // Copy from window to local vars
        var $ = window.$;
        var document = window.document;

        // Parse template
        var zpt = require( 'zpt' );

        zpt.run({
            root: document.body,
            dictionary: {}
        });

        console.log( 'Done!' );
    }
);