Moderne Templateerstellung, Teil 1 (MTB_de/1)¶

Ziel¶

Ziel dieser Anleitung ist es, Ihnen das Rüstzeug zu vermitteln um mit modernen Techniken TYPO3 basierte Websites zu erstellen. Es vermittelt Ihnen schnell praktische Erfahrungen mit dem System und ein Gesamtverständnis aller Faktoren für die Websiteerstellung mit TYPO3.Wenn Sie den Eindruck haben, diese Anleitung sei zu lang und sich etwas kürzeres wünschen, dann sollten Sie sich vielleicht ein anderes CMS suchen. Ein leistungsfähiges und komplexes Werkzeug wie TYPO3 kann auf weniger Seiten nicht beschrieben werden. Und auch diese Anleitung kann nur einen ersten Eindruck vermitteln.

Auch wenn TYPO3 kostenlos ist, heißt das nicht, dass der Entwickler sich keine Zeit zum Kennenlernen nehmen muss. Es erfordert genau sovielZeit und Einsatz wie jede kommerzielle Alternative auf gleichem Niveau. Seien Sie also vorgewarnt:einen Düsenjet fliegen zu könnenverlangt verschiedenste Fähigkeiten und folglich auch Zeit zum Erlernen. Mit dieser Anleitung werden sie aberhoffentlich so schnell wie möglich auf das Rollfeld gebracht werden um starten und bald abheben zu können.

Gliederung¶

Die Anleitung besteht aus vier Teilen:

Die Grundlagen: - eine Anleitung für Anfänger zum Erstellen von Websites mit TYPO3-Standardvorlagen, TypoScript und Content Objects (cObjects, also den Inhaltsobjekten). Jeder, der mit TYPO3 entwickeln möchte,sollte mit den hier beschriebenen Konzepten vertraut sein.

Teil 1: Integration e ines HTML-Templates - dieser Teilt richtet sich speziell an beteiligte HTML-Webdesignermit einem begrenzten technischen Wissen.

Teil 2: Erstellen einer Vorlagenauswahl - dieser Teil richtet sich an Webdesigner mit guten Kenntnissen von PHP, SQL und allgemeinen Programmierkonzepten.

Teil 3: Erweitern des integrierten Zugriffschemas: - für erfahrene TYPO3/PHP-Entwickler.

Hinweis: Teil 2 und Teil3 finden Sie in einem `weiterem Dokument <htt p://typo3.org/doc.0.html?&tx_extrepmgm_pi1[extUid]=490&cHash=27f9c79d2 5>`_ `in der extension (Erweiterung)" <http://typo3.org/doc.0.html?&tx _extrepmgm_pi1[extUid]=490&cHash=27f9c79d25>`_ `doc_tut_templselect2” <http://typo3.org/doc.0.html?&tx_extrepmgm_pi 1[extUid]=490&cHash=27f9c79d25>`_

Sie müssen diese Anleitung nicht komplett durcharbeiten sondern können direkt zu zu dem für sie relevanten Thema springen. Wenn Sie die Anleitung jedoch komplett durcharbeiten,werden Sie Abschnitte finden, die aufeinander aufbauen und dadurch Schritt für Schritt Ihre Fähigkeiten verbessern. Das Verständnis der Inhalte beim Springen zwischen verschiedenen Anleitungen kann möglicherweise verschiedenes Grundwissen und Erfahrungen vorraussetzen

Die Extension¶

Alle Dateien dieser Anleitung finden Sie in ein einer TYPO3-Extension (Erweiterung).Normalerweise enthalten ExtensionsSkripte und Hilfsmittel, die die Möglichkeiten von TYPO3 erweitern. Diese Extensionhat allerdings keine Auswirkungen auf die Kernfunktionalität von TYPO3 sondern wird nur dazu benutzt, die Dateien dieser Anleitungauf Ihren Server zu bringen und um dieses Dokument online auf typo3.org zu präsentieren.

Um also mit diesem Dokument arbeiten zu können, installieren Sie zuerst das das dummy-package(siehe Grundlagenteil) und importieren Sie dann die extension “doc_tut_templselect“ vom TER (TYPO3 Extension Repository) mit dem Erweiterungsmanager. Dann haben Sie alle Dateien auf Ihrem Server zur Verfügung wenn Sie sie benötigen.

Dieses Dokument kann entweder online gelesen werden oder Sie können es als SXW-Datei (OpenOffice-Dokument) von typo3.org downloaden.

Kosten¶

Um dieses Dokument lesen zu können müssen Sie nichts bezahlen. Es hat jedoch denAutor, Kasper Skårhøj, eine kompletteWoche gekostet es vorzubereiten, zu schreiben und zu vervollständigen.Wenn diese Anleitung für Sie oder Ihr Unternehmen hilfreich istund Ihnen dabei hilft, leistungsfähige Websitesfür Ihre Kunden zu erstellen, erwägen Sie bitte die Möglichkeit einer Aufmerksamkeit.Reines Schulterklopfen ernährt niemanden und möglicherweise könnte diese Anleitung dann die letzte gewesen sein...

Zielgruppe¶

Alle Entwickler, für die TYPO3 neu ist, unabhängig von ihren sonstigen Erfahrungen.

Einige Teile beziehen sich auf Technologien wie SQL, HTML, CSS und PHP. Der Inhalt ist im allgemeinen technischer Art, daer Sie durch die Installation des ”dummy”-Paketes führt und die Grundlagen derTemplatefunktionaltät inTYPO3 erklärt.

Eingabe der Datenbankinformationen:¶

Erstellen einer neuen Tabelle:¶

Import der dummy Datenbank, "database.sql":¶

Das Backend aufrufen:¶

(Der Begriff Backend bezeichnet Anwendungen die auf einem Server ausgeführt werden, in diesem Fall das Administrationsinterface von Typo3.)Um diese Schritte erfolgreich durchlaufen zu können muss der Webserver Benutzer für die Datei localconf.php Schreibrechtebesitzen (Sie werden darauf hingewiesen, falls dies nicht der Fall sein sollte) und Sie müssen weiterhin den Benutzernamen und das Passwort des Datenbankbenutzers kennen.

Erstellen eines Template Datensatzes (template record)¶

Was wir also machen müssen ist einen Datensatz für ein Template auf der "Root page“zu erstellen. Der einfachste Weg dafür ist das "Template” Modul zu benutzen.

Die nächste Abbildung zeigt Ihnen diese Ansicht des "Template” Moduls, das Sie später zur Bearbeitung der Vorlage verwenden werden:

Jetzt schauen wir uns aber erst mal die "Root page" mit dem "Liste" Modul an:

Wie Sie sehen gibt es dort ein "Template” auf der "Root page”.

Diese Vorlage enthält die grundlegenden Anweisungen für die Generierung der Website durch die Frontend Engine ab diesem Punkt, welche Funktionen sie enthält, wie sie konfiguriert ist usw. Ein Template wird immer benötigt um mit einer neuen Website in TYPO3 zu beginnen (unter Verwendung der Standard Frontend Engine). Sie können selbstverständlich individuell festlegen, wie viel von Ihrem Webdesign das Template direkt kontrolliert; Sie können eine komplette Website in einem Template programmieren. Sie können das Template aber auch anweisen eine selbst programmierte PHP-Funktion aufzurufen, die Ihre Seite rendert und den gesamtenSeiteninhalt liefert (basierend auf XML, XSLT oder anderen Datenbanken - wie immer Sie mögen. Sie können ebenso einen Mittelweg beschreiten, der das beste beider Welten vereinigt. Und genau das ist es, was wir hier beschreiben.

Schauen wir uns den Inhalt des Templates an. Dort gibt es drei Felder von besonderem Interesse:

Der "Template title”ist nur der Titel des Templates und wird sonst nirgendwo angezeigt.

Der "Website title”wird den Seitentiteln vorangestellt, so wie zwischen den <title> Tags jeder herkömmlichen Seite.

Im "Setup” Feld fügen Sie die Anweisungen ein, wie die Seite auf verschiedene Weisen dargestellt werden soll. Diese Anweisungen werden in einer hierarchischen Informationsstrukur eingebunden, die von der TypoScript Syntax vorgegeben wird. Da die Anweisungen des Feldes"Setup” durch die TypoScript-Syntax definiert sind, werden Templates häufig als "TypoScript Templates” bezeichnet.

Die Einstellungen "Clear constants” und "Clear setup” bedeuten, dass kein TypoScript Konfigurationscode, falls vorhanden,von den Templates höher im Baum (näher an der Wurzel) übernommen wird.Diese Checkboxen sollten für die Templates angekreuzt werden, welcheals Basistemplatedienen sollen ("Rootlevel”).

Die "Rootlevel” Checkbox sagt nur aus: "diese Vorlage kennzeichnet den Beginn einer neuen Website”.

Nun zurück zur Ansicht der der Seite "Licensing”:

Jetzt erscheint etwas anderes. Folgendes ist passiert:

• Anfrage der Seite mit der uid"5” ( 1)
• Auswahl des ersten Template Datensatzesfür diese Seite (pid=5);nicht gefunden!
• Da für die Seite mit der uid "5“kein Template gefunden wurde, wird die vorherigeSeite in der Hierarchie überprüft ( 2)
• Die "Root page” (id=1) hat ein Template. Also wurde ein Template gefunden!
• Da ein Template für die Seite mit der uid"1” gefunden wurde, wird überprüft, ob "Rootlevel” gesetzt ist ...
• Ja "Rootlevel” ist gesetzt. Gut, das ist der Anfang der Website, also ...
  • Parsen (Analyse und Verarbeitung)der TypoScript Konfiguration im Feld"Setup”.
  • Führe die Anweisungen im Feld"Setup” aus.

Das PAGE Object (1)¶

Zuerst definieren wir eine neues Objekt auf oberster Ebene ("Toplevel Object” - TLO), "page” genannt. Objekttyp ist "PAGE”(sie können auch einen Frameset definieren; siehe TSref). Anstatt "page” könnten Sie auch andere Bezeichnungen wählen,mit Ausnahme reservierter TLOs, siehe TSref about Toplevel Objects .Als Eigenschaft für das "page” Objekt definieren wir die vorgeschriebeneEigenschaft "typeNum” und setzen ihren Wert auf 0 (Null).

Das bedeutet jetzt, dass das Toplevel Objekt "page” die Standardbehandlung jedes Seitenaufrufs innerhalb eines Zweiges des Seitenbaums vorgibt, in dem unser Template den Beginn der Website kennzeichnet.

Nun wollen wir dem "page” Objekt Anweisungen geben, was es zu tun hat. Dazu müssen wir einen Blick auf die möglichen Eigenschaften für PAGE Objekte werfen. Einige Eigenschaften sind Metaeigenschaften wie die "Config-" oder "includeLibs" Eigenschaften. Andere dienen dazu, zu definieren, welche HTML-Ausgaben dieses PAGE Objekt erzeugen soll.

Der bedeutendste Satz der Eigenschaften für PAGE Objekte ist die numerische Liste der Inhaltsobjekte ( content objects - cObjects) . Jedesdieser Content Objects kann eine Zeichenkette mit HTML-Inhalt übertragen, der zusammen den Inhalt zwischen den <body> Tags der Seite bildet.

Das Content Object (2)¶

Im Beispiel oben ist ein sehr einfaches Content Object - TEXT - definiert,mit dem Index "10” innerhalb der numerischen Liste der Content Objects im PAGE Object "page”. Dieses cObject hat die Eigenschaft "value”, die auf "HELLO WORLD” gesetzt wurde. Dies hat zur Folge, dass dieser Text vom cObject zurückgegeben wird und zum Inhalt auf der Website zwischen den <body> Tags wird:

Die möglichen Eigenschaften für das TEXT cObject finden Sie hier .

TypoScript - keine Programmiersprache¶

Bevor wir fortfahren, beachten Sie bitte, dass TypoScript keine prozedurale Programmiersprache ist. Sie könnten leicht zudieser Annahme kommen. Wenn Sie Erfahrung mit anderen Programmiersprachen haben und wissen wie sie arbeiten, kann dies ein gefährlicher Cocktail werden mit dem Ergebnis totaler Verwirrung. TypoScript konfiguriert tatsächlich nur das System, um in einer bestimmten Weise zu agieren.

Um zu wissen, was TypoScript wirklich ist, um den Unterschied zu verdeutlichen und zum Verständnis, wie es in TYPO3eingesetzt wird, empfiehlt sich ein Blick in dieses Dokument, das die Grundlagen vermittelt .

Zwei cObjects¶

Was passiert, wenn Sie ein weiteres Content Object einfügen:

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Content object one:
page.10 = TEXT
page.10.value = HELLO WORLD!

# Content object two:
page.20 = TEXT
page.20.value = HELLO UNIVERSE!

(Übrigens, Zeilen die mit ”#” oder ”/” beginnen sind Kommentare.)

Ausgabe:

<body bgcolor="#FFFFFF">
HELLO WORLD!HELLO UNIVERSE!
</body>

So wie erwartet werden mehrere Content Objects einfach aneinander gehängt.

Ändern der Reihenfolge¶

Was passiert, wenn die Reihenfolge der Definitionen geändert wird?

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Content object two:
page.20 = TEXT
page.20.value = HELLO UNIVERSE!

# Content object one:
page.10 = TEXT
page.10.value = HELLO WORLD!

Ausgabe:

<body bgcolor="#FFFFFF">
HELLO WORLD!HELLO UNIVERSE!
</body>

Das gleiche: die Reihenfolge der Ausgabe entspricht dem Index in der Liste.

Dynamischer Inhalt¶

Was ist aber nun, wenn wir wollen, dass das TEXT cObject den Seitentitel einfügt?

Schauen Sie dazu `in die TSref um festzustellen, ob das TEXT cObject < http://typo3.org/doc.0.html?&tx_extrepmgm_pi1[extUid]=270&tx_extrepmgm _pi1[tocEl]=350&cHash=b49de28f83>`_ Eigenschaften besitzt, die es Ihnen erlauben, dieseszu realisieren. Siehtganz so aus. Außer der "value” Eigenschaft hat das TEXT cObject auf der gleichen Ebene auch " stdWrap” Eigenschaften (klicken Sie hier) , die benutzt werden können, um Daten dynamisch zu holen und zu verarbeiten.

Da die Übertragung des cObjects TEXT im Hauptbereich des PAGE Objekts erfolgt, wird der aktuelle Datensatz der Datensatz der aktuellen Seite. Wenn sich also die stdWrap Eigenschaft "field” auf einen Feldnamen bezieht, so wird der Inhalt vom aktuellen Seitendatensatz geholt. An dieser Stelle wird das Feld "title“ den Seitennamen beinhalten (dieses erfordert selbstverständlich Wissen darüber, welche Felder in der Seitentabelle verfügbar sind!)

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Content object outputting current page title:
page.10 = TEXT
page.10.field = title

Ausgabe:

<body bgcolor="#FFFFFF">
Licensing
</body>

Da die aktuelle Seite die "Licensing” Seite war, war das auch der Titel bei der Ausgabe.

stdWrap Eigenschaften¶

Da wir nun mit den "stdWrap” Eigenschaften experimentieren, können wir den Wert mit weiterem Ausgabetext versehen und in den unterschiedlichen Weisen verarbeiten etc.:

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Content object outputting current page title:
page.10 = TEXT
page.10 {
  field = title
  crop = 8 | ...
  case = upper
  wrap = This is the truncated page title: <b> | </b>
}

(Beachten Sie bitte wie ich die Formatierung in TypoScript verändert habe,so dass die Eigenschaften in geschweifte Klammern gesetzt wurden. Diese Syntax von TypoScript macht es einfacher, viele Eigenschaften auf der gleichen Ebene zuzuweisen. Im Endergebnis macht es aber keinen Unterschied, alle Eigenschaften mit dem vollen Objektpfad "page.10” festzulegen.)

Ausgabe:

<body bgcolor="#FFFFFF">
This is the truncated page title: <b>LICENSIN...</b>
</body>

Beachten Sie auch, wie der Text den Seitentitel einschliesstund desweiteren in Großbuchstabenumgewandelt und auf acht Zeichen begrenzt wurde und wie das"...” angehängt wurde.

Die selbe Ausgabe hätten wir auch mit einem anderen cObject erreichen können, nämlich genannt"HTML” - der einzige Unterschied ist, dass alle stdWrap Eigenschaften zur "value” Eigenschaft des HTML cObjects gehören und nicht Eigenschaften des cObjects selbst sind:

# Default PAGE object:
page = PAGE
page.typeNum = 0

# Content object outputting current page title:
page.10 = HTML
page.10.value {
  field = title
  crop = 8 | ...
  case = upper
  wrap = This is the truncated page title: <b> | </b>
}

Es ist nur eine Frage der persönlichen Vorlieben und Ihres Stils ob Sie TEXT oder HTML cObjects einsetzen.

Inhalt ausPHP Skripten¶

Wenn Sie möchten können Sie den Inhalt auchsehr einfach überPHP Skripte einfügen. Dies ist eine sehr empfohlene Vorgehensweise, wenn Sie eine programmgesteuerte(bedingte)Ausgabenbenötigen, was TypoScript nicht kann, da die cObjects und ihre Eigenschaften keine prozedurale Programmierung erlauben. Sie erinnern sich, dass dies nur vorprogrammierte Objekte sind, die auf die gesetzten Eigenschaften reagieren, und nichts weiter.

Was Sie dazu brauchen ist das cObjectUSER.

Zuerst erstellen wir eine PHP -Datei in fileadmin/userfunctions.php :

<?php

class user_functions {

        /**
         * Multiplies the current page ID with $conf["factor"]
         */
        function multiplyTest($content,$conf)   {
                $currentPageUid = $GLOBALS['TSFE']->id;
                $factor = intval($conf['factor']);

                return $currentPageUid * $factor;
        }
}
?>

Dann konfigurieren wir ein cObject vom Typ USER , welchesdiese Funktion mit einem einfachen Parameter "factor” aufruft:

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.includeLibs.some_random_id_string = fileadmin/userfunctions.php
page.config.admPanel = 1

# Content object outputting current page title:
page.10 = HTML
page.10.value = The page ID, {field:uid}, multiplied with 15 is:
page.10.value.insertData = 1
page.10.value.wrap = <b> |</b> <br />

page.20 = USER
page.20.userFunc = user_functions->multiplyTest
page.20.factor = 15

Und die Ausgabe sollte so aussehen:

Wie Sie sehen, haben wir einige "Metaeigenschaften” definiert, die nicht direkt mit der Inhaltsausgabe in Beziehung stehen:

page.includeLibs.some_random_id_string = fileadmin/userfunctions.php
page.config.admPanel = 1

"includeLibs” ist eine Eigenschaft, die es erlaubt, eine Liste von einzubindendenPHP-Dateien zusammenzustellen (Klassen- und Funktionsbibilotheken!), die eingebunden werden, bevor die Seite erzeugt wird. "config” erlaubt eine `Menge an Konfigurationsoptionen < http://typo3.org/doc.0.html?&tx_extrepmgm_pi1[extUid]=270&tx_extrepmgm _pi1[tocEl]=338&cHash=6a7c6eecbb>`_ für das allgemeine Verhalten dieses PAGE Objekts. In diesem Falle wurde das "Admin Panel” am Seitenende eingefügt.

Für dieses Beispiel sollten Sie sich ein paar Minuten Zeit nehmen. Beachten Sie wie die Eigenschaft "factor” des ObjektsUSER in der PHP- Funktion verfügbar ist. Beachten Sie, wie sich diePHP-Funktion die Seiten-ID "holt“. Beachten Sie, wie das "Admin Panel” eingebunden wurde. Sie können eine Menge davon lernen, wenn Sie mit diesem kleinen Beispiel spielen. Lassen Sie ihrer Phantasie freien Lauf, da Sie dadurch ein gutes Gefühl der Steuerung bekommen.

Der Object Browser¶

Der Object Browser im Template Modul ist ein unentbehrliches Werkzeug zumÜberprüfen der hierarchischen Struktur IhrerTemplate Datensätze.

Wie Sie sehen können, werden die gelesenen TypoScript Werte in dieser wohl organisierten Baumstruktur ausgegeben. Somit können Sie überprüfen, ob jede Eigenschaft, die Sie eingestellt haben, sich an der jeweils korrekten Position befindet und es ist Ihnen sogar erlaubt, einen einzelnen Wert zu bearbeiten, wenn Sie sicherstellen, dass die Option "Enable object links” angewählt ist.

Wenn Sie zu "Info/Modify” zurückgehen sehen Sie, dass der Inhalt des FeldesTemplate Setup verändert wurde.

Der Object Browser ist nicht intelligent genug die Zeile mit "page.20.factor = 15” abzuändern. Er fügt einfach eine neue Zeileam Ende ein, die den Inhalt des vorher gesetzten Wertes überschreibt. Sie können dies manuell bereinigen. Daraus ergibt sich, dass der Object Browser eine sichereMöglichkeit für zurEinstellung dieserWerte bietet, da immer derrichtige Objektpfad genutzt wird.

Eine Bedingung ausprobieren¶

Wir könnten diese Situation tatsächlich nutzen, um die Anwendung von "Bedingungen” zu demonstrieren. Eine sehr einfacheBedingung soll soll überprüfen, welcher Webbrowser verwendet wird:

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.includeLibs.some_random_id_string = fileadmin/userfunctions.php
page.config.admPanel = 1

# Content object outputting current page title:
page.10 = HTML
page.10.value = The page ID, {field:uid}, multiplied with 15 is:
page.10.value.insertData = 1
page.10.value.wrap = <b> |</b> <br />

page.20 = USER
page.20.userFunc = user_functions->multiplyTest
page.20.factor = 15

[browser = msie]

page.20.factor = 30
page.10.value = The page ID, {field:uid}, multiplied with 30 is:

[global]

Im Microsoft Internet Explorer sieht das dann so aus:

In allen anderen Browsern so:

Die Relevanz von "&type=Ӧ

Im folgenden Beispiel ist nichtnur ein PAGE Objekt definiert. Desweiteren istnoch das TLO "another_page” als PAGE Objekt definiert, aber "typeNum” ist auf "1” gesetzt. Das bedeutet, dass die PAGE "page” als Standardbearbeitung von Seitenanfragen definiert ist, während "another_page” jene Seiten betrifft, welchemit dem Parameter "&type=1” zusätzlich zumid-Parameter aufgerufen werden.

page = PAGE
page.typeNum = 0
page.10 = TEXT
page.10.value = HELLO WORLD!

another_page = PAGE
another_page.typeNum = 1
another_page.10 = TEXT
another_page.10.value = HELLO UNIVERSE

Die Ausgabe ist dann:

Hier der Objektbaum:

Kopieren von Objekten¶

Es kann schnell sehr praktisch werden, den TypoScript Konfigurationscode Ihres Templates in Einheiten verschiedener Bereiche/Funktionen aufzuteilen um diese dann am Ende des Templates zusammenzufügen, indem sie an die richtige Positionen kopiert werden. Dies schließt ggf. ein Aufspalten der Einheiten in eine Hierarchie von eingebundenen Template Datensätzen ein, die somit eine Wiederverwendung von TypoScript zulässt. Darüber erfahren Sie später mehr.

Die Haupteigenschaft von TypoScript, die dieses erlaubt, ist die Syntax zum Kopieren der Objekte von einem Zweig desObjektbaums in einen anderen. Dazu dieses Beispiel:

# Make temporary version of the first cObject:
temp.world = TEXT
temp.world.value = HELLO WORLD!


# Make temporary version of the second cObject:
temp.universe = TEXT
temp.universe.value = HELLO UNIVERSE!


# Default PAGE object:
page = PAGE
page.typeNum = 0

page.10 < temp.world
page.20 < temp.universe

Das Ergebnis ist - selbstverständlich - dieses:

<body bgcolor="#FFFFFF">
HELLO WORLD!HELLO UNIVERSE!
</body>

Wenn Sie in den ObjectBrowser schauen, werden Sie bemerken,dass die Objekte von "temp. ...” in die Pfade "page.10” und "page.20” kopiert wurden. Wir könnten natürlich erwarten, dass die TLOs von "temp” ebenfalls im Baum zu sehen wären, aber das ist nicht der Fall. Der Grund hierfür ist, dass die TLOs "temp.” und "styles.” gelöscht werden, da sie während des Parsens in einem temporären Objekt- Bereich verfügbar sind, danach aber nicht mehr erreichbar sind.

Wenn wir unsere Objekte innerhalb des Baums sehenmöchten, können wir ein anderes TLO benutzen:

# Make temporary version of the first cObject:
MY_TLO.world = TEXT
MY_TLO.world.value = HELLO WORLD!


# Make temporary version of the second cObject:
MY_TLO.universe = TEXT
MY_TLO.universe.value = HELLO UNIVERSE!


# Default PAGE object:
page = PAGE
page.typeNum = 0

page.10 < MY_TLO.world
page.20 < MY_TLO.universe

... und das TLO "MY_TLO" ist noch vorhanden

Referenzen - keine Kopien¶

Diesbedeutet auch, dass wir eine Referenz auf die Objekte in MY_TLO.* erstellenkönnen, da für Referenzen auf cObjects erforderlich ist, dass sie in der Struktur auch noch nach dem Parsen vorhanden sind (im Gegensatz zu den "temp” und "styles” TLOs). Das Skript kann dazu wie folgt umgeschrieben werden:

# Make temporary version of the first cObject:
MY_TLO.world = TEXT
MY_TLO.world.value = HELLO WORLD!


# Make temporary version of the second cObject:
MY_TLO.universe = TEXT
MY_TLO.universe.value = HELLO UNIVERSE!


# Default PAGE object:
page = PAGE
page.typeNum = 0

page.10 =< MY_TLO.world
page.20 =< MY_TLO.universe

Es sieht nur wie eine kleine Veränderung aus, hat aber eine immense Auswirkungen,da Objekte NICHT kopiert werden, sondern referenziert.

Aus dieser Methode ergeben sich für uns einige praktische Auswirkungen, aber auch Beeinträchtigungen. Das überzeugende Argument für Referenzen ist jedoch, dass ein cObject, welchesin einem Baum definiert wird, mehrfach innerhalb einerStruktur ohne weiteren Speicherverbrauch für Duplikate genutztwerden kann. Ebenfalls schwierig zu handhaben wäre auch das Überschreiben der Eigenschaften aller Duplikate in einem Baum. Ein Beispiel zu diesem Problem finden Sie am Ende von Teil 2 in diesem Tutorial.

Hinweis: Referenzen wie diese sind nicht Teil der eigentlichen TypoScript-Syntax. Es handelt sich hierbei um eine MöglichkeitEigenschaft, die intern von den cObjects bereitgestellt wird. Folglich können Referenzen nur bezogen auf cObjects genutzt werden; in Verbindung mit keinem anderen Objekttyp oder und keiner anderen Objekteigenschaft können Referenzen eingesetzt werden(es sei denn, dies wird ausdrücklich angemerkt).

Löschen des Cache (Zwischenspeichers)¶

Abschliessend sollten Sie noch wissen, dass wenn Sie Änderungen an einem Template Datensatz vorgenommen haben, der gesamte Zwischenspeicher (cache) gelöscht wird. Dies ist erforderlich da während des Parsens eines TypoScripts durch Typo3 die als Ergebnis zurückgelieferte Struktur im Cache gespeichert wird, so dass sie beim nächsten Seitenaufbau erneut "hervorgeholt“ werden kann. Jedoch bedeutet dies auch, dass Änderungen, die direkt im List-Modul an den Templates vorgenommen werden, den Cache nicht leeren - das müssen Sie manuell tun, über den Link unterhalb des Menüs im linken Frame.

Bevor Sie also ein merkwürdiges Verhalten als Bug melden, vergewissern Sie sich grundsätzlich, dass es nicht an immer noch zwischengespeicherten, inzwischen veränderten Templates oder Extensions liegt.

Fachliche Voraussetzungen¶

Webdesigner mit HTML/CSS Wissen, nicht notwendigerweise Webentwickler.

Damit Sie diesen Abschnitt vollständig durcharbeiten können, sollten Sie über gute HTML- und CSS-Kenntnisse verfügen. Weiterhin brauchen Sie eine funktionierende TYPO3-Datenbank, wie wir sie bereits in einem früheren Abschnitt dieses Tutorials angelegt haben. Schließlich sollten Sie mit Konzepten der Programmierung vertraut sein, um alles vollständig verstehen zu können. Aber keine Angst, Ihnen wird alles erklärt was Sie wissen müssen - seien sie einfach aufmerksam und nehmen Sie sich die Zeit, die Beispiele zu nachzuvollziehen.

Installation der Extension¶

Gehen Sie in den Extension Manager und importieren Sie die Erweiterung aus dem OnlineRepository.

Finden Sie die Erweiterung "automaketemplate” und klicken Sie auf das Importsymbol:

Dies sollte im Falle des Erfolges erscheinen:

Gehen Sie zurück, wählen Sie "Available Extensions to Install” und installieren Sie die Extension.

Nach dem Klicken auf die "Make updates” Schaltfläche gehen Sie zurück in das Template Modul und überprüfen Sie den ObjectBrowser:

Die Extension sollte ein USER cObject im Objektpfad "plugin.tx_automaketemplate_pi1” eingefügt haben, wie Sie oben sehen. Dieses cObject kann nun anstelle des FILE cObjects verwendet werden, um Raphaels Template einzulesen, die Markierungen automatisch einzufügen und die Pfade anzupassen.

Konfiguration des Template Auto-parsers¶

Wie für jede Extension, die wir nutzen möchten, können wir das Handbuch auf typo3.org zu Rate ziehen. Klicken Sie auf diesen Link und Sie erhalten um eine Tabelle mit den Eigenschaften dieses cObjects einzusehen .

Um Ihnen zu verdeutlichen, was der Template Auto-parser macht, füge ich hier die Ausgabe des Plugins als einzigenInhalt ein und werde danach das Plugin so konfigurieren, dass es den üblichen Kopf- und Fußbereich nicht ausgeben wird.

Hier das Setup-Feld des Template Datensatzes:

# Configuring the Auto-Parser:
plugin.tx_automaketemplate_pi1 {
    # Read the template file:
  content = FILE
  content.file = fileadmin/template/main/template_1.html

    # Here we define which elements in the HTML that
    # should be wrapped in subpart-comments:
  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title

    TD.all = 1
  }

    # Prefix all relative paths with this value:
  relPathPrefix = fileadmin/template/main/
}


# Default PAGE object:
page = PAGE
page.typeNum = 0
page.config.disableAllHeaderCode=1

page.10 =< plugin.tx_automaketemplate_pi1

Sichern sie das Template und rufen Sie das Frontend auf. Sie sollten eine exakte Darstellung vonfileadmin/template/main/template_1.html sehen:"Na und...?”werden Sie denken. Aber das ist, wenn Sie mal in den Quellcode schauen, schon genial:

Zwei wichtige Dinge sehen Sie dort:

• Eine Menge von Abschnitten des Template-Datensatzes wurden automatisch in Teilabschnitte gegliedert! ( 1u. 2)
• Allen relativen Links/Verweisen wurde der Pfad "fileadmin/template/main/” vorangestellt.( 3)

Dies geschah weil der Auto-parser dazu angewiesen wurde "elements” wie folgt zu behandeln:

...
  elements {
    BODY.all = 1
    BODY.all.subpartMarker = DOCUMENT_BODY

    HEAD.all = 1
    HEAD.all.subpartMarker = DOCUMENT_HEADER
    HEAD.rmTagSections = title

    TD.all = 1
  }
...

("Elements” sind alle Tags, die von einem Start- und Endtag eingeschlossen sind, wie z.B. beim <td> Tag.Tags ohne Endtag, wie z.B. <img>), müssen mit der "single” Eigenschaft des Template Auto- parsersdefiniert sein.

Die Konfiguration dieser Elemente bedeutet also, dass

• a) das Element <body> sollmit der Markierung "###DOCUMENT_BODY###” als Teilabschnitt gekennzeichnet werden.soll
• b) das Element <head>sollmit der Teilabschnittsmarkierung "###DOCUMENT_HEADER###” umgeben werden. soll. Weiterhin sollen alle <title> Bereiche gelöscht werden. (Wir möchten nicht den Titel von Raphaels Vorlage auf allen unseren TYPO3-Seiten).
• c) Alle <td> Elemente, die gefunden wurden sollen markiert werden, solange aber keine Unterabschnitte definiert sind, werden nur <td>-Tags mit einem "id”- oder "class”-Attribut bearbeitet und mit einer Unterabschnittsmarkierung versehen. So wird der Tag <td id ="menu_1">den Inhalt aufnehmen und von den Unterabschnittsmarkierunge n"<!--###menu_1###-->...<!--###menu_1###-->” umschlossen.

Was machen wir nun damit?

Die Antwort lautet, dass der Auto-parser es Raphael erlaubt, auf modernen CSS-Techniken basierte Templates mit bewussten Gebrauch von id- und class-Attributen zu erstellen. G leichzeitigdienen diese Attribute als "Markierungen” für TYPO3, um Teile der Vorlage des Templates durch dynamischen Inhalt zu ersetzen. Einfach für Raphael, den Designer, klarer für Benoit, den Entwickler, und gut für Picoutos Finanzen, da für die Umwandlung und manuelle Anpassung der Vorlagen weniger Zeit benötigt wird.

Ergebnis¶

Das Ergebnis sieht dann so aus:

Beachten Sie, dass die Bereiche des Menüs und des Inhaltes mit den Inhalten der cObjects TEXT ersetzt wurden, die nur zum Testen dienten.

Der HTML-Quellcode sieht jetzt folgendermaßen aus:

Der <head> Bereich ist ohne <title> Tag eingefügt worden.

Der <body> Bereich mit dem ersetzten Inhalt eingefügt.

Die Unterabschnitte ###header### und ###footer### wurden nicht ersetzt, da sie im TEMPLATE cObject "temp.mainTemplate” nicht definiert wurden!Das ist also kein Fehler.

Die Unterabschnitte ###menu_1### und ###content### wurden richtig ersetzt, da das TEMPLATE cObject "temp.mainTemplate” dafür konfiguriert war.

Zusammenfassung¶

TYPO3 hat aus Raphaels Vorlage automatisch den Inhalt für den <head> und <body> Bereich extrahiert, hat die relativen Pfade für die Grafiken, Links, Formulare und Formatvorlagen angepasst, hat den dynamischen Inhalt eingefügt, sowohl im <head> als auch im <body> Bereich der ausgegebenen Seite.

Der grundlegende Rahmenkonstrukt (Framework) ist jetzt betriebsbereit - wir müssen nur noch etwas dynamischen Inhalt hinzufügen, und zwar für das Menü und den Seiteninhalt! Dies geschieht am effektivsten mit TypoScript cObjects um die Menü- und Inhaltselemente zu generieren.

Menüobjekte und Zustände der Einträge¶

Zuerst werden wir das cObject HMENU zum Generieren des Menüs verwenden. Dieses Objekt nutzt "Menüobjekte” vom Typ TMENU, GMENU, GMENU_LAYERS usw. für jede gewünschte Menüebene (abhängig von der Art des Menüs, das Sie verwenden möchten - textbasiert, grafisch, mit Ebenen usw.).

Für jedes "Menüobjekt” (also z.B. für TMENU oder GMENU) legen Sie für die jeweilige Ebene allgemeine Eigenschaften fest (z.B. Höhe und Breite für ein grafisches GMENU Element). Die jeweiligen Eigenschaften des Elements sind immer für einen speziellen Zustand definiert. Der Normalzustand (NO) muss immer definiert sein, aber zusätzlich können wir z.B. einen aktiven Zustand definieren (ACT) - dies bedeutet "wie soll der Menüeintrag aussehen, wenn wir auf einer Seite auf der selben Ebene oder unterhalb dieses Eintrag sind”.

Dieses Tutorial soll nun nicht auf alle Einzelheiten des HMENU cObjects und aller davon abgeleiteten Möglichkeiten eingehen. Lesen Sie dazu bitte TypoScript by Example .

Schauen wir uns erstmal den Quellcode von Raphaels Vorlage an:

Wie Sie sehen, hat er für jeden Menüeintrag unabhängig von dessen Ebene und Zustand einen <div> Tag eingefügt. Der Unterschied liegt ausschließlich im Wert des Attributs der Klasse! Das ist ein kluges Design, da das Einfügen der Abschnittsmarkierungen so einfach ist und Benoit eine Menge Zeit bei der Implementierung spart! :-) Und die eigentliche visuelle Steuerung liegt außerhalb von TYPO3, nämlich in der CSS-Formatvorlage.

Achten Sie darauf, wie Raphael "aktive“ Menüeinträge gekennzeichnet hat.

Die Implementierung dieses Menüs ist sehr einfach. Und so geht's:

Zuerst definieren Sie ein temporäres Objekt am Anfang des Template- Datensatzes (vor der Definition von"temp.mainTemplate”):

# Menu 1 cObject
temp.menu_1 = HMENU
  # First level menu-object, textual
temp.menu_1.1 = TMENU
temp.menu_1.1 {
    # Normal state properties
  NO.allWrap = <div class="menu1-level1-no"> | </div>
    # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <div class="menu1-level1-act"> | </div>
}
  # Second level menu-object, textual
temp.menu_1.2 = TMENU
temp.menu_1.2 {
    # Normal state properties
  NO.allWrap = <div class="menu1-level2-no"> | </div>
    # Enable active state and set properties:
  ACT = 1
  ACT.allWrap = <div class="menu1-level2-act"> | </div>
}

Beachten Sie die roten Zeilen, die dem HTML-Code entsprechen, den Mr. Benoit aus Mr. Raphaels Vorlage kopiert hat. Nun ist er fest im Template Datensatz gespeichert.

Das einzige, was Sie jetzt noch tun müssen, ist dieses Objekt zu kopieren, so dass es das cObject des Teilabschnitts "menu_1” wird:

...
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <body>-tags
  workOnSubpart = DOCUMENT_BODY

    # Substitute the ###menu_1### subpart with dynamic menu:
  subparts.menu_1 < temp.menu_1

    # Substitute the ###content### subpart with some example content:
  subparts.content = TEXT
  subparts.content.value = HELLO WORLD - CONTENT
...

(Die geänderten Zeilen sind rot dargestellt)

... und das Ergebnis spricht für sich selbst:

Die Seitenstruktur (unten) wird exakt vom Menü oben wiedergegeben!

Und wie einfach ist es das Menüdesign zu ändern? Versuchen Sie es und ändern Sie es im Stylesheet"fileadmin/template/main/res/stylesheet.css”:

Wie Sie sehen erlaubt diese Methode die Hauptfaktoren der visuelllen Gestaltung (das HTML-Template und die Formatvorgaben im Stylesheet) außerhalb von TYPO3 anzusiedeln. Es gibt hierbei einen direkten und bequemen Zugang für Mr. Raphael, den HTML/CSS-Designer. Und Mr. Benoit musste nur wenig Aufwand betreiben um das Frontend mittels TypoScript so zu konfigurieren, dass es Raphaels Design verwendet. Und beide können in der individuell für sie angenehmsten Weise entwickeln.

Wenn Sie mehr mit dem HMENUObjekt und damit zusammenhängendenDingen experimentieren möchten , schauen Sie dazu wieder in TypoScript by Example.

Ein Inhaltselement¶

Im Listenmodul klicken Sie bitte auf das Icon der Seite "License C”und wählen dann "Neu”. Im rechten Frameklicken Sie dann auf den Link des Assistenten fürden Seiteninhalt:

Wählen Sie "Text mit rechts liegendem Bild” und dann die Spalte"Normal":

Nachdem Sie den Inhalt eingegeben und gespeichert haben sollten Sie folgende Ausgabe sehen:

Jetzt haben wir auch ein Inhaltselement auf der Seite "LicenseC” verfügbar:

Einfügen eines statischen Templates¶

Um das Inhaltselement anzeigen zu lassen, müssen wir ein statisches Template einfügen, welches die vielen hundert Zeilen TypoScript-Code für die spätere Ausgabe erstellt. Dazu ist der gesamte Template- Datensatz zu bearbeiten.

Zuerst müssen Sie natürlich die Extension "css_styled_content” installieren.

Klicken Sie auf das Installationssymbol und bestätigen Sie die Änderungen auf der nächsten Seite.

Zurück zum Template: Im Template Modul klicken Sie auf diesen Link:

Dann sollte der "CSS Styled Content” als "static file” im Bereich "Include Static (from extensions)” verfügbar sein:

Klicken Sie darauf und sichern Sie das Template. Danach wechseln in den "Template Analyzer“ und betrachten dort das Template:

Der "TemplateAnalyzer” zeigt die Hierarchie der Template-Datensätze und statischen Templates, die im aktuellen "main template record” eingebunden sind. Durch Anwahl des statischen Templates wird dieses vor Generierung des TypoScript-codes im Template-Datensatz "NEW SITE“ eingebunden. Das bedeutet, dass jedes Objekt, das innerhalb von "EXT:css_styled_content/.....” definiert ist, im Template-Datensatz "NEW SITE” benutzt und dort hineinkopiert werden kann. Das werden wir jetzt auch tun, da die statische Vorlage ein Objekt "styles.content.get” enthält. Dabei handelt es sich um ein Inhaltselement, das alle Inhaltselemente aus der Spalte "Normal” der aktuellen Seite auswählt.

Ändern Sie also diesen Teil der Definition des "temp.mainTemplate” Objekts im Template-Datensatz:

...
# Main TEMPLATE cObject for the BODY
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
    # Feeding the content from the Auto-parser to the TEMPLATE cObject:
  template =< plugin.tx_automaketemplate_pi1
    # Select only the content between the <body>-tags
  workOnSubpart = DOCUMENT_BODY

    # Substitute the ###menu_1### subpart with dynamic menu:
  subparts.menu_1 < temp.menu_1

    # Substitute the ###content### subpart with some example content:
  subparts.content < styles.content.get
...

Nach einem Aktualisieren des Frontends im Browsers sollte die Seite "LicenseC” anschließend so aussehen:

Und der HTML-Quelltext sieht dann so aus:

Anscheinend wurde die Überschrift des Inhaltselements in <h1> Tags eingeschlossen generiert. Wenn Sie einen anderen "Layout”-Typ wählen, kann dies auch <h2> (für Layout 2) sein.

Jede Zeile des Textes im Body wird in mit <p> Tags eingeschlossen und erhält die Zuweisung der Klasse "bodytext“. So können Sie die Darstellung von Seiteninhalten über Ihre Stylesheet-Formatvorlage steuern. Beachten Sie bitte wie Raphael bereits schon den Blindtext in der Template-Datei unter Verwendung von "<p class="bodytext">” Tags gestaltet hat!

Jedes eingefügte Inhaltselement erhält einen <a> Tag, welcher als Wert des Attributes name seine uid beinhaltet. Dieser Ankerpunkt kann zum direkten Aufruf einer bestimmten Position innerhalb der Seite genutzt werden.

Dies hat das HMENU Objekt beim Aufbau des zweistufigen Menüs eingefügt. Beachten Sie auch, wie der Link automatisch auf die richtige Seite verweist und wie eine zusätzliche "onFocus” Routineeingefügt ist.

Der Objektbaum?¶

Was haben wir jetzt durch das Kopieren von diesem angeblichen Inhaltselement "styles.content.get” wirklich in den Objektbaum eingefügt? Schauen wir im ObjectBrowser nach:

Hier sind zwei interessant Punkte:

Der Objektpfad "styles.content.get” beinhaltete offensichtlich ein cObject vom TypCONTENT.Wenn wir uns die Attribute anschauen, sieht es danach aus, dass dieses cObject Datensätze aus der Tabelle "tt_content” auswählt und sie nach dem Feldeintrag "sorting” geordnet ausgibt. Für weitere Informationen zum CONTENT cObject folgend sie diesem Link .

Desweiteren wurde ein komplett neues ToplevelObject(TLO) definiert-"tt_content”, Standardmäßig nutzt das cObject CONTENT dieses TLO (ebenfalls als cObject definiert) um die Ausgabe der gefundenen Datensätze zu generieren (1). Wie wir sehen, wird das "tt_content” TLO als USER cObject definiert, das eine PHP-Funktion der "css_styled_content” Extension aufruft - dafür haben wir ja auch diese Erweiterung installiert. Für weitere Einzelheiten schauen Sie bitte in die `Dokumentation zur "css\_styled\_content” Extension <http ://typo3.org/doc.0.html?&tx_extrepmgm_pi1[extUid]=170&cHash=97866c2553 >`_ .

Die ganz Neugierigen können auch mal in die Klasse "tx_cssstyledcontent_pi1” schauen und die dahinter steckende Logik betrachten. Hier dazu ein Ausschnitt aus der Funktion main():

   function main($content,$conf)   {
                $this->conf = $conf;

                // This value is the Content Element Type - determines WHAT kind of element to render...
                $CTypeValue = (string)$this->cObj->data["CType"];
                $content="";
                switch($CTypeValue)     {
                        case "header":
                                $content = $this->getHeader().$this->render_subheader();
                        break;
                        case "bullets":
                                $content = $this->getHeader().$this->render_bullets();
                        break;
                        case "table":
                                $content = $this->getHeader().$this->render_table();
                        break;
                        case "text":
                                $content = $this->getHeader().$this->render_text();
                        break;
                        case "image":
                                $content = $this->getHeader().$this->render_image();
                        break;
                        case "textpic":
                                $content = $this->render_textpic();
                        break;
...

Bessere Struktur des Templates¶

Das letzte was wir noch tun müssen ist denTemplate-Datensatz etwas besser zu organisieren. Auch wenn nur wenig TypoScript genutzt wird, sehen wir doch, dass der Datensatz schnell groß und unübersichtlich wird. Die Lösung ist eine Reihe von Template-Datensätzen zu erstellen, um diese einzubinden.

Dazu sollten Sie zuerst eine komplett neue Seite auf der untersten Ebene (root level) erstellen. Wählen Sie den Typ "sysFolder” (das bedeutet "Speicherplatz für jedes gewünschte Datenbankelement”)..

Dann erstellen Sie drei Template-Datensätze wie in dieser Abbildung:

Kreuzen Sie nirgendwo die "Clear” -Anwahlfelder an! Kopieren Sie lediglich nur die passenden Objektdefinitionen "temp.xxxx” des Templates "NEW SITE“ in die drei neuerstellten Template-Datensätze. aus der "NEW SITE” in die neue Vorlage. Die Reihenfolge spielt dabei keine Rolle.

Der nächste Schritt ist diese drei Templates in das Haupt-Template der "NEW SITE” einzubinden. Also bearbeiten Sie das Template von "NEW SITE”.

Die Reihenfolge ist wichtig: das zuerst aufgeführte Template wird zuerst eingefügt und da der Vorlagensatz "ext: Main TEMPLATE cObject” Kopien von z.B. dem Objekt "temp.menu_1” erstellt, muss dieses dann als letztes eingefügt werden.

Speichern Sie den Template-Datensatz und betrachten Sie die neue Struktur im Template Analyzer:

Wie Sie sehen können wird erst das statische Template eingebunden, dann die drei "Basisvorlagen” aus unserem Ordner und zum Schluss der Haupttemplatesatz (main template record). Sie können den Titel jeder Vorlage anklicken und darunter deren Inhalt ansehen.

Klarstellen welche Teile dynamisch und welche statisch sind¶

Mr. Raphael muss in erster Linie verstehen - vermutlich zusammen mit dem ganzen Team - welche Teile der Seite statisch und welche dynamisch sind. Statische Teile bleiben von TYPO3 unberührt. Die dynamischen Teile sollen jedoch mit dem Inhalt ersetzt werden, der aus den Datenquellen innerhalb von TYPO3 kommt.

Wenn dynamische Bereiche erkannt werden, muss Raphael folgendes unternehmen:

• Dieser Bereich muss von einem einzelnen HTML-Element umschlossen sein, dabei kann es sich um <div>, <td> oder <span> Elemente handeln.
• Das umschließende Element muss entweder ein id oder class Attribut besitzen, welches das Template Auto-parser plugin finden und in Unterabschnittmarkierungen einschließen muss, z.B. <td id="content"> für die Tabellenzelle, die den Inhalt aufnehmen soll.

Es ist völlig in Ordnung den Blindtext in der Vorlage zu belassen - dieser wird ohnehin schließlich durch die dynamischen Teile ersetzt.

Vereinfachen Sie die Darstellungsformatierung, nutzen Sie CSS Formatvorlagen¶

Wir schreiben das Jahr 2004 und es wird Zeit dem <font> Tag und den bgcolor-Attributen auf Wiedersehen zu sagen. Packen Sie das alles in eine externe Formatvorlage. Für den Einsatz eines CMS wird dadurch erreicht so viele externe Techniken wie irgend möglich nutzen zu können und nur soviel CMS-spezifische Technologien (wie TypoScript Template-Datensätze) wie wirklich benötigt zu verwenden.

In diesem Abschnitt dieses Tutorials war das beste Beispiel hierfür das zweistufige Menü:

<!-- Menu table cell: -->
     <td id="menu_1">
             <div class="menu1-level1-no"><a href="#">Menu item 1</a></div>
             <div class="menu1-level1-no"><a href="#">Menu item 2</a></div>
             <div class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></div>
             <div class="menu1-level2-no"><a href="#">Level 2 item</a></div>
             <div class="menu1-level2-no"><a href="#">Level 2 item</a></div>
             <div class="menu1-level2-act"><a href="#">Level 2 item (act)</a></div>
             <div class="menu1-level1-no"><a href="#">Menu item 2</a></div>
     </td>

Schauen wir uns ein einzelnes Element an (oben rot dargestellt). Es hätte auch so oder ähnlich aussehen können:

<!-- Menu table cell: -->
     <td id="menu_1">
                     <!-- Menu item level 1, begin -->
             <table border="0" cellpadding="0" cellspacing="0" width="95%"><tr>
               <td bgcolor="#eeeeee"><font face="verdana" size="2">
                       <a href="#" class="menu1-items">Menu item 1</a>
               </font></td>
       </tr>
       <tr>
               <td><img src="gray_dotted_line.gif" width="180" height="1" alt=""/></td>
       </tr>
       </table>
                     <!-- Menu item level 1, end -->
             ...
     </td>

Jetzt denken Sie wieder zurück an unser TMENUITEM Object im Template- Datensatz. Es war so definiert, dass es Elemente ausschließlich mit diesem einfachen <div> Bereich umschließen sollte:

temp.menu_1.1 {
    # Normal state properties
  NO.allWrap = <div class="menu1-level1-no"> | </div>
...

... und ja, Sie haben es erraten: mit der oben genannten Implementierung würden wir die Elemente in etwa wie folgt eingeschlossen haben müssen:

temp.menu_1.1 {
    # Normal state properties
  NO.allWrap (
                  <table border="0" cellpadding="0" cellspacing="0" width="95%"><tr>
                            <td bgcolor="#eeeeee"><font face="verdana" size="2">
                                     |
                            </font></td>
                    </tr>
                    <tr>
                            <td><img src="gray_dotted_line.gif" width="180" height="1" alt=""/></td>
                    </tr>
                    </table>
)
...

Aber auch das reichte noch nicht. Sie müssten noch den Klassennamen für den <a> Tagum eine weitere Eigenschaft des "No“ Status Objektes sowie den Pfad der Grafik der grau gepunkteten Linie ergänzen- irgendwas mit"fileadmin/template/main/”.

Benutzen Sie keine class Attribute für dynamische Links¶

Viele Designer sind der Meinung, es wäre am besten, wenn sie ihre Menüelemente und andere Links mit Klassenattributenfür den <a> Tag versehen, z.B. so:

<!-- Menu table cell: -->
     <td id="menu_1">
             <div><a href="#" class="menu1-level1-no">Menu item 1</a></div>
             ...
     </td>

Jedoch ist das nicht der Fall, da genau dieser <a> Tag dynamisch von TYPO3 erzeugt wird! Damit diesmit unserem TMENUITEM funktioniert benötigen wir weitere TypoScript Eigenschaften:

temp.menu_1.1 {
    # Normal state properties
  NO.allWrap = <div> |</div>
  NO.ATagParams = class="menu1-level1-no"
...

Das führt zu komplexerem TypoScript Code und die Stylesheet- Formatvorlage wird unflexibler. Um z.B. das Aussehen vonLinks über CSS zu steuern, können Sie folgendes nutzen:

A.menu1-level1-no { color: navy; }
     A.menu1-level1-no:hover { color: red; }

... aber Sie können dann nicht die Bearbeitung der <div> Elemente kontrollieren, da diese nicht mit class oder id markiert sind!Wenn die den Weg, wie wir ihn oben beschritten haben, gehen, wo das <a> Element keine Klassenattribute , sondern nur das <div> Elemente welche hatte, dann haben Sie beide im Griff: sowohl die <div> Ebene als auch alle darin enthaltenen Links:

DIV.menu1-level1-no  { padding: 2px 2px 2px 2px; }
     DIV.menu1-level1-no  A { color: navy; }
     DIV.menu1-level1-no  A:hover { color: red; }

Finger weg von row/colspans!¶

Das ist der Nummer Eins Killer für dynamischen Inhalt - colspans im dynamischen Inhalt zu benutzen! Das wird dadurch geradezu ausgeschlossen. Zum Verständnis schauen Sie sich diese Implementierung des Menüs an:

     <tr>

              <!-- Menu table cell: -->
              <td class="menu1-level1-no"><a href="#">Menu item 1</a></td>

              <!-- Page Content Area table cell: -->
              <td id="content" rowspan="7">
                      . . .
              </td>
      </tr>
      <tr>
        <td class="menu1-level1-no"><a href="#">Menu item 2</a></td>
</tr>
<tr>
        <td class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></td>
</tr>
<tr>
        <td class="menu1-level2-no"><a href="#">Level 2 item</a></td>
</tr>
<tr>
        <td class="menu1-level2-no"><a href="#">Level 2 item</a></td>
</tr>
<tr>
        <td class="menu1-level2-act"><a href="#">Level 2 item (act)</a></td>
</tr>
<tr>
        <td class="menu1-level1-no"><a href="#">Menu item 2</a></td>
</tr>

Das ist nahezu unmöglich zu implementieren. Der erste Menüeintrag ist in einer Tabellenzeile zusammen mit der Zelle für den Inhalt. Die restlichen sechs Menüeinträge befinden sich in eigenen Zeilen. Weiterhin benötigt die Zelle mit dem Inhalt ein colspan="7", um alle Zeilen des Menüs zu umspannen!

Aus technischer Sicht ist dies ein sehr schlechtes Design, da:

die Beschreibung des Menüs auf verschiedene Bereiche des HTML-Codes verteilt ist

es eine Abhängigkeit zwischen dem colspan Attribut und der (dynamischen!) Anzahl der Menüeinträge gibt.

Designer sollten solches Design vermeiden. Stattdessen sollten Designer wie Mr. Raphael lernen, die Beschreibung für dynamische Elemente wie Menüs so zu erstellen, dass sie leicht reproduzierbar sind. Hier ein gutes Beispiel:

Von unserer aktuellen Vorlage:

<!-- Menu table cell: -->
     <td id="menu_1">
             <div class="menu1-level1-no"><a href="#">Menu item 1</a></div>
       <div class="menu1-level1-no"><a href="#">Menu item 2</a></div>
       <div class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></div>
             ...
     </td>

Alternativ mit einer Tabelle:

<!-- Menu table cell: -->
     <td id="menu_1">
             <table border="0" cellspacing="0" cellpadding="0">
                     <tr><td class="menu1-level1-no"><a href="#">Menu item 1</a></td></tr>
               <tr><td class="menu1-level1-no"><a href="#">Menu item 2</a></td></tr>
               <tr><td class="menu1-level1-act"><a href="#">Menu item 3 (act)</a></td></tr>
                       ...
             </table>
     </td>

Die Beispiele könnten auch noch komplexer sein, ähnlich dem obigen, das jedes Elementineiner eigenen Tabelle einschloß. Entscheidend ist aber nicht die Menge an HTML pro Eintrag, entscheidend ist die Reproduzierbarkeit.

Mr. Raphael sollte diesen Umständen Rechnung tragen, damit Mr. Benoit nicht Stunden damit verbringen muss eine mangelhafte HTML-Struktur zu implementieren. Eine schnelle Umsetzung des Projektes als Ergebnis der symbiotischen Zusammenarbeit von Raphael und Benoit könnte auch Mr. Picouto glücklich machen - vielleicht lädt er sie ja zum Mittagessen ein!