Startseite / Vorlagenentwicklung / ContentCreator / JavaScript-API / Vorschau

JavaScript-API: Vorschau

JavaScript-Objekt: top.WE_API.Preview
Developer-API-Dokumentation: Preview

Das Preview-Objekt bietet Zugriff auf Funktionen, um die ContentCreator-Vorschau zu beeinflussen oder Daten aus der Vorschau abzufragen, z. B.

Die Vorschau oder Teile davon neu laden
Content-Highlighting aktualisieren
Interaktionen mit Multi Perspective Preview

Vorschau neu laden

Die gesamte Vorschau neu laden

void reload() - ohne Parameter - löst das Neuladen der gesamten Vorschau aus. Dadurch wird die gesamte Webseite für die Vorschau neu generiert.

<script type="text/javascript">
    function reloadPreview() {
        top.WE_API.Preview.reload();
    }
</script>

<a href="#" onClick="reloadPreview();">Reload this page</a>

Bestimmte DOM-Elemente neu laden

void reload(Element element) wird mit einem JavaScript-DOM-Element-Objekt parametrisiert und löst die Aktualisierung eines Teils des Dokuments aus. Diese Methode kann verwendet werden, um Änderungen an Store-Elementen anzuzeigen, die mit dem DOM-Element assoziiert sind:

Besitzt das als Parameter angegebene DOM-Element einen Editor-Identifier (in der Ausgabekanaldefinition mit der Funktion editorId() hinzugefügt), so wird dieses DOM-Element neu geladen.
Ansonsten wird das nächste umliegende DOM-Element, das einen Editor-Identifier besitzt, neu geladen. Sollte in der Elternkette des als Parameter angegebenen DOM-Elements kein Element einen Editor-Identifier besitzen, so wird das gesamte Vorschaudokument neu geladen.

Auf Vorschauänderungen reagieren

Um auf partielle Änderungen am Vorschau-DOM zu reagieren, die vom ContentCreator ausgelöst wurden (z. B. verursacht durch eine Drag-and-Drop-Aktion), können Reload Listener registriert werden.

void addElementReloadListener(ElementReloadListener listener) registriert eine benannte oder anonyme Funktion, die genau einen Parameter akzeptiert. Wird durch ContentCreator-Funktionalität ein teilweises Nachladen des Vorschau-Dokuments ausgelöst, so wird diese Funktion mit dem nachgeladenen DOM-Element als Parameter aufgerufen.

<script type="text/javascript">
    // Function that will be registered as a reload listener.
    function handlePartialReload(element) {
        // Determine if the reloaded DOM segment contains an element with a certain ID.
        if (element.id == "importantElementID") {
            // Reloaded element has ID "importantElementID".
            top.WE_API.Common.showMessage("Important DOM element was reloaded directly.");
        } else if (element.getElementById("importantElementID") != null) {
            // Reloaded DOM element contains a child element with ID "importantElementID".
            top.WE_API.Common.showMessage("Ancestor of important DOM element was reloaded.");
        }
    }

    // Register function "handlePartialReload" as a reload listener.
    top.WE_API.Preview.registerElementReloadListener(handlePartialReload);
</script>

Content-Highlighting aktualisieren

Zwei Funktionen erlauben die Aktualisierung des Content-Highlightings im Vorschau-Dokument. Dies ist für dynamische Webseiten, deren Inhalt und Layout durch Interaktionen mit der Vorschau (z. B. Größenänderung des Anzeige-Viewports oder Drag-and-Drop-Aktionen) verändert werden, von besonderer Bedeutung.

Sichtbare Highlight-Rahmen neu zeichnen

void repaint() kann dazu verwendet werden, zum Zeitpunkt des Aufrufs aktive Highlight-Rahmen in der Vorschau neu zu zeichnen. Dadurch werden Größen- und Positionsänderungen, der mit diesen Rahmen verbundenen DOM-Elemente berücksichtigt. Diese Funktion ist insbesondere für Callback-Funktionen von FS_BUTTON-Instanzen interessant, die durch Drag-and-Drop-Aktionen Layoutänderungen hervorrufen können, während sich der Mauszeiger noch über dem Rechteck des DOM-Elements befindet, der Highlight-Rahmen des DOM-Elements aber nicht automatisch die veränderten Dimensionen des Elements berücksichtigen kann.

Ein DOM-Element auf neue Highlight-Elemente durchsuchen

void rescan(Element element) wird mit einem DOM-Element-Objekt parametrisiert und durchsucht dieses Element sowie alle Kindelemente auf Editor-Identifier. Werden bei diesem Scan DOM-Elemente mit Editor-Identifiern entdeckt, wird Content-Highlighting für diese Elemente aktiviert.

Diese Funktion kann im Rahmen von dynamischen Webseiten verwendet werden, in denen Dokumenteninhalte durch Interaktionen nachgeladen werden. Beispielsweise kann das gerenderte HTML eines Absatzes aus der Inhalte-Verwaltung nachgeladen werden, ohne die gesamte Webseite neu laden zu müssen. Um Content-Highlighting für diesen Absatz und seine Eingabekomponenten zu aktivieren, muss dieses DOM-Element zunächst nach Editor-Identifiern durchsucht werden.

Aktuelles Window-Objekt einholen

JavaScriptObject getWindow() kann verwendet werden, um das aktuell mit dem Vorschau-Frame assoziierte Window-Objekt einzuholen.

Multi Perspective Preview

Multi Perspective Preview (MPP) ist eine ContentCreator-Funktion, die die Simulation verschiedener Benutzerperspektiven wie Gerätetyp (z. B. Desktop-PC oder Smartphone), Zeit des Webseitenbesuchs und Benutzerattribute (z. B. Kundenrolle, Standort oder Zahl der Artikel im Warenkorb) ermöglicht.

Das Preview-Objekt der JavaScript-API bietet mehrere Funktionen, die den Zugriff auf die aktuelle Zeiteinstellung und von Benutzern definierte Parameter der MPP-Toolbar bieten.

Die JavaScript-API beinhält keine Funktion, um die aktive Viewport-Einstellung zu erfragen.

MPP-Status erfragen

boolean isParameterized() gibt an, ob MPP-Parameterisierung aktiv (true; die MPP-Toolbar wird angezeigt) oder inaktiv (false; MPP-Toolbar wird nicht angezeigt) ist.

In der MPP-Toolbar gesetzte Parameter erfragen

Die folgenden Funktionen bieten Zugriff auf Parameterwerte, die aktuell in der MPP-Toolbar gesetzt sind. Dies ermöglicht die dynamische Anpassung des Vorschauinhalts an die MPP-Einstellungen, z. B. können bestimmte Inhaltselemente aufgrund der aktuellen Zeiteinstellung (Zeitleiste) oder der in der Toolbar gesetzten Benutzerrolle (projektspezifische MPP-Parameter) ein- oder ausgeblendet werden.

JavaScriptObject getTimeParameter() liefert die aktuell in der MPP-Zeitleiste eingestellte Zeit zurück.

Object getParameter(String name) liefert den Wert des als Parameter genannten, projektspezifischen MPP-Parameters zurück. Der Parameter name gibt dabei den Namen einer Eingabekomponente, der für die MPP-Parameterisierung genutzten Seitenvorlage an.

MPP-Parameter in der Toolbar setzen

Durch Interaktionen in der Vorschau kann es notwendig werden, MPP-Parameter abzuändern. Beispielsweise könnte sich die Benutzerrolle vom Zustand "nicht angemeldet" zum Zustand "angemeldet" verändern. Die nachfolgend genannten Funktionen ermöglichen, die Anzeige der MPP-Parameter in der Toolbar so zu setzen, dass sie den aktuellen Zustand in der Vorschau widerspiegeln.

void setTimeParameter(JavaScriptObject date) setzt die MPP-Zeitleiste auf die angegebene Zeit.

void setParameter(String name, Object value) setzt den Wert eines projektspezifischen MPP-Parameters in der Toolbar. Der Parameter name gibt dabei den Namen einer Eingabekomponente der für MPP-Parametrisierung genutzten Seitenvorlage an. Der Objekttyp des Parameters value muss mit dem Objekttyp dieser Eingabekomponente kompatibel sein.

Druckversion | Seitenanfang