Ansichten sind Darstellungselemente, die sich auf Seiten platzieren lassen.
Aufbau
Eine Ansicht sollte sich innerhalb der Ordnerstruktur einer App immer im Namespace "View" befinden, bspw. lautet der Ordner für die Ansicht "Text / Bild":
plugin/remote/brandbox/cms-layout-standard/src/View/Tile
...
Seiten aufbauen im CMS-Designer
Seiten aufbauen im CMS-Designer
Engine.php
Diese Datei liegt direkt im Paketordner und stellt die öffentlichen Endpunkte für die Ansichten bereit. Ein Endpunkt entspricht einer öffentlichen Methode in dieser Datei.
Codeblock | ||||
---|---|---|---|---|
| ||||
public function tile($viewID)
{
$paragraph = new FrameworkStyleguide\Entity\FrameworkParagraph();
$paragraph->content = new FrameworkStyleguide\StringSafe('Hello World');
return [
'paragraph' => $paragraph
];
} |
config.json
...
Diese Konfigurationsdatei im JSON-Format vergibt wichtige Parameter für platzierbare Views:
...
Hier beispielhaft der Inhalt der config.json für "Text / Bild":
Codeblock | ||
---|---|---|
| ||
{
"coreType": "cms-core",
"friendlyName": {
"de": "Text / Bild",
"en": "Text / Image"
},
"depends":
["Theme/DefaultCms"]
}
|
view.hbs
...
Diese Datei regelt den HTML-Inhalt der Ansicht. In ihr können Partial-Calls aus dem verwendeten Styleguide platziert werden.
Außerdem können Styleguide-Elemente, die in einem zugehörigen öffentlichen Endpunkt in der Engine.php (siehe oben) aufgebaut wurden, platziert werden. Dieser Endpunkt wird beim Aufbau der Seite, auf der die Ansicht platziert wurde, automatisch aufgerufen.
Der Endpunkt ist eine öffentliche PHP-Methode mit dem Endpunkt-Namen als Methode und muss einen Array mit benamten Array-Keys zurückgeben, denen Styleguide-Elemente zugeordnet werden:
Am Beispiel "Text / Bild" (vgl. oben Engine.php):
"paragraph" steht in der view.hbs über die serve-Variable zur Verfügung:
Codeblock | ||||
---|---|---|---|---|
| ||||
{{{ compile serve.paragraph }}} |
Ermittlung des Endpunkt-Namens
...
Abhängigkeitskette für die Zuordnung von Ansichten zu Theme-Paketen
Wie oben beschrieben werden Ansichten über den Parameter "depends" in der config.json zu Theme-Paketen zugeordnet.
Das Theme-Paket einer Seite ergibt sich aus dem dort gepflegten Template.
Nicht jede Ansicht ist mit jedem Theme-Paket kompatibel. Um zu verhindern, dass nicht kompatible Ansichten im CMS-Designer platziert werden, werden nur kompatible Ansichten zum Platzieren angeboten.
Die Kompatibilität zu einem Theme-Paket wird über den Parameter "depends" in der config.json ausgedrückt. Es ist allerdings auch möglich, ein Theme-Paket in Abhängigkeit zu einem anderen zu setzen. In diesem Fall werden die aus dieser Abhängigkeit resultierenden Ansichten als kompatibel betrachtet.
Diese Logik findet Verwendung beim Theme-Paket "Theme/DefaultShop". Dort wird in der config.json des Pakets eine Abhängigkeit zu Theme/DefaultCms definiert. Damit sind auf einer Seite, die ein Template von Theme/DefaultShop verwendet, auch alle Ansichten platzierbar, die über den Parameter "depends" in der config.json der Ansicht dem Theme-Paket "Theme/DefaultCms" zugeordnet sind.
Codeblock | ||
---|---|---|
| ||
{
"friendlyName": {
"de": "Default Shop Theme",
"en": "Default Shop Theme"
},
"depends": ["Theme/DefaultCms"]
} |
...
Hierarchische Struktur
Im CMS-Designer stehen 3 Typen von Ansichten zur Strukturierung einer Seite zur Verfügung:
Seitenelemente
- Können nur als direktes Kindelement der Seite platziert werden
- Dienen zur Strukturierung auf oberster Ebene
- Es wird mindestens ein Seitenelement auf einer Seite benötigt, da Inhaltselemente nur innerhalb von Seitenelementen angelegt werden können
- Können nicht innerhalb von Abschnittselementen oder Inhaltselementen angelegt werden
- Werden im Designer blau dargestellt
Abschnittselemente
- Dienen zur Anordnung von Inhaltselementen in einem definierten Layout
- Können nur Inhaltselemente enthalten
- Können nur in Inhaltselementen platziert werden, für die dies erlaubt ist
- Werden im Designer grün dargestellt
- Das einzige in brandbox standardmäßig ausgelieferte Abschnittselement heißt "Container / Spalte" und kann in den Inhaltselementen "Container" und "Akkordeon" platziert werden
Inhaltselemente
- Dienen zur Darstellung von Inhalten
- Können in Seitenelementen oder Abschnittselementen platziert werden
- Werden im Designer schwarz dargestellt