zpt
Version:
Zenon Page Templates - JS (ZPT-JS)
181 lines (161 loc) • 5.72 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<title>Getting started</title>
<script type="module" src="../js/zpt.js"></script>
<script type="text/javascript" src="../lib/syntaxHighlighter/lib.js"></script>
<link rel="stylesheet" type="text/css" href="../docs.css">
<link rel="stylesheet" type="text/css" href="../lib/syntaxHighlighter/theme.css">
</head>
<body>
<div data-use-macro="'page@templates.html'">
<div data-fill-slot="'page-header'">
<h1>ZPT-JS tutorial - Getting started</h1>
<ul>
<li><a href="#downloading">Downloading ZPT-JS</a>.</li>
<li><a href="#template">Write the template</a>.</li>
<li><a href="#dictionary">Build the dictionary</a>.</li>
<li><a href="#invoke">Invoke ZPT-JS</a>.</li>
<li><a href="#result">The result</a>.</li>
<li><a href="#partialRendering">PArtial rendering</a>.</li>
<li><a href="#updates">Updates</a>.</li>
<li><a href="#node">Using ZPT-JS and node.js</a>.</li>
</ul>
</div>
<article data-fill-slot="'article'">
<h2 data-attributes="id 'downloading'">Downloading ZPT-JS</h2>
<p>
Go to <a href="../download.html">Download</a> section and follow the instructions to download ZPT-JS.
</p>
<h2 data-attributes="id 'template'">Write the template</h2>
<p>
Customize the body of your HTML document with some of the provided by ZPT-JS statements. One of these is <em>data-content</em>:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
the message
</p>
</body>
</pre>
<p>
The resulting HTML document is:
</p>
<pre class="brush: html">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Getting started</title>
<script src="gettingStarted.js" type="module"></script>
</head>
<body>
<p data-content="message">
the message
</p>
</body>
</html>
</pre>
<p>
The <em>data-content</em> attribute is ignored by browsers: all the <em>data-*</em> attributes are completely ignored by the user agent.
</p>
<h2 data-attributes="id 'dictionary'">Build the dictionary</h2>
<p>
Build a javascript object with key/value pairs. These key/value pairs will be accesible by the whole template. You can use any
javascript object:
</p>
<pre class="brush: js">
import { zpt } from './zpt-esm.js';
var dictionary = {
message: 'Hello, world!'
};
</pre>
<h2 data-attributes="id 'invoke'">Invoke ZPT-JS</h2>
<p>
Invoke the <code>run</code> method of ZPT:
</p>
<pre class="brush: js">
import { zpt } from './zpt-esm.js';
...
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
The resulting Javascript file (<em>gettingStarted.js</em>) is:
</p>
<pre class="brush: js">
import { zpt } from './zpt-esm.js';
var dictionary = {
message: 'Hello, world!'
};
zpt.run({
root: document.body,
dictionary: dictionary
});
</pre>
<p>
That's all!
</p>
<h2 data-attributes="id 'result'">The result</h2>
<p>
The resulting <code>body</code> element is:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
Hello, world!
</p>
</body>
</pre>
<h2 data-attributes="id 'partialRendering'">Partial rendering</h2>
<p>
If we change some data in the dictionary and run a <em>partial render</em> this way:
</p>
<pre class="brush: js">
dictionary.message = 'Bye, world!';
zpt.run({
command: 'partialRender',
target: [
document.body
]
});
</pre>
<p>
The <code>body</code> element now is:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
Bye, world!
</p>
</body>
</pre>
<h2 data-attributes="id 'updating'">Updates</h2>
<p>
Another way of updating:
</p>
<pre class="brush: js">
zpt.run({
command: 'update',
dictionaryChanges: {
message: 'Bye again, world!'
}
});
</pre>
<p>
We don't need to do anything else, the <code>body</code> element now is:
</p>
<pre class="brush: html">
<body>
<p data-content="message">
Bye again, world!
</p>
</body>
</pre>
</article>
</div>
</body>
</html>