In diesem Kapitel werden die Fusion-Grundlagen anhand von funktionierenden Beispielen vertieft.
Es war einmal ein Fusion-Objekt, dessen Aufgabe es war, Inhalte zu rendern. Der Name dieses Objekts lautete Neos.Fusion:Component.
Das Objekt Neos.Fusion:Component hat die Property renderer. Alles, was hier eingesetzt wird, kommt auf den Bildschirm. Zusätzlich übernimmt das Objekt die Arbeit, Properties in den Fusion-Context zu stecken. Unsere Properties finden wir automatisch über das props-Objekt im Context wieder.
So einen renderer hätten wir auch gern für unseren Button. Und das können wir auch kriegen, indem wir einfach von Neos.Fusion:Component erben. Das sähe in Fusion so aus:
prototype(Button) < prototype(Neos.Fusion:Component) {
[...]
}
Aber nur weil wir von Neos.Fusion:Component erben, heißt es noch lange nicht dass wir fertig sind. Nicht vergessen, wir müssen in unserer neu erworbenen renderer-Property noch einen Wert geben!
Überlegen wir hierzu einmal was unser gewünschter Output in HTML wäre...
<a href="http://example.com/contact">
<button style="background-color: #ff9999">
Jetzt Kontakt aufnehmen
</button>
</a>
Und ja, das ließe sich als String so in die renderer-Property reinschreiben und wir würden auch etwas zu sehen bekommen. Aber so zu arbeiten, würde sehr schnell, sehr hässlich werden. Die korrekte Weise wäre andere Fusion-Objekte zuhilfe zu nehmen.
Vorgestellt: Neos.Fusion:Tag ‒ das Fusion-Objekt für HTML-Tags!
Folgende Properties sind für das Neos.Fusion:Tag-Objekt am relevantesten:
Bauen wir also unseren Button um:
prototype(Button) < prototype(Neos.Fusion:Component) {
farbe = "#ff9999"
text = "Jetzt Kontakt aufnehmen"
link = "http://example.com/contact"
renderer = Neos.Fusion:Tag {
tagName = "a"
attributes.href = ${props.link}
content = Neos.Fusion:Tag {
tagName = "button"
attributes.style = ${"background-color: " + props.farbe}
content = ${props.text}
}
}
}
Siehe da, unser Button zeigt sich. Man beachte wie für den Inhalt des a-Tags ein button-Tag erstellt wurde und wie auf die Properties mit dem props Objekt im Fusion-Context zugegriffen wurde.
Zugegeben, das sieht einfach überhaupt nicht aus wie HTML… Aber unser Output ist tatsächlich der HTML-Code von oben, darüber kann man sich auch in den Entwicklertools versichern.
Um es schon mal vorweg zu nehmen: Mit AFX lässt sich auch direkt im Fusion-Code eine HTML- bzw. JSX-Ähnlichen Syntax verwenden. Dies wird sogar als best practice angesehen und später benutzen wir immer mehr AFX. Bevor man sich aber direkt in AFX stürzt, ist es empfehlenswert erstmal Fusion ohne AFX zu verstehen.
Einen Überblick aller Fusion-Prototypes gibt es in den Neos-Docs. Dort wird man auch erkennen, dass Neos.Fusion- und Neos.Neos-Objekte aufgelistet sind. Einige Prototypes scheinen sich auch zu wiederholen, jedoch gibt es durchaus Unterschiede, auf die später auch eingegangen werden. Generell kann man aber vorab sagen, dass Prototypes unter Neos.Neos, für die Verwendung in Neos-Installationen “maßgeschneidert” sind.
Weitere Fusion-Prototypes werden im weiteren Verlauf aber auch hier vorgestellt.
Prototypes lassen sich überschreiben und erweitern. Machen wir an dieser Stelle ein zweites Beispiel, in der ein anderer wichtiger Prototype vorgestellt wird: Neos.Fusion:Join. Wir sehen uns auch an, wie ein Prototype überschrieben wird.
Mal angenommen wir wollen eine Liste mit Buttons rendern. Was würden wir in die renderer-Property schreiben? Wir brauchen vermutlich so etwas wie ein Array oder eine Liste. Um Fusion-Objekte nacheinander auf einer Ebene zu rendern gibt es den Prototype Neos.Fusion:Join.
Werfen wir dazu einen Blick auf diesen Fusion-Code:
prototype(ButtonList) < prototype(Neos.Fusion:Component) {
prototype(Button) {
link >
}
renderer = Neos.Fusion:Join {
blau = Button {
farbe = "#00aaff"
text = "Ich mach blau"
}
gelb = Button {
farbe = "#ffdd00"
text = "GELB"
}
rot = Button {
farbe = "#ff1100"
text = "Ich stehe am Anfang"
@position = "start"
}
@glue = Neos.Fusion:Tag {
tagName = "br"
}
}
}
Gehen wir kurz durch, was hier gemacht wurde.
Weitere Codeausschnitte folgen in den nächsten Kapiteln. Im nächsten Kapitel wollen wir etwas konkreter werden und das gelernte in Neos anwenden.