Widgets-Referenz

In diesem Kapitel erfahren Sie, wie Widgets in Zeta Producer aufgebaut sind. Aufgabenorientierte Beschreibungen finden Sie im Bereich Schnellstart oder unter den Beispielen.

Aufbau eines Widgets

Jedes Widget wird im Dateisystem in einem eigenen Ordner abgespeichert. Jedes Widget muss mindestens folgende Dateien enthalten:

  • widget.json
    Textdatei im JSON-Format mit allen Einstellungen des Widgets (Name, Felder, Templates und Assets).

  • widget.png
    Bild (48x48 Pixel) für die Darstellung des Widgets im Widget-Auswahl-Dialog (wenn der Anwender das Widget auf der Website einfügt).

  • standard.html
    HTML-Template (legt die HTML-Ausgabe des Widgets fest).

Scopes für Widgets

Zeta Producer sucht in diesen Verzeichnissen (und in dieser Reihenfolge) nach Widgets:

  1. Projektordner
    Beispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 14\projects\*Projekt*\widgets

  2. Benutzerordner
    Beispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 14\widgets

  3. Programmordner

Eigene Widgets können Sie im Projekt- oder Benutzerordner abspeichern. Der Programmordner sollte nicht verändert werden. Wenn Sie das Standardverhalten eines mitgelieferten Widget anpassen wollen, können Sie dies erreichen indem Sie das Widget kopieren und unter dem gleichen Verzeichnisnamen im Projekt- oder Benutzerordner abspeichern.

Die Datei widget.json

Diese JSON-Datei enthält alle Einstellungen des Widgets wie Name, Felder, Assets und Templates.

Beispiel

{
    "settings": {
        "category": "favs",
        "maincategory": "text",
        "showcssinputfields": false,
        "uiname": "Textbox mit Link"
    },
    "fields": [
        {
            "displayname": "Text",
            "name": "textfeld",
            "type": "html-wysiwyg-editor"
        },
        {
            "displayname": "Link",
            "name": "linkauswahl",
            "type": "url-selection"
        }
    ],
    "assets": [
        {
            "fileName": "textbox-mit-link.css",
            "mode": "Bundle",
            "order": 50
        }
    ],
    "itemTemplates": [
        {
            "fileName": "standard.html"
        }
    ]
}

Die Abschnitte settings und fields können Sie mit dem Widget-Editor Extras | Entwickler | Widgets oder direkt in der Textdatei bearbeiten. Die Bereiche assets und itemTemplates (s.u.) ändern Sie direkt mit einem Texteditor, hierfür gibt es keine grafische Oberfläche.

Templates

Für die Ausgabe des Widgets muss es mindestens ein HTML-Template standard.html geben. Möchten Sie für eine alternative Darstellung ein weiteres HTML-Template erstellen, müssen Sie dieses in der JSON-Datei des Widgets deklarieren.

Beispiel

{
    "itemTemplates": [
        {
            "fileName": "standard.html"
        },
        {
            "fileName": "alternative.html"
        }
    ]
}

Der Anwender kann das gewünschte Template im Artikel in den erweiterten Einstellungen auswählen. Alternativ können Sie auch ein Elementvorlagen-Auswahl-Feld in Ihr Widget aufnehmen.


Das HTML-Template muss am Anfang und am Ende jeweils ein spezielles Partial enthalten, damit Zeta Producer das Widget verwenden kann.

Beispiel

<$=system.partial("article-begin.html")$>
    
	<$=system.partial("article-headline.html")$>

	<$= article.value("textfeld") $>
	<$= article.value("linkauswahl") $>

<$=system.partial("article-end.html")$>

Mit der Anweisung <$=system.partial("article-headline.html")$> können Sie das Feld Überschrift in die Ausgabe einbinden. Alle anderen Widget-Felder erreichen Sie über den Befehl <$= article.value("Feldname")$>.

Assets

Im Widget können Sie auch CSS-, JavaScript- und andere Dateien verwenden. Damit diese in den Ausgabeordner kopiert werden, müssen Sie diese in der JSON-Datei deklarieren.

Beispiel

{
    "assets": [
        {
            "fileName": "prism.css",
            "mode": "Bundle",
            "order": 520
        },
        {
            "fileName": "prism.js",
            "mode": "Bundle",
            "order": 520
        }
    ]
}

fileName
Der Dateiname der zu kopierenden Datei.

mode
Geben Sie hier Copy an um die Dateien in den Ausgabeordner zu kopieren. Bei JS- und CSS-Dateien können Sie stattdessen auch Bundle angeben und Zeta Producer damit anweisen, die Datei nicht in den Ausgabeordner zu kopieren sondern in eine Master-Datei (jeweils eine für JavaScript und eine für CSS) zu kopieren um http-Zugriffe zu reduzieren.

order
Die Reihenfolge für die Zusammenstellung der Master-Datei. Hier können Sie einen beliebigen numerischen Wert angeben, je kleiner um so früher wird die Datei in die Bundle-Datei eingefügt.