Startseite
jump to top

Startseite / Vorlagenentwicklung / ContentCreator / Funktionsumfang

Funktionsumfang des ContentCreator

Inhaltsverzeichnis

Der ContentCreator wurde als redaktionelle Ergänzung zur Projektentwicklungsumgebung FirstSpirit SiteArchitect entwickelt.

Ziel dabei ist es, die Arbeit mit FirstSpirit für Redakteure so einfach wie möglich zu gestalten und sie in die Lage zu versetzen, in kurzer Zeit bestehende, redaktionelle Inhalte zu pflegen und neue Inhalte anzulegen. Anders als im FirstSpirit SiteArchitect arbeitet der Redakteur dazu direkt in der Vorschau des Projektes im Browser und sieht so unmittelbar, wie sich seine Änderungen auf der Webseite auswirken.

Unterstützte Eingabekomponenten

Folgende Eingabekomponenten wurden im Rahmen der ContentCreator-Implementierung umgesetzt (siehe dazu auch jeweiliges Kapitel im Bereich Eingabekomponenten).

Wichtig Bei der Verwendung der Eingabekomponenten sind im Vergleich zur Verwendung im SiteArchitect Abweichungen im Funktionsumfang möglich (siehe auch Einschränkungen)!

Eingabekomponente

Funktion

CMS_INPUT_CHECKBOX

Mehrfachauswahl aus einer angezeigten Liste

CMS_INPUT_COMBOBOX

einfache Auswahl aus einer Dropdown-Liste (siehe auch Einschränkungen)

CMS_INPUT_DATE

Auswahl von Datum und / oder Uhrzeit

CMS_INPUT_DOM

formatierter Text mit Formatvorlagen, Aufzählungen und Verweisen (siehe auch Einschränkungen)

CMS_INPUT_DOMTABLE

Tabelle mit formatiertem Text inkl. Formatvorlagen und Verweisen (OHNE Zellenverschmelzung und -formatierung, inkl. DOM-Einschränkungen, siehe auch Einschränkungen)

CMS_INPUT_IMAGEMAP

Erstellen von verweis-sensitiven Grafiken (siehe auch Einschränkungen)

CMS_INPUT_LINK

Möglichkeit zum Anlegen und Bearbeiten von Verweisen

CMS_INPUT_LIST

Auswahl aus einer Menge an vorgegebenen Listeneinträgen

CMS_INPUT_NUMBER

Eingabe von Zahlen

CMS_INPUT_PERMISSION

Rechtedefinition für Benutzerrechte. Beim Einsatz der Komponente im ContentCreator existieren Einschränkungen, beispielsweise ist der Einsatz von Validierungsskripten nicht möglich.

CMS_INPUT_RADIOBUTTON

einfache Auswahl aus einer angezeigten Liste

CMS_INPUT_TEXT

einzeiliger Text ohne Formatierung

CMS_INPUT_TEXTAREA

mehrzeiliger Text ohne Formatierung

CMS_INPUT_TOGGLE

Umschaltung zwischen zwei vorgegebenen Werten

FS_BUTTON

Icon, Schaltfläche oder Verweis mit Funktionalität, die durch FirstSpirit-Skript oder Klasse zur Verfügung gestellt wird, siehe auch unten

FS_CATALOG

Liste von Absätzen oder Verweisen

FS_DATASET

Datensatzauswahl (siehe auch Einschränkungen)

FS_INDEX

Listen von Datensätzen, Daten aus externen Komponenten oder Modulen

FS_LIST

Liste von Absätzen, Datensätzen, Bildern usw.

FS_REFERENCE

Referenzauswahl

  

Unterstützte Gestaltungselemente

Folgende Gestaltungselemente im Formularbereich wurden im Rahmen der ContentCreator-Implementierung umgesetzt (siehe dazu auch Kapitel Gestaltungselemente):

Eingabekomponente

Funktion

CMS_COMMENT

Kommentierung einzelner Teile im Formularbereich einer Vorlage

CMS_GROUP

graphische Gruppierung von Eingabekomponenten als Gruppe. Im ContentCreator werden, im Unterschied zum SiteArchitect, die gruppierten Elemente unabhängig von der Definition des Parameters tabs nur im oberen Formularbereich (nicht an der Seite oder unten) als Register angezeigt. Die Parameter height und scrollable haben im ContentCreator keine Auswirkung.

CMS_LABEL

zur Angabe einer zusätzlichen Beschriftung in einem Formular. Im ContentCreator haben die Parameter size, bold und italic keine Auswirkung.

  

ContentCreator-spezifische Funktionalität

ContentCreator bietet gegenüber dem SiteArchitect erweiterte Funktionalität, die sich an Redakteure bzw. Vorlagenentwickler richtet und eine benutzerfreundliche Verschmelzung von Vorschau und Benutzeroberfläche zum Ziel hat.

Multi Perspective Preview

Das Multi Perspective Preview (MPP) ermöglicht die Ansicht einer Projekt-Webseite aus mehreren Perspektiven, die die Sicht eines Webseiten-Besuchers simulieren. Mit diesem Werkzeug ist es also möglich, Inhalte auf dynamischen Webseiten zu prüfen, die auf Geräteklassen, Zeit und Benutzereinstellungen reagieren.

Zum Beispiel kann die Vorschau so konfiguriert werden, dass sie die Ausmaße des Anzeigebereichs eines Smartphone-Bildschirms annimmt und so das Layout der Seiteninhalte in dieser kleineren Ansicht überprüft werden kann. Ebenfalls können über eine Zeitleiste sowohl zeitgesteuerte, erst ab einem in der Zukunft liegenden Datum sichtbare Inhalte als auch frühere freigegebene Versionen der Seite angezeigt werden. Durch eine spezielle Vorlage können auch projektspezifische Parameter eingebunden werden, die z. B. die Rolle oder gemeldete Geolocation eines Webseitenbesuchers definieren und dadurch Einfluss auf die in der Vorschau sichtbaren Inhalte nehmen können.

Dokumentation für Redakteure:
Handbuch für Redakteure (ContentCreator), Kapitel „Menüfunktionen / Historie-Bereich / Perspektive“

Multi Perspective Preview (MPP) (→Handbuch FirstSpirit SiteArchitect)

Dokumentation für Vorlagenentwickler:
MPP_API: JavaScript-API für Multi Perspective Preview

Dokumentation für Administratoren:
Optionen (→Dokumentation für Administratoren)

FS_BUTTON-Handler-Klassen

Um Projektentwicklern die Umsetzung komplexer Anwendungsfälle im Vorschaubereich zu ermöglichen, bietet der ContentCreator mehrere interne Java-Klassen an, die im Verbund mit der Eingabekomponente FS_BUTTON besondere, inhaltsbezogene Funktionen umsetzen.

Die nachfolgend aufgeführten Klassen unterstützen eine Verwendung sowohl in onClick- als auch in onDrop-Attributen von FS_BUTTON-Komponenten. Damit Drag-and-drop funktioniert, muss in der oder den Absatz- bzw. Tabellenvorlage/n, die zum Erstellen neuer Inhalte per Drag-and-drop verwendet werden soll/en, die Combobox Drop Editor auf dem Register „Eigenschaften“ der jeweiligen Vorlage geeignet konfiguriert werden.

Wichtig Hinweis: Innerhalb der Formularvorlage können die FS_BUTTON-Handler-Klassen über die Kurzform „class:KURZFORM“ angegeben werden (z. B.: onClick="class:NewSection" statt onClick="class:de.espirit.firstspirit.webedit.server.executables.NewSectionExecutable").

Absatz erstellen („NewSection“)

de.espirit.firstspirit.webedit.server.executables.NewSectionExecutable

Eine Klick-Aktion auf den FS_BUTTON löst die Anzeige einer Liste von Absatzvorlagen aus, die im (durch die Parameter) definierten Kontext (Seite und Inhaltsbereich) verfügbar sind. Nach Auswahl einer dieser Vorlagen durch den Benutzer wird ein Bearbeitungsdialog angezeigt, über den die Inhalte des neuen Absatzes verändert und gespeichert werden können. Ist nur eine Absatzvorlage im Kontext verfügbar, wird der Bearbeitungsdialog direkt angezeigt.

Bei einer Drop-Aktion auf den FS_BUTTON wird ein neuer Absatz angelegt, sofern

  • es nur eine passende Absatzvorlage gibt (muss für den jeweiligen Inhaltsbereich der Seite zugelassen sein und das Drop-Objekt muss kompatibel zum Drop Editor sein) und
  • der neu anzulegende Absatz keine speicherverhindernden Regelverletzungen (scope="SAVE") und
  • keine unausgefüllten Pflichtfelder (z. B. Parameter allowEmpty="no")

aufweist.

Ansonsten wird die Liste der zur Verfügung stehenden Absatzvorlagen oder der Bearbeitungsdialog des Absatzes angezeigt.

Hinweis: Das Erstellen eines neuen Absatzes ist auch programmatisch über das Interface NewSectionOperation (Package de.espirit.firstspirit.webedit.server, FirstSpirit Developer-API) möglich. Mit der Methode preselectedLanguage kann eine Sprache vorgegeben werden. Diese wird dem Redakteur beim Öffnen des Formulars als vorkonfigurierte Sprache zur Bearbeitung angezeigt. Wird keine Vorauswahl getroffen, wird die Sprache der Vorschau als Sprache zur Bearbeitung angezeigt. Wenn in der Vorauswahl eine Sprache gewählt wird, die im Projekt nicht konfiguriert ist, wird eine Fehlermeldung ausgegeben.

Parameter

Beschreibung

page

ID oder UID der Seite
Definiert die Seite, in die der neue Absatz eingefügt werden soll. Die Seitenvorlage wird in die Berechnung der in dieser Aktion verfügbaren Absatzvorlagen einbezogen.
Beispielwerte für den Parameter page:

  • 527
  • „gca_common_header“
  • #global.page.id

body

Anzeigename des Inhaltsbereichs
Spezifiziert den Inhaltsbereich, in dem der neue Absatz eingefügt werden soll. In Verbindung mit der Seitenvorlage definiert diese Angabe, welche Absatzvorlagen von dieser Aktion angeboten werden.

store

Inhalte-Verwaltung oder Globale Inhalte
Über diesen optionalen Parameter kann gesteuert werden, ob ein Absatz in einer Seite in der Inhalte-Verwaltung (Wert: pagestore) oder in den Globalen Inhalten (Wert: globalstore) angelegt werden soll, z. B.:
... "store":"globalstore" ...
Wird der Parameter nicht angegeben, wird die Inhalte-Verwaltung berücksichtigt.

reload

Partielles Nachladen
Über diesen optionalen Parameter kann die ID eines HTML-Elements übergeben werden, das nach dem Anlegen eines neuen Absatzes geladen werden soll. Standardmäßig wird nach dem Anlegen eines Absatzes immer die gesamte Seite neu geladen. Über den Parameter „reload“ wird nach dem Anlegen eines Absatzes versucht, nur das angegebene HTML-Element auszutauschen. Die ID eines HTML-Elements kann dabei folgendermaßen übergeben werden:
WE_API.Preview.reload("container")
wobei "container" der Bezeichner eines Elements ist, der über
<div id="container"> definiert ist.

  

Beispiel: Neuen Absatz anlegen (Inhalte-Verwaltung)
In der Formularvorlage wird einfach die gewünschte FS_BUTTON-Handler-Klasse (hier: onClick="class:NewSection") angegeben. Die Formularvorlage definiert die Darstellung des Buttons (label, style, icon) und die mit dem Button verknüpfte Aktion (hier: Absatz einfügen):

<FS_BUTTON
name="pt_createSection"
hidden="yes"
icon="fs:new"
onClick="class:NewSection"
style="firstspirit"
useLanguages="no">
<LANGINFOS>
<LANGINFO lang="*" label="Create section"/>
<LANGINFO lang="DE" label="Absatz anlegen"/>
</LANGINFOS>
</FS_BUTTON>

Im HTML-Vorlagensatz wird innerhalb einer $CMS_VALUE(...)$-Anweisung über die fsbutton(...)-Funktion der entsprechende HTML-Code gerendert. Dazu muss die Eingabekomponente (hier: „pt_createSection“) über den Pflichtparameter editorName angegeben werden. Als weitere Parameter werden die Seiten-ID (#global.page.id) und der Inhaltsbereich (hier: „Content center“) angegeben (weitere Beispiele siehe Funktion fsbutton(...)).

<span$CMS_VALUE(
fsbutton(
editorName:"pt_createSection",
parameter:{
"page":#global.page.id,
"body":"Content center"
}
)
)$></span>

Seite erstellen („NewPageExecutable“)

de.espirit.firstspirit.webedit.server.executables.NewPageExecutable

Eine Klick-Aktion löst die Anzeige des Dialogs „Neue Seite anlegen“ aus. Dem Benutzer stehen alle konfigurierbaren Einstellungen zur Verfügung, um die Seite zu benennen, ihren Speicherort zu definieren und eine passende Vorlage für Layout und ggf. Inhalte zu wählen.

Auch bei einer Drop-Aktion auf den FS_BUTTON wird der Dialog „Neue Seite anlegen“ geöffnet, und zwar wenn es sich beim gedroppten Objekt um eine FirstSpirit-Seite oder -Seitenreferenz handelt. Folgende Einstellungen sind im Dialog vorbelegt:

  • Namen: sprachabhängige Anzeigenamen der gedroppten Seite/nreferenz
  • Navigation: Menüpunkt unterhalb der aktuellen Seite anlegen
  • Layout: Layout und Inhalt der gedroppten Seite/nreferenz übernehmen

Mit diesen Einstellungen wird also eine Kopie der gedroppten Seite/nreferenz unterhalb der aktuellen Seite angelegt. Sie können aber in diesem Dialog vom Redakteur nach Bedarf geändert werden.

Parameter

Beschreibung

keine

  

Beispiel:

<span$CMS_VALUE(
fsbutton(
editorName:"pt_createPage"
)
)$></span>

Datensatz erstellen („NewContentExecutable“)

de.espirit.firstspirit.webedit.server.executables.NewContentExecutable

Eine Klick-Aktion löst die Anzeige des Dialogs „Neuer Datensatz“ aus, mit dem die Inhalte des neuen Datensatzes bearbeitet und folglich gespeichert werden können. Der in dieser Aktion erstellte Datensatz basiert auf der Tabellenvorlage der Datenquelle, die über den Parameter content2 angegeben wird.

Bei einer Drop-Aktion auf den FS_BUTTON wird in der Datenquelle, die über den Parameter content2 angegeben wird, ein neuer Datensatz angelegt, sofern

  • in der zugrundeliegenden Tabellenvorlage ein zum Drop-Objekt kompatibler Drop Editor konfiguriert ist und
  • der neu anzulegende Datensatz keine speicherverhindernden Regelverletzungen (scope="SAVE") und
  • keine unausgefüllten Pflichtfelder (z. B. Parameter allowEmpty="no") aufweist.

Ansonsten wird der Bearbeitungsdialog des neu anzulegenden Datensatzes angezeigt.

Parameter

Beschreibung

content2

ID oder UID einer Datenquelle
Gibt eine Datenquelle an. Die mit dieser Datenquelle verbundene Tabellenvorlage wird zur Erstellung des Datensatzes verwendet.

  

Beispiel:

<span$CMS_VALUE(
fsbutton(
editorName:"pt_createDataset",
parameter:{
"content2":"products"
}
)
)$></span>

Navigation bearbeiten („EditMenuExecutable“)

de.espirit.firstspirit.webedit.server.executables.EditMenuExecutable

Diese Klasse führt die ContentCreator-Funktion „Navigation bearbeiten“ aus, über die die Struktur des Projekts angepasst werden kann (d.h., Ordner der Struktur-Verwaltung können verschoben und die Menüreihenfolge verändert werden). Außerdem können über den Dialog die Menünamen der Struktur-Ordner bearbeitet werden.

Parameter

Beschreibung

node
(optional)

ID oder UID eines Elements der Struktur-Verwaltung
Gibt einen Struktur-Ordner oder eine Seitenreferenz an, die beim Öffnen des Dialogs „Navigation bearbeiten“ in der Baumansicht markiert sein soll.

  

Listeneintrag erstellen („NewListEntryExecutable“)

de.espirit.firstspirit.webedit.server.executables.NewListEntryExecutable

Diese Klasse steht für folgende Listen-Eingabekomponenten-Typen zur Verfügung:

und ermöglicht die Erstellung eines neuen Eintrages in diesen Eingabekomponenten.

Eine Klick-Aktion auf den FS_BUTTON löst die Anzeige einer Liste von Vorlagen aus, die in der durch den Parameter editorId definierten Listen-Eingabekomponente verfügbar sind. Nach Auswahl einer dieser Vorlagen durch den Benutzer wird ein Bearbeitungsdialog angezeigt, über den die Inhalte der Eingabekomponente eingegeben und gespeichert werden können. Ist nur eine Vorlage im Kontext verfügbar, wird der Bearbeitungsdialog direkt angezeigt.

Bei einer Drop-Aktion auf den FS_BUTTON wird ein neuer Listeneintrag angelegt, sofern

  • es nur eine passende Vorlage gibt, die aufgrund der Konfiguration (das Drop-Objekt muss kompatibel zum Drop Editor sein) akzeptiert wird und
  • der neu anzulegende Listeneintrag keine speicherverhindernden Regelverletzungen (scope="SAVE") und
  • keine unausgefüllten Pflichtfelder (z. B. Parameter allowEmpty="no")

aufweist.

Ansonsten wird die Liste der zur Verfügung stehenden Vorlagen oder der Bearbeitungsdialog der Eingabekomponente angezeigt.

Wichtig Per Regeln definierte Einschränkungen (z. B. Property NEW für FS_CATALOG) können durch die Verwendung dieser Handler-Klasse umgangen werden.
Wichtig Die Verwendung dieser Klasse ist nur für die Vorschau vorgesehen, nicht für die Verwendung in Formularen. Im Formular kann der zugehörige FS_BUTTON mit hidden="yes" ausgeblendet werden.

Parameter

Beschreibung

editorId

Bezeichner einer Listen-Eingabekomponente
Gibt die Eingabekomponente an, in der der neue Listeneintrag erstellt werden soll.

json

Kompatibilität ContentCreator
Der Parameter ist für das Erstellen neuer Listeneinträge im ContentCreator notwendig. Wird innerhalb des Parameters „editorId“ der Parameter „json“ mit dem Wert „true“ angegeben, wird statt eines HTML-Fragments ein JSON-Objekt ausgegeben.
Der Parameter darf ausschließlich innerhalb von JavaScript verwendet werden (nicht in der HTML-Ausgabe, da in diesem Fall ungültiges HTML erzeugt würde).

reload

Partielles Nachladen
Über diesen optionalen Parameter kann die ID eines HTML-Elements übergeben werden, das nach dem Anlegen eines neuen Listeneintrags geladen werden soll. Standardmäßig wird nach dem Anlegen eines Listeneintrags immer die gesamte Seite neu geladen. Über den Parameter „reload“, wird nach dem Anlegen eines Listeneintrags versucht, nur das angegebene HTML-Element auszutauschen. Die ID eines HTML-Elements kann dabei folgendermaßen übergeben werden:
WE_API.Preview.reload("container")
wobei "container" der Bezeichner eines Elements ist, der über
<div id="container"> definiert ist.

  

Beispiel:

<span$CMS_VALUE(fsbutton( 
editorName: "button",
parameter: {
"editorId": editorId(editorName:"catalog_links", json: true)

}
))$></span>

JavaScript-API

Die JavaScript-API des ContentCreators bietet mehrere Methoden an, mit denen die Benutzeroberfläche gesteuert werden kann. Somit ist es möglich, die Navigation zu einer gewünschten Seite in der Vorschau auszulösen oder die Anzeige eines Reports mit bestimmter Filterkonfiguration zu erwirken.

Die ContentCreator-JavaScript-API ist in HTML-Vorschauseiten über das Objekt top.WE_API erreichbar.

Die JavaScript-API für ContentCreator ist unter Vorlagenverwaltung / JavaScript-APIs / ContentCreator dokumentiert.

© 2005 - 2019 e-Spirit AG | Alle Rechte vorbehalten. | FirstSpirit 2019-11 | Datenschutz | Impressum | Kontakt