Testen Sie Scrivito 30 Tage lang kostenlos
Testen Sie Scrivito 30 Tage lang kostenlos

Seiten und Widgets anlegen und rendern

Seiten und Widgets anlegen und rendern

In einer auf Scrivito basierenden Webanwendung sind sowohl Seiten- und Widget-Klassen als auch deren Instanzen als React-Komponenten repräsentiert. Die Beispiele in dieser Anleitung machen von ES6 und JSX Gebrauch, jedoch funktionieren die hier beschriebenen APIs auch mit ES5 und ohne JSX.

Seitenkomponenten

Seiten sind Instanzen einer Scrivito-Objektklasse, die auf der Scrivito-Modellklasse Obj basiert. Um die Instanzen einer Seiten-Modellklasse zu rendern, benötigt man eine entsprechende Komponente. Hier zunächst ein einfaches Beispiel einer solchen Modellklasse:

import * as Scrivito from 'scrivito';

Scrivito.provideObjClass('BlogPostPage', {
  attributes: {
    title: "string",
    author: "string",
    body: "html",
  }
});

Um eine Komponente für eine solche Klasse zu definieren, steht die Funktion Scrivito.provideComponent zur Verfügung:

import * as React from 'react';
import * as Scrivito from 'scrivito';

Scrivito.provideComponent('BlogPostPage', ({ page }) =>
  <div>
    <h1>{ page.get('title') }</h1>
    <span>By: { page.get('author') }</span>
    <div>{ page.get('body') }</div>
  </div>
);

Seitenkomponenten können auch mit Zuständen („state“) umgehen und das gesamte React-Komponenten-API nutzen. Hierfür übergibt man Scrivito.provideComponent eine React.Component. Die Komponente erhält dann die anzuzeigende Seite als props.page.

Widget-Komponenten

Widget-Komponenten können analog zu Seitenkomponenten definiert werden:

import * as Scrivito from 'scrivito';

Scrivito.provideWidgetClass('HeadlineWidget', {
  attributes: {
    headline: "string"
  }
});

So wie Obj die Basisklasse aller Seitenklassen ist, ist Widget die Basisklasse aller Widget-Klassen. Scrivito.provideComponent wird auch zur Definition einer Widget-Komponente verwendet, die wie hier Instanzen einer HeadlineWidget-Klasse rendert:

import * as React from 'react';
import * as Scrivito from 'scrivito';

Scrivito.provideComponent('HeadlineWidget', ({ widget }) =>
  <h1>{ widget.get('headline') }</h1>;
);

Mehr ist nicht erforderlich! Ein HeadlineWidget wird nun mit dem obigen Markup gerendert.

Wenn Sie mit Hilfe von Reacts Komponenten-API mit Zuständen und Ereignissen arbeiten möchten, übergeben Sie Scrivito.provideComponent eine React.Component anstelle einer funktionalen Komponente. In diesem Fall wird das darzustellende Widget der Komponente mittels props.widget übergeben (siehe auch Seiteninhalte mit React-Komponenten anzeigen).

Inhalte bearbeitbar machen

Eines fehlt bei den obigen Beispielen für Komponenten noch: CMS-Inhalte werden zwar dargestellt, sie können jedoch nicht bearbeitet werden. Um dies direkt auf den Seiten zu ermöglichen, steht die Helper-Komponente Scrivito.ContentTag zur Verfügung. Setzen wir sie also in der obigen Widget-Komponente ein, um deren Instanzen bearbeitbar zu machen:

import * as React from 'react';
import * as Scrivito from 'scrivito';

Scrivito.provideComponent('HeadlineWidget', ({ widget }) =>
  <Scrivito.ContentTag tag="h1" content={ widget } attribute="headline"/>
);

Die Komponente Scrivito.ContentTag erwartet in content entweder eine Widget- oder eine Obj-Instanz sowie in attribute den Namen des Attributs, dessen Wert gerendert werden soll.

Voreingestellt rendert sie ein <div>-Tag mit der DOM-Repräsentation des Inhalts des angegebenen Attributs. Im obigen Beispiel wird ihr ein string-Attribut übergeben, wodurch die entsprechende Zeichenkette (in HTML-Darstellung) in den DOM aufgenommen wird.

Das auszugebende Tag kann mit Hilfe der Eigenschaft tag frei gewählt werden. Ferner kann auch die DOM-Repräsentation des Attributwerts beeinflusst werden, indem <Scrivito.ContentTag> mit Unterelementen versehen wird, etwa folgendermaßen:

<Scrivito.ContentTag content={ page } attribute="tags">
  { widget.get('tags').map(tag => 
      <span key={ tag }>
        { tag }
      </span> 
  }
</Scrivito.ContentTag>

Als Ergebnis würde ungefähr Folgendes gerendert werden:

<div><span>Tag 1</span><span>Tag 2</span></div>

Widgets ausgeben

Ein weiterer wichtiger Anwendungsfall für Scrivito.ContentTag ist es, Attribute vom Typ widgetlist zu rendern:

<Scrivito.ContentTag content={ myPage } attribute="myWidgetlist" />

In diesem Fall rendert Scrivito einfach alle Widgets in dem widgetlist-Attribut mit Hilfe der Komponenten, die für sie jeweils mit provideComponent registriert wurden.

Bilder ausgeben

Um Bilder leicht rendern zu können, stellt Scrivito die Komponente Scrivito.ImageTag zur Verfügung:

<Scrivito.ImageTag content={ myImageObj } />

Im Wesentlichen generiert diese Komponente das folgende Markup, das Sie natürlich auch selber eingeben könnten:

<img src={ myImageObj.get('blob').url } />

Im Gegensatz zum manuell angegebenen <img>-Tag macht die ImageTag-Komponente Bilder jedoch bearbeitbar, optimiert den Ladevorgang und skaliert die Bilder dynamisch 🇺🇸, damit sie schneller ausgeliefert werden können.

Über die optionale Eigenschaft attribute kann man auch den Namen eines Attributs vom Typ reference übergeben. Typischerweise werden Attribute dieses Typs in Image-Widgets verwendet, um auf das zu verwendende Bild zu verweisen. Ein einfaches Image-Widget könnte man so implementieren:

import * as React from 'react';
import * as Scrivito from 'scrivito';

Scrivito.provideWidgetClass('ImageWidget', {
  attributes: {
    image: "reference",
  }
});

Scrivito.provideComponent('ImageWidget', ({ widget }) => 
  <Scrivito.ImageTag content={ widget } attribute=”image” />
);

Zusammengefasst …

…basieren Seiten und Widgets auf Objekt- und Widget-Modellklassen. Objekt- und Widget-Instanzen werden von den dazugehörenden Komponenten gerendert. Typischerweise verwenden diese Komponenten Scrivito.ContentTag und andere Helper-Komponenten von Scrivito, um Seiten- und Widget-Attribute zu rendern und bearbeitbar zu machen.