Convertir un modèle en HTML à l'aide d'Aspose.HTML for Java

Cet article décrit comment utiliser Aspose.HTML for Java afin de créer un document HTML basé sur un modèle et de le remplir avec des données provenant de diverses sources, telles que XML ou JSON. En utilisant la syntaxe des expressions en ligne, vous pouvez efficacement faire correspondre les sources de données à votre modèle HTML et générer dynamiquement du contenu.

Aspose.HTML for Java propose un ensemble de méthodes convertTemplate() qui sont utilisées pour convertir un modèle HTML en un document HTML. Ces méthodes prennent plusieurs paramètres (par exemple, les chemins d’accès au modèle et à la source de données, un objet TemplateLoadOptions et un chemin d’accès au document HTML résultant) et renvoient le document HTML rempli.

Comprendre le balisage des modèles

Un modèle HTML est un fichier HTML standard qui contient des expressions en ligne spéciales. Ces expressions utilisent des doubles accolades {{ }} pour faire correspondre des données provenant de la source de données d’entrée à des parties spécifiques du document HTML. Lors du traitement, ces marqueurs de modèle sont remplacés par les valeurs de données correspondantes, conformément aux règles mentionnées ci-dessous.

Syntaxe des expressions en ligne

Voici la liste des expressions en ligne prises en charge.

{{ … }} – expression de liaison de données

L’expression data-binding est utilisée pour définir les valeurs de l’élément de contrôle sur la base des informations contenues dans la source de données.

Voici la syntaxe de base de l’expression de liaison de données :

{{ expression de liaison de données }}

La démonstration suivante montre comment utiliser l’expression data-binding pour obtenir des informations à partir de la source de données XML.

**Source de données XML

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

L’expression de liaison de données dans le modèle de page HTML :

HTML Template

Ce modèle HTML démontre l’utilisation d’expressions en ligne pour la liaison de données. Il présente un tableau avec deux colonnes : “Person” et “Address” La colonne “Person” affiche dynamiquement les données pour {{FirstName}} et {{LastName}} à partir de la source de données, tandis que la colonne “Address” affiche {{Address.Street}} {{Address.Number}} et {{Address.City}}. Les expressions en ligne sont définies à l’aide de la syntaxe des accolades.

<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 … }} – expression de la directive foreach

L’expression directive foreach est utilisée pour parcourir la liste des éléments en combinaison avec l’expression data-binding.

La démonstration suivante montre comment récupérer toutes les personnes de la source de données et remplir un modèle :

**Source de données 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>

L’expression de la directive foreach dans le modèle de page HTML :

HTML Template

L’attribut data_merge spécifie que la source de données est une liste d’objets et que le tableau doit être répété pour chaque objet de la liste. Les expressions contenues dans le modèle, telles que {{FirstName}}, {{LastName}}, {{Address.Street}} et {{Address.Number}}, indiquent les champs de la source de données qui doivent être insérés dans les cellules correspondantes du tableau.

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

Veuillez noter que l’implémentation actuelle ne prend en charge l’expression avant chaque directive que pour la liste suivante d’éléments HTML : DIV, OL, UL et TABLE.

Source des données

Comme indiqué précédemment, la source de données peut être représentée dans les formats XML et JSON. Voici des exemples de ces deux sources de données :

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 un modèle en HTML

Si votre cas implique la création d’un modèle et la spécification de données à la volée, vous devez suivre quelques étapes :

1. Préparer une source de données JSON ou XML et la sauvegarder dans un fichier. Le constructeur TemplateData() prend le chemin de ce fichier de données et crée un objet de données (data) pour la méthode convertTemplate(sourcePath, data, options, outputPath).
2. Préparer un modèle HTML et le sauvegarder dans un fichier. La méthode convertTemplate() prend en paramètre le chemin du fichier de template (sourcePath).
3. Initialiser une instance de la classe TemplateLoadOptions pour déterminer si les noms du modèle et de l’élément de données correspondent, indépendamment de la casse (options).
4. Invoquez la méthode convertTemplate(sourcePath, data, options, outputPath) et passez-lui sourcePath, data, options, et outputPath. outputPath est un chemin pour l’enregistrement du fichier de modèle rempli de données. La méthode convertTemplate() remplace les expressions du modèle par les valeurs de la source de données, générant ainsi un document HTML rempli.

// Populate an HTML template with structured JSON data using Java

// Prepare a JSON data-source and save it to a file
String data =
        "{\n" +
        "   'FirstName': 'John',\n" +
        "   'LastName': 'Smith',\n" +
        "   'Address': {\n" +
        "       'City': 'Dallas',\n" +
        "       'Street': 'Austin rd.',\n" +
        "       'Number': '200'\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 a 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);
}

// Convert Template to HTML
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"
);

Recommandations techniques

1. Il faut toujours valider le format de la source de données (XML/JSON) et s’assurer de la cohérence avec les marqueurs de modèles pour éviter les incohérences.

2. Utilisez TemplateLoadOptions.NamesAreCaseSensitive pour contrôler la sensibilité à la casse lors de la liaison des données. Si la valeur est true, la correspondance est sensible à la casse ; si elle est false, la casse sera ignorée. La valeur par défaut est true. Mettre false simplifie la gestion des noms incohérents.