Beachten Sie folgendes:
Typoscript-Tipps
TemplaVoila! ist eine visuelle Template Engine für die Erzeugung von Vorlagen, sogenanten Templates in Typo3. Die einfachere und schnellere Weise aus dem statischen Template eine funktionierende Seite "zusammen zu klicken", bringt mehr Effizienz für den Entwickler und erleichtert seine Arbeit.
Zusätzlich bringt TemplaVoila! die Möglichkeit mit sich auf einfache Art und Weise neue und dynamische Inhaltstypen, so genannte Flexible Ihaltselemente ("Flexible Content Element") zu erstellen.
Für die Installation benötigen Sie eine bereits bestehende Seitenstruktur und zusätzliche Erweiterungen.
Desweiteren benötigen Sie eine Vorlage (Template). Sie können entweder ihre Vorlage nutzen, oder Sie verwenden unsere einfache Vorlage, um sich ersteinmal mit der Thematik vertraut zu machen.
Vorlagendateien
(http://www.alnovi.de/fileadmin/wiki/tv/tmplfiles.zip)
Falls Sie noch gar keine Seitenstruktur haben, so erstellen Sie zuerst folgende Seitenstruktur in Typo3:
Diese Erweiterungen müssen im Extension Repository installiert werden um TemplateVoila richtig zu nutzen:
Gehen Sie zum Ext Manager und wählen Sie im Menü: Import extensions from online repository
Danach geben Sie einfach die nachfolgend aufgelisteten Erweirungsnamen in das List or look up extensions Feld ein.
Mit Typo3 4.0 spielt die Installationsreihenfolge keine Rolle mehr, da bei fehlender Erweiterung gefragt wird ob diese installiert werden soll.
Folgende Erweiterungen sollten _nicht_ installiert werden! Diese verursachen konflikte:
Nachdem Sie die Erweiterungen installiert und den gesamten Cache geleert haben,
sollten Sie dieses Web Menü sehen:
Falls Sie es nicht in dieser Form sehen, dann loggen Sie sich neu ein, oder leeren Sie den Cache erneut.
Typo3 4.0 bietet nur alte Templavoila-Version an?
Wenn unter den Einstellungen (Settings) vom Extension-Repository kein Haken bei "Enable extensions without review" (Aktiviere Erweiterungen ohne Überprüfung) gesetzt ist, wird man unter den möglichen Versionen nur die ältere sehen. Man muss diesen Haken nicht unbedingt setzen. Wenn man nämlich auf den Namen (nicht auf das Installiersymbol) von TemplaVoila klickt, wird in der detailierten Ansicht die aktuelle Version vorgeschlagen.
Gehen Sie auf WEB>SEITE und klicken Sie das Seitensymbol 
von RootElement an. In dem auftauchendem Menü wählen Sie
Neu aus. Es spielt keine Rolle wo man diese neuerstellte Seite platziert. Es ist nur wichtig das man sie später richtig
verbindet. Erstellen Sie nun eine neue Seite und definieren Sie sie als einen SysOrdner.
Diese Seite speichert die TemplateVoila Daten.
Die Seitenstruktur sollte so aussehen:
Wir müssen jetzt unserer Wurzelseite beibringen wo sich die Templatedateien befinden. Dazu gehen Sie auf
WEB>SEITE und auf das ”RootElement ”.
Drücken Sie auf der rechten Seite auf den 
Stift um die Seiteneigenschaften zu
bearbeiten.
Weiter unten befindet sich die Allgemeine Datensatzsammlung, mit der wir den Speicherort von TemplaVoila definieren werden:
Wählen Sie den gerade erstellten SysOrdner aus.
Typo3 braucht einen Wurzel Template Eintrag.
Dieser Templateeintrag dient so lange für alle Unterseiten von Typo3 bis er überschrieben bzw. erweiter wird.
Dieses Template kann später in beliegigen Unterseiten erweitert oder geändert werden.
Man kann auch andere Templateeinträge erstellen, und somit verschiede Designs auf anderen Seiten
anbieten. Markieren Sie hierzu die Seite ”RootElement” und gehen Sie im Menü auf Web>Template
Auf der rechten Seite erscheint eine Meldung das noch kein Template existiert.
Klicken Sie auf Create template for a new site um ein Template zu erstellen.
Im Setup befindent sich bereits 6 Zeilen, die wir ändern müssen:
Drücken Sie auf den Stift links neben dem Setup.
Hier ändern wir den Standard Setup Code, der am Anfang jeder Typo3 Installation bereits drin steht.
page = PAGE
page.10 = TEXT
page.10.value = HELLO WORLD!
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
Somit wurde mit Hilfe von Typoscript eine Seite definiert.
Dieser Seite haben wir die TemplaVoila Erweiterung zugewiesen. Kurz: TemplaVoila steuert ab jetzt unser Design.
Die CSS Verarbeitung muss im Template von Typo3 aktiviert werden. Gehen Sie auf Web->Template und klicken Sie die Seite mit dem Template an (RootElement). Klicken Sie auf ”Click here to edit whole template record” um den gesamten Templateeintrag zu bearbeiten. Im Feld ”Include static (from extension)” fügen Sie das Objekt CSS Styled Content hinzu und speichern ab.
Bevor wir das Template Objekt erstellen können, sollten sie die Templatedateien (entweder Ihre Eigenen oder Sie nutzen zu Testzwecken die Vorlagendateien (http://www.alnovi.de/fileadmin/wiki/tv/tmplfiles.zip) von uns) bereits irgendwo in das Verzeichnis fileadmin/”irgendwo hier” kopiert haben.
In unserem Beispiel kopieren wir den tmplfiles Ordner nach
/fileadmin/tmplfiles
Gehen Sie über Datei>Dateiliste>
dann auf das Verzeichnis
fileadmin/tmplfiles/
Auf der rechten Seite sehen Sie die Auflistung: meinTemplate.html style.css
Gehen sie mit der Maus auf das HTML Symbol und Klicken Sie darauf. Es erscheint ein Menü in dem Sie auf TemplateVoila klicken müssen. Um ihr Template schonmal zu begutachten können Sie auf Preview klicken.
In diesem Menü erstellen wir eine 
Datenstruktur (Data Structure >
DS) und diese Datenstruktur verbinden wir zusammen mit
den HTML Elementen und speichern diese Informationen in einem Templateobjekt (Template Object >
TO).
Sie können weitere technische Informationen über Datenstrukturen und Templateobjekte in dem Dokument ”TYPO3 Core API” und in der Dokumentation von TemplateVoila nachlesen. Um einen kurzen Überblick über die Unterschiede zwischen DS und TO zu erklären:
(DS) sagt welche ”Felder” (fields) wir mit dem HTML Template verbinden können.
TO) sagt welche HTML Elemente zu welchen ”Feldern” (fields) verbunden sind.
Mit diesen Definitionen sehen wir das ein TO immer auf ein
DS verweist. Dieser ”sagt” dem TO, welche Felder wie und in
welcher Hierarchie verbunden sind. Das bedeutet auch, dass Sie mehrere TOs haben können, die auf das gleiche DS
verweisen. Kurz: mehrere Templates für die gleichen Daten.
In unserem Tutorial brauchen wir folgende Felder:
womit man eigene flexible Inhaltselemente nach dem TemplaVoila-Prinzip bauen kann.
Die Datenstrukturen können auch selbst geschrieben/bearbeitet werden wenn Sie die Syntax der DS XML, T3DataStructure
kennen. Der Vorteil von TemplateVoila ist, dass wir mit einfachen Klicks uns genau das ersparen können, und kinderleicht
eine Datenstruktur bzw. ein Templateobjekt erstellen können. Wenn Sie aber eine spezifische Verarbeitung wünschen, kommen Sie nicht über das Einarbeiten in die Syntax herum.
Zunächst aktivieren wir unten auf der Seite den Button Preview
Nun sollte unser Template im Vorschaufenster zu sehen sein.
Das Datenelement [DS]ROOT ist bereits von Typo3 aufgelistet. Es muss nur noch dem entsprechenden Bereich vom HTML zugeordnet werden.
Das Datenelement [DS]ROOT muss nun als erstes mit Hilfe des Buttons Map mit dem Body-Element des HTML-Templates verbunden werden. Dazu klicken wir rechts von [DS]ROOT auf Map und im Vorschaufenster auf den Farbig unterlegten Bereich body.
Danach können wir dem gerade ausgewählten HTML-Tag (in diesem Falle body) mittels der Auswahl unterhalb von "Aktion" mitgeben, wie es mit dem gewählten Element (in diesem Falle Root) verbunden werden soll. Wir wählen "INNER" Der Body-Tag soll innerhalb dieses Elementes mit eingeschlossen werden. Mit Klick auf SET bestätigten wir diese erste Zuordnung (Map). Mit Klick auf Preview überprüfen wir das.
Wir sehen alle Inhaltselemente der Seite innerhalb vom Bodybereich der HTML-Struktur.
Wir "bauen" uns nun das nächste Element zusammen. Es soll der Bereich sein in dem der Inhalt unserer Webseite steht: Dieser soll in unserem Beispieltemplate in der DIV-Box mit der ID "inhalt" landen.
Gehen Sie in das Feld: [Enter new fieldname] und geben Sie einen Namen für den Inhalt an. Eine gute Angewohnheit ist es immer den Präfix field_ zu verwenden.
In unserem Falle geben wir field_inhalt an und drücken ADD.
Nun gilt es, diesem Container "Inhalt" entsprechende Werte zuzuordnen.
Achtung: In das Feld "Sample Data:" sollte etwas eingetragen werden, sonst können wir keine Vergleiche im Vorschaufenster anstellen und dort kein Ergebnis sehen.
dem Element nur die Möglichkeit geben als INNER verbunden zu werden. Für dieses Tutorial ist diese Einstellung nicht wichtig.
Mit dem Button Add erstellen wir das Element.
Im rechten Frame von Typo3 erscheint nun unterhalb von "Data Element:" unser gerade erstelltes Element "ContentSeite" mit dem Feld field_inhalt.
Das neue Element "ContentSeite" muss nun, genauso wie bereits mit "ROOT" geschehen, mit einem HTML Teil unseres Templates verbunden werden.
Mittels dem Button Map können wir im Vorschaufenster wieder die HTML-Elemente innerhalb unseres Templates sehen. Wir wählen im Vorschaufenster den DIV-Tag für den Inhalt aus:
<div id="inhalt">
Rechts neben der Spalte Data Element: [EL]Element "ContentSeite" - Field: "field_inhalt" ist unterhalb der Spalte "Aktion" unser DIV-Tag gelistet. Wenn wir mit dem Mauszeiger über diesem "div" verweilen, wird uns auch die entsprechende ID angezeigt. Diesen DIV-Tag setzen wir wieder auf INNER. Schließlich soll ja der Inhalt unserer HTML-Seite innerhalb dieses DIVs stehen und auf der HTML-Seite auch dort zu sehen sein.
Was ist bisher geschehen? Wir haben das Element Root dem HTML-Bereich body zugeordnet. Wir haben ein neues Inhaltselement erstellt und diesen mit der DIV Box:
<div id="inhalt">
unserer Seite zugeordnet.
Als nächstes ordnen wir das Menü dem Menübereich (div id="hauptmenu") des Beispieltemplates zu. Es wird das Element "Hauptmenu" erstellt.
Das Hauptmenü wird im Prinzip genau so erstellt wie das Inhaltselement, mit dem Unterschied das wir den ”Editing Type” auf TypoScript Object Path setzen.
Dazu geben wir einen Feldnamen an: fieldName "field_Hauptmenu" und bestätigen mit Add
Titel: Hauptmenu Sample Data: Unser Hauptmenu In "Editing Type:" wählen wir den Eintrag "TypoScript Object Path" und bestätigen mit Add.
Auf der nun folgenden Seite ist unser Element "Hauptmenu" bereits gelistet "[EL]Hauptmenu" Allerdings erscheint unterhalb von "Editing Type:" ein neues Feld Object path:mit dem Eintrag lib.myObject Den vorgegebenen Eintrag löschen wir und tragen dafür unser MainMenu ein lib.MainMenu ein und bestätigen mit Update Nun verbinden wir das neu erstellte Element "Hauptmenu" mit dem entsprechenden Bereich unseres Templates. Rechts neben [EL]Hauptmenu sehen wir den Button Map. Über diesen Button "Map" bekommen wir wieder das Fenster um den entsprechenden HTML-Bereich auszuwählen. Wir wählen den DIV-Bereich MainMenu aus und ordnen ihm wieder INNER zu.
Mode: Exploded Visual auf Mode: HTML Source um den Quellcode direkt zu markieren.
Für die Untermenus müssen wir den Vorgang nun (wie bereits mit dem Hauptmenu geschehen) wiederholen.
In dem Template (http://www.alnovi.de/fileadmin/wiki/tv/tmplfiles.zip) (meinTemplate.html) sieht die Beispielnavigation folgendermassen aus:
<ul id="Navigation">
<li><a ref="link">MENU 2.1</a></li>
<li>
<ul>
<li><a href="link">MENU 2.1.1</a></li>
<li><a href="link">MENU 2.1.2</a></li>
</ul>
</li>
<li><a href="link">MENU 2.3</a></li>
<li><a href="link">MENU 2.4</a></li>
<li><a href="link">MENU 2.5</a></li>
</ul>
Diese soll nun gegen ein dynamisches Menü ausgetauscht werden:
Also:
Drücken Sie auf SAVE und Sie kommen zum folgenden Menü: Beim erstmaligen Erstellen des TO und DS tragen Sie den Titel sowie den Typ Page Template ein. Store in PID: Hier sollten Sie den SysOrdner auswählen wo das TO / DS gespeichert werden soll. Wenn Sie später Änderungen an Ihrem Template vornehmen, nutzen Sie den unteren Bereich um Ihr bereits bestehendes TO/DS zu aktualisieren >
Vorsicht ist hier geboten, denn alle Änderungen die sie per Hand an dem TO / DS vorgenommen haben gehen dadurch verloren! Drücken Sie anschließend auf CREATE TO and DS um die Einträge zu erstellen. Sie sollten folgende Meldung bei Erfolg ganz oben sehen (mit den entsprechenden IDs):
Data Structure (uid 2) and Template Record (uid 2) was saved in PID "26"
Sie können sich die Einträge anschauen indem Sie auf Web->Liste gehen und den SysOrdner Storage_TV auswählen.
Wenn Sie nun versuchen sich die Seite (über Web->Anzeigen >RootElement Seite auswählen) anzuschauen, bekommen Sie immer noch eine Fehlermeldung.
Das liegt daran, das wir noch nicht das Template auf den Seiten ausgewählt haben.
Gehen Sie nun auf Web->Seite dann auf das RootElement. Klicken Sie auf den Stift, um die Seiteneigenschaften zu bearbeiten.
Sie finden dort neue Felder:
Wählen Sie bei beiden Feldern Ihr neuerstelltes Template aus und speichern Ihr Dokument ab.
Es kommen 2 Neue Felder:
Tragen Sie in allen 4 Feldern ihr Template ein und speichern das Dokument ab.
Wenn Sie sich jetzt die Seite anschauen (Web->Anzeigen RootElement auswählen) wird zwar die Seite angezeigt, bloß
ohne Formatierungen. Das Liegt daran das wir unsere CSS Datei (style.css) noch nicht eingebunden haben.
Gehen Sie hierzu über die Web->Liste auf Ihren SysOrdner mit den Templateeinträgen.
Drücken Sie auf das Symbol Templateobjekt TO und schliesslich (im Kontextmenu) auf TemplateVoila.
Sie sehen den Bereich ”Adding parts from HTML header” in dem man im head Bereich definierte Objekte/Tags einbinden kann. In unserem Fall befindet sich hier auch die CSS Datei für unsere Formatierungen. Markieren Sie alle 3 und drücken SAVE. ... und Voila die Seite sollte sich fast so wie auf dem Originaltemplate präsentieren. Uns fehlen nur noch die Menüs, aber als erstes fügen wir einen neuen DummyInhalt ein, um zu überprüfen ob er richtig dargestellt wird.
Wichtig:
(Web->Seite), die man in den Einstellungen von Templavoila! vornehmen kann, wird Ihren Inhalt nicht anzeigen! Elemente die über die in Versionen vor 4.20 Web->Seite angelegt wurden, können über den Reiter "Nicht verwendete Elemente" wieder eingebunden werden.
Markieren Sie Ihre Seite z.b. (RootElement) und gehen Sie auf Web->Seite > Hier können Sie nun Ihren Inhalt erstellen. Des Weiteren finden Sie hier auch Übersetzungen etc. zu Ihrer Seite.
Wenn Sie die Erweiterung css_styled_content nicht in ihr Roottemplate eingebunden haben, werden Sie den Inhalt nicht sehen können!
Die beiden Menüs die wir als TypoScript Object Path gesetz haben, müssen wir nun definieren.
Klicken Sie ihr RootElement an, und gehen Sie auf Web->Template. Drücken Sie den Stift neben dem Setup an um den
Templatequelltext zu bearbeiten.
Das Hauptmenu lib.MainMenu soll nur die Erste Ebene darstellen, und wurde extra auf das minimum runtergeschraubt. Das
gestalten von Menüs ist ein riesiges Thema und würde dieses Tutorial sprengen. Schauen Sie sich dazu die Tutorials über
Menüs im Internet an.
Fügen Sie folgenden Quellcode vor der bereits existierenden PAGE Definition ein!
lib.MainMenu = HMENU
lib.MainMenu.entryLevel = 0
lib.MainMenu.1 = TMENU
lib.MainMenu.1{
NO{
linkWrap = <li>|</li>
RO=1
}
}
Das besondere an dem Untermenu ist, dass wir es über die CSS Datei steuern.
Fügen Sie diesen Quellcode ebenfalls vor der PAGE Definition ein.
lib.SubMenu = HMENU
lib.SubMenu.entryLevel = 1
lib.SubMenu.1 = TMENU
lib.SubMenu.1 {
NO{
linkWrap = <li>|</li>
RO=1
}
}
Beachten Sie das TemplaVoila eine etwas andere TypoScript Steuerung nutzt: Weitere Informationen finden Sie unter dem Stichwort: "TemplaVoila TS"
Leider ist jede Änderung, die man in der Vorlage über TemplaVoila oder direkt im HTML gemacht wurde mit dem erneuten Abspeichern der Headerteile verbunden (Adding parts from HTML header:). Um diese nervige Aktion zu unterbinden kann man mittels Typoscript die CSS Datei, sowie andere Headerdaten einbinden (z.B. das Seitenicon (Favicon))
page = PAGE
page.typeNum = 0
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
page.shortcutIcon = fileadmin/tmpl/gfx/favicon.ico
page.includeCSS{
file1 = fileadmin/tmpl/css/style.css
file1 {
title = MainStyle
media = all
}
}
page.headerData.30 = COA
page.headerData.30{
10 = TEXT
10.value = "hier z.B. Javascript einbindung oder ähnliches"
}
page.bodyTag = <body onload="start();">