Let’s rolls up sleeves and have a ready-to-go example to demonstrate what we have just discussed before and validate them from a practical perspective of engineering.
The example blow will show a news items list on a page.
We have one template file (news.html) and one server-side file (news.php), and Hanjst.js .
(eg08131156)
<html>
<head>News List</head>
<body>
<div id="Hanjstloading"
style="width:100%;height:100%;z-index:99;opacity:0.92;position:absolute;background-color:#ffffff;">
Loading... 加载中...
</div>
<div id="newsList">
<ul>
{foreach $newsList as $n}
<li>
{foreach $newsList[$n] as $np}
<dt>{$np}: {$newsList[$n][$np]}</dt>
{/foreach}
</li>
{foreachelse}
<li>No data.</li>
{/foreach}
</ul>
</div>
<div id="Hanjstjsondata"
style="display:hidden;">
HANJST_JSON_DATA
</div>
<script type="text/javascript" src="Hanjst.js" async></script>
<noscript>JavaScript Required for Hanjst.</noscript>
</body>
</html>
Copy these lines and as a file: news.html .
(eg08131157)
//- resp data container
$respData = array();
//- data preparing
$newsList = array(
array("id"=>12, "title"=>"Hanjst is releasing to pulic."),
array("id"=>34, "title"=>"Hanjst Ready-to-go."),
array("id"=>56, "title"=>"Hanjst has outpaced all other jst.")
);
$respData['newsList'] = $newsList;
$jsonDataStr = json_encode($respData);
//- template contents processing
$tplFile = "news.html";
$jsonDataPlaceHolder = "HANJST_JSON_DATA";
$tplContent = file_get_contents($tplFile);
$tplContent = str_replace($jsonDataPlaceHolder, $jsonDataStr, $tplContent);
//- output
print($tplContent);
Copy these lines and save them as a file: news.php . Then upload news.php and news.html to a folder under a web server which can execute PHP scripts.
One more, please also upload Hanjst.js into the same folder along with news.php .
The host web server will execute the news.php and the PHP scripts will read the contents of news.html, then the news data will be merged into the outputs of the HTTP response.
If we make a request to the web host, i.e., http://example.com/path-to-project/news.php , the scripts will print out a raw template file as below.
(eg08131158)
<html>
<head>News List</head>
<body>
<div id="Hanjstloading"
style="width:100%;height:100%;z-index:99;opacity:0.92;position:absolute;background-color:#ffffff;">
Loading... 加载中...
</div>
<div id="newsList">
<ul>
{foreach $newsList as $n}
<li>
{foreach $newsList[$n] as $np}
<dt>{$np}: {$newsList[$n][$np]}</dt>
{/foreach}
</li>
{foreachelse}
<li>No data.</li>
{/foreach}
</ul>
</div>
<div id="Hanjstjsondata"
style="display:hidden;">
{"newsList":[
"0":{"id":12,"title":"Hanjst is releasing to pulic."},
"1":{"id":34,"title":"Hanjst Ready-to-go."},
"2":{"id":56,"title":"Hanjst has outpaced all other jst."}
]}
</div>
<script type="text/javascript" src="Hanjst.js" async></script>
<noscript>JavaScript Required for Hanjst.</noscript>
</body>
</html>
Compared with its raw contents (eg08131156), the only difference is that HANJST_JSON_DATA has been replaced with actual news data which will be further parsed by Hanjst engine.
It is show time!
After the raw HTML is loaded, Hanjst will be triggered automatically and try to read all content of the current BODY.
Then the magic Hanjst engine starts to load JSON data, and extracts all template sentences and parse all of them into pure JavaScript and executes them again to reload the BODY with freshly contents generated by the pure JavaScript.
The happy end comes with its final Hanjst-parsed HTML as below. It is the desirable presentation consist of jointly collaboration from front-end designers and back-end engineers.
(eg08131205)
<html>
<head>News List</head>
<body>
<div id="Hanjstloading"
style="width:100%;height:100%;z-index:99;opacity:0.92;position:absolute;background-color:#ffffff;">
Loading... 加载中...
</div>
<div id="newsList">
<ul>
<li>
<dt>12: Hanjst is releasing to pulic.</dt>
<dt>34: Hanjst Ready-to-go.</dt>
<dt>12: Hanjst has outpaced all other jst.</dt>
</li>
</ul>
</div>
</body>
</html>
This is all! The quick start consists of three files, news.html, news.php and Hanjst.js and presents four stages of the Hanjst template engine, Original template file, Server-side data, Raw template contents and Final pure HTML presentation.
Hanjst is the default template engine for GWA2, so it is easy to have a look at the process of Hanjst in a web application by running a demo for GWA2 in Java.
Developers and designers are welcome to deploy a GWA2 instance to see what we have talked about with Hanjst, its great features and powerful expressions in pure JavaScript.
Some of codes from GWA2 in Java have been referenced in this document before, such as Hanjst Variables.