Plantilla HTML – HTML Template – Convertir plantilla a HTML

Este artículo describe cómo utilizar Aspose.HTML for Java para crear un documento HTML basado en una plantilla (HTML template) y completarlo con datos de varias fuentes, como XML o JSON. Al utilizar la sintaxis de expresiones en línea, puede hacer coincidir de manera eficiente las fuentes de datos con su plantilla HTML y generar contenido dinámicamente.

Aspose.HTML for Java ofrece un conjunto de métodos convertTemplate() que se utilizan para convertir una plantilla HTML en un documento HTML. Los métodos toman varios parámetros (por ejemplo, rutas a la plantilla y fuente de datos, un objeto de TemplateLoadOptions y una ruta al resultado HTML) y devuelven el documento HTML completo.

Comprensión del marcado de plantilla

Una plantilla HTML (HTML template) es un archivo HTML estándar que contiene algunas expresiones en línea especiales. Estas expresiones utilizan llaves dobles {{ }} para asignar datos de la fuente de datos de entrada a partes específicas del documento HTML. Cuando se procesan, estos marcadores de plantilla se reemplazan con los valores de datos correspondientes siguiendo las reglas que se mencionan a continuación.

Sintaxis de expresiones en línea

A continuación se muestra la lista de sintaxis de expresiones en línea admitidas.

{{ … }} – expresión de enlace de datos

La expresión de enlace de datos (data-binding expression) se utiliza para establecer valores del elemento de control en función de la información contenida en la fuente de datos.

La siguiente es la sintaxis básica de la expresión de enlace de datos:

{{ expresión de enlace de datos }}

La siguiente demostración muestra cómo utilizar la expresión de enlace de datos para obtener información de la fuente de datos XML.

XML Data Source

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

La expresión de enlace de datos en la plantilla de página HTML:

HTML Template

Esta plantilla HTML demuestra el uso de expresiones en línea para la vinculación de datos. Incluye una tabla con dos columnas: “Person” y “Address”. La columna “Person” muestra dinámicamente los datos de {{FirstName}} y {{LastName}} de la fuente de datos, mientras que la columna “Address” muestra {{Address.Street}}, {{Address.Number}} y {{Address.City}}. Las expresiones en línea se definen mediante sintaxis de llaves.

<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… }} – expresión directiva foreach

La expresión directiva foreach (foreach directive expression) se utiliza para iterar a través de la lista de elementos en combinación con la expresión de enlace de datos.

La siguiente demostración muestra cómo obtener todas las personas de la fuente de datos y completar una plantilla:

XML Data Source

<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>

La expresión de directiva foreach en la plantilla de página HTML:

HTML Template

El atributo data_merge especifica que la fuente de datos es una lista de objetos y la tabla debe repetirse para cada objeto de la lista. Las expresiones dentro de la plantilla, como {{FirstName}}, {{LastName}}, {{Address.Street}} y {{Address.Number}}, indican los campos de la fuente de datos que deben insertarse en la plantilla. celdas correspondientes de la tabla.

<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>

Tenga en cuenta que la implementación actual admite expresión directiva foreach solo para la siguiente lista de elementos HTML: DIV, OL, UL y TABLE.

Fuente de datos

Como se mencionó anteriormente, la fuente de datos se puede representar en formatos XML y JSON. Los siguientes son ejemplos de ambas fuentes de datos:

XML Data Source

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

JSON Data Source

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

Convertir plantilla a HTML

Si tu caso implica crear una plantilla y especificar datos sobre la marcha, debes seguir algunos pasos:

1. Prepare una fuente de datos JSON o XML y guárdela en un archivo. El constructor TemplateData() toma la ruta a este archivo de datos y crea un objeto de datos (data) para el método convertTemplate(sourcePath, data, options, outputPath).
2. Prepare una plantilla HTML y guárdela en un archivo. El método convertTemplate() tomará la ruta del archivo de plantilla como parámetro (sourcePath).
3. Inicialice una instancia de la clase TemplateLoadOptions para determinar si los nombres de la plantilla y del elemento de datos coinciden, independientemente de si son mayúsculas o no (options).
4. Invoque el método convertTemplate(sourcePath, data, options, outputPath) y pase sourcePath, data, options y outputPath para ello. outputPath es una ruta para guardar archivos de plantilla llenos de datos. El método convertTemplate() sustituye las expresiones de la plantilla con valores de la fuente de datos, generando un documento HTML completo.

// 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"
);

Recomendaciones técnicas

1. Valide siempre el formato de la fuente de datos (XML/JSON) y garantice la coherencia con los marcadores de la plantilla para evitar discrepancias.

2. Utilice TemplateLoadOptions.NamesAreCaseSensitive para controlar la distinción entre mayúsculas y minúsculas durante el enlace de datos. Si el valor es true, la coincidencia distingue entre mayúsculas y minúsculas; si es false, se ignorará el carácter entre mayúsculas y minúsculas. El valor predeterminado es true. Establecerlo en false simplifica el manejo de nombres inconsistentes.