Widget-Template anpassen

1. Entwickler-Live-Modus aktivieren

Als erstes aktivieren wir über das Menü Extras | Entwickler den Entwickler-Live-Modus.

2. Widget-Ordner aufrufen

Öffnen Sie den Widget-Editor und markieren das Widget Textbox mit Link. Klicken Sie anschließend auf den Button Ordner. Es öffnet sich der Widget-Ordner im Windows-Explorer.

Schließen Sie den Widget-Editor in Zeta Producer.

3. Template-Datei bearbeiten

Öffnen Sie die Template-Datei textbox-mit-link\standard.html in Ihrem Editor.

Zeta Producer hat beim Erstellen des Widgets in der Template-Datei standard.html bereits automatisch Code erstellt. Dieser sollte wie folgt aussehen:

Markup

<!-- TODO: Widget-HTML definieren -->

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

<$ // Verwenden Sie u.a. nachfolgenden Code um auf die Felder zuzugreifen. 

var name = article.headline; // Der vom Benutzer eingegebene Name des Artikels.
$>


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

<div><$= article.value("textfeld") $></div> <!-- Der vom Benutzer eingegebene Wert. -->
<div><$= article.value("linkauswahl") $></div> <!-- Der vom Benutzer eingegebene Wert. -->

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

<!-- Details finden Sie in der Dokumentation http://dev.zeta-producer.com -->

Die im Code enthalten Partials, welche über dem Befehl system.partial eingefügt werden, sind kleine, wiederverwendbare Code-Schnipsel.

Über den Befehl article.value können Sie auf die verschiedenen Widget-Felder zugreifen, die Sie beim Erstellen des Widgets eingefügt haben.

Passen Sie den Code für das Widget Textbox mit Bild folgendermaßen an:

Markup

<$=system.partial("article-begin.html")$>
    
    <div class="textbox-mit-link">

        <a href="<$= article.value("linkauswahl") $>">
            <span>
                <$=system.partial("article-headline.html")$>
                <$= article.value("textfeld") $>
            </span>
        </a>
    
    </div>

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

3. Aktuelle Darstellung des Widgets

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind die Anpassungen an der Template-Datei sofort sichtbar.

Mit Hilfe einer CSS-Datei für das Widget kann nun auf die eingefügte CSS-Klasse textbox-mit-link zugegriffen und das Widget weiter angepasst werden.