HTML Template
This article describes how to create an HTML document based on a template and populate it from a data-source. Aspose.HTML provides the inline expressions syntax to work with templates and various types of data-source, such as XML and JSON.
Template markup
The HTML template is a regular HTML file that contains some special inline expressions that specify the input data-source mapping to the HTML page markup. These inline expressions use double curled bracket notation. During the template processing, the template markers will be replaced with respective data values following the rules described below.
Inline expressions
Following is the list of supported inline expressions syntax.
{{ … }} – data-binding expression
The data-binding expression is used to set values of control element based on the information that is contained in the data-source.
The following is the basic syntax of the data-binding expression:
{{ data-binding expression }}
The following demo shows how to use the data-binding expression to obtain information from the XML data-source.
XML Data Source
1 <Data>
2
3 <FirstName>John</FirstName>
4
5 <LastName>Smith</LastName>
6
7 <Address>
8
9 <City>Dallas</City>
10
11 <Street>Austin rd.</Street>
12
13 <Number>200</Number>
14
15 </Address>
16
17</Data>The data-binding expression in the HTML page template:
HTML Template
1 <Data>
2
3 <FirstName>John</FirstName>
4
5 <LastName>Smith</LastName>
6
7 <Address>
8
9 <City>Dallas</City>
10
11 <Street>Austin rd.</Street>
12
13 <Number>200</Number>
14
15 </Address>
16
17</Data>{{#foreach … }} – foreach directive expression
The foreach directive expression is used to iterate through the list of elements in combination with data-binding expression.
The following demo shows how to get all persons from the data-source and populate a template:
XML Data Source
1 <Data>
2
3 <Persons>
4
5 <Person>
6
7 <FirstName>John</FirstName>
8
9 <LastName>Smith</LastName>
10
11 <Address>
12
13 <Number>200</Number>
14
15 <Street>Austin rd.</Street>
16
17 <City>Dallas</City>
18
19 </Address>
20
21 <Phone1>345-345-34-55</Phone1>
22
23 <Phone2>345-555-09-09</Phone2>
24
25 </Person>
26
27 <Person>
28
29 <FirstName>Jack</FirstName>
30
31 <LastName>Fox</LastName>
32
33 <Address>
34
35 <Number>25</Number>
36
37 <Street>Broadway</Street>
38
39 <City>New York</City>
40
41 </Address>
42
43 <Phone1>081-544-12-15</Phone1>
44
45 </Person>
46
47 <Person>
48
49 <FirstName>Sherlock</FirstName>
50
51 <LastName>Holmes</LastName>
52
53 <Address>
54
55 <Number>65</Number>
56
57 <Street>Baker str.</Street>
58
59 <City>London</City>
60
61 </Address>
62
63 <Phone1>012-5344-334</Phone1>
64
65 </Person>
66
67 </Persons>
68
69</Data>The foreach directive expression in the HTML page template:
HTML Template
1 <table border=1 data_merge='{{#foreach Persons.Person}}'>
2
3 <tr>
4
5 <th>Person</th>
6
7 <th>Address</th>
8
9 </tr>
10
11 <tr>
12
13 <td>{{FirstName}} {{LastName}}</td>
14
15 <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
16
17 </tr>
18
19</table>Please note that the current implementation supports foreach directive expression only for the following list of HTML elements: DIV, OL, UL and TABLE.
Data Source
As it was mentioned earlier, the data-source could be represented in XML and JSON formats. The following are the examples of both data-source that prepared for this article:
XML Data Source
1 <Data>
2
3 <FirstName>John</FirstName>
4
5 <LastName>Smith</LastName>
6
7 <Address>
8
9 <City>Dallas</City>
10
11 <Street>Austin rd.</Street>
12
13 <Number>200</Number>
14
15 </Address>
16
17</Data>JSON Data Source
1 {
2
3 'FirstName': 'John',
4
5 'LastName': 'Smith',
6
7 'Address': {
8
9 'City': 'Dallas',
10
11 'Street': 'Austin rd.',
12
13 'Number': '200'
14
15 }
16
17}Usage Example
Once you have prepared an HTML Template, you can convert Template to HTML in your Java application literally with a single line of code!
Please note that you can use TemplateLoadOptions.NamesAreCaseSensitive property to define whether the template and data element names will be matched regardless of the character case or not.
1// Prepare a JSON data-source and save it to the file.
2String data = " {\n" +
3 " 'FirstName': 'John',\n" +
4 " 'LastName': 'Smith',\n" +
5 " 'Address': {\n" +
6 " 'City': 'Dallas',\n" +
7 " 'Street': 'Austin rd.',\n" +
8 " 'Number': '200'\n" +
9 " }\n" +
10 " }\n";
11try (java.io.FileWriter fileWriter = new java.io.FileWriter("data-source.json")) {
12 fileWriter.write(data);
13}
14
15// Prepare an HTML Template and save it to the file.
16String template = "<table border=1>\n" +
17 " <tr>\n" +
18 " <th>Person</th>\n" +
19 " <th>Address</th>\n" +
20 " </tr>\n" +
21 " <tr>\n" +
22 " <td>{{FirstName}} {{LastName}}</td>\n" +
23 " <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>\n" +
24 " </tr>\n" +
25 "</table>\n";
26try (java.io.FileWriter fileWriter = new java.io.FileWriter("template.html")) {
27 fileWriter.write(template);
28}
29
30// Invoke Converter.ConvertTemplate in order to populate 'template.html' with the data-source from 'data-source.json' file
31com.aspose.html.converters.Converter.convertTemplate(
32 "template.html",
33 new com.aspose.html.converters.TemplateData("data-source.json"),
34 new com.aspose.html.loading.TemplateLoadOptions(), "document.html"
35);