5. Ein funktionsfähiger NodeType
In diesem Kapitel wird zuerst das Projekt vorbereitet um den Fusion-Teil der NodeTypes zu schreiben und anschließend der Banner funktionsfähig gemacht.
Fusion mit Neos verwenden
Fusion-Dateien werden im Verzeichnis Resources/Private/Fusion unseres Site-Packages erwartet. Es bietet sich an, später weitere Unterordner zu erstellen.
In der Datei Root.fusion werden die Fusion-Dateien des Site Packages in Neos geladen. Den best practices zufolge soll die Root.fusion-Datei nur includes beinhalten. In der Regel reicht diese Zeile in der Root.fusion aus:
include: **/*.fusion
Außerdem sollte jede Fusion-Datei nur eine Prototype-Definition beinhalten.
Unser Banner-NodeType
Wie in den vorherigen Kapitel erwähnt wurde, rendern wir mit Fusion unsere NodeTypes. Erstellen wir dazu als nächstes eine Fusion-Datei.
In der Ordnerstruktur liegt bereits ein NodeTypes-Verzeichnis. Mit dem kann man Arbeiten, in diesem Projekt soll jedoch eine andere Ordnerstruktur verwendet werden. Im Fusion-Verzeichnis erstellen wir die Ordner "Component", "Content" und "Document". Aus dem NodeTypes-Ordner wird die Page.fusion ins Document-Verzeichnis verschoben und der NodeTypes-Ordner kann entfernt werden.
Damit unsere neue Ordnerstruktur erfasst wird, sollten wir in der Root.fusion die includes prüfen.
Wir erstellen dazu die neue Fusion-Datei Banner.Content.fusion im neuen Content-Verzeichnis.
Hier kann nun der Fusion-Code hinein. Zum testen lässt sich erst etwas statisches bauen. Die Fehlermeldung sollte nicht mehr auftauchen.
prototype(NeosTutorial.Site:Content.Banner) < prototype(Neos.Neos:ContentComponent) {
renderer = Neos.Fusion:Tag {
tagName = 'div'
content = 'Hier entsteht ein Banner!'
}
}Während der Dateiname uns überlassen ist, soll der Prototype den selben Namen wie unser NodeType (siehe die erste Zeile der YAML-Definition) haben, damit Neos die beiden Dateien einander zuordnen kann.
Wir erben auch nicht von Neos.Fusion:Component sondern von Neos.Neos:ContentComponent. Dieser Prototype funktioniert exakt so wie Neos.Fusion:Component, da Neos.Neos:ContentComponent selbst von Neos.Fusion:Component erbt.
Wenn wir aber NodeTypes in Fusion implementieren, verwenden wir Neos.Neos:ContentComponent, da dieser Prototype für Neos zusätzliche Meta-Informationen anhängt.
Neos Entwicklerschulung für Agenturen und Entwickler
Content und Component
Auch wenn jetzt Neos.Neos:ContentComponent benutzt wurde, werden wir Neos.Fusion:Component weiter verwenden, wenn wir Fusion-Prototypes in Content und Component aufteilen. Dazu kommen wir aber erst später.
Wenn wir statischen Inhalt wollten, könnten wir auch gleich eine Webseite in HTML schreiben. Wir wollen aber unsere Inhalte mit Neos pflegen und dabei die Tools benutzen die uns zur Verfügung stehen.
Im Fall des Banners soll der Text direkt inline bearbeitet werden können. Dazu gibt es praktischerweise den Prototype Neos.Neos:Editable. Mit diesem Objekt sieht unser Banner so aus:
prototype(NeosTutorial.Site:Content.Banner) < prototype(Neos.Neos:ContentComponent) {
renderer = Neos.Fusion:Tag {
tagName = 'div'
content = Neos.Neos:Editable {
property = 'text'
}
}
}Neos.Neos:Editable hat unter anderem die Property namens property. Diese gibt an, welche Property unseres NodeTypes inline editierbar sein soll. Wichtig: Es ist hier keine Fusion-Property gemeint, sondern eine Property, die unter dem properties-Schlüssel in der YAML-Datei des NodeTypes definiert wurde. In unserem Fall heißt sie text.
Schauen wir nun was sich im Backend getan hat:
Ab jetzt sind wir in der Lage NodeTypes zu bauen, die inline editiert werden können.
Im nächsten Kapitel geht es um das Styling von NodeTypes, bzw. der gesamten Seite.
