Nachdem wir Typo3 für den Einsatz von TemplaVoila vorbereitet haben, müssen sie TemplaVoila das HTML-Template bekannt geben, das sie für den Webauftritt vorgesehen haben (siehe Detailseite Das HTML-Template).
Wählen sie im Modul Datei > Dateiliste das Verzeichnis templates aus. In der Listung der verfügbaren Dateien klicken sie auf das Icon der Datei index.html.
Im Context-Menü wählen sie den Punkt TemplaVoila aus.



Dadurch gelangen sie in das visuelle Mapping-Tool von TemplaVoila, das ihnen die Erstellung von Data Structures und Template Objects ermöglicht.

• Data Structures (DS) definieren welche (dynamischen) Felder auf die HTML-Elemente des HTML-Templates "gemappt" werden.
  Sie legen die Struktur (d.h. die Datenfelder) des Templates fest.
  Jeder Bereich, der im HTML-Quelltext ersetzt werden soll, wird durch ein Feld der Data Structure repräsentiert.
• Template Objects (TO) speichern wie die Felder der Data Structure auf die HTML-Elemente "gemappt" werden.
  Sie ordnen die Bereiche (z.B. bestimmte div-Tags) des HTML-Templates den Feldern der Data Structure zu.

Ein Template Object refernziert also immer auf eine Data Structure, die dem Template Object mitteilt, auf welche Datenfelder nach welchen Regeln "gemappt" wird. Das beudeutet auch, dass mehrere Template Objects auf dieselbe Data Structure referenzieren können! Dadurch ist es relativ einfach für eine Datenstrukturen mehrere Templates zu definieren.

Klicken sie auf den Button "Map" um einen ersten Eindruck von den Möglichkeiten des Mapping-Tools zu erlangen.



Durch den Klick auf  "Map" im Container ROOT öffnete die Sicht auf das HTML-Template /fileadmin/templates/index.html.
Das Tool erlaubt ihnen einzelen HTML-Elemente auszuwählen auf die in weitere Folge "gemappt" wird. Standardmäßig befindet man sich im visuellen Modus ("Exploded Visual"), kann aber auch auf die HTML-Code-Sicht umschalten.



Bevor sie die HTML-Elemente auswählen, auf die "gemappt" werden soll, müssen sie die zugrundeliegende Data Structure (DS) erstellen. Klicken sie auf den Button "Cancel" um wieder in die Übersicht zu gelangen. Als erste erstellen wir ein Datenfeld für das Hauptmenü. Geben sie im Textfeld "field_menu" und klicken sie auf den Button "Add". Gemäß TemplaVoila-Konvention beginnen alle Feldnamen mit dem Prefix "field_".



Beim "Mapping Type" wählen sie "Element" aus und als Titel geben sie z.B. "Main menu" ein. Wählen sie in der DropDown-Liste "Editing Type" den Punkt "TypoScript Object Path" aus. Hier definieren wir später den Pfad zum TypoScript-Objekt (z.B ein HMENU-Objekt), dass uns das Hauptmenü erzeugt. Im Textfeld "Mapping rules" geben sie *:inner ein. Durch diese Mapping-Regel legen wir fest, dass wir das Hauptmenü später auf jedes beliebige HTML-Element mappen können. Weiters wird nur der innere Bereich, der vom HTML-Element umschlossen ist, vom TypoScript-Objekt ersetzt.



Als nächstes legen wir das Feld an, dass den Page-Content-Bereich des HTML-Templates repräsentiert. Neben dem "Mapping Type" und dem "Title" müssen sie noch den "Editing Type" bestimmen. Wählen sie im Gegensatz zum Feld für das Hauptmenü hier den Typ Content Elements aus. Dadurch ist es später im Modul Web > Seite möglich, an dieser Stelle unterschiedlichste Inhaltselemente auszuwählen.



Wie in der Detailseite Das HTML-Template bereits beschrieben, umfasst unser verwendetes HTML-Template Pluralism vier dynamische Bereiche, die durch Inhalte aus Typo3 ersetzt werden sollen. Neben dem Hauptmenü und dem Page-Content-Bereich existieren noch zwei weitere Content-Bereiche, die mit dynamischen Inhalten aufgefüllt werden, Widebar-Bereich und der Sidebar-Bereich. Erstellen sie diese beiden Bereiche analog zum Page-Content-Bereich wie oben beschrieben. Die nächste Abbildung zeigt die fertig erstellte Data Structure.



Klicken sie auf den Button "Save as" um die Data Structure zu speichern. In der nächste Maske werden sie aufgefordert einen Titel für die Data Structure zu vergeben. Klicken sie auf den Button "CREATE TO and DS" und die Data Structure sowie das dazugehörige Template Object werden erzeugt.