4. Fusion-Grundlagen Teil 2
In diesem Kapitel werden die Fusion-Grundlagen anhand von funktionierenden Beispielen vertieft.
Rendering mit Fusion
Es war einmal ein Fusion-Objekt, dessen Aufgabe es war, Inhalte zu rendern. Der Name dieses Objekts lautete Neos.Fusion:Component.
Beispiel 1: Ein Button
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:
- tagName - Name des Tags, hat per Standard den Wert div
- content - Inhalt des Elements. Kann z.B. ein String-Wert oder ein anderes Fusion-Objekt, welches HTML zurückgibt, sein.
- attributes - Ein Objekt, welches die Attribute des Tags hält. Das sind Dinge wie “href”, “value”, “class” etc.
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.
Neos Entwicklerschulung für Agenturen und Entwickler
Fusion-Code mit HTML-Syntax
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.
Beispiel 2: Eine Liste (mit Buttons)
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.
- Es wurde der Prototype ButtonList erstellt.
- In diesem neuen Prototype wurde vom Button-Prototype, die link-Property geleert (“>“ Operator). Wird also nun innerhalb von ButtonList-Objekten, Button-Objekte erzeugt, haben die Button-Objekte diesen neuen Standardwert.
- Im renderer wird ein Neos.Fusion:Join-Objekt erzeugt.
- Über Key-Value-Paare werden Elemente eingereiht. blau, gelb und rot sind die Namen der Keys.
- Für die Values werden Objekte unseres Button-Prototypes erzeugt. Jeweils wurden die Properties text und farbe gesetzt.
- Der rote Button hat die zusätzliche @position-Property, damit kann sozusagen der Index verändert werden.
- Die @glue-Property gibt an, was zwischen den Elementen gerendert wird. Standardmäßig ist sie leer. Damit die Buttons aber untereinander gerendert werden, wurde ein Neos.Fusion:Tag-Objekt erstellt, welches ein <br /> generiert.
Weitere Codeausschnitte folgen in den nächsten Kapiteln. Im nächsten Kapitel wollen wir etwas konkreter werden und das gelernte in Neos anwenden.
