Funktionsumfang des ContentCreators
Unterstützte Eingabekomponenten
Folgende Eingabekomponenten wurden im Rahmen der ContentCreator-Implementierung umgesetzt (siehe dazu auch jeweiliges Kapitel im Bereich Eingabekomponenten).
 |
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_DATASET | Datensatzauswahl (siehe auch Einschränkungen) |
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 und bold 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 2.2.3 "Vorschauansicht einstellen"
Dokumentation für Vorlagenentwickler:
Verwendung der FirstSpirit-APIs / JavaScript-API / Vorschau, Abschnitt "Multi-Perspective Preview"
JavaScript-API
Zur Steuerung sowohl der Vorschau als auch der ContentCreator-Benutzeroberfläche kann eine JavaScript-API eingesetzt werden. Diese API kann durch Aufrufe in JavaScript-Blöcken in der Vorschau eines HTML-basierten Ausgabekanals verwendet werden; Client-Plugins, die JavaScript-Code generieren (z. B. auf dem Interface ClientScriptProvidingInlineEditItem beruhende InlineEdit-Buttons), haben ebenfalls Zugriff auf diese API.
Dokumentation für Vorlagenentwickler:
Verwendung der FirstSpirit APIs / JavaScript-API
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 nur eine Verwendung in onClick-Attributen von FS_BUTTON-Komponenten. Drag-and-Drop-Funktionalität ist nicht vorgesehen. |
|
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
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.
Parameter | Beschreibung |
|---|---|
page | ID oder UID der Seite |
body | Anzeigename des Inhaltsbereichs |
Beispiel: Neuen Absatz anlegen
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-Ausgabekanal 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
Diese Aktion löst die Anzeige des Dialogs "Neue Seite" 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.
Parameter | Beschreibung |
|---|---|
keine | |
Datensatz erstellen („NewContentExecutable“)
de.espirit.firstspirit.webedit.server.executables.NewContentExecutable
Die Aktion "Datensatz erstellen" 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.
Parameter | Beschreibung |
|---|---|
content2 | ID oder UID einer Datenquelle |
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 in ihrer Menüreihenfolge angepasst werden). Außerdem können über den Dialog die Menünamen der Struktur-Ordner bearbeitet werden.
Parameter | Beschreibung |
|---|---|
node | ID oder UID eines Elements der Struktur-Verwaltung |
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.
Common
JavaScript-Objekt: top.WE_API.Common
Das Objekt Common bietet Methoden an, die sich generell auf die Benutzeroberfläche des ContentCreators beziehen. Dazu gehört die Abfrage oder Änderung des aktuell in der Vorschau angezeigten Store-Elements, die Erstellung von ContentCreator-Dialogen sowie die Ausführung von Projekt-Skripten oder Executables.
Preview
JavaScript-Objekt: top.WE_API.Preview
Das Preview-Objekt übernimmt die Aufgabe, die aktuelle Vorschau zu aktualisieren oder ein in der Vorschau vorhandenes Element des Document Object Model (DOM) neu zu laden.
Report
JavaScript-Objekt: top.WE_API.Report
Die Methoden des Report-Objekts können zur Steuerung der Reportanzeige und -konfiguration verwendet werden. Hiermit ist es möglich, die Anzeige eines bestimmten Reports auszulösen und die Rekonfiguration von Filterparametern programmatisch zu veranlassen.
Die Report-Steuerung kann sowohl auf Reports angewendet werden, die im Standardlieferumfang des ContentCreators enthalten sind, als auch auf Reports, die per FirstSpirit-Modul hinzugefügt wurden.
Dialog
zurückgeliefert durch top.WE_API.Common.createDialog()
Das Dialog-Objekt ermöglicht die Konfiguration eines per top.WE_API.Common.createDialog() erstellten Dialogobjekts. Die Dialoge werden im Standard-ContentCreator-Design dargestellt, der Inhalt basiert aber auf einem Document Object Model (DOM)-Element, das über die Methode setContent(Element element) vor Anzeige des Dialogs definiert wird.
FSID
zurückgeliefert durch top.WE_API.Common.getPreviewElement()
Die Methoden dieses Objekts liefern Informationen über ein FirstSpirit-Store-Element zurück, das durch top.WE_API.Common.getPreviewElement() oder andere API-Methoden eingeholt wurde.