Codelevel X logo
QR Barcode
Homex86-ProgrammierungProjekteTYPO3
Suche
>> HomeTYPO3 > TypoScript Einführung

TYPO3



Einführung in TypoScript

Das PAGE Objekt

Das PAGE Objekt ist die Basis von TypoScript. In dem recht kurzen Beispiel Template (2-Zeiler) wurde bereits das PAGE Objekt benutzt, ohne dieses näher zu erklären bzw. die Grundprinzipien von TypoScript. Das Grundprinzip ist relativ einfach. TypoScript ist Objektorientiert, kennt also im Grunde nur Objekte und Eigenschaften, in engen Grenzen auch Bedingungen und Stringmanipulationen. Aufgebaut ist der Kern von TYPO3 in PHP, wo die Definitionen in TypoScript in multidimensionale Arrays eingelesen und sortiert werden. Betrachten wir das einfache Sample Skript in unserem Template einmal näher:

page=PAGE
page.100 < styles.content.get

Hier wird zunächst ein Objekt mit dem Namen page (klein geschrieben) vom Typ PAGE (groß geschrieben) erstellt. Das Objekt PAGE ist sozusagen die zu rendernde Seite. Wenn Objekte mit gerendert werden sollen oder zusätzliche Objekte, so ist das PAGE Objekt zu ergänzen.

Am Anfang ist das PAGE Objekt leer und in der nächsten Zeile wird ein Objekt mit der Nummer 100 zugefügt und dem Inhalt styles.content.get. Die Nummer 100 ist willkürlich gewählt und die Objekte werden in der Reihenfolge der Nummern auf der Seite ausgegeben. Genau genommen wird das PAGE Array vor der Ausgabe sortiert. In diesem Sinne wird darauf hingewiesen, dass für die Ausgabe ausschließlich die Nummer verwendet wird. Wenn ich nach page.100 in der nächsten Zeile ein neues Objekt mit page.90 definiere, wird dieses Objekt vor dem 100er Objekt ausgegeben. Man verwendet üblicherweise 10er Schritte um ggf. dazwischen Objekte einfügen zu können, ohne alle Nummer neu zu editieren.

Auch lassen sich Objekte mehrfach verwenden, mit folgendem TypoScript wird zum Beispiel der Content einer Seite einfach doppelt angezeigt:

page=PAGE
page.100 < styles.content.get
page.110 < styles.content.get

TYPO3 Inhaltselemente (cObject)

Am Anfang arbeitet man erstmal mit den sogenannten Inhaltsobjekten. Daneben gibt es unter TYPO3 noch sog. Toplevel Objekte die eher Konfigurationscharacter haben und auf die in Tutorials noch näher eingegangen wird. Zunächst geht es ja mal um die Darstellung einer Seite. Die wohl wichtigsten Objekte sind TEXT, IMAGE und COBJ_ARRAY (auch COA genannt) sowie das bereits kennengelernte CONTENT Element.

Weitere wichtige Elemente sind HMENU für die Erzeugung einer Navigation oder auch einer Breadcrumb (Pfadangabe innerhalb einer Pagestruktur zu Orientierung), FILE für die Integration einer Datei in eine Webseite, TEMPLATE für die Arbeit mit Templates (also besonderen Files) und FORM für die Erzeugung und Verwendung von Formularen.

Darüberhinaus werden auch noch häufig die Objekte CASE, RECORDS, IMGTEXT und MULTIMEDIA verwendet, um z.B. die automatische Darstellung des CONTENT zu verändern. Auf das Objekt CLEARGIF sollte man möglichst gänzlich verzichten, es ist nur der Vollständigkeit halber erwähnt. Formatierungen im Layout sollten möglichst per CSS erfolgen und nicht über ein unsichtbares Pixel, das in Breite und Höhe manipulierbar ist über das Objekt CLEARGIF. Aber in der Not frisst der Teufel fliegen und ich bin mir sicher, dass diese Klasse nicht zu selten im Einsatz ist. :-)

Eine vollständige Auflistung aller Inhaltsobjekte findet man hier:

http://www.typo3.net/tsref/cobject/

TypoScript TEXT Element

Fangen wir mal mit dem einfachsten und auch zugleich häufigstem Element an, das TEXT Element. Es wird verwendet um TEXT in der PAGE Ausgabe zu generieren. Das können statische Texte sein, Kontextinformationen wie z.B. ein Seitentitel oder eine Überschrift oder auch einfach nur HTML Anweisungen, DIV oder SPAN Elemente zum Beispiel. Die einfachste Definition sieht so aus wie das Default Template aus TYPO3 mit Hello World.

page.includeCSS.file1=fileadmin/css/codelevelx.css
page=PAGE
page.10=TEXT
page.10.value=Hello World
page.100 < styles.content.get

An dieser Stelle ist es hilfreich das Template immer im Template Editor zu bearbeiten, weil dort Kontexthilfe angeboten wird, man also beim Tippen die verfügbaren Attribute angezeigt bekommt (nach dem "." z.B.) und es ein Syntax Highlighting gibt, man also Schreibfehler schneller erkennen kann. Und durch die Kontexthilfe muss man nicht ständig in der Dokumentation lesen.

Oben wird also ein Objekt mit Nummer 10 vom Typ TEXT mit dem Inhalt "Hello World" angelegt und vor dem CONTENT (page.100) angezeigt. Jetzt ist das vielleicht nicht so wahnsinnig hilfreich weil so ein Hello niemand wirklich braucht, aber nehmen wir mal ein anderes Beispiel mit einem Copyright Hinweis nach dem Content. Das findet man eigentlich recht häufig und ist meistens statisch.

page.includeCSS.file1=fileadmin/css/codelevelx.css
page=PAGE
page.10=TEXT
page.10.value=Hello World
page.100 < styles.content.get
page.900=TEXT
page.900.value=(C)opyright by Musterfirma

Häufig gebraucht werden Felder aus der Datenbank die in der Seite angezeigt werden sollen, z.B. der Titel der Seite (title) oder auch der Untertitel (subtitle). Häufig ist der Untertitel der Seite sinnvoller in der Darstellung weil man hier einen "ausführlichen" Seitentitel eintragen kann während der Standard Seitentitel eher in der Navigation verwendet wird und recht knapp aber aussagekräftig formuliert ist. Um das folgende Beispiel zu verwenden, sollte man in der Testseite daher unter "Seite bearbeiten" (rechte Maustaste) die entsprechenden Felder beschreiben.

page.includeCSS.file1=fileadmin/css/codelevelx.css
page=PAGE
page.10=TEXT
page.10.field=title
page.20=TEXT
page.20.field=subtitle
page.100 < styles.content.get
page.900=TEXT
page.900.value=(C)opyright by Musterfirma

Jetzt ist die Ausgabe des Tempaltes oben noch nicht wirklich überzeugend. Die beiden Felder werden im Browser nacheinander ausgegeben und zusammengeschrieben und das sieht nicht besonders schön aus. Formatieren wir die Ausgabe noch etwas durch folgenden Code, der allerdings zum besseren Verständnis nur auszugsweise dargestellt ist:

page.10=TEXT
page.10.field=title
page.10.textStyle.face.default=Verdana
page.10.textStyle.size.default=7
page.10.wrap=|<br />
page.20 < page.10
page.20.field=subtitle
page.20.textStyle.size.default=5

Hier wird das Objekt 10 in der PAGE noch um die Angabe der Schriftart und der Schriftgröße erweitert (textStyle) und es wird ein Zeilenumbruch nach dem Titel eingefügt. Das macht die Funktion wrap. Dabei wird ein beliebiger Text um das eigentliche Element herumgewickelt. Das Element wird durch das Pipe Symbol | dargestellt und es kann davor und danach ein beliebiger Text stehen.  In diesem Falle folgt einfach nur ein Zeilenumbruch (branch, <br />).

Eine weitere Neuerung kommt jetzt mit der Definition des zweiten TEXT Elements unter 20. Hier erfolgt mit dem Pfeil nach links (<) eine Zuweisung. Es wird eine Kopie von Element 10 angelegt. Innerhalb dieser Kopie können einzelne Elemente wieder verändert werden wie z.B. das zugewiesene Feld (subtitle) und die Veränderung der Schriftgröße. Die anderen Definitionen wie Schriftart und der Zeilenumbruch brauchen nicht wiederholt zu werden, sondern werden von der Definition des TEXT Elements 10 übernommen. Das spart unter Umständen einen Haufen Schreibarbeit, aber vor allem ermöglicht es ein objektorientiertes Konzept. Wenn die Schriftart in Objekt 10 verändert wird, verändert sie sich automatisch in alle abgeleiteten Objekte.

Verwendung von CSS Containern mit TEXT Objekten

Um die Webseite nachzubilden mit einem Header, einer Navigation links, dem Main Content rechts und einem Footer benötigt man im Grunde 3 CSS Klassen und ein paar TEXT Objekte in TypoScript. Schon ist ein Basis Template fertiggestellt. Hier werden folgende CSS Definitionen verwendet:

.container_all,  {
  margin-left: auto;
  margin-right: auto;
  margin-top:0;
  margin-bottom:0;
  width: 960px;
  font-family: verdana;
  font-size: 13px;
  text-align: left;
  background-color: #314d63;
}

.container_left, .container_right {
  margin: 0;
  border: 0;
  padding: 0;
  text-align: left;
  vertical-align:top;
  height: 400px;
}

.container_left {
  background-color: #8caebd;
  width: 190px;
  float:left;
}

.container_right {
  width: 750px;
  min-width: 750px;
  float:right;
}

Mit dem folgenden TypoScript bauen wir hier als Beispiel ein Gerüst für ein Template auf:

PageContainerAll=TEXT
PageContainerAll.wrap=<div class="container_all">|</div>
PageContainerLeft=TEXT
PageContainerLeft.wrap=<div class="container_left">|</div>
PageContainerRight=TEXT
PageContainerRight.wrap=<div class="container_right">|</div>
PageContainerMain=COA
PageContainerMain {
  10 < PageContainerLeft
  20 < PageContainerRight
  wrap=<div class="container_all">|</div>
}

PageContainerTop < PageContainerAll
PageContainerTop.value=<br />SEITENKOPF<br />
PageContainerMain.10.value=LINKS/NAVI
PageContainerMain.20.value=RECHTS/CONTENT
PageContainerFoot < PageContainerAll
PageContainerFoot.value=<br />SEITENFUSS<br />

page.50 < PageContainerTop
page.60 < PageContainerMain
page.70 < PageContainerFoot

Die Klassendefinitionen sind ganz oben im CSS Block definiert als eine Klasse für den Seitenkopf und Seitenfuss mit 960 Pixel Breite und mittig im Browser zentriert und mit Hintergrundfarbe dunkelblau. Dieselbe CSS Klasse wird auch für den Seitenfuss genommen und die beiden Klassen für die Navigation und dem Content werden ebenfalls in die Klasse container_all zusammengepackt.

Da das sinnvolle Zusammensetzen der Klassen direkt im PAGE Objekt etwas mühsam ist, haben wir hier mehrere eigene Objekte definiert vom Typ TEXT. Die Grunddefinitionen legen nur den Typ TEXT fest ohne einen Wert für Value anzugeben, das wird später erst bei der Referenzierung gemacht.

Eine Besonderheit ist die Definition der Klasse PageContainerMain. Diese ist vom Typ COA. COA ist die Abkürzung für Content Object Array, auch COBJ_ARRAY in der TYPO3 Dokumentation genannt. Es ist ein Element, dass beliebige andere Elemente enthalten kann, in diesem Fall 2 Textobjekte für die Navigation (links) und den Content (rechts).

Im nächsten Anweisungsblock werden die Typen verwendet um diese mit Daten zu füllen. PageContainerTop und  PageContainerFoot sind vom Typ PageContainerAll und werden jeweils mit einem Beschreibungstext gefüllt. Der PageContainerMain besteht aus 2 Elementen, Element 10 mit dem Navigationsinhalt und Element 20 mit dem Contentinhalt. Beider werden auch mit Beschreibung gefüllt (in der Praxis wird einfach die echte Navigation oder der echte Content dort reingeschrieben.

Damit die Elemente sichtbar werden, müssen sie im PAGE Objekt auch referenziert werden, hier als page.50, page.60 und page.70. Das ist ein Beispiel für objektorientierte Umsetzung mit TypoScript und Erzeugung eines Templates ohne ein Template zu benutzen. Im Grund ist alles einfacher als gedacht, oder ?

Bedeutung von value, field und data im Objekt TEXT

In den Beispielen oben sind bereits Anwendungsmöglichkeiten für die Nutzung des TEXT Objekts mit einfachen Strings als value oder die Nutzung von Datenbankfeldern als field aufgelistet. Ein Seitentitel ist letztlich ein Datenbankfeld der aufgerufenen Seite. Es gibt noch eine dritte Variante für die Verwendung von globalen Variablen und speziellen Funktionen mit dem Attribut data. Bei der Anzeige hat value die kleinste Priorität und field die höchste. Das heißt letztlich wird nur ein Wert ausgegeben, entweder field oder data oder value (in dieser Reihenfolge).

Hier folgt ein Beispiel für die Verwendung von einem TEXT Objekt mit data, mal wieder was Sinnvolles. Ein Copyright Hinweis mit der aktuellen Jahreszahl. Dazu wird ein Date Objekt in data geladen und formatiert und der Copyright Text mit wrap erzeugt, mit der Jahreszahl in der Mitte.

CopyRight=TEXT
CopyRight.data=date:U
CopyRight.strftime=%Y
CopyRight.textStyle.face.default=Verdana
CopyRight.textStyle.size.default=2
CopyRight.wrap=(C)opyright | by Musterfirma

page.900 < CopyRight

Die Funktion strftime mit Parameter %Y filtert aus dem Datum nur die Jahreszahl heraus. Mit wrap wird die Jahreszahl dann zwischen dem Copyright-String gesetzt (das Pipe Symbol | ist die erzeugte Jahreszahl). Um das Objekt CopyRight anzuzeigen, wird dieses noch im PAGE Objekt referenziert. Wenn man sich das Ergebnis betrachtet, wird man allerdings einen kleinen Schönheitsfehler feststellen.

Die Leerzeichen zwischen den beiden Textteilen und der Jahreszahl werden nicht ausgegeben und der Text klatscht direkt an der Zahl. Die normale wrap Funktion entfernt nämlich alle Leerzeichen rechts und links und in diesem Falle auch rechts und links vom eigentlichen Element (der Jahreszahl). Um das zu ändern gibt es eine spezielle Funktion noTrimWrap, mit der die Leerzeichen zwischen den beiden äußeren Markierungen erhalten bleiben. Dazu bedarf es dann 3 Pipe Zeichen, das mittlere für den Content und rechts und links für die Begrenzung des Text Strings. Der geänderte Code sieht dann so aus:

CopyRight=TEXT
CopyRight {
  data=date:U
  strftime=%Y
  textStyle {
    face.default=Verdana
    size.default=2
  }
  noTrimWrap=(C)opyright | by Musterfirma
}

page.900 < CopyRight

Gleichzeitig mit der Änderung der Funktion wird hier noch eine geänderte Schreibvariante vorgestellt. Da alle folgenden 5 Funktionen sich auf das Objekt CopyRight beziehen, kann man sich die ständige Wiederholung des Objektnamens sparen und durch die geschweiften Klammern alle Funktionen und Attribute implizit auf das Objekt beziehen. Gleiches wurde innerhalb des Objekts nochmals für textStyle wiederholt. Die Schreibweise schafft auch durchaus mehr Übersicht und sollte von allen TYPO3 Entwicklern so angewendet werden.

Die Beispiele waren hoffentlich verständlich, zum Teil vielleicht auch nützlich, manchmal auch ein bischen konstruiert wie das Beispiel mit der FONT Formatierung. Hier ging es mehr darum, die Funktionsweise der Operatoren zu verdeutlichen. Es sollte bitte niemand TEXT Attribute wie Schriftart, Schriftgröße, Schriftfarbe hart in TypoScript codieren, da solche Webseiten dann schlecht zu warten sind bei eventuellen Änderungen (neues CI).

Seit mittlerweile fast 10 Jahren wird CSS zumindest in der Version 1 inklusive Schriftdefinitionen von den gängigen Browsern unterstützt. Mittlerweile sind die meisten Optionen in CSS2 auch einigermaßen konform umgesetzt, auch wenn der IE historisch bedingt schon immer Schlusslicht war bei der Umsetzung und viele Besonderheiten und deren Workarounds ihm liebevoll das Attribut Quirksmodus beschert haben. Es bleibt zu hoffen, dass die Umsetzung von CSS3 demnächst besser wird. Die Integration der Font Tags hat daher rein historische Gründe (Abwärtskompatibilität), sollten aber eher als "deprecated" (überholt) betrachtet werden.


Für die Nutzung dieses Angebotes gelten die AGB, insbesondere der Haftungsausschluss.



AutorNewsFeedbackImpressumAGBDatenschutz
...