HTML-шаблон – Конвертировать шаблон в HTML

В этой статье описывается, как использовать Aspose.HTML for Java для создания HTML-документа на основе шаблона (HTML template) и заполнения его данными из различных источников, таких как XML или JSON. Используя синтаксис встроенных выражений, вы можете эффективно сопоставлять источники данных с вашим шаблоном HTML и динамически генерировать контент.

Aspose.HTML for Java предлагает набор методов convertTemplate(), которые используются для преобразования шаблона HTML в документ HTML. Методы принимают несколько параметров (например, пути к шаблону и источнику данных, объект TemplateLoadOptions и путь к результату HTML) и возвращают заполненный HTML-документ.

Понимание разметки шаблона

HTML-шаблон (HTML template) – это стандартный HTML-файл, содержащий некоторые специальные встроенные выражения. В этих выражениях используются двойные фигурные скобки {{ }} для сопоставления данных из источника входных данных с определенными частями HTML-документа. При обработке эти маркеры шаблона заменяются соответствующими значениями данных в соответствии с приведенными ниже правилами.

Синтаксис встроенных выражений

Ниже приведен список поддерживаемого синтаксиса встроенных выражений.

{{ … }} – выражение привязки данных

Выражение привязки данных (data-binding expression) используется для установки значений элемента управления на основе информации, содержащейся в источнике данных.

Ниже приведен основной синтаксис выражения привязки данных:

{{ выражение привязки данных }}

В следующей демонстрации показано, как использовать выражение привязки данных для получения информации из источника данных XML.

Источник данных XML

<Data>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
<Address>
    <City>Chicago</City>
    <Street>Oakmound Drive</Street>
    <Number>100</Number>
</Address>
</Data>

Выражение привязки данных в шаблоне HTML-страницы:

HTML-шаблон

Это пример шаблона HTML, который использует встроенные выражения для привязки данных. Шаблон включает в себя таблицу с двумя столбцами для «Person» и «Address». В ячейках столбца «Person» отображаются значения {{FirstName}} и {{LastName}} из источника данных. В ячейках столбца «Address» отображаются значения {{Address.Street}} {{Address.Number}} и {{Address.City}}. Синтаксис фигурных скобок используется для обозначения встроенного выражения.

<table border=1>
    <tr>
        <th>Person</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>{{FirstName}} {{LastName}}</td>
        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
    </tr>
</table>

{{#foreach … }} – выражение директивы foreach

Выражение директивы foreach (foreach directive expression) используется для итерации по списку элементов в сочетании с выражением привязки данных.

Следующие примеры показывают, как получить всех лиц из источника данных и заполнить шаблон:

Источник данных XML

<Data>
    <Persons>
        <Person>
                <FirstName>John</FirstName>
                <LastName>Doe</LastName>
                <Address>
                        <Number>100</Number>
                        <Street>Oakmound Drive</Street>
                        <City>Chicago</City>
                </Address>
                <Phone1>773-349-7747</Phone1>
                <Phone2>708-252-9790</Phone2>
        </Person>
        <Person>
                <FirstName>Jack</FirstName>
                <LastName>Fox</LastName>
                <Address>
                        <Number>355</Number>
                        <Street>Haul Road</Street>
                        <City>San Francisco</City>
                </Address>
                <Phone1>650-942-7641</Phone1>
            </Person>
            <Person>
                <FirstName>Sherlock</FirstName>
                <LastName>Holmes</LastName>
                <Address>
                        <Number>45</Number>
                        <Street>Baker str.</Street>
                        <City>London</City>
                </Address>
                <Phone1>012-5146-564</Phone1>
        </Person>
    </Persons>
</Data>

Foreach directive expression в шаблоне HTML-страницы:

HTML Template

Атрибут data_merge указывает, что источником данных является список объектов, и таблица должна повторяться для каждого объекта в списке. Выражения внутри шаблона, такие как {{FirstName}}, {{LastName}}, {{Address.Street}} и {{Address.Number}}, указывают поля из источника данных, которые должны быть вставлены в соответствующие ячейки таблицы.

<table border=1 data_merge='{{#foreach Persons.Person}}'>
    <tr>
        <th>Person</th>
        <th>Address</th>
    </tr>
    <tr>
        <td>{{FirstName}} {{LastName}}</td>
        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>
    </tr>
</table>

Обратите внимание, что текущая реализация поддерживает foreach directive expression только для следующего списка элементов HTML: DIV, OL, UL и TABLE.

Источник данных

Как упоминалось ранее, источник данных может быть представлен в форматах XML и JSON. Ниже приведены примеры обоих источников данных:

Источник данных XML

 <Data>
    <FirstName>John</FirstName>
    <LastName>Doe</LastName>
    <Address>
        <City>Chicago</City>
        <Street>Oakmound Drive</Street>
        <Number>100</Number>
    </Address>
</Data>

Источник данных JSON

{
     "FirstName": "John",
     "LastName": "Doe",
     "Address": {
         "City": "Chicago",
         "Street": "Oakmound Drive",
         "Number": "100"
     }
 }

Преобразование шаблона в HTML

Если ваш случай предполагает указание данных и создание шаблона на лету, вам необходимо выполнить несколько шагов:

1. Подготовьте источник данных JSON или XML и сохраните его в файл. Конструктор TemplateData() берет путь к этому файлу данных и создает объект данных (data) для метода convertTemplate(sourcePath, data, options, outputPath), который мы будем использовать.
2. Подготовьте HTML-шаблон и сохраните его в файл. Метод сonvertTemplate() примет путь к файлу шаблона в качестве параметра (sourcePath).
3. Инициализируйте экземпляр класса TemplateLoadOptions, чтобы определить, совпадают ли имена шаблона и элемента данных, независимо от регистра или нет (options).
4. Вызовите метод convertTemplate(sourcePath, data, options, outputPath) и передайте ему sourcePath, data, options и outputPath. outputPath – путь для сохранения заполненного данными конечного файла HTML. Метод convertTemplate() заменяет выражения в шаблоне значениями из источника данных, создавая заполненный HTML-документ.

// Prepare a JSON data-source and save it to the file.
String data =
        "        {\n" +
        "        'FirstName': 'John',\n" +
        "        'LastName': 'Smith',\n" +
        "        'Address': {\n" +
        "            'City': 'Dallas',\n" +
        "            'Street': 'Austin rd.',\n" +
        "            'Number': '200'\n" +
        "            }\n" +
        "        }\n";
try (java.io.FileWriter fileWriter = new java.io.FileWriter("data-source.json")) {
    fileWriter.write(data);
}

// Prepare an HTML Template and save it to the file.
String template =
        "<table border=1>\n" +
        "    <tr>\n" +
        "        <th>Person</th>\n" +
        "        <th>Address</th>\n" +
        "    </tr>\n" +
        "    <tr>\n" +
        "        <td>{{FirstName}} {{LastName}}</td>\n" +
        "        <td>{{Address.Street}} {{Address.Number}}, {{Address.City}}</td>\n" +
        "    </tr>\n" +
        "</table>\n";
try (java.io.FileWriter fileWriter = new java.io.FileWriter("template.html")) {
    fileWriter.write(template);
}

// Invoke Converter.ConvertTemplate in order to populate 'template.html' with the data-source from 'data-source.json' file
com.aspose.html.converters.Converter.convertTemplate(
        "template.html",
        new com.aspose.html.converters.TemplateData("data-source.json"),
        new com.aspose.html.loading.TemplateLoadOptions(), "document.html"
);

Технические рекомендации

1. Всегда проверяйте формат источника данных (XML/JSON) и обеспечивайте согласованность с маркерами шаблона, чтобы избежать несоответствий.

2. Используйте TemplateLoadOptions.NamesAreCaseSensitive для управления учетом регистра во время привязки данных. Если значение равно true, сопоставление чувствительно к регистру; если оно равно false, регистр символов будет игнорироваться. Значение по умолчанию – true. Установка значения false упрощает обработку противоречивых имен.