Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

TYPO3 Neos Grundkurs

Syntax und Semantik

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Templating in Neos gelingt mittels unterschiedlicher Technik. In diesem Film erhalten Sie einen kurzen Überblick über TypoScript, Eel, FlowQuery und Fizzle.

Transkript

Wie in den meisten anderen CM Systemen auch, wird für die Erstellung von Vorlagen in Neos auf das sogenannte Templating zurück gegriffen Wir erstellen also Vorlagen, die beim Aufruf im Browser erst mit konkreten Inhalten gefüllt werden. Beim Templating in Neos begegnen uns immer wieder Begriffe die ich hier in Kurzform erläutern möchte. Im Wesentlichen besteht das Templating in Neos aus zwei Komponenten. Zum Einen TypoScript (2) und zum Anderen Fluid. Typoscript ist keine neue Erfindung, sondern wurde mit Typo3 CMS entwickelt und ist nicht wirklich eine Programmiersprache sondern man gliedert vielmehr Informationen und Verarbeitungsanweisungen die erst später dann durch weitere Scripte umgesetzt werden. TypoScript gibt uns die Möglichkeit ein und den selben Inhalt auf unterschiedliche Art und Weise in Abhängigkeit vom Kontext darzustellen. Mit Fluid erstellen wir unsere Vorlagendatein. Dabei verwenden wir reguläre HTML Tags aber auch spezielle Fluid Tags. Wie so etwas aussehen kann sehen wir auf der nächsten Folie. Auf der linken Seite sehen wir ein TypoScript Objekt "Seite" vom Typ "Page". Dieses Objekt hat zwei Eigenschaften. Zum Einen den Template path der mit Standart.html belegt ist, wir laden also eine Datei "Standart.html" und eine Eigenschaft "Text" in der wir einen String abgelegt haben, inklusive HTML Tags. Auf der rechten Seite sehen wir den Inhalt wie er in Standart.html vorkommen könnte. Ein reguläres HTML Tag, der "div"-Container. Innerhalb des Containers sehen wir ein weiteres Tag, "f:format.raw". Dies ist ein sogenannter "Viewhelper". Und innerhalb dieses Viewhelpers sehen wir die variablen Notationen von Text. An der Stelle der Variable Text wird später beim Verarbeiten der String "Hallo Welt" eingefügt, inklusive der "b" Tags für "fett" als Eigenschaft. Der Viewhelper format.raw gibt dem Renderer die Anweisung, dass der Inhalt der variable Text so wie er ist übernommen werden soll. Würden wir den Viewhelper nicht außen herum notieren, würden wir die Tags im Text auf der Website sehen. Ein Viewhelper übergibt also Anweisungen zum Rendern des Templates, oder Teilen davon. Unterhalb der Tag Notation des Viewhelpers sehen wir die sogenannte Inlinenotation. Die zweite Zeile bewirkt exakt dasselbe wie die erste Zeile, unsere Variable "Text" wird innerhalb des Containers ausgegeben. Allerdings wird die diesmal der Viewhelper format.raw inline auf die Variable angewendet. TypoScript alleine kann nicht besonders viel. Wir können lediglich Informationen oder Werte zuweisen, Typen zuweisen und Verarbeitungsanweisungen übergeben. Damit wir aber eine gewisse Flexibilität erhalten, wurden drei weitere Komponenten in TypoScript zur Verfügung gestellt. Zum Einen "EEL", dann "FlowQuery" und als drittes "Fizzle". Sehen wir uns diese drei Komponenten einmal etwas näher an. Zum Einen "EEL", die die Embedded Expression Language. Sie ist ein Baustein zur Erstellung von domainspezifischen Sprachen. TypoScript wird um Ausdrücke erweitert, also wir können nicht nur einfache Werte und typen zuweisen, sondern auch komplexe Ausdrücke. Die Ausdrücke werden in TypoScript in geschweiften Klammern gekapselt, beginnend mit dem Dollarzeichen So ein Ausdruck könnte wie folgt aussehen. Wir weisen der Eigenschaft "Text" nun die Eigenschaft eines Knotens zu. Dies heir ist eine abstrakte Darstellung. Das bedeutet, mit Knoten.Eigenschaft übergebe ich den Wert der im aktuellen Kontext des Knotens in der Eigenschaft steht. Wenn ich mich also auf einer Seite befinde, würde von dieser speziellen Seite die Eigenschaft an den Text übergeben. Auf einer anderen Seite würden wir eine andere Eigenschaft erhalten. Bei "FlowQuery" ist die Syntax abgeleitet von jQuery. Wer jQuery kennt, dem wird das sehr bekannt vorkommen. Im Grunde verarbeitet FlowQuery kontextsensitive Eel-Inhalte zum Beispiel Knoten, wie bereits auf der vorhergehenden Folie erwähnt. Hier sehen wir ein Beispiel für FlowQuery. In diesem Fall wird an die Eel-Funktion "q das Attribut "node" übergeben, also der aktuelle Knoten. Mit der Funktion "q" erhalten wir ein FlowQuery Objekt zurück. Mit ".children" können wir aus dem aktuellen Knoten alle "Kinderelemente" abholen und mit ".first" sagen wir das wir das erste dieser Elemente erhalten möchten und mit ".property" erhalten wir in diesem Fall die Titeleigenschaft des ersten dieser Elemente unseres aktuellen Knotens. Wie erwähnt, "q" ist die Funktion die in Eel definiert worden ist. Node ist der kontextsensitive Eel-Inhalt. Und mit der Punktverkettung arbeite ich mit FlowQuery und frage entsprechende "Kindelemente" oder Eigenschaften meines nodes ab. Mit "Fizzle", welches durch die Selektorsyntax in CSS inspiriert ist stehen mir Filter-Operationen zur Verfügung. Damit kann ich in FlowQuery auf bestimmte Gegenbenheiten prüfen. zum Beispiel wie wir es hier sehen, der aktuelle Knoten, ich möchte alle Kindelemente davon haben, welche die Eigenschaft "hidden" nicht auf "true" gesetzt haben und ich möchte die Anzahl davon haben. Also die Anzahl aller Kindelemente meines aktuellen Knotens, welche die Eigenschaft "hidden" nicht auf "true" gesetzt haben. Soweit zu den Begrifflichkeiten die uns im Bereich Templatings begegnen werden.

TYPO3 Neos Grundkurs

Entdecken Sie die Konzepte und grundlegenden Technologien des modernen Content Management Systems und sehen Sie, wie Sie eigene Projekte starten.

Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!