Vorlage in HTML umwandeln mit Aspose.HTML for Java

Dieser Artikel beschreibt, wie Sie Aspose.HTML for Java verwenden, um ein HTML-Dokument auf der Grundlage einer Vorlage zu erstellen und es mit Daten aus verschiedenen Quellen, wie XML oder JSON, zu füllen. Mit der Syntax der Inline-Ausdrücke können Sie Datenquellen effizient mit Ihrer HTML-Vorlage abgleichen und Inhalte dynamisch generieren.

Aspose.HTML for Java bietet eine Reihe von convertTemplate() Methoden, die verwendet werden, um eine HTML-Vorlage in ein HTML-Dokument zu konvertieren. Die Methoden nehmen mehrere Parameter entgegen (z.B. Pfade zum Template und zur Datenquelle, ein Objekt von TemplateLoadOptions und einen Pfad zum HTML-Ergebnis) und geben das ausgefüllte HTML-Dokument zurück.

Verständnis von Template Markup

Eine HTML-Vorlage ist eine Standard-HTML-Datei, die einige spezielle Inline-Ausdrücke enthält. Diese Ausdrücke verwenden doppelte geschweifte Klammern {{ }}, um Daten aus der Eingabedatenquelle auf bestimmte Teile des HTML-Dokuments abzubilden. Bei der Verarbeitung werden diese Schablonenmarkierungen durch entsprechende Datenwerte ersetzt, wobei die nachstehenden Regeln gelten.

Inline-Ausdrücke Syntax

Nachfolgend finden Sie eine Liste der unterstützten Syntax für Inline-Ausdrücke.

{{ … }} - datenbindender Ausdruck

Der Datenbindungsausdruck wird verwendet, um Werte von Kontrollelementen auf der Grundlage der in der Datenquelle enthaltenen Informationen festzulegen.

Im Folgenden wird die grundlegende Syntax des Datenbindungsausdrucks beschrieben:

{{ data-binding expression }}

In der folgenden Demo wird gezeigt, wie der Datenbindungsausdruck verwendet wird, um Informationen aus der XML-Datenquelle zu erhalten.

XML-Datenquelle

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

Der Datenbindungsausdruck in der HTML-Seitenvorlage:

HTML-Vorlage

Diese HTML-Vorlage demonstriert die Verwendung von Inline-Ausdrücken für die Datenbindung. Sie enthält eine Tabelle mit zwei Spalten: “Person” und “Address” Die Spalte “Person” zeigt dynamisch Daten für {{FirstName}} und {{LastName}} aus der Datenquelle an, während die Spalte “Address” {{Address.Street}}, {{Address.Number}} und {{Address.City}} anzeigt. Inline-Ausdrücke werden mit geschweiften Klammern definiert.

<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 … }} - Ausdruck der foreach-Richtlinie

Der Ausdruck der foreach-Direktive wird verwendet, um in Kombination mit dem Datenbindungsausdruck durch die Liste der Elemente zu iterieren.

Die folgende Demo zeigt, wie man alle Personen aus der Datenquelle holt und eine Vorlage ausfüllt:

XML-Datenquelle

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

Der Ausdruck foreach directive in der HTML-Seitenvorlage:

HTML-Vorlage

Das Attribut “data_merge” gibt an, dass die Datenquelle eine Liste von Objekten ist und die Tabelle für jedes Objekt in der Liste wiederholt werden soll. Die Ausdrücke innerhalb der Vorlage, wie {{FirstName}}, {{LastName}}, {{Address.Street}} und {{Address.Number}}, geben die Felder der Datenquelle an, die in die entsprechenden Zellen der Tabelle eingefügt werden sollen.

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

Bitte beachten Sie, dass die aktuelle Implementierung den Ausdruck foreach directive nur für die folgende Liste von HTML-Elementen unterstützt: DIV, OL, UL und TABLE.

Datenquelle

Wie bereits erwähnt, kann die Datenquelle in den Formaten XML und JSON dargestellt werden. Im Folgenden finden Sie Beispiele für beide Datenquellen:

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

Vorlage in HTML umwandeln

Wenn Sie in Ihrem Fall eine Vorlage erstellen und Daten im laufenden Betrieb angeben wollen, müssen Sie einige Schritte beachten:

1. Bereiten Sie eine JSON- oder XML-Datenquelle vor und speichern Sie sie in einer Datei. Der TemplateData() Konstruktor nimmt den Pfad zu dieser Datendatei und erstellt ein Datenobjekt (data) für die Methode convertTemplate(sourcePath, data, options, outputPath).
2. Bereiten Sie eine HTML-Vorlage vor und speichern Sie sie in einer Datei. Die Methode convertTemplate() erhält den Pfad der Vorlagendatei als Parameter (sourcePath).
3. Initialisierung einer Instanz der Klasse TemplateLoadOptions, um festzustellen, ob die Namen der Vorlagen und der Datenelemente übereinstimmen, unabhängig von der Groß- und Kleinschreibung (options).
4. Rufen Sie die Methode convertTemplate(sourcePath, data, options, outputPath) auf und übergeben Sie dafür sourcePath, data, options und outputPath. outputPath ist ein Pfad zum Speichern der mit Daten gefüllten Vorlagendatei. Die Methode convertTemplate() ersetzt die Ausdrücke in der Vorlage durch Werte aus der Datenquelle und erzeugt ein ausgefülltes HTML-Dokument.

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

Technische Empfehlungen

1. Überprüfen Sie immer das Format der Datenquelle (XML/JSON) und stellen Sie die Konsistenz mit den Vorlagenmarkierungen sicher, um Fehlanpassungen zu vermeiden.

2. Verwenden Sie TemplateLoadOptions.NamesAreCaseSensitive, um die Groß- und Kleinschreibung während der Datenbindung zu steuern. Wenn der Wert true ist, wird beim Abgleich die Groß- und Kleinschreibung beachtet; wenn er false ist, wird die Groß- und Kleinschreibung ignoriert. Der Standardwert ist true. Die Einstellung false vereinfacht die Handhabung inkonsistenter Benennungen.