Startseite / Vorlagenentwicklung / JavaScript-APIs / ContentCreator / Vorschau

JavaScript-API: Vorschau

JavaScript-Objekt: top.WE_API.Preview
Access-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 Vorlagensatz-Definition 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.

Das Preview-Objekt der ContentCreator-JavaScript-API enthält einige Funktionen, die das Auslesen und Setzen von Zeit- und projektspezifischen Parametern im Zusammenhang mit Multi Perspective Preview (MPP) (→Handbuch FirstSpirit SiteArchitect) ermöglichen. Durch die Einführung von Multi Perspective Preview in SiteArchitect mit FirstSpirit Version 5.2 sind die Funktionen im Preview-Objekt der ContentCreator-JavaScript-API Signieren von Modulen - JAR-Archiv-Klassen (→Entwicklerhandbuch für Komponenten) und werden in einer zukünftigen Version entfernt.

Die mit MPP zusammenhängende JavaScript-Funktionalität wird nun in einem neuen JavaScript-Objekt, top.MPP_API, angeboten. Weitere Informationen finden Sie unter Vorlagenentwicklung > JavaScript-APIs > Multi Perspective Preview.

Druckversion | Seitenanfang