Zeta Producer · Wenn der Entwickler-Live-Modus aktiv ist, "beobachtet" Zeta Producer alle...

Zeta Producer

Entwickler-Dokumentation

Zeta Producer

Seite 1 von 153

In dieser Dokumentation lernen Sie, wie Sie Zeta Producer-Layouts anpassen, neue individuelleLayouts oder auch Widgets erstellen können.

Layouts und Widgets für Zeta Producer erstellen

Zeta Producer

Seite 2 von 153

http://localhost:10953/preview/wichtige-begriffe.html#a1359

Hinweis: Wenn Sie nur Farben oder Bilder ändern möchten können Sie das direkt in ZetaProducer im integrierten Layout-Designer ohne Programmier-Kenntnisse erledigen.

Los geht's!

Sollte Ihnen diese Dokumentation bei Fragen oder einem Problem nicht weiterhelfen können, dannhelfen wir Ihnen gerne im Entwickler-Bereich des Community-Forums weiter.

Zeta Producer ist eine Windows-Anwendung für die einfache Erstellung und Aktualisierung vonWebsites. Dank moderner Layouts und praxisnaher Funktionen können auch Anwender ohneProgrammierkenntnisse professionelle Websites erstellen und aktualisieren.

Mehr über Zeta Producer anzeigenBenutzerhandbuch zu Zeta Producer anzeigen

Weitere Hilfe im Community-Forum

Was ist Zeta Producer?

Zeta Producer

Seite 3 von 153

http://docs.zeta-producer.com/layout-anpassen.html

http://localhost:10953/preview/ein-neues-layout-erstellen.html

http://community.zeta-producer.com/Board/23-Entwickler-Bereich/

http://www.zeta-producer.com/

http://docs.zeta-producer.com/

Hier erfahren Sie die wichtigsten Grundlagen zu Zeta Producer. Danach können Sie sofort mit derErstellung Ihres ersten Layouts oder Ihres ersten Widgets beginnen.

So funktioniert Zeta ProducerWer kann Zeta Producer verwenden?ScopesWas sind Layouts?Was sind Widgets?Was benötige ich um für Zeta Producer zu programmieren?Jetzt geht's los!

Zeta Producer ist ein Desktop CMS. Die Anwendung wird also nicht online auf dem Webserverinstalliert sondern lokal auf dem Anwender-PC. Das hat die Vorteile dass die Installation sehr einfachist und von jedem Anwender durchgeführt werden kann. Insbesondere muss auf dem Webserver keinepotenziell sicherheitsgefährdende Software installiert werden.

Die Website wird lokal auf dem Anwender-PC erstellt und per Mausklick auf den Webserverhochgeladen. Wie bei einem CMS üblich, werden die Inhalte unabhängig vom Layout verwaltet.Website-Struktur und Texte werden in einer Datenbank gespeichert, Bilder und andere Datei-Assetsim Dateisystem.

Neben statischen HTML-Seiten kann Zeta Producer auch beliebige dynamische Seiten (zum BeispielPHP) erzeugen. Hierzu kann einfach die Dateierweiterung in den Seiteneigenschaften geändertwerden. Der Skript-Code kann dann an beliebiger Stelle (Content oder Layout) eingefügt werden.

Um die Website auf den Webserver zu kopieren enthält Zeta Producer einen integrierten FTP-Client,der die lokal erstellten Dateien hochlädt. Hierbei werden immer nur die geänderten Dateienaktualisiert.

Zeta Producer richtet sich an zwei Zielgruppen:

AnwenderAnwender können Zeta Producer installieren, neue Web-Projekte erstellen und hierfür diemitgelieferten Layouts und Widgets verwenden. Das Design der Website kann von Anwendern ohneProgrammierkenntnisse mit dem integrierten Layout-Designer angepasst werden indem sie Farben,Schriftarten, Bilder und Abstände ändern.

DeveloperDeveloper/Entwickler können die mitgelieferten Layouts und Widgets anpassen und auch eigene

Developer-Tour

So funktioniert Zeta Producer

Wer kann Zeta Producer verwenden?

Zeta Producer

Seite 4 von 153

http://localhost:10953/preview/tour.html#a1368







http://docs.zeta-producer.com/neue-website-erstellen.html

Layouts und Widgets erstellen. Developer sollten über HTML- und CSS-Kenntnisse verfügen. Füranspruchsvollere Aufgaben sind auch JavaScript-Kenntnisse vorteilhaft.

Zeta Producer ist von Grund auf dafür ausgerichtet mit benutzerdefinierten Layouts und Widgetserweitert zu werden. Damit Ihre Layouts bei Programmupdates nicht überschrieben werden, bietetZeta Producer verschiedene Scopes für benutzerdefinierte Objekte an.

Folgende Scopes stehen zur Verfügung:

ProgrammDieser Scope bezieht sich auf das Programmverzeichnis und ist nicht für Änderungen durch denBenutzer vorgesehen. Alle Änderungen hierin werden vom Installationsprogramm überschrieben.

BenutzerDer Benutzer-Scope ist der beste Platz für eigene Layouts und Widgets. Objekte in diesemScope werden vom Installationsprogramm nicht verändert. Layouts und Widgets des Benutzer-Scopes können in allen Projekten verwendet werden.Nutzen Sie folgende Verzeichnisse um Objekte im Benutzer-Scope zu speichern:

Layouts:C:\Users\*C:\Users\*Benutzername*Benutzername*\Documents\Zeta Producer 13\Layouts\Documents\Zeta Producer 13\Layouts

Widgets:C:\Users\*C:\Users\*Benutzername*Benutzername*\Documents\Zeta Producer 13\Widgets\Documents\Zeta Producer 13\Widgets

ProjektObjekte im Projekt-Scope stehen nur innerhalb des jeweiligen Web-Projekts zur Verfügung. Hierwerden üblicherweise individuell angepasste Layouts gespeichert. Speichern Sie Objekte ineinem der folgenden Verzeichnisse um sie nur innerhalb dieses Projekts zu verwenden:

Layouts:C:\Users\*C:\Users\*Benutzername*Benutzername*\Documents\Zeta Producer 13\Projects\\Documents\Zeta Producer 13\Projects\*Ihr Projekt**Ihr Projekt*\Layouts\Layouts

Widgets:C:\Users\*C:\Users\*Benutzername*Benutzername*\Documents\Zeta Producer 13\Projects\\Documents\Zeta Producer 13\Projects\*Ihr Projekt**Ihr Projekt*\Widgets\Widgets

Hinweis: Zeta Producer ermöglicht Ihnen, Layouts und Widgets des Programm-Scopes zuüberschreiben indem Sie gleichnamige Objekte im Benutzer- oder Projekt-Scope anlegen.

Ein Layout in Zeta Producer bestimmt das Aussehen der Website. In anderen CMS wird auch der

Scopes

Was sind Layouts?

Zeta Producer

Seite 5 von 153

Begriff Template verwendet. Im Gegensatz zu den meisten anderen Content Management Systemenbringt Zeta Producer bereits viele direkt verwendbare Layouts mit. Diese können vom Anwender ganzohne Programmierung in vielen Details (Farben, Schriften, Logo, usw.) angepasst werden. SolltenIhnen diese Möglichkeiten nicht ausreichen können Sie das Layout kopieren und in allen Einzelheiten(HTML, CSS, JavaScript) anpassen.

Innerhalb einer Website kann der Anwender neben Texten und Bildern auch sogenannte Widgetseinfügen. Dies sind mehr oder weniger komplexe Objekte wie beispielsweise eine Bildergalerie, einShop-Warenkorb oder ein YouTube-Video.

Sie können eigene Widgets erstellen, die entweder nur in einem Projekt verwendet können oder inallen Projekten innerhalb einer Installation, je nachdem in welchem Scope (siehe oben) Sie dasWidget speichern.

Layouts sind in Zeta Producer so aufgebaut, dass Sie neben Zeta Producer nur einen HTML- bzw.Text-Editor Ihrer Wahl benötigen. Wir verwenden intern den Code-Editor Brackets (Empfehlung).

Als Layout-Programmiersprache wird in Zeta Producer JavaScript verwendet. GrundlegendeJavaScript-Kenntnisse reichen für die Layout-Entwicklung aber aus.

Alle Informationen zur Bedienung von Zeta Producer finden Sie im Online-Handbuch, während Sie hierin dieser Dokumentation alles zur Layout- und Widget-Entwicklung finden.

Schnellstart (Layouts/Widgets erstellen/anpassen) Beispiele anschauen

Was sind Widgets?

Was benötige ich um für Zeta Producer zu programmieren?

Jetzt geht's los!

Zeta Producer

Seite 6 von 153

http://localhost:10953/preview/ein-layout-anpassen.html

http://brackets.io/

http://docs.zeta-producer.com/


http://localhost:10953/preview/beispiel-layout-erstellen.html

Installiert die Anwendung, erstellt Projekte, wählt aus Basis-Layouts aus, passt diese im Layout-Designer an, muss kein HTML können und keine Dateioperationen durchführen.

Erstellt Layouts und Widgets (jeweils komplett neue oder durch Anpassung vorhandener). Benötigtentsprechende HTML-, CSS-, JavaScript- und Layout-Kenntnisse.

Logischer Bereich der Zuständigkeiten und Rechte definiert damit Anwender und Entwickler wissen,welche Dateien sie anpassen können.

Ein einzelnes, komplettes Web-Projekt mit Inhalten und evtl. Projekt-spezifischen Layout-Varianten,Layouts und Widgets.

Vorlage mit der aus einem Web-Projekt eine Website gerendert werden kann. Besteht ausSeitenvorlagen u.a. Dateien.

Mit Zeta Producer ausgelieferte Layouts, die durch Updates aktualisiert werden können.

Wichtige Begriffe

Anwender

Developer/Entwickler

Scope

Projekt

Layout

Basis-Layout

Zeta Producer

Seite 7 von 153

Ein Layout bei dem der Anwender einige Parameter ohne Programmierung mit Hilfe des Layout-Designers anpassen kann und dadurch eigene Layout-Varianten erstellen kann.

Ein Layout das nicht (mehr) von Programm-/Layout-Updates profitiert und ggf. manuell aktualisiertwerden muss.

Variation eines Layouts mit einem eigenen Parametersatz der vom Anwender per Layout-Designerdefinierbaren Einstellungen.

In Zeta Producer integrierte Funktion mit der ein Anwender eine Layout-Variante an das eigeneCorporate Design anpassen kann.

Die Seitenvorlage eines Layouts befindet sich im Ordner templates/pagestemplates/pages . Bei den mitgeliefertenBasis-Layouts heißt diese immer default.htmldefault.html . Die Seitenvorlage enthält den HTML-Code derAusgabeseite.

Kleinster Content-Bestandteil in Zeta Producer. Alle Inhalte eines Projekts werden in Form vonWidgets erstellt und bearbeitet. Ein Widget kann sehr einfach aufgebaut sein (z.B. Überschrift + Text)oder auch komplexe Funktionen (z.B. Slideshows oder Facebook-Integration) enthalten.

Anpassbares Layout

Individuelles Layout

Layout-Variante

Layout-Designer

Seitenvorlage

Widget

Zeta Producer

Seite 8 von 153

Partials sind kleine, wiederverwendbare Code-Schnipsel, die Sie im Layout über den Befehlsystem.partialsystem.partial verwenden können.

Der Begriff "Bundle" (von englischen bundle = Bündel) beschreibt das Zusammenfassen mehrereCSS-Dateien oder mehrerer JavaScript-Dateien zu jeweils einer CSS-Datei und einer JavaScript-Datei.

Damit wird eine schnellere Ladezeit der HTML-Seite im Browser erreicht, da der Browser nur eineRessource (also die JavaScript- oder CSS-Datei) anfragen muss, anstatt viele einzelner Ressourcen.

Partial

Bundle

Zeta Producer

Seite 9 von 153

http://localhost:10953/preview/system-objekt.html#a1497

Zeta Producer

Seite 10 von 153

Wenn der Entwickler-Live-Modus aktiv ist, "beobachtet" Zeta Producer alle Layout-relevanten Dateienund erstellt bei einer Änderung die aktuelle Seite automatisch neu. Die aktualisierte Seite wirdanschließend automatisch in der internen Vorschau angezeigt. Falls die externe Vorschau (F5) ineinem Browser geöffnet ist, wird diese ebenfalls automatisch aktualisiert.

Den Entwickler-Live-Modus können Sie über das Menü Extras | Entwickler aktivieren. Solange dieserModus aktiv ist, wird eine Infobar unterhalb des Menüs angezeigt:

Der Entwickler-Live-Modus sollte nur während der Layout- bzw. Widget-Entwicklung aktiv sein.

Der Entwickler-Live-Modus

Zeta Producer

Seite 11 von 153

Ein Layout anpassenEin neues Layout erstellenEin Widget anpassenEin neues Widget erstellen

Schnellstart

Zeta Producer

Seite 12 von 153



http://localhost:10953/preview/ein-widget-anpassen.html

http://localhost:10953/preview/ein-neues-widget-erstellen.html

Anwender können in Zeta Producer mit Hilfe des integrierten Layout-Designers ein gewähltes Basis-Layout anpassen und eigene Layout-Varianten erstellen. Wenn Sie nun außerhalb der Möglichkeitendes Layout-Designers tiefer in die Layout-Programmierung eingreifen möchten, haben Sie dieMöglichkeit ein mitgeliefertes Basis-Layout als Grundlage für den Aufbau Ihres individuellen Layoutszu verwenden.

Hinweis: Nachdem ein Layout kopiert und angepasst wurde, ist es nicht mehr Teil der Basis-Layouts von Zeta Producer und profitiert somit nicht mehr von unseren automatischen Layout-Updates. Für die Funktionlität des Layouts ist alleine der Entwickler/Benutzer verantwortlich.

Als erstes erstellen Sie über das Menü Website | Neue Website ein neues Projekt und wählen dasBasis-Layout, welches Sie kopieren und anpassen möchten.

Wählen Sie den Befehl Extras | Entwickler | Layout in Projekt kopieren.

Hinweis: Dieser Befehl wird nur angezeigt, wenn es sich bei dem aktuellen Layout um ein Basis-Layout handelt.

Geben Sie dem kopierten Layout einen Namen und klicken anschließend auf den Button Kopieren.

Das Layout wird in den Ordner des Web-Projekts kopiert C:\...\Layouts\Name des LayoutsC:\...\Layouts\Name des Layouts undautomatisch für das aktuelle Projekt verwendet

Ein vorhandenes Layout anpassen

1. Neues Projekt erstellen

2. Layout kopieren

Zeta Producer

Seite 13 von 153


Nachdem das Layout kopiert wurde, können Sie nun direkt über den Befehl Extras | Entwickler |Layout-Ordner anzeigen den Layout-Ordner im Windows-Explorer öffnen.

Damit Sie eigene Layouts entwickeln können, müssen Sie den Aufbau und die Funktionsweise vonLayouts verstehen. Alle wichtigen Informationen erhalten Sie diesbezüglich auf der Seite Layout-Referenz.

Wie Sie nun ein Layout erweitern und die einzelnen Bereiche eines Layouts anpassen können, lernenSie am besten mit Hilfe eines Beispiels.

Weiter zum Beispiel: Layout erstellen

3. Layout-Ordner anzeigen

4. Layouts-Referenz und Beispiel

Zeta Producer

Seite 14 von 153

http://localhost:10953/preview/layouts.html


Zeta Producer enthält über 40 sofort einsetzbare Layouts. Wenn Sie keines davon verwendenmöchten und lieber Ihr ganz individuelles Layout mit Zeta Producer nutzen wollen, dann lernen Sie hier,wie Sie dazu vorgehen können.

Als Basis für Ihr individuelles Layout bietet Zeta Producer ein Minimal-Layout an. Auf diesem Layout-Grundgerüst können Sie Ihr Layout aufbauen.

Das Bild rechts zeigt das Minimal-Layout mit der Struktur und den Inhalten eines leeren Projekts undeiner beispielhaften Kopfgrafik (Header).

Hinweis: Das mitgelieferten Minimal-Layout enthält keine Layout-Varianten. Elemente wie Logo,Website-Name, Suchfeld, Navigationspfad, Zusatz-Links und Copyright können nicht über dieintegrierte Vorschau oder die Einstellungen aktiviert bzw. deaktiviert werden. Die Elemente sindfest im Layout eingefügt und können nur dort angepasst werden.

Als erstes erstellen Sie über das Menü Website | Neue Website ein neues Projekt und wählen einBasis-Layout aus.

Hinweis: Welches Basis-Layout hier ausgewählt wird spielt keine Rolle, da dieses durch dasmitgelieferte Minimal-Layout ersetzt wird.

Ein neues Layout erstellen


2. Neues Layout erstellen

Zeta Producer

Seite 15 von 153

http://www.zeta-producer.com/de/layouts.html

Wählen Sie den Befehl Extras | Entwickler | Neues Layout erstellen.

Geben Sie dem neuen Layout einen Namen und wählen Sie den Scope in dem das Layoutgespeichert werden soll. Wählen Sie den Eintrag Web-Projekt wenn es nur für das aktuelle Web-Projekt zur Verfügung stehen soll oder Benutzer um das Layout in allen Web-Projekten verwenden zukönnen.

Klicken Sie auf den Button Erstellen. Ihr individuelles Layout wird nun mit dem mitgelieferten Minimal-Layout automatisch erstellt.

Nachdem das neue Layout erstellt wurde, können Sie nun direkt den Layout-Ordner im Windows-Explorer anzeigen lassen oder das Dialog-Fenster schließen. Das Layout wird nun automatisch fürdas aktuelle Projekt verwendet.

Hinweis: Den Ordner für das Layout können Sie über den Befehl Extras | Entwickler | Layout-Ordner anzeigen jederzeit anzeigen lassen.

3. Layout-Ordner anzeigen

Zeta Producer

Seite 16 von 153


Damit Sie eigene Layouts entwickeln können, müssen Sie den Aufbau und die Funktionsweise vonLayouts verstehen. Alle wichtigen Informationen erhalten Sie diesbezüglich auf der Seite Layout-Referenz.

Wie Sie nun ein Layout erweitern und die einzelnen Bereiche eines Layouts anpassen können, lernenSie am besten mit Hilfe eines Beispiels.

Weiter zum Beispiel: Layout erstellen

4. Layouts-Referenz und Beispiel

Zeta Producer

Seite 17 von 153



Sie können ein vorhandenes Widget anpassen indem Sie Felder hinzufügen oder entfernen oder dasTemplate für den Ausgabe-Code ändern.

Öffnen Sie mit dem Befehl Extras | Entwickler | Widgets den Widget-Editor.

Im Widget-Fenster sehen Sie in der Gruppe Interne alle mitgelieferten Widgets der verschiedenenKategorien.

Wählen Sie das anzupassende Widget aus und klicken Sie anschließend auf den Button Kopieren.

Passen Sie die Widget-Einstellungen an und klicken Sie anschließend auf den Button OK.

Ein vorhandenes Widget anpassen

1. Widget kopieren

Zeta Producer

Seite 18 von 153


Wählen Sie den Scope in dem das Widget gespeichert werden soll. Wählen Sie Benutzer um diesesWidget in allen Web-Projekten zu verwenden. Wählen Sie Web-Projekt wenn es nur im aktuellenWeb-Projekt zur Verfügung stehen soll. Oder wählen Sie Layout, wenn das Widget nur zusammen mitdem aktuellen Layout ausgewählt werden kann.

Damit Sie eigene Widgets entwickeln können, müssen Sie den Aufbau und die Funktionsweise vonWidgets verstehen. Alle wichtigen Informationen erhalten Sie diesbezüglich auf der Seite Widget-Referenz.

Wie Sie nun detailliert ein einfaches Widget erstellen bzw. anpassen können, lernen Sie am bestenmit Hilfe eines Beispiels.

Weiter zum Beispiel: Widget erstellen

2. Widget-Referenz und Beispiel

Zeta Producer

Seite 19 von 153


http://localhost:10953/preview/widgets.html

http://localhost:10953/preview/beispiel-widget-erstellen.html

Obwohl Widgets alleine mit einem Editor erstellt werden könnten empfiehlt es sich hierfür denWidgets-Editor zu verwenden um Syntaxfehler zu vermeiden. Für kleinere Anpassungen spricht nichtsdagegen, die betreffenden Dateien direkt im Editor zu bearbeiten.

Öffnen Sie mit dem Befehl Extras | Entwickler | Widgets den Widget-Editor.

Klicken Sie in der Gruppe Eigene auf den Button Neu um ein neues Widget zu erstellen.

Füllen Sie die Felder der Widget-Einstellungen aus und klicken Sie anschließend auf den Button OK.

Ein neues Widget erstellen

1. Neues Widget erstellen

Zeta Producer

Seite 20 von 153

Wählen Sie den Scope in dem das Widget gespeichert werden soll. Wählen Sie Benutzer um diesesWidget in allen Web-Projekten zu verwenden. Wählen Sie Web-Projekt wenn es nur im aktuellenWeb-Projekt zur Verfügung stehen soll. Oder wählen Sie Layout, wenn das Widget nur zusammen mitdem aktuellen Layout ausgewählt werden kann.

Damit Sie eigene Widgets entwickeln können, müssen Sie den Aufbau und die Funktionsweise vonWidgets verstehen. Alle wichtigen Informationen erhalten Sie diesbezüglich auf der Seite Widget-Referenz.

Wie Sie nun detailliert ein einfaches Widget erstellen bzw. anpassen können, lernen Sie am bestenmit Hilfe eines Beispiels.

Weiter zum Beispiel: Widget erstellen

2. Widget-Referenz und Beispiel

Zeta Producer

Seite 21 von 153




Sehen Sie hier anhand von praxisnahen Beispielen, wie Sie eigene Layouts und Widgets in ZetaProducer erstellen und verwenden können.

Layout erstellenWidget erstellenMeta-Angaben einfügenCSS-Stile einfügenJavaScript einfügen

Beispiele

Zeta Producer

Seite 22 von 153



http://localhost:10953/preview/meta-angaben-einfuegen.html

http://localhost:10953/preview/css-stile-einfuegen.html

http://localhost:10953/preview/javascript-einfuegen.html

In diesem Beispiel wird ein einfaches Layout für Zeta Producer erstellt. Als Basis wird das in ZetaProducer mitgelieferte Minimal-Layout verwendet, auf dessen Grundgerüst das Layout aufgebautwird.

VorbereitungEigenes Logo einfügenWebname und Slogan anpassenSuche anpassenHeaderbereich anpassenNavigationspfad anpassenNavigation anpassenInhaltsbereich anpassenNewsbereich anpassenBannerbereich einfügenZusatz-Links erweiternHintergrundbild einfügen

Nach Durcharbeitung dieses Beispiels soll unser Layout wie auf der Live-Demo aussehen.

Das komplette Layout-Beispiel-Projekt können Sie über den nachfolgenden Button runtergeladen:

Download Layout-Beispiel-Projekt (ZIP)

Layout erstellen

Das Beispiel enthält folgende Schritte:

Ergebnis und Download

Zeta Producer

Seite 23 von 153

http://localhost:10953/preview/layout-erstellen-vorbereitung.html

http://localhost:10953/preview/eigenes-logo-einfuegen.html

http://localhost:10953/preview/webname-und-slogan-anpassen.html

http://localhost:10953/preview/suche-anpassen.html

http://localhost:10953/preview/headerbereich-anpassen.html

http://localhost:10953/preview/navigationspfad-anpassen.html

http://localhost:10953/preview/navigation-anpassen.html

http://localhost:10953/preview/inhaltsbereich-anpassen.html

http://localhost:10953/preview/newsbereich-anpassen.html

http://localhost:10953/preview/bannerbereich-einfuegen.html

http://localhost:10953/preview/zusatz-links-erweitern.html

http://localhost:10953/preview/hintergrundbild-einfuegen.html

http://developer.zeta-producer.com/layout-beispiel/

http://localhost:10953/preview/media/files/Layout-Beispiel.zip

Als erstes erstellen Sie über das Menü Website | Neue Website ein neues Projekt und wählen einBasis-Layout aus. Als Beispielinhalt wählen Sie am besten Mit leerer Website starten. Fügen Sie nunnoch als Titel Layout-Beispiel ein und erstellen das Projekt.

Erstellen Sie ein Layout über den Befehl Extras | Entwickler | Neues Layout.

Geben Sie dem Layout den Namen Mein eigenes Layout und speichern dieses im Scope Web-Projekt.

Klicken Sie auf den Button Erstellen.

Hinweis: Gehen Sie bitte wie auf der Seite Ein neues Layout erstellen beschrieben vor.

Klicken Sie auf das Menü Extras | Entwickler | Layout-Ordner anzeigen.

Zum Bearbeiten der Layout-Daten öffnen Sie diese in Ihrem Editor.

Tipp: Wir verwenden intern den Code-Editor Brackets. Hier haben Sie die Möglichkeit dengesamten Layout-Ordner auszuwählen und erhalten so bequem Zugriff auf alle Layout-Daten.

Vorbereitung


2. Neues Layout erstellen

3. Layout-Daten im Editor öffnen

Zeta Producer

Seite 24 von 153



http://brackets.io/

Damit die Anpassungen am Layout sofort sichtbar sind, aktivieren Sie in Zeta Producer über dasMenü Extras | Entwicker den Entwickler-Live-Modus.

4. Entwickler-Live-Modus aktivieren

Zeta Producer

Seite 25 von 153

Wenn Sie ein eigenes Layout für sich oder einen Kunden erstellen, dann möchten Sie vermutlich auchein passendes Logo verwenden. Dazu müssen Sie die Logo-Datei in den Ordner assets des Layoutskopieren und die Seitenvorlage default.htmldefault.html , sowie ggf. die CSS-Datei styles.cssstyles.css anpassen.

Nachfolgend wird das Vorgehen hierfür beipielhaft erklärt.

Speichern Sie die nachfolgende Logo-Grafik mein‐logo.pngmein‐logo.png via Rechtsklick und fügen diese in denAssets-Ordner \Mein eigenes Layout\assets\Mein eigenes Layout\assets ein.

In der Seitenvorlage default.htmldefault.html ist bereits ein Logo-Abschnitt vorhanden. Damit das neue Logorichtig referenziert wird, muss der Dateiname des Logos angepasst werden. Ändern Sie im <img><img> -tag den Dateiname in mein‐logo.pngmein‐logo.png um.

<div id="logo">

< a h r e f = "<$= project.url $>"><img src="<$= page.pathToRoot $>assets/mein‐logo.png" alt="

</div>

Der Platzhalter <$= project.url $><$= project.url $> wird beim Rendern der Seite in Zeta Producer mit deröffentlichen Web-Adresse ersetzt, welche Sie in der FTP-Konfiguration angegeben haben. DerPlatzhalter <$= page.pathToRoot $><$= page.pathToRoot $> wird durch den relative Pfad der Seite zum Stammordner derWebsite ersetzt.

Ein eigenes Logo einfügen

1. Logo in Assets-Ordner einfügen

2. Seitenvorlage anpassen

Markup

3. Aktuelle Darstellung des Layouts

Zeta Producer

Seite 26 von 153

http://localhost:10953/preview/project-objekt.html#a1526

http://localhost:10953/preview/page-objekt.html#a1544

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind dieAnpassungen am Layout sofort sichtbar.

Wie Sie sehen wird das neu eingefügte Logo auf der Website angezeigt.

Zeta Producer

Seite 27 von 153

In Zeta Producer gibt es in den Website-Einstellungen ein Feld für den Website-Name und einen -Slogan. Der Website-Name wird bereits im Layout ausgegeben. Im aktuellen Beispiel soll unterhalbdes Website-Name auch ein kleiner Slogan stehen. Des Weiteren soll der Website-Name auch einezum Logo passende Farbe erhalten.

In der Seitenvorlage default.htmldefault.html ist bereits ein Abschnit für den Website-Name mit dem Attribut-Platzhalter #attribute(web_name)#attribute(web_name) vorhanden. Für die Anzeige eines Slogans fügen Sie einfach denAttribut-Platzhalter #attribute(web_name_slogan)#attribute(web_name_slogan) ein.

<div id="webname">

< a h r e f = "<$= project.url $>">#attribute(web_name)</a>

<br /><span id="slogan">#attribute(web_name_slogan)</span>

</div>

Attribute sind einfache Name-Werte-Paare, welche unter anderem auch mit Benutzeroptionenverknüpft sind.

In Zeta Producer können Sie nun über das Menü Website | Einstellungen einen kleinen Sloganeingeben.

Hinweis: Natürlich können Sie anstatt der Attribut-Platzhalter auch direkt den Website-Name undden Slogan in die Seitenvorlage einfügen.

Webname und Slogan anpassen

1. Seitenvorlage anpassen

Markup

2. Slogan in Zeta Producer eingeben

Zeta Producer

Seite 28 von 153

http://docs.zeta-producer.com/website-einstellungen.html

http://docs.zeta-producer.com/attribute.html

In der Datei styles.cssstyles.css sind bereits der CSS-Stil #webname#webname für den Website-Name vorhanden.Diesen müssen Sie wie folgt anpassen und einen CSS-Stil #slogan#slogan für den Slogan hinzufügen.

#webname

f l o a t : l e f t ;

margin‐top: 40px;

#webname a

display: inline‐block;

margin‐bottom: 5px;

font‐size: 1.5em;

color: #45b202;

#slogan

font‐size: 1.2em;


Wie Sie sehen wird nun der Website-Name mit einer zum Logo passenden Farbe zusammen mit demSlogan neben dem Logo dargestellt.

3. CSS für Webname und Slogan anpassen

CSS


Zeta Producer

Seite 29 von 153

Zeta Producer

Seite 30 von 153

In den Basis-Layouts und dem hier im Beispiel verwendeten Layout ist das Partialsearchfield.htmlsearchfield.html enthalten. Dieses Partial ermöglicht über sogenannte named Parameter einige

Anpassungen der Darstellung.

Im aktuellen Beispiel soll das Suchfeld einen grafischen Button verwenden. Außerdem soll die Breiteund die Position angepasst werden.

Speichern Sie die nachfolgende Grafik magnifier.pngmagnifier.png via Rechtsklick und fügen diese in denAssets-Ordner \Mein eigenes Layout\assets\Mein eigenes Layout\assets ein.

Fügen Sie in der Seitenvorlage default.htmldefault.html dem Partial searchfield.htmlsearchfield.html die Parameter"useImageButton":true"useImageButton":true und "buttonImageSrc":"assets/magnifier.png""buttonImageSrc":"assets/magnifier.png" hinzu.

<$= system.partial("searchfield.html", "inlineEditing": false, "useImageButton":true

Da für eigene Layouts der Bearbeitungsmodus für das Suchfeld in Zeta Producer nicht benötigt wird,gibt es im Partial searchfield.htmlsearchfield.html einen speziellen Parameter "inlineEditing": false"inlineEditing": false . DerParameter stellt eine Ausnahme dar und muss nicht zwingend vorhanden sein.

In der Datei styles.cssstyles.css sind bereits CSS-Stile für das Suchfeld vorhanden. Diese müssen Sie wiefolgt anpassen:

#zpsearchform

Suche anpassen

1. Grafik für den Suchbutton in Assets-Ordner einfügen

2. Suche in der Seitenvorlage anpassen

Markup

3. CSS für das Suchfeld anpassen

CSS

Zeta Producer

Seite 31 von 153

http://localhost:10953/preview/partials.html#a2207


float: right;

margin‐top: 40px;


#zpsearchform input[type=text]


margin‐right: 5px;

width: 148px;

padding: 5px 8px;

font‐size: 1.0em;

color: #363b43;

border: 1px solid #cbcbcb;

‐webkit‐appearance: none;

#zpsearchform input[type=image]

w i d t h : 2 8 p x ;

height: 28px;

b o r d e r : 0 ;


Wie Sie sehen wird nun das Suchfeld mit einem grafischen Button angezeigt. Die Breite des Suchfeldund die Position sind ebenfalls angepasst.


Zeta Producer

Seite 32 von 153

Das Header-Widget in Zeta Producer ist mit Werten verknüpft, die bei den mitgelieferten Basis-Layouts in den Varianten enthalten sind. Da bei einem eigenen Layout keine Varianten vorhandensind, werden diese Werte in der Datei layout.jsonlayout.json gespeichrt.

Im Beispiel-Layout ist das Partial header.htmlheader.html für den Headerbereich in der Seitenvorlagedefault.htmldefault.html bereits vorhanden.

<$ if ( page.anyAreaArticles("Header") || (system.preview && system.showEmptyPreviewAreas

<$= system.partial("header.html", "Header") $>

<$ $>

Die If-Abfrage bewirkt, dass der Headerbereich nur angezeigt wird, wenn auch ein Header-Widget imBereich vorhadnen oder die Einfügen-Ansicht aktivieren ist.

Für das aktuelle Beispiel soll die Höhe der Header-Bilder auf 400 Pixel geändert werden. Enthält dasHeader-Widget mehrere Bilder, sollen diese beim Aufruf der Seite in einer zufälligen Reihenfolgeerscheinen.

Folgende Werte sind in der Datei layout.jsonlayout.json für den Header definiert:

header‐image‐widthheader‐image‐width Breite der Header-Bilderheader‐image‐heightheader‐image‐height Höhe der Header-Bilderheader‐image‐areaheader‐image‐area Name des Headerbereichs (diesen Wert bitte nicht ändern)header‐naviconsheader‐navicons Richtungs-Pfeile zum Durchblätternheader‐paginationheader‐pagination Visualisierung der Anzahl der Header-Bilderheader‐randomizeheader‐randomize Zufällige Anzeige der Header-BildersmootHeightsmootHeight Animation der Header-Höhe

Passen Sie die Werte folgendermaßen an:

"values": [

"uniqueID": "header‐image‐width",

"value": 900

Headerbereich anpassen

Markup

1. Header-Werte anpassen

JSON

Zeta Producer

Seite 33 von 153

http://docs.zeta-producer.com/header-einfuegen.html



,

"uniqueID": "header‐image‐height",

"value": 400

,

"uniqueID": "header‐image‐area",

"value": "Header"

,

"uniqueID": "header‐navicons",

"value": true

,

"uniqueID": "header‐pagination",

"value": true

,

"uniqueID": "header‐randomize",

"value": true

,

"uniqueID": "smootHeight",

"value": true

]

In der Datei styles.cssstyles.css sind bereits CSS-Stile für den Header vorhanden. Für das Beispiel soll dieAusgabe der Bild-Beschreibung und der Visualisierung header‐paginationheader‐pagination farblich noch etwasangepasst werden:

.flexslider

margin‐bottom: 40px !important;

.flex‐caption

width: 860px;

padding: 20px;

position: absolute;

2. CSS für den Header anpassen

CSS

Zeta Producer

Seite 34 von 153

b o t t o m : 0 ;

color: #ffffff;

background‐color: rgba(0,0,0,0.5);

.flex‐caption h1,

.flex‐caption h2,

.flex‐caption h3

margin: 0 0 5px;

font‐size: 1.5em;

color: #45b202;

.flex‐caption p

m a r g i n : 0 ;

.flex‐control‐nav

bottom: ‐30px;

.flex‐control‐nav li

margin: 0 2px;

.flex‐control‐nav a

background: #cbcbcb !important;

.flex‐control‐nav a:hover

background: #ababab !important;

.flex‐control‐nav a.flex‐active

background: #45b202 !important;

Fügen Sie wie im Online-Handbuch beschrieben, das Header-Widget in das Beispiel-Projekt mitmindestens zwei Header-Bildern und passenden Bild-Beschreibungen ein. Sie können den Headerauch von der Startseite (Wurzelseite) aus auf alle Seiten des Projekts vererben.


3. Header in das Beispiel-Projekt einfügen


Zeta Producer

Seite 35 von 153


Wie Sie sehen werden die Header-Bilder mit einer Höhe von 400 Pixel angezeigt. Wenn Sie in zetaProducer auf Vorschau klicken, wird beim Aufruf der Seite ein Zufallsbild angezeigt.

Zeta Producer

Seite 36 von 153

In den Basis-Layouts und dem hier im Beispiel verwendeten Layout ist das Partialbreadcrumbs.htmlbreadcrumbs.html enthalten. Dieses Partial ermöglicht über sogenannte named Parameter einige

Anpassungen der Darstellung.

Im aktuellen Beispiel soll der Navigationspfad (Breadcrumb) mit Hilfe der Paramter eine neueBeschreibung vor dem eigentlichen Navigationspfad und ein anderes Trennzeichen erhalten.Außerdem sollen die Links eine zum Layout passende Farbe erhalten.

Passen Sie in der Seitenvorlage default.htmldefault.html beim Partial breadcrumbs.htmlbreadcrumbs.html den Parameterbreadcrumbbreadcrumb mit dem Wert Aktuelle Seite:Aktuelle Seite: und den Parameter breadcrumb_separatorbreadcrumb_separator mit dem

Wert >> an.

<div id="breadcrumb">

<$= system.partial("breadcrumbs.html", "Aktuelle Seite:", ">") $>

</div>

In der Datei styles.cssstyles.css ist bereits ein CSS-Stil für den Navigationspfad vorhanden. Diesen müssenSie wie folgt erweitern, damit die Links in der passenden Farbe erscheinen.

#breadcrumb


#breadcrumb a

color: #45b202;

Navigationspfad anpassen

1. Navigationspfad in der Seitenvorlage anpassen

Markup

2. CSS für den Navigationspfad anpassen

CSS


Zeta Producer

Seite 37 von 153




Vor dem Navigationspfad sehen nun die Beschreibung Aktuelle Seite. Fügen Sie am besten einigeSeiten mit Unterseiten ein, damit Sie die angepassten Trennzeichen des Breadcrumbs sehen können.

Zeta Producer

Seite 38 von 153

Im Minimal-Layout, welches als Basis für das Beispiel-Layout verwendet wird, ist bereits das Partialmainmenu.htmlmainmenu.html in der Seitenvorlage default.htmldefault.html enthalten.

Im aktuellen Beispiel soll die Navigation optisch etwas auffallender gestaltet werden. Außerdem solldie Navigation rechts dargestellt werden, also den Platz mit dem Newsbereich tauschen.

Damit die Darstellung und das Verhalten der Navigation etwas deutlicher wird, können Sie ein paarzusätzliche Haupt- und Unterseiten einfügen. Siehe dazu die Live-Demo.

Tauschen Sie in der Seitenvorlage default.htmldefault.html die Positionen des Navigations- und News-Blocks:

<!‐‐ News ‐‐>

<$ if ( page.anyAreaArticles("News") || (system.preview && system.showEmptyPreviewAreas

<div id="news">

<$= system.partial("area.html", "News", 1) $>

</div>

<$ $>

<!‐‐ Navigation ‐‐>

<nav id="navigation">

<$= system.partial("mainmenu.html") $>

</nav>

In der Datei styles.cssstyles.css sind bereits CSS-Stile für die Navigation vorhanden. Damit die einzelnenNavigations-Punkte deutlicher hervorgehoben werden, erhalten diese eine Hintergrundfarbe. Auch derHover- und besonders der Aktive-Zustand werden farblich angepasst. Die Navigation wird außerdemnicht mehr mit Listenpunkte angezeigt. Passen Sie das CSS wie folgt an:

#navigation

Navigation anpassen

1. Navigation in der Seitenvorlage anpassen

Markup

2. CSS für die Navigation anpassen

CSS

Zeta Producer

Seite 39 von 153



float: right;

width: 160px;

margin: 10px 0 40px 40px;

#navigation ul


padding‐left: 0;

#navigation ul ul

padding‐left: 15px;

#navigation li

list‐style: none;

#navigation li li

font‐size: 0.9em;

#navigation a

display: block;


padding: 3px 6px;

color: #363b43;

background‐color: #f0f0f0;

text‐decoration: none;

#navigation a:hover

background‐color: #e5e5e5;

#navigation a.active

color: #ffffff;

background‐color: #45b202;

#navigation li ul

display: none;

#navigation li.active > ul

display: block;

Da die Navigation nun rechts angezeigt werden soll, muss auch das CSS für den Newsbereichentsprechend angepasst werden:

3. CSS für den Newsbereich anpassen

Zeta Producer

Seite 40 von 153

#news


width: 200px;




Wie Sie sehen ist die Navigation nun rechts positioniert und deutlicher hervorgehoben. DerNewsbereich (Mustermann GmbH) steht links.

CSS


Zeta Producer

Seite 41 von 153

In den Basis-Layouts und dem hier im Beispiel verwendeten Layout ist das Partial area.htmlarea.html für denInhaltsbereich standardmäßig bereits enthalten. Für das aktuelle Beispiel sollen die Überschriften, dieHyperlinks und die Button-Darstellung etwas angepasst werden. Außerdem sollen im Inhaltsbereichmaximal nur noch 2 Spalten eingefügt werden können.

Damit die Darstellung des Inhaltsbereichs etwas deutlicher wird, Können Sie einfach etwas Blindtexteinfügen. Siehe dazu auch die Live-Demo.

Passen Sie in der Seitenvorlage default.htmldefault.html beim Partial area.htmlarea.html den ParametermaxColumnsmaxColumns mit dem Wert 22 an.

<div id="content">

<$= system.partial("area.html", "Standard", "2") $>

</div>

Der Anwender kann nun im Inhaltsbereich maximal 2 Spalten erstellen, also zwei Widgetsnebeneinander anordnen.

Passen Sie in der Datei styles.cssstyles.css die CSS-Stile für die Überschriften h1h1 h2h2 h3h3 den Links aaund den Button .button.button folgendermaßen an:

h1, h2, h3

margin: 10px 0 20px;

font‐size: 1.5em;

font‐weight: normal;

color: #45b202;

a

color: #45b202;


Inhaltsbereich anpassen

1. Inhaltsbereich in der Seitenvorlage anpassen

Markup

2. CSS für den Inhaltsbereich anpassen

CSS

Zeta Producer

Seite 42 von 153


http://www.blindtextgenerator.de



.button

display: inline‐block;

padding: 6px 8px;

color: #ffffff;


.button:hover


background‐color: #399500;


Wie Sie sehen sind die Überschriften und Links farblich angepasst. Fügen Sie auf einer Seite nun dasWidget Button ein, damit Sie auch diese Anpassungen nachvollziehen können. Fügen Sie außerdemnoch eine zweite Spalte ein. Danach können Sie testen, ob es möglich ist eine dritte Spalteeinzufügen. Wurde das Partial area.htmlarea.html richtig angepasst sollte dies jedoch nicht möglich sein.


Zeta Producer

Seite 43 von 153

Neben dem Inhaltsbereich ist im aktuellen Layout ein weiteres Partial area.htmlarea.html für denNewsbereich in der Seitenvorlage default.htmldefault.html enthalten.

<$ if ( page.anyAreaArticles("News") || (system.preview && system.showEmptyPreviewAreas

<div id="news">


</div>

<$ $>

Die If-Abfrage bewirkt, dass der Newsbereich nur angezeigt wird, wenn mindestens ein Widget imBereich vorhanden oder die Einfügen-Ansicht aktivieren ist.

Auf der Seite Navigation anpassen wurde der Newsbereich mit der Navigation getauscht und ist nunauf der linken Seite positioniert. Für das Beispiel soll der Newsbereich ähnlich der Navigation einfachetwas hervorgehoben werden.

In der Datei styles.cssstyles.css ist bereits ein CSS-Stil für den Newsbereich vorhanden. Passen Sie dasCSS wie folgt an, damit der Bereich deutlicher hervorgehoben wird:

#news


width: 200px;



#news .newsbox


#news h2

margin: 0 0 1px 0;

padding: 3px 6px;

font‐size: 1.0em;

Newsbereich anpassen

Markup

1. CSS für den Newsbereich anpassen und erweitern

CSS

Zeta Producer

Seite 44 von 153


http://docs.zeta-producer.com/inhalte-in-leeren-bereich-einfuegen.html

http://localhost:10953/preview/navigation-anpassen.html

color: #ffffff;


#news .newstext

padding: 3px 6px;

background‐color: #f0f0f0;


Falls in Ihrem Projekt noch kein Newsbereich dargestellt wird, können Sie wie im Online-Handbuchbeschrieben, Inhalte in den leeren Bereich einfügen.

Wie Sie sehen wird der Newsbereich nun optisch etwas hervorgehoben.


Zeta Producer

Seite 45 von 153


Mit Hilfe des Partial area.htmlarea.html können auch ganz leicht weitere Bereiche eingefügt werden. DasLayout soll beispielsweise einen Bannerbereich erhalten, welcher ganz oben auf der Seite angezeigtwerden soll. Ist Ihre Website für mehrere Sprachen ausgelegt können Sie in diesem Bereich zumBeispiel eine Sprachauswahl platzieren.

Fügen Sie in der Seitenvorlage default.htmldefault.html nach dem Wrapper-Block den neuen Bannerbereich:

<!‐‐ Banner ‐‐>

<div class="clearfix">

<$ if ( page.anyAreaArticles("Banner") || (system.preview && system.showEmptyPreviewAreas

<div id="banner">

<$= system.partial("area.html", "Banner", "4") $>

</div>

<$ $>

<!‐‐ End Banner ‐‐>

</div>

Die If-Abfrage bewirkt, dass der Bannerbereich nur angezeigt wird, wenn mindestens ein Widget imBereich vorhanden oder die Einfügen-Ansicht aktivieren ist.

Das Partial area.html weist Zeta Producer an, den Bereich Banner auszugeben. Der Anwender kannin diesem Bereich maximal 4 Spalten erstellen, also vier Widgets nebeneinander anordnen.

In der JSON-Datei der Seitenvorlage default.json müssen Sie einen weiteren Bereich mit dem nameBanner einfügen. Diese Deklaration ist nötig, damit Zeta Producer den Inhaltsbereich kennt und eineentsprechende Benutzeroberfläche für die Bearbeitung zur Verfügung stellen kann.

Bannerbereich einfügen

1. Bannerbereich in die Seitenvorlage einfügen

Markup

2. Bannerbereich in der JSON-Datei der Seitenvorlage deklarieren

JSON

Zeta Producer

Seite 46 von 153




"areas": [

"name": "Standard" ,

"name": "Header" ,

"name": "News" ,

"name": "Banner"

]

Fügen Sie in der Datei styles.cssstyles.css einen CSS-Stil für den Banner ein:

#banner


Fügen Sie wie im Online-Handbuch beschrieben Inhalt in den leeren Bannerbereich ein auf derStartseite ein.

Deutsch | English | Français


3. CSS für den Bannerbereich anpassen

CSS

3. Inhalt in den Bannerbereich einfügen

Beispielinhalt


Zeta Producer

Seite 47 von 153


Wie Sie sehen wird im Bannerbereich ganz oben auf der Seite die Sprachauswahl angezeigt.

Zeta Producer

Seite 48 von 153

In den Zeta Producer Basis-Layouts und dem Minimal-Layout sind drei Zusatz-Links definiert. In Ihremeigenen Layout können Sie die Zusatz-Links nun ganz einfach erweitern.

Hinweis: Die Werte der Zusatz-Links 1-3 werden in Attributen gespeichert. Wie Sie mitAttributen arbeiten, erfahren Sie in der Online-Dokumentation.

Im aktuellen Beispiel sieht der Code für die Zusatz-Links in der Seitenvorlage default.htmldefault.html desLayouts folgendermaßen aus:

<div id="xmenu">

<a href="#attribute(extramenu_url_1)">#attribute(extramenu_1)</a> ‐


<a href="#attribute(extramenu_url_3)">#attribute(extramenu_3)</a>

</div>

Möchten Sie nun beispielsweise die Zusatz-Links um Zwei erweitern, müssen Sie die Zusatz-Links 4und 5 mit den Attribut-Platzhaltern #attribute(extramenu_4)#attribute(extramenu_4) und #attribute(extramenu_url_4)#attribute(extramenu_url_4)bzw. #attribute(extramenu_5)#attribute(extramenu_5) und #attribute(extramenu_url_5)#attribute(extramenu_url_5) einfügen:

<div id="xmenu">






</div>

Hinweis: Natürlich können Sie anstatt der Attribut-Platzhalter auch direkt den Namen und denLink für den jeweiligen Zusatz-Link in die Seitenvorlage default.htmldefault.html einfügen.

Zusatz-Links erweitern

1. Zusatz-Links in der Seitenvorlage erweitern

Markup

Markup

Zeta Producer

Seite 49 von 153

http://docs.zeta-producer.com/zusatz-links-bearbeiten.html

http://docs.zeta-producer.com/attribute.html

Im Beispiel-Projekt müssen Sie nun nur noch die folgenden Attribute erstellen und die entsprechendenBeispiel-Werte eingeben:

Name: extramenu_4 Wert: Entwickler-DokumentationName: extramenu_url_4 Wert: Online-HandbuchName: extramenu_5 Wert: http://developer.zeta-producer.comName: extramenu_url_5Wert: http://developer.zeta-producer.com


Wie Sie sehen werden unten bei den Zusatz-Links zwei weitere Links Entwickler-Dokumentation undOnline-Handbuch angezeigt.

2. Attribute für die Zusatz-Links 4 und 5 in Zeta Producer erstellen


Zeta Producer

Seite 50 von 153

http://docs.zeta-producer.com/neues-attribut-erstellen.html

Als letzter Punkt des Beispiels soll Hintergrund der Website noch etwas attraktiver gestaltet werden.Dazu wird ein großes Hintergrundbild dem Beispiel-Layout hinzugefügt.

Öffnen Sie das Hintergrundbild durch Klick auf den Link cover.jpgcover.jpg im Browser und speicherndieses via Rechtsklick. Danach fügen Sie die Datei in den Assets-Ordner\Mein eigenes Layout\assets\Mein eigenes Layout\assets ein.

Fügen Sie in der Datei styles.cssstyles.css der body-Angabe das folgendes CSS hinzu:

background‐image: url(cover.jpg);

background‐position: center center;

background‐repeat: no‐repeat;

background‐attachment: fixed;

background‐size: cover;

Das CSS der body-Angabe sollte dann wie folgt aussehen:

body

m a r g i n : 0 ;

font‐family: Arial, Helvetica, sans‐serif;

font‐size: 0.9em;

line‐height: 1.3em;

color: #363b43;

background‐color: #e9e9e9;

background‐image: url(cover.jpg);

background‐position: center center;

background‐repeat: no‐repeat;

background‐attachment: fixed;

Hintergrundbild einfügen

1. Hintergrundbild in Assets-Ordner einfügen

2. CSS für das Hintergrundbild einfügen

CSS

CSS

Zeta Producer

Seite 51 von 153

http://developer.zeta-producer.com/layout-beispiel/assets/cover.jpg

background‐size: cover;

Beim Aufrufen einer Seite mit einem großen Hintergrundbild, welches via CSS (background-image)eingebunden ist, kann beim Laden ein Flackern auftreten. Um dies zu verhindern, fügen Sie in derSeitenvorlage default.htmldefault.html direkt nach dem <body><body> -tag einfach ein sog. Image-Preload ein:

<img src="<$= page.pathToRoot $>assets/cover.jpg" style="display:none" alt="" />


Klicken Sie in Zeta Producer auf Vorschau, damit die Seite extern in Ihrem Standard-Browserangezeigt wird. Das eingefügte Hintergrundbild sollte nun deutlich erkennbar sein.

Nach Durcharbeitung dieses Beispiels sollte Ihr eigenes Layout in etwa wie auf der Live-Demoaussehen.

3. Hintergrundbild in der Seitenvorlage vorladen (Image-Preload)

Markup


5. Ergebnis und Download

Zeta Producer

Seite 52 von 153


Das komplette Layout-Beispiel-Projekt können Sie über den nachfolgenden Button runtergeladen:

Download Layout-Beispiel-Projekt (ZIP)

Zeta Producer

Seite 53 von 153

http://localhost:10953/preview/media/files/Layout-Beispiel.zip

In diesem Beispiel wird eine einfache Textbox mit Hintergrundfarbe erstellt. Fährt die Maus über dieTextbox ändert sich die Hintergrundfarbe. Wird auf die Textbox geklickt, öffnet sich der im Widgeteingefügte Link.

Des Weiteren wird eine alternative Darstellungsform für das Widget erstellt, in welcher die Überschriftoberhalb der Textbox und der Link als Button dargestellt wird.

Neues Widget erstellenWidget einfügenWidget-Template anpassenWidget-CSS-Datei erstellenAlternative Darstellungsform

Das fertige Widget Textbox mit Link können Sie über nachfolgenden Button runterladen:

Widget Textbox mit Link runterladen (ZIP)

Widget erstellen

Das Beispiel enthält folgende Schritte:

Download

Zeta Producer

Seite 54 von 153

http://localhost:10953/preview/neues-widget-erstellen.html

http://localhost:10953/preview/widget-einfuegen.html

http://localhost:10953/preview/widget-template-anpassen.html

http://localhost:10953/preview/widget-css-datei-erstellen.html

http://localhost:10953/preview/alternative-darstellungsform.html

http://localhost:10953/preview/media/files/textbox-mit-link.zip

Als erstes öffnen Sie über den Befehl Extras | Entwickler | Widgets den Widget-Editor und erstellenüber den Button Neu ein Widget.

Siehe auch Ein neues Widget erstellen.

Nehmen Sie die folgende Einstellungen für das Widget vor:

Ordnername: textbox-mit-linkAnzeigename: Textbox mit Link

Fügen Sie über den Button Neu folgende Felder (Elemente) ein:

Grafischer HTML-Editor (Gruppe Text)Beschriftung: TextName: textfeldURL-Auswahl (Gruppe Verschiedenes)Beschriftung: LinkName: linkauswahl

Neues Widget erstellen

1. Widget-Editor öffnen

2. Widget-Einstellungen

Zeta Producer

Seite 55 von 153

http://localhost:10953/preview/ein-neues-widget-erstellen.html

In der Gruppe Dialog können Sie Ihr eigens Bild (48 x 48 Pixel) für das Widget auswählen.

Das Bild erscheint im Widget-Auswahldialog, wenn der Anwender ein neues Widget in seine Websiteeinfügen möchte.

Klicken Sie im Widget-Fenster auf den Button OK.

Wählen Sie den Scope Benutzer. Das erstellte Widget können Sie somit in all Ihren Web-Projektenverwenden.

3. Dialog-Einstellungen

4. Widget speichern

Zeta Producer

Seite 56 von 153


Fügen Sie auf einer Seite Ihres Web-Projekts das neu erstellte Widget ein. Klicken Sie dazu auf einenPlus-Button und wählen den Eintrag Widgets.

Das neu erstellte Widget Textbox mit Link ist bereits in der Widget-Auswahl vorhanden.

Wählen Sie das Widget aus und klicken auf den Button Einfügen.

Fügen Sie in der Eingabemaske des Widgets eine Überschrift und einen Text ein. Geben Sieaußerdem noch einen Link an.

Klicken Sie anschließend auf den Button OK.

Widget einfügen

1. Plus-Button klicken / Widget auswählen

2. Überschrift, Text und Link einfügen

Zeta Producer

Seite 57 von 153

Die in das Widget eingefügten Werte werden in Ihrem Web-Projekt untereinander dargestellt.

Im nächsten Schritt wird erklärt, wie Sie das Widget-Templates anpassen können.

3. Aktuelle Darstellung des Widgets

Zeta Producer

Seite 58 von 153

http://localhost:10953/preview/widget-template-anpassen.html

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

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

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

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

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

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

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

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

Widget-Template anpassen


2. Widget-Ordner aufrufen

3. Template-Datei bearbeiten

Markup

Zeta Producer

Seite 59 von 153

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.partialsystem.partial eingefügt werden, sindkleine, wiederverwendbare Code-Schnipsel.

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

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


<div class="textbox‐mit‐link">

<a href="<$= article.value("linkauswahl") $>">

<span>


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

</span>

</a>

</div>


Markup


Zeta Producer

Seite 60 von 153

http://localhost:10953/preview/partials.html


http://localhost:10953/preview/article-objekt.html

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind dieAnpassungen 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-linkzugegriffen und das Widget weiter angepasst werden.

Zeta Producer

Seite 61 von 153

http://localhost:10953/preview/widget-css-datei-erstellen.html

Erstellen Sie im Widget-Ordner textbox-mit-link eine neue CSS-Datei textbox‐mit‐link.csstextbox‐mit‐link.css .Fügen Sie in die Datei folgende CSS-Stile ein:

.textbox‐mit‐link span

display: block;

padding: 10px 20px;

background‐color: #0983D3;

.textbox‐mit‐link span:hover

background‐color: #F0694B;

.textbox‐mit‐link h2

color: #ffffff;

.textbox‐mit‐link a,

.textbox‐mit‐link a:hover

color: #ffffff;


Damit die CSS-Stile auch angewendet werden, müssen diese der CSS-Bundle-Datei hinzugefügtwerden. Öffnen Sie dazu im Widget-Ordner die Datei widget.jsonwidget.json und fügende folgenden Codehinzu:

"assets": [

"fileName": "textbox‐mit‐link.css",

" m o d e " : " B u n d l e " ,

" o r d e r " : 5 0

Widget-CSS-Datei erstellen

1. Widget-CSS-Datei erstellen

CSS

2. CSS-Stile der Bundle-Datei hinzufügen

JSON

Zeta Producer

Seite 62 von 153

],

"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": [


"mode": "Bundle",

"order": 50

],

"itemTemplates": [

"fileName": "standard.html"

]

Wechseln Sie nun wieder in Zeta Producer. Da der Entwickler-Live-Modus aktiviert ist, sind dieAnpassungen am Widget sofort sichtbar. Klicken Sie anschließend auf Vorschau. Hier können Sie

JSON-Datei komplett


Zeta Producer

Seite 63 von 153

den Hover-Effekt der Hintergrundfarbe sehen und den eingegebenen Link prüfen.

Zeta Producer

Seite 64 von 153

Jedes Widget kann über beliebig viele Templates für die Darstellung verfügen. Diese Templateskönnen vom Anwender entweder über die Widget-Eigenschaften ausgewählt werden oder über dasWidget-Feld Elementvorlagen-Auswahl, das Sie als Feld Ihrem Widget hinzufügen können.

Für das Widget Textbox mit Link wird in diesem Beispiel eine alternative Darstellungsform (Template)erstellt, in welcher die Überschrift oberhalb der Textbox und der Link als Button dargestellt wird.

Erstellen Sie im Widget-Ordner textbox-mit-link eine neue Template-Datei alternative.htmlalternative.html . Siekönnen hierfür auch die bereits vorhandene Datei standard.htmlstandard.html kopieren und umbenennen. FügenSie in die Datei folgende Code ein:


<div class="textbox‐mit‐link‐alt">



<a href="<$= article.value("linkauswahl") $>" class="button">

Los geht's

</a>

</div>


Wie Sie sehen sind für das alternativen Templates die Widget-Felder anders angeordnet. Der<div><div> -tag erhält die CSS-Klasse textbox-mit-link-alt mit deren Hilfe das CSS angepasst werden

kann. Des Weiteren erhält der <a><a> -tag die CSS-Klasse button.

Damit das Widget erkennt, dass es ein alternatives Template gibt, muss dieses in den Widget-

Alternative Darstellungsform

1. Alternative Template-Datei erstellen

Markup

2. Template-Info den Widget-Einstellungen hinzufügen

Zeta Producer

Seite 65 von 153

Einstellungen hinzugefügt werden. Öffnen Sie dazu die Datei widget.jsonwidget.json in Ihrem Editor und fügenfolgenden Code im Bereich itemTemplates hinzu:

"fileName": "alternative.html"

"settings":

"category": "favs",




,

"fields": [


"name": "textfeld",


,




,

"displayName": "Darstellung",

"name": "darstellung",

"type": "itemtemplate‐selection"

],

"assets": [


"mode": "Bundle",

"order": 50

],

"itemTemplates": [

JSON

JSON-Datei komplett

Zeta Producer

Seite 66 von 153


,


]

Öffnen Sie die CSS-Datei textbox‐mit‐link.csstextbox‐mit‐link.css in Ihrem Editor und fügen folgenden Code hinzu:

.textbox‐mit‐link‐alt a.button

padding: 10px;

background‐color: #0983D3;

.textbox‐mit‐link‐alt a.button:hover

background‐color: #F0694B;

Öffnen Sie über den Befehl Extras | Entwickler | Widgets den Widget-Editor. Wählen Sie das WidgetTextbox mit Link und klicken auf den Button Bearbeiten.

Fügen Sie über den Button Neu folgendes Widget-Feld (Elemente) ein:

Elementvorlagen-Auswahl (Gruppe Verschiedenes)Beschriftung: DarstellungName: darstellung

Klicken Sie zum Schließen auf den Button OK.

3. Widget-CSS-Datei anpassen

CSS

4. Elementvorlagen-Auswahl hinzufügen

Zeta Producer

Seite 67 von 153

Öffnen Sie in Zeta Producer das eingefügte Widget Textbox mit Link zum Bearbeiten. Waählen Sieaus der Liste Darstellung den Eintrag alternative. Klicken Sie anschließend auf den Button OK.

Wie Sie sehen können, hat sich die Darstellung des Widget Textbox mit Link entsprechend deralternativen Einstellungen geändert.


Zeta Producer

Seite 68 von 153

Zeta Producer

Seite 69 von 153

Beispiel: Sie möchten in das head-Element die Basis-Meta-Angaben für das Open Graph Protocol einfügen.

Öffnen Sie dazu die Datei default.htmldefault.html im Ordner templates/pagestemplates/pages Ihres Layouts. Fügen Sie nun die folgendeMeta-Angaben ein. Natürlich können Sie den contentcontent der Meta-Angaben entsprechend anpassen.

<meta property="og:title" content="Websites selbst erstellen mit Zeta Producer" />

<meta property="og:type" content="article" />

<meta property="og:url" content="http://www.zeta‐producer.com/" />

<meta property="og:image" content="http://www.zeta‐producer.com/_media/stock‐images/zeta‐producer‐logo.png

<meta property="og:description" content="Mit Zeta Producer, dem Desktop CMS fürr Windows, können Firmen und Agenturen professionelle Websites erstellen. Kostenlos für private Homepages.

Das Ergebnis können Sie beispielsweise mit dem Open Graph Debugger von Facebook testen.

Meta-Angaben einfügen

Meta-Angaben

Zeta Producer

Seite 70 von 153

http://ogp.me/

http://de.wikipedia.org/wiki/Facebook#Open_Graph

https://developers.facebook.com/tools/debug/

Um eigene CSS-Stile einzufügen, gibt es mehrere Möglichkeiten:

1. Über das style-Attribut innerhalb von html-Tags2. Über das style-Tag innerhalb des head-Elements3. Über einen link-Tag zu einer externen CSS-Datei

Hinweis: Sie können eigenes CSS auch direkt in Zeta Producer einfügen. Für kleiner CSS-Anpassungenempfehlen wir diese Vorgehensweise. Der Vorteil hierbei ist, dass Sie das Layout nicht kopieren müssen und somitweiter von unseren Layout-Updates profitieren.

CSS-Stile, die einem HTML-Element direkt über das stylestyle -Attribut zugewiesen werden, wirken sich nur auf dasentsprechende HTML-Element aus.

Öffnen Sie die Datei default.htmldefault.html im Ordner templates/pagestemplates/pages Ihres Layouts. Fügen Sie nun im gewünschtenHTML-Element das stylestyle -Attribut mit Ihren CSS-Stilen ein.

<h1 style="font‐size:18px; color:red;">

<$= system.htmlEncode(page.title) $>

</h1>

Ergebnis: Die h1h1 -Überschrift wird in der Schriftgröße von 18 Pixel und in der Farbe Rot angezeigt.

Das stylestyle -Element enthält globale CSS-Stile, die sich auf alle definierten Elemente auswirken und innerhalb desgesamten Dokuments gelten.

Öffnen Sie die Datei default.htmldefault.html im Ordner templates/pagestemplates/pages Ihres Layouts. Fügen Sie im headhead -Bereich dasstylestyle -Element mit Ihren CSS-Stilen ein.

<style type="text/css">

body

font‐family: Arial;

background‐color: gray;

h1

font‐size: 18px;

color: red;

</style>

CSS-Stile einfügen

1. CSS-Stile über das style-Attribut einfügen

Beispiel

2. CSS-Stile über das style-Element einfügen

Beispiel

Zeta Producer

Seite 71 von 153

http://localhost:10953/preview/css-stile-einfuegen.html#a1724



https://docs.zeta-producer.com/eigenes-css-einfuegen.html

Ergebnis: Für die Website wird global die Schriftart Arial und eine graue Hintergrundfarbe verwendet. Des Weiterenwerden alle h1h1 -Überschriften in der Schriftgröße von 18 Pixel und in der Farbe Rot angezeigt.

Eine externe CSS-Datei enthält globale CSS-Stile und wird immer dann verwendet, wenn umfangreiche CSS-Stiledefiniert werden müssen, die sich auf alle HTML-Dokumente der Website auswirken sollen.

Erstellen Sie in Ihrem HTML-/CSS-Editor eine neue CSS-Datei, beispielsweise mit dem Namen layout.csslayout.css . FügenSie in die CSS-Datei Ihre CSS-Stile ein und legen die Datei im Ordner assetsassets ab.

body

font‐family: Arial;

background‐color: gray;

h1

font‐size: 18px;

c o l o r : r e d ;

h2

font‐size: 14px;

c o l o r : b l u e ;

Öffnen Sie die Datei default.htmldefault.html im Ordner templates/pagestemplates/pages Ihres Layouts. Fügen Sie im headhead -Bereich daslinklink -Element zu Ihrer externen CSS-Datei ein.

<link rel="stylesheet" type="text/css" href="<$= page.pathToRoot $>assets/layout.css" />

Ergebnis: Für die Website wird global die Schriftart Arial und eine graue Hintergrundfarbe verwendet. Alle h1h1 -Überschriften werden in der Schriftgröße von 18 Pixel und in der Farbe Rot angezeigt, alle h2h2 -Überschriften in derSchriftgröße von 14 Pixel und in der Farbe Blau.

3. CSS über ein link-Element einfügen

Beispiel CSS

Beispiel

Zeta Producer

Seite 72 von 153

Zeta Producer

Seite 73 von 153

Eigenen JavaScript-Code können Sie beispielsweise in den headhead -Bereich der default.htmldefault.html oder über eine externeJavaScript-Datei einfügen.

Öffnen Sie die Datei default.htmldefault.html im Ordner templates/pagestemplates/pages Ihres Layouts.

Auf Ihrer Website soll automatisch immer das aktuelle Datum angezeigt werden. Fügen Sie dazu den folgendenJavaScript-Code innerhalb des headhead -Elements ein.

<script type="text/javascript">

w i n d o w.onload = function()

var date = new Date();

var wochentag = date.getDay();

var wochentagText = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag"

var tag = date.getDate();

var monat = date.getMonth();

var monatText = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August"

var jahr = date.getFullYear();

var datum = wochentagText[wochentag] + ", " + tag + ". " + monatText[monat] + " " + jahr;

d o c u m e n t.getElementById('date').innerHTML = datum;

</script>

Um das Datum nun anzuzeigen, fügen Sie einfach innerhalb des bodybody -Bereichs beispielsweise ein pp -tag mit der IDdate ein.

<body>

<p id="date"></p>

<p>Content...</p>

</body>

Erstellen Sie in Ihrem HTML-Editor eine neue JavaScript-Datei, beispielsweise mit dem Namen date.jsdate.js . Fügen Sie indie Datei nachfolgenden Code ein und legen die Datei im Ordner assetsassets ab.

JavaScript einfügen

1. JavaScript direkt in den head-Tag einfügen

Beispiel

Beispiel

2. JavaScript über eine externe Datei einfügen

Zeta Producer

Seite 74 von 153

function currentDate()

var date = new Date();

var wochentag = date.getDay();

var wochentagText = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");

var tag = date.getDate();

var monat = date.getMonth();

var monatText = new Array("Januar", "Februar", "März", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");

var jahr = date.getFullYear();

var datum = wochentagText[wochentag] + ", " + tag + ". " + monatText[monat] + " " + jahr;

document.getElementById('date').innerHTML = datum;

window.onload=currentDate;

Öffnen Sie die Datei default.htmldefault.html im Ordner templates/pagestemplates/pages Ihres Layouts. Fügen Sie im headhead -Bereich dasscriptscript -Element zu Ihrer externen JavaScript-Datei ein.

<script type="text/javascript" src="<$= page.pathToRoot $>assets/date.js"></script>

Beispiel JavaScript-Datei

Zeta Producer

Seite 75 von 153

Hier finden Sie alle Details zur Template-Engine von Zeta Producer. Zum Starten empfehlen wir Ihnen die Developer-Tour, die Schnellstart-Anleitungen oder die Beispiele.

LayoutsWidgetsPartialsObjektmodelljQuery

Referenz

Zeta Producer

Seite 76 von 153

http://localhost:10953/preview/tour.html






http://localhost:10953/preview/objektmodell.html

http://localhost:10953/preview/jquery.html

Hier finden Sie alle Informationen zu Layouts in Zeta Producer. Für schnelle Ergebnisse können Sie sich auch dieBeispiele oder die Schnellstart-Seiten anschauen.

Aufbau eines LayoutsScopes für LayoutsDie Datei layout.jsonAsset-Dateien kopierenCSS- und JavaScript-Dateien bündelnSeitenvorlagenInhaltsbereiche

Jedes Layout wird in einem Ordner im Dateisystem gespeichert. Innerhalb eines Layout-Ordners gibt es folgendeOrdner und Dateien:

assetsDer Ordner assets enthält Bilder, CSS-Dateien und alle anderen vom Layout benötigten Objekte. Dieser Ordnerkann auch Unterordner enthalten.templates/pagesHier sind die Seitenvorlagen enthalten, die den HTML-Code der Ausgabeseite definieren. Jedes Layout mussmindestens eine Seitenvorlage enthalten.

default.htmlEnthält den HTML-Code der Ausgabeseite.default.jsonEnthält verschiedene Einstellungen der Seitenvorlage und die Definition der vom Anwender bearbeitbarenBereiche.

templates/partialsDieser Ordner enthält sogenannte Partials, HTML-Fragmente, die innerhalb der Seitenvorlagen verwendet werdenkönnen.variantsEnthält die Varianten eines Layouts. Dieser Ordner kann für die Anpassung eines eigenen Layouts ignoriertwerden.layout.jsonDiese Datei enthält verschiedene Einstellungen des Layouts und legt fest, welche Dateien und Ordner aus assetsin die Ausgabe-Website kopiert werden sollen.

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

1. ProjektordnerBeispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 13\projects\*Projekt*\layoutsC:\Users\*Benutzer*\Documents\Zeta Producer 13\projects\*Projekt*\layouts

2. BenutzerordnerBeispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 13\layoutsC:\Users\*Benutzer*\Documents\Zeta Producer 13\layouts

3. Programmordner

Eigene Layouts können Sie im Projekt- oder Benutzerordner abspeichern. Der Programmordner sollte nicht verändert

Layouts-Referenz

Aufbau eines Layouts

Scopes für Layouts

Zeta Producer

Seite 77 von 153



http://localhost:10953/preview/layouts.html#a1765








werden. Wenn Sie das Standardverhalten eines mitgelieferten Layouts überschreiben wollen, können Sie dies erreichenindem Sie das Layout kopieren und unter dem gleichen Verzeichnisnamen im Projekt- oder Benutzerordnerabspeichern.

Diese JSON-Datei enthält alle Einstellungen des Layouts wie Name, Assets und vordefinierte Attribute.

"settings":

"version": "13.0.0.0",

"name": "Minimal‐Layout"

,

"assets": [

"fileName": "assets/styles.css",

"mode": "bundle",

"order": 50

,

"fileName": "assets/*",

"mode": "copy",

"ignore": []

],

"attributes": [],

"values": []

Als Asset-Dateien werden alle Dateien bezeichnet, die für die korrekte Darstellung Ihres Layouts benötigt werden.Neben JavaScript- und CSS-Dateien kann es sich dabei auch um Bilder und sonstige Dateien handeln. Kopieren Siealle benötigten Assets-Dateien in den Ordner assets des Layouts. Sie können zur besseren Strukturierung auchUnterordner verwenden.

Der Inhalt des Ordner assets wird nicht automatisch in den Ausgabeordner kopiert. Dadurch können Sie in diesemVerzeichnis auch temporäre Dateien für Tests oder verschiedene Versionen einer Datei aufbewahren ohne dass dieseveröffentlicht werden. Damit eine Asset-Datei kopiert wird, müssen Sie dies in der Datei layout.jsonlayout.json explizitdeklarieren.

"assets": [


Die Datei layout.json

Beispiel

Asset-Dateien kopieren

Beispiel

Zeta Producer

Seite 78 von 153


"mode": "copy"

]

Dieser Eintrag würde den kompletten Inhalt des assets-Ordners kopieren. Um nur einzelne Dateien zu kopierenverwenden Sie folgenden Code:

"assets": [


"mode": "copy"

,

"fileName": "assets/favicon.ico",

"mode": "copy"

]

Neben dem reinen Kopieren von Asset-Dateien bietet Zeta Producer für CSS- und JavaScript-Dateien noch eine zweiteMethode um diese in die erstellte Website einzubinden. Um Ladezeiten zu optimieren können alle von einem Layoutbenötigten CSS- und JavaScript-Dateien zu jeweils einer einzigen Bundle-Datei zusammengefügt werden. Hierbei wirdjeweils eine Bundle-Datei für JavaScript und CSS erstellt.Um diese Möglichkeit zu nutzen verwenden Sie bundle statt copy:

"assets": [


"mode": "bundle",

"order": 50

,

"fileName": "assets/uikit.css",

"mode": "bundle",

"order": 55

,

"fileName": "assets/uikit.js",

"mode": "bundle",

"order": 55

Beispiel

CSS- und JavaScript-Dateien bündeln

Beispiel

Zeta Producer

Seite 79 von 153

,


"mode": "copy",

"ignore": []

]

Über die Einstellung order können Sie die Reihenfolge der einzelnen Asset-Dateien in der Bundle-Datei bestimmen.Hier können Sie einen beliebigen numerischen Wert angeben, je kleiner um so früher wird die Datei in die Bundle-Dateieingefügt.

Verwenden Sie folgende Befehle um die gebündelten JavaScript-/CSS-Includes in Ihre Seitenvorlage aufzunehmen:

<$= project.bundleCss() $>

<$= project.bundleJs() $>

Der Ausgabecode für die Website wird in den Seitenvorlagen definiert. Diese befinden sich im Ordnertemplates/pagestemplates/pages . Jedes Layout muss mindestens eine und kann beliebig viele Seitenvorlagen enthalten. Der

Anwender kann pro Seite in den Eigenschaften entscheiden, welche Seitenvorlage verwendet werden soll.

Jede Seitenvorlage besteht aus zwei Dateien:

1. HTML-Datei, z.B. default.htmldefault.html2. JSON-Datei, z.B. default.jsondefault.json

Die Namen der beiden Dateien müssen (bis auf den Dateityp) identisch sein.

<!DOCTYPE html>

<html lang="#attribute(meta_contentlanguage)">

<head>

<!‐‐ Title ‐‐>

<title><$= page.title $></title>

<!‐‐ Meta Data ‐‐>

<meta http‐equiv="content‐type" content="text/html; charset=utf‐8" />

<meta name="description" content="<$= page.description $>" />

<meta name="keywords" content="<$= page.keywords $>" />

<meta name="generator" content="<$= system.generator $>" />

<meta name="robots" content="#attribute(meta_robots)" />

#attribute(additional_meta)

<!‐‐ Favicon ‐‐>

<link rel="shortcut icon" type="image/x‐icon" href="<$= page.pathToRoot $>assets/favicon.ico" />

Seitenvorlagen

Beispiel für HTML-Datei

Zeta Producer

Seite 80 von 153

<!‐‐ Bundled CSS ‐‐>


<!‐‐ Additional CSS ‐‐>

<$ if ( page.attribute("additional_css") ) $>

<style>

#attribute(additional_css)

</style>

<$ $>

<!‐‐ Bundled JavaScript ‐‐>


<!‐‐ RSS ‐‐>

<$= system.partial("rss.html") $>

<!‐‐ Mobile JavaScript ‐‐>

#attribute(mobile_script)

<!‐‐ Analytics Code ‐‐>

#attribute(google_analytics)

</head>

<body>

<a id="top"></a>

<!‐‐ Wrapper ‐‐>

<div id="wrapper">

<!‐‐ Topline ‐‐>


<!‐‐ Logo ‐‐>

<div id="logo">

<a href="<$= project.url $>"><img src="<$= page.pathToRoot $>assets/logo.png" alt="<$=

</div>

<!‐‐ Webname ‐‐>

<div id="webname">

<a href="<$= project.url $>">#attribute(web_name)</a>

</div>

<!‐‐ Search ‐‐>

<$= system.partial("searchfield.html", "inlineEditing": false ) $>

<!‐‐ End Topline ‐‐>

</div>

<!‐‐ Header ‐‐>

<$ if ( page.anyAreaArticles("Header") || (system.preview && system.showEmptyPreviewAreas) )

<$= system.partial("header.html", "Header") $>

<$ $>

Zeta Producer

Seite 81 von 153

<!‐‐ Breadcrumb ‐‐>

<$ if ( page.attribute("show_breadcrumb") ) $>

<div id="breadcrumb">

<$= system.partial("breadcrumbs.html", "#attribute(breadcrumb)", "#attribute(breadcrumb_separator)"

</div>

<$ $>

<!‐‐ Section ‐‐>


<!‐‐ Navigation ‐‐>

<nav id="navigation">

<$= system.partial("mainmenu.html") $>

</nav>

<!‐‐ News ‐‐>

<$ if ( page.anyAreaArticles("News") || (system.preview && system.showEmptyPreviewAreas) )

<div id="news">


</div>

<$ $>

<!‐‐ Content ‐‐>

<div id="content">

<$= system.partial("area.html", "Standard", "4") $>

</div>

<!‐‐ End Section ‐‐>

<div>

<!‐‐ Footer ‐‐>


<!‐‐ Extramenu ‐‐>

<div id="xmenu">




</div>

<!‐‐ Copyright ‐‐>

<div id="copyright">

#attribute(copyright_notice)

</div>

<!‐‐ End Footer ‐‐>

</div>

<!‐‐ End Wrapper ‐‐>

</div>

<!‐‐ Footer Script ‐‐>

Zeta Producer

Seite 82 von 153

#attribute(footer_script)

</body>

</html>

"areas": [


"name": "Header" ,

"name": "News"

]

Damit der Anwender in Ihrem Layout Inhalte erfassen kann, müssen Sie Inhaltsbereiche in Ihrer Seitenvorlage definieren.Jeder Inhaltsbereich wird über einen Namen definiert und muss an zwei Stellen definiert werden:

1. In der JSON-Datei der Seitenvorlage default.json.default.json. Diese Deklaration ist nötig, damit Zeta Producer denInhaltsbereich kennt und eine entsprechende Benutzeroberfläche für die Bearbeitung zur Verfügung stellen kann.

2. In der Seitenvorlage default.htmldefault.html . Hier bestimmen Sie wie und wo auf Ihrer Seite der eingegebene Contentausgegeben werden soll.

Um weitere Inhaltsbereiche auf einer Seite einzufügen bearbeiten Sie die default.jsondefault.json wie folgt:

"areas": [


"name": "Header" ,

"name": "News" ,

"name": "Banner"

]

Mit dieser Anweisung wird ein zusätzlicher Inhaltsbereiche Banner definiert. Um in der Seitenvorlage den Bereichauszugeben verwenden Sie folgenden Befehl in der default.htmldefault.html :

<$= system.partial("area.html", "Banner", "4") $>

Der Befehl verwendet das Partial area.html und weist Zeta Producer an, den Bereich Banner auszugeben. Der

Beispiel für JSON-Datei

Inhaltsbereiche

Beispiel

Beispiel

Zeta Producer

Seite 83 von 153


Anwender kann in diesem Bereich maximal 4 Spalten erstellen, also vier Artikel nebeneinander anordnen.

Zeta Producer

Seite 84 von 153

Im folgenden beschreiben wir, wie Sie vorgehen können, wenn ein Projekt aus einer Vorversion von Zeta Producer 13beim Öffnen nicht automatisch konvertiert werden kann, weil es ein individuelles Layout enthält.

Folgende Punkte verhindern ein Automatisches Konvertieren und erfordern ein händisches Anpassen verschiedenerDateien:

1. Die Struktur des Layout-Ordners ist neu.2. Neue Templating-Sprache ist jetzt JavaScript. Alte Seitenvorlagen/Widgets enthalten ggf. noch VBScript, das

umgeschrieben werden muss.3. Neues Objektmodell. Die Syntax hat sich vielfach geändert (z.B. ist page_.NameOrTitleIntellipage_.NameOrTitleIntelli jetzt

page.titlepage.title ).

Punkt 1. wird vom Layout-Konverter, den Sie hier downloaden können automatisch angepasst. Die Punkte 2. und 3. müssen von Ihnen in den diversen Dateien Ihres Layouts entsprechend angepasst werden. Dabeihilft Ihnen der neue Entwickler-Live-Modus, womit nach jeder Änderung das Layout automatisch neu geladen wird.

1. Projekt im Layout-Konverter öffnen und in einen Zielordner konvertieren lassen.2. Konvertiertes Projekt in Zeta Producer 13 öffnen3. Entwickler-Live-Modus aktivieren4. Skriptfehler in der Seitenvorlage, in Widgets und Partials korrigieren5. Seitenvorlage und Widgets aktualisieren

Layout-Konverter herunterladen

Das Layout-Konverter konvertiert Ihr altes Projekt und wandelt dabei die Struktur des alten Layout-Ordners in die neueOrdner-Struktur um. Ihre Datenbank wird ebenfalls konvertiert und ggf. vorhandene Widgets (eigene Artikelstile) werdenin neue Widget-Dateien konvertiert (im Unterordner "Widgets"), Im alten Template vorhandene, individuelle "Grids"(Navigations-Menüs etc.) werden in Partials umgewandelt und die Seitenvorlagen werden ebenfalls mit den nunbenötigten .json Dateien ergänzt.

Starten Sie den Layout-Konverter und wählen Sie im Abschnitt "Quell-Projekt-Ordner" über den Button"Durchsuchen" das zu konvertierende Projekt.Wählen Sie nun im Abschnitt "Ziel-Projekt-Ordner" über den Button "Durchsuchen" ein Ziel für das konvertierteProjekt (zum Beispiel den "Projects-"-Ordner im "Zeta-Producer-13"-Ordner)Klicken Sie auf den Button Konvertieren

Ältere Projekte mit individuellen Layouts in Version 13 konvertieren

Vorgehen um ein Projekt zu konvertieren

1. Projekt im Layout-Konverter öffnen und in einen Zielordner konvertieren lassen

Zeta Producer

Seite 85 von 153


http://localhost:10953/preview/entwickler-live-modus.html

http://www.zeta-producer.com/downloads/zp-layout-converter-12.5-setup.exe

Der Layout-Konverter nach dem Programmstart

Starten Sie Zeta Producer 13Klicken Sie im Menü "Website" auf den Button "Öffnen > Durchsuchen" und wählen Sie die ".zpproject"-Datei desin Schritt 1 konvertierten Projektes aus. Klicken Sie dann auf den Button "Öffnen" um das Projekt zu öffnenEventuell erscheinende Fehlermeldungen ignorieren Sie bitte zunächst und klicken Sie ggf. auf den Button"Fortfahren"

Aktivieren Sie den Entwickler-Live-Modus indem Sie im Menü "Extras" auf den Button "Entwickler" klicken und dort dieOption "Entwickler-Live-Modus" aktivieren.

Hierdurch wird nach jeder Änderung an einer Datei des verwendeten Layouts das Layout im Projekt automatisch neugeladen, so dass Sie Ihre Änderungen in Zeta Producer bzw. der Browser-Vorschau live beurteilen können.

Den erfolgreich aktivierten Entwickler-Live-Modus erkennen Sie am grauen Balken unter der Zeta Producer Menüleiste.

2. Konvertiertes Projekt in Zeta Producer 13 öffnen


4. Skriptfehler in der Seitenvorlage, in Widgets und Partials korrigieren

Zeta Producer

Seite 86 von 153

http://localhost:10953/preview/entwickler-live-modus.html

Nun öffnen Sie die Seitenvorlage im Texteditor Ihrer Wahl. Die Seitenvorlage heißt meist "default.html" und befindetsich im Layout-Ordner innerhalb Ihres Projekt-Ordners im Unterordner "templates" (Projektordner\layouts\layoutname\templates\default.html).Fügen Sie am Anfang der Datei eine neue Leerzeile ein. Speichern Sie die Datei und beobachten Sie, ob Sie inZeta Producer einen Fortschrittsbalken sehen, was uns zeigt, dass das Layout neu geladen wird und der Live-Preview funktioniert.Entfernen Sie die eben eingefügte Leerzeile und speichern Sie die Datei erneut.Achten Sie nun auf die Fehlermeldungen in Zeta Producer. Im Fehler-Dialog wird der Dateiname genannt, der denFehler beinhaltet. Sollte dies nicht der Dateiname Ihrer Seitenvorlage sein, so öffnen Sie bitte Datei, die imFehlerdialog referenziert wird.Bearbeiten Sie die genannte Datei und korrigieren Sie nach und nach die Fehler, die in Zeta Producer angezeigtwerden und speichern Sie die Datei nach jeder Änderung neu ab.Diesen Vorgang wiederholen Sie für alle fehlerhaften Dateien so lange bis alle Fehler entfernt sind und in ZetaProducer keine Fehler mehr angezeigt werden.

Fehleranzeige in Zeta Producer mit Indikation der Zeilennummer der Fehlerquelle sowie der Datei, welche den Fehlerenthält.

Der Layout-Konverter wird von uns kostenlos zur Verfügung gestellt und ist nicht dazu gedacht ein Projekt automatischund 100%ig zu konvertieren. Er soll lediglich eine Starthilfe sein und ihnen als Entwickler einen Großteil der Arbeitabnehmen. Der Konverter ist nicht perfekt und konvertierter Code kann Fehler enthalten.

Folgendes ist bereits bekannt:

Navigations-Grids, die in Partials konvertiert werden enthalten meist noch folgende Syntaxfehler:

"item-*"-Partials enthalten eine fehlerhavte "IF"-Bedingung. if "<$= page.target $> <> "" then if "<$= page.target $> <> "" then muss inif ( p.target ) if ( p.target ) geändert werden.

"item-*"-Partials referenzieren page.urlpage.url page.targetpage.target und article.headlinearticle.headline . Dies sollte jeweils ersetzt werden durch: p.urlp.url , p.targetp.target und p.namep.name ."submenu*"-Partials enhalten einen Fehler, der bei der Definition des Start-Levels für das erstellen des Submenüs.Der Wert ist jeweis um 1 zu hoch angegeben Ersetzen Sie also z.B. p.level!=2p.level!=2 durch p.level!=1p.level!=1

Im letzten Schritt binden Sie Ihre Bild-, CSS- und JavaScript-Dateien in der Seitenvorlage ein und abschließendüberprüfen Sie die Seitenvorlage (default.html) und Ihre Widgets auf nicht mehr unterstützten Code. Solcher Codeverursacht keine Fehlermeldungen und ist daher etwas schwerer zu finden. Entweder wird veralteter Code einfachgerendert und Sie sehen den Quellcode dann in der Zeta Producer Vorschau, oder der Code liefert kein Ergebnis mehrund daher auch keinen sichtbaren Inhalt.

In Ihrem Layout verwenden Sie üblicherweise auch Assets, also Bilder und Logos, die im "_media"-Unterordnerinnerhalb des Layout-Ordner abgelegt sind. Damit all diese Dateien auch von den Seitenvorlagen, CSS- und JavaScript-Dateien aus genutzt/referenziert werden können, bedarf es einem Eintrag in der Datei layout.json.

Hinweis!

5. Seitenvorlage und Widgets aktualisieren

Assets, CSS- und JavaScript-Dateien in Layout/Seitenvorlage einbinden

Zeta Producer

Seite 87 von 153

Durch den Konverter wurde der Ordner "_media" automatisch in "assets" umbenannt, was der neuen Konvention inVersion 12.5 entspricht. Der Konverter ersetzt im Pfad zu Referenzen auch bereits "_media/" durch "assets/", sodass Ihre vorhandenenReferenzen nach dem Eintrag in layout.json eigentlich direkt funktionieren sollten.

"assets": [

"fileName": "assets/*", "mode": "copy", "order": 200

]

Im obigen Code-Beispiel wird über den Parameter "fileName" festgelegt, dass der Ordner "assets" und die darinenthaltenen Dateien und Unterordner (/*) beim Erstellen von Seiten berücksichtigt und entsprechend in denAusgabe-Ordner (dort befinden sich ja alle Inhalte, die auf Ihren Webserver kopiert werden) kopiert (der Parameter"mode" ist auf den Wert "copy" gesetzt) werden.

Dieser Schritt ist notwendig, damit die entsprechenden Assets auch von bereits existierenden Verknüpfungen zuexternen CSS- oder JavaScript-Dateien referenziert werden können. Ohne den Eintrag in layout.json würden die Dateiennicht auf Ihren Webserver kopiert werden und Ihre vorhandenen Referenzen würden 404-Fehler verursachen.

Referenzen zu den globalen jQuery- und Widget-JavaScript-Dateien die wie folgt aussehen:

<script type="text/javascript" src="<<script type="text/javascript" src="<$= page.pathToRoot $>media/Scripting/ServerSideScripting/jQuery/jquery‐1.7.min.js"></script<$= page.pathToRoot $>media/Scripting/ServerSideScripting/jQuery/jquery‐1.7.min.js"></script<<script type="text/javascript" src="<<script type="text/javascript" src="<$= page.pathToRoot $>media/Scripting/ServerSideScripting/js/zp‐widgets.js"></script>$= page.pathToRoot $>media/Scripting/ServerSideScripting/js/zp‐widgets.js"></script>

ersetzen Sie bitte durch folgende Zeile:

<<$= project.bundleJs() $$= project.bundleJs() $>>

Sollten Sie in Ihren Referenzen sonst noch das Makro #page(path_to_root)#page(path_to_root) verwenden, ersetzen Sie es bitte durch<$= page.pathToRoot $><$= page.pathToRoot $>

Nun sollten Ihre vorhandenen Referenzen funktionsfähig sein.

Wir empfehlen aber den Einsatz der neuen "bundleCss"- und "bundleJs"-Befehle um mehrere CSS- undJavaScript-Dateien jeweils automatisch zu einer Datei zu kombinieren, was das Laden der Seitebeschleunigt.

Folgende Text-Makros werden ab Version 12.5 nicht mehr unterstützt:

#data#page#system#text (heißt nun #val – bitte entsprechend ersetzen)#web

Diese Makros sollten Sie mit der "Suchen"-Funktion Ihres Text-Editors finden und mit dem entsprechenden aktuellenCode ersetzen. Gute Text-Editoren biete eine Suchfunktion über mehrere Dateien hinweg. So können Sie schnell allealle Dateien (Seitenvorlagen, Widgets...) ermitteln, die veralteten Code enthalten.

Nun sollten Sie, nachdem Sie mal den Befehl "Website > Erstellen > Alle Seiten erstellen" ausgeführt haben, noch einegenaue optische Prüfung durchführen. Es kann z.B. sein, dass die Webseiten in der Vorschau keine Titel mehr haben,weil für die Ausgabe des Seitentitels ebenfalls veralteter Code genutzt wird. Ebenso müssen Sie die korrekteFunktionsweise Ihrer im Layout enthaltenen Widgets überprüfen.

Seitenvorlage und Widgets auf veralteten Code überprüfen

Zeta Producer

Seite 88 von 153





Gratulation! Ihr Projekt ist nun vollständig konvertiert.

Layout-Konverter herunterladen

Zeta Producer

Seite 89 von 153

http://www.zeta-producer.com/downloads/zp-layout-converter-12.5-setup.exe

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

Aufbau eines WidgetsScopes für WidgetsDie Datei widget.jsonTemplatesAssets

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

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

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

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

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

1. ProjektordnerBeispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 13\projects\*Projekt*\widgetsC:\Users\*Benutzer*\Documents\Zeta Producer 13\projects\*Projekt*\widgets

2. BenutzerordnerBeispiel: C:\Users\*Benutzer*\Documents\Zeta Producer 13\widgetsC:\Users\*Benutzer*\Documents\Zeta Producer 13\widgets

3. Programmordner

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

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

Widgets-Referenz

Aufbau eines Widgets

Scopes für Widgets

Die Datei widget.json

Beispiel

Zeta Producer

Seite 90 von 153




http://localhost:10953/preview/widgets.html#a1686





http://de.wikipedia.org/wiki/JavaScript_Object_Notation

"settings":

"category": "favs",




,

"fields": [


"name": "textfeld",


,




],

"assets": [


"mode": "Bundle",

"order": 50

],

"itemTemplates": [


]

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

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

"itemTemplates": [


,

Templates

Beispiel

Zeta Producer

Seite 91 von 153


]

Der Anwender kann das gewünschte Template im Artikel in den erweiterten Einstellungen auswählen. Alternativ könnenSie 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 dasWidget verwenden kann.




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


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

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

"assets": [

"fileName": "prism.css",

"mode": "Bundle",

"order": 520

,

"fileName": "prism.js",

"mode": "Bundle",

"order": 520

]

fileName

Beispiel

Assets

Beispiel

Zeta Producer

Seite 92 von 153

http://localhost:10953/preview/feldtypen.html#a1713



Der Dateiname der zu kopierenden Datei.

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

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

Zeta Producer

Seite 93 von 153

Hier finden Sie eine Liste aller möglichen Feldtypen, die Sie in Widgets verwenden können.

GruppeÜberschriftEinzeiliges TextfeldEinzeiliges Textfeld mit Hoch-/Runter-SchaltflächeMehrzeiliges TextfeldGrafischer HTML-EditorHTML-Quelltext-EditorDatumsauswahlListenfeldMehrfachauswahl-ListenfeldKontrollkästchenFarbauswahlBildauswahlBilderalbum-AuswahlDateiauswahlURL-AuswahlWeb-BrowserArtikel-ÜbersichtArtikel-AuswahlElementvorlagen-AuswahlAbstand/LinieAnmerkungInfo-Link

Ermöglicht bei vielen Feldern mehr Übersicht indem die Felder gruppiert werden.

Verhält sich ähnlich wie ein einfaches Textfeld und enthält zusätzlich Einstellungen für die Überschriften-Ebene (h1, h2,h3) und die Textausrichtung.

Ein einfaches, einzeiliges Textfeld.

Feldtypen in Widgets

Gruppe

Überschrift

Einzeiliges Textfeld

Zeta Producer

Seite 94 von 153
























Ermöglicht die bequeme Eingabe von Zahlen.

Sinnvoll für die Eingabe von mehrzeiligen Texten ohne Formatierung.

Der "Standard-Text-Editor" in Zeta Producer, ermöglicht die Eingabe von beliebig langen, formatierten Texten inklusiveBildern.

Für die direkte Eingabe von HTML-Code. Sinnvoll beispielsweise für die Übernahme von HTML-Snippets direkt in denContent-Bereich.

Einzeiliges Textfeld mit Hoch-/Runter-Schaltfläche

Mehrzeiliges Textfeld

Grafischer HTML-Editor

HTML-Quelltext-Editor

Datumsauswahl

Zeta Producer

Seite 95 von 153

Ein spezielles Feld für die Eingabe von Datumswerten.

Der Benutzer kann aus einer Auswahl von Einträgen einen wählen, freier Text ist nicht möglich.

Der Benutzer kann aus einer Auswahl von Einträgen einen oder mehrere wählen, freier Text ist nicht möglich.

Ein einfaches ja/nein-Feld.

Ermöglicht die Auswahl einer Farbe über den Windows Farbauswahl-Dialog.

Ermöglicht die Auswahl eines Bildes.

Listenfeld

Mehrfachauswahl-Listenfeld

Kontrollkästchen

Farbauswahl

Bildauswahl

Zeta Producer

Seite 96 von 153

Ermöglicht dem Anwender die Auswahl eines Bilderalbums oder adhoc das Erstellen eines neuen Bilderalbums durcheinen Bilderimport.

Ermöglicht die Auswahl einer Datei aus dem Dateisystem oder der integrierten Dateiverwaltung.

Mit diesem Feldtyp kann der Anwender eine Adresse/URL eingeben. Bei der Adresse kann es sich um eine externe,beliebige URL, eine interne Seite, eine interne Datei oder ein internes Bild handeln.

Ermöglicht die Einbindung eines Web-Browsers in das Widget. Dieser kann beispielsweise für die Registrierung beiOnline-Diensten verwendet werden, die im Widget verwendet werden.

Ermöglicht die Auswahl von bestimmten Artikeln die in einer Listenform ausgegeben werden um beispielsweise dieneuesten News-Artikel auf der Startseite darzustellen.

Bilderalbum-Auswahl

Dateiauswahl

URL-Auswahl

Web-Browser

Artikel-Übersicht

Zeta Producer

Seite 97 von 153

Ermöglicht die Auswahl eines bestimmten Artikels.

Bei Widgets mit mehreren Templates kann der Anwender mit diesem Feld das Template direkt auswählen ohne in dieerweiterten Einstellungen des Artikels wechseln zu müssen.

Fügt eine Trennlinie im Widget-Dialog ein um die Felder logisch zu gruppieren.

Fügt einen HTML-Text im Widget-Dialog ein. Damit können Sie dem Anwender Hinweise und Infos zur Benutzung IhresWidgets geben.

Zeigt einen Link im Widget-Dialog an. Diesen Link können Sie beispielsweise für Hintergrundinfos o.ä. nutzen.

Artikel-Auswahl

Elementvorlagen-Auswahl

Abstand/Linie

Anmerkung

Info-Link

Zeta Producer

Seite 98 von 153


Partials sind kleine, wiederverwendbare Code-Schnipsel, die Sie in der Seitenvorlage oder in Widgets über den Befehlsystem.partialsystem.partial verwenden können.

In diesem Kapitel erfahren Sie, welche Partials bereits "ab Werk" vorhanden sind und wie Sie diese nutzen können.

An Partials können Sie Parameter übergeben. Diese Parameter werden entweder als sogenannte "named Parameter"("name1":"wert1", "name2":"wert2"…) oder als Parameter-Liste ("wert1", "wert2"…) übergeben. Bei Parameter-Listenmuss man die Reihenfolge der Parameter einhalten und kann Parameter nur am Ende der Liste auslassen (nichtzwischendrin, weil dann die Reihenfolge durcheinander käme).

Sie können auch eigene Partials erstellen. Partials haben immer die Dateierweiterung ".html" und beinhalten HTML-Code, der mit JavaScript angereichert werden kann.

Damit Partials gefunden werden, müssen die Dateien sich in einem Ordner "partials" befinden der sich im Ordner"templates" des jeweiligen Layouts befindet.

Layout-Partials haben gegenüber globalen Partials (mit ZP installiert) Vorrang. Seien Sie also vorsichtig! Wenn Sie z.B.ein Partial namens "area.html" in Ihrem Layout definieren, so hat dies Vorrang vor dem mit Zeta Producer installierten,globalen Partial mit dem selben Namen. Dies könnte zu ungewollten Ergebnissen führen. Am besten benutzen Sie daherbei der Wahl der Dateinamen für Ihre Partials einfach einen Präfix, also z.B.: "layout-area.html"

<$

var parameters = context.param(0, );

var headlineText = args["hText"] || "";

var headlineLevel = args["hLevel"] || "h2";

$>

<<$= headlineLevel $>>

<$= headlineText $>

</<$= headlineLevel $>>

Im obigen Beispiel wird ein Partial erzeugt, das 2 benannte Parameter akzeptiert: hText und hLevel. Der Vorgabewert fürhText ist ein Leerstring (""), der Vorgabewert für hLevel (der Headline-Level H1, H2, H3 etc.) ist "h2". Vorgabewertewerden verwendet, wenn der jeweilige Parameter nicht übergeben wurde.

In Zeile 1 bis 5 werden die Parameter und ihre Vorgabewerte definiert.

In Zeile 7 bis 9 wird eine HTML-Überschrift anhand der übergebenen Parameter (Text und Level) ausgegeben.

Das so erstellte Partial würde folgendermaßen aufgerufen:

system.partial("layout‐head.html" "hLevel":"h1", "hText":"Die Überschrift" )system.partial("layout‐head.html" "hLevel":"h1", "hText":"Die Überschrift" )

Das Partial würde durch diesen Aufruf folgenden HTML-Code generieren:

<h1><h1> Die Überschrift Die Überschrift </h1></h1>

Partials-Referenz

Eigene Partials erstellen

Beispiel eines individuellen Partials "layout-head.html":

Zeta Producer

Seite 99 von 153



area.htmlarticle-begin.htmlarticle-end.htmlarticle-headline.htmlbreadcrumbs.htmlheader.htmlmainmenu.htmlrss.htmlsearchfield.htmlsitemap.htmlsubmenu.html

Partials, die mit Zeta Producer installiert wurden, aber nicht auf dieser Seite aufgeführt werden, sind (noch) nicht zurallgemeinen Nutzung freigegeben und werden momentan nur von Zeta Producer intern genutzt. Dies kann z.B. darinbegründet sein, dass der finale Funktionsumfang noch nicht genau feststeht und sich das Partial daher jeder Zeit ändernkann, was dann ggf. Ihren Code unbrauchbar machen würde.

Alle unten angegebenen Parameter sind optional. In der Liste der Parameter ist der Datentyp in rundenKlammern, der Vorgabewert in eckigen Klammern angegeben.

Syntax: system.partial("area.html", "areaName", maxColumns, "cssClass")system.partial("area.html", "areaName", maxColumns, "cssClass")

Gibt alle Artikel eines bestimmten Bereichs aus und legt fest, in wie vielen Spalten (maximal) Artikel in diesem Bereichnebeneinander angeordnet werden dürfen.

<$= system.partial("area.html", "Standard", 4) $>

Im Beispiel oben werden alle Artikel des Bereichs "Standard" ausgegeben. Es wird festgelegt, dass im BereichStandard Artikel in maximal 4 Spalten nebeneinander angeordnet werden können.

Hinweis: Der Bereich "Header" (Kopfgrafiken) wird nicht über area.html ausgegeben, sondern über das speziellePartial header.html

Unterstützte Parameter:

areaName (string) ["Standard"]Der Name des Bereichs für den Artikel ausgegeben werden sollen.

maxColumns (int|string) [4]Maximale Spaltenanzahl in der Artikel in diesem Bereich nebeneinander angeordnet werden dürfen..

cssClass (string) [""]CSS-Klassenname, der mit jeder "Reihe" ( <div class="zpRow cssClass"><div class="zpRow cssClass"> ) in diesem Bereich ausgegebenwird und womit dann "Reihen" in diesem Bereich per CSS entsprechend formatiert werden können.

Folgende Partials sind in Zeta Producer enthalten und zur allgemeinen Nutzungfreigegeben:

area.html

Beispiel:

Zeta Producer

Seite 100 von 153













Syntax:system.partial("article‐begin.html", "additionalClass", "articleAreaInlineCSS", "columnItemInlineCSS")system.partial("article‐begin.html", "additionalClass", "articleAreaInlineCSS", "columnItemInlineCSS")

Gibt den notwendigen HTML-Code aus, der zu Beginn eines Artikels stehen muss, damit der Artikel korrekt formatiertwird und bei Mouse-Over die entsprechenden Inline-Editing-Menüs angezeigt werden.

Wird üblicherweise in einem Widget verwendet.


additionalClass (string) [""]CSS-Klassenname, der im DIV ausgegeben wird, das den Artikel umschließt.

articleAreaInlineCSS (string) [""]String, der im DIV ausgegeben wird, das den Artikel umschließt und für Inline CSS wie z.B.style="border: 1px solid red;"style="border: 1px solid red;" genutzt werden kann

columnItemInlineCSS (string) [""]String, der mit jeder "Spalte", ( <div class="zpColumnItem columnItemInlineCSS"><div class="zpColumnItem columnItemInlineCSS"> ) die diesen Artikel umgibtausgegeben wird und für Inline CSS wie z.B. style="border: 1px solid red;"style="border: 1px solid red;"

Syntax: system.partial("article‐end.html")system.partial("article‐end.html")

Gibt den notwendigen HTML-Code aus, der am Ende eines Artikels stehen muss, damit der Artikel korrekt formatiertwird und bei Mouse-Over die entsprechenden Inline-Editing-Menüs angezeigt werden.

Wird üblicherweise in einem Widget verwendet.


keine

Syntax: system.partial("article‐headline.html", "fallbackColor")system.partial("article‐headline.html", "fallbackColor")

Gibt eine Überschrift aus und sorgt dafür, dass die Überschrift gemäß den über das Zahnrad-Icon eingestellten Optionenformatiert wird (Größe, Farbe, Ausrichtung).


fallbackColor (string) [""]Standard Farbwert, der genutzt wird, wenn über das Zahnrad-Icon keine Farbe angegeben wurde.

Syntax: system.partial("breadcrumbs.html", "breadcrumb", "breadcrumb_separator")system.partial("breadcrumbs.html", "breadcrumb", "breadcrumb_separator")

article-begin.html

article-end.html

article-headline.html

breadcrumbs.html

Zeta Producer

Seite 101 von 153

Gibt den Navigationspfad mit dem über das Navigationspfad-Inline-Editing-Menü vorgenommenen Einstellungen (Textund Trennzeichen) aus.

<div <$= system.partial("inline‐editing‐breadcrumb.html") $>>

<$= system.partial("breadcrumbs.html", "Sie befinden sich hier: ", "/") $>

</div>


breadcrumb (string) [""]Zeichenfolge, die vor dem Navigationspfad ausgegeben wird.

breadcrumb_separator (string) [""]Trennzeichen, das zwischen den Elementen im Navigationspfad ausgegeben wird.

Syntax: system.partial("header.html")system.partial("header.html")

Gibt die im Bereich "Header" platzierten Artikel aus.


keine

Syntax: system.partial("mainmenu.html", "parameter1":"wert1", "parameter2":false, … )system.partial("mainmenu.html", "parameter1":"wert1", "parameter2":false, … )

Gibt ein Hauptmenü für die Seitennavigation als HTML-Liste aus.

<$= system.partial("mainmenu.html", "max‐depth":2, "ulClass":"hauptmenue" ) $>


Beispiel:

header.html

mainmenu.html

Beispiel:

Zeta Producer

Seite 102 von 153

maxDepth (int|string) [0]legt die maximale Verschachtelungstiefe für Menüs fest.Dieser Parameter wird in von mainmenu.html an submenu.html weitergereicht

ulClass (string) [""]Klassen-Name für das UL-Tag: <ul class="parameter"><ul class="parameter">Menüs werden ja als unordered lists (ul) ausgegeben und dann per CSS entsprechend formatiert. Um eineFormatierung mittels CSS zu ermöglichen, können verschiedene Klassen-Namen oder auch IDs als Parameterübergeben werden, welche dann bei der Ausgabe der Listen-Elemente als class="_Parameter_"class="_Parameter_" bzw.id="_Parameter_"id="_Parameter_" ausgegeben werden.

ulID (string) [""]ID für das UL-Tag: <ul id="parameter"><ul id="parameter">

activeClass (string) [“active”]Klassen-Name für <li><li> - und <a><a> -Tags, der ausgegeben wird, wenn das Menü für die aktive Seite ausgegebenwird bzw. für eine Seite, welche die aktive Seite als Unterseite enthält:<li class="parameter"><a class="parameter" href="#">Seite</a></li><li class="parameter"><a class="parameter" href="#">Seite</a></li>

Dieser Parameter wird in von mainmenu.html an submenu.html weitergereicht

openClass (string) [""]Klassen-Name für <li><li> -Tags, der ausgegeben wird, wenn das Menü für Seiten welche die aktive Seite alsUnterseite enthalten: <li class="parameter"></li><li class="parameter"></li>Hiermit kann man z.B. für Dropdown-Menüs festlegen, wie ein geöffneter Menüeintrag aussehen soll.Dieser Parameter wird in von mainmenu.html an submenu.html weitergereicht

submeuUlClass (string) [""]Klassen-Name für das UL-Tag von Submenüs (Ab Verschachtelungstiefe 2): <ul class="parameter"><ul class="parameter">Dieser Parameter wird in von mainmenu.html nur an submenu.html durchgereicht

submenuLiClass (string) [""]Klassen-Name für das LI-Tag von Submenüs (Ab Verschachtelungstiefe 2): <li class="parameter"><li class="parameter">Dieser Parameter wird in von mainmenu.html nur an submenu.html durchgereicht

submenuWrapper (array) [ ["“,”"] ]Ein Wrapper bestehend aus einem Array mit 2 String-Elementen, der um die Submenü-Liste gelegt wird. DerErste-Array-Teil wird vor dem <ul><ul> des Submenüs ausgegeben, der 2. Teil nach dem schließenden </ul></ul> desSubmenüs.Beispiel:Parameter: "submenuWrapper":"['<div class=\"submenu\">','</div>']":"submenuWrapper":"['<div class=\"submenu\">','</div>']":Ausgabe: <div class="submenu"><ul>…</ul></div><div class="submenu"><ul>…</ul></div>Dieser Parameter wird in von mainmenu.html nur an submenu.html durchgereicht

Syntax: system.partial("rss.html")system.partial("rss.html")

Prüft ob für das Projekt RSS-Feeds aktiviert sind und gibt entsprechende Links zum Feed aus.Wird üblicherweise im <head>-Bereich des Layouts (default.html) verwendet


keine

rss.html

searchfield.html

Zeta Producer

Seite 103 von 153

Syntax: system.partial("searchfield.html", "parameter1":"wert1", "parameter2":false, … )system.partial("searchfield.html", "parameter1":"wert1", "parameter2":false, … )

Gibt ein Suchfeld anhand dessen Sie Ihre Website durchsuchen können als HTML-Formular mit aus.

<$ if ( page.attribute("search_field_visible") ) $>

<$= system.partial("searchfield.html", "useImageButton":true, "formClass":"pull‐right", "formId"

<$ $>


useImageButton (boolean) [false]Wenn truetrue , wird nach dem Formularfeld für die Suche eine Bild-Datei als Button ausgegeben, ansonsten einnormaler Submit-Button

formClass (string) [“zpsearchform”]Klassen-Name der für das Suche-Formular ausgegeben wird.Um eine Formatierung des Suchfelds, Buttons oder Formulars mittels CSS zu ermöglichen, können verschiedeneKlassen-Namen oder auch IDs als Parameter übergeben werden, welche dann bei der Ausgabe der HTML-Elemente als class="_Parameter_"class="_Parameter_" bzw. id="_Parameter_"id="_Parameter_" ausgegeben werden.

formId (string) [“zpsearchengine”]ID die für das Suche-Formular ausgegeben wird

fieldClass (string) [“zpsearchfield”]Klassen-Name der für das Such-Formularfeld ausgegeben wird

fieldId (string) [“zpsearchfield”]ID die für das Such-Formularfeld ausgegeben wird

buttonClass (string) [“zpsearchbutton”]Klassen-Name der für den Formular-Button ausgegeben wird

buttonId (string) [“zpsearchbutton”]ID die für den Formular-Button ausgegeben wird

buttonImageSrc (string) [“assets/stock-images/default-magnifier.png”]Der Quellpfad für die Bilddatei für den Formular-Button, wenn useImageButton truetrue ist.

buttonValue (string) [“Suchen”]Der Text, der im Formular-Button (normaler Submit-Button) ausgegeben wird, wenn useImageButton falsefalse ist.

Syntax: system.partial("sitemap.html", showHiddenPages, maxDepth)system.partial("sitemap.html", showHiddenPages, maxDepth)

Gibt eine Sitemap aus.


showHiddenPages (bool) [false]Legt fest, ob ausgeblendete Seiten auch in der Sitemap angezeigt werden (true) oder nicht (false).

maxDepth (int) [0]Maximale Verschachtelungstiefe bis zu der Seiten angezeigt werden. 0 = kein Limit. Wird maxDepth z.B. auf 2gesetzt, werden nur Seiten der 1. und 2. Ebene in der Sitemap angezeigt, also Hauptseiten und deren direkteUnterseiten.

Beispiel:

sitemap.html

Zeta Producer

Seite 104 von 153

Syntax: system.partial("submenu.html", "parameter1":"wert1", "parameter2":false, … )system.partial("submenu.html", "parameter1":"wert1", "parameter2":false, … )

Gibt ein Untermenü für die Seitennavigation als HTML-Liste aus.


pageId (int|string) [page.id]Die ID der Seite, für die das Untermenü erstellt werden soll.

maxDepth (int|string) [0]legt die maximale Verschachtelungstiefe für Menüs fest.

startLevel (int|string) [0]Hiermit kann festgelegt werden ob im Submenü aus entsprechende Vaterseiten ausgegeben werden. Wenn wirdim Submenü immer der gesamte Baum ab Ebene 2 ausgegeben und nicht nur die Links zu entsprechendenTochterseiten einer Seite.

wrapper (array) [ ["“,”"] ]Ein Wrapper bestehend aus einem Array mit 2 String-Elementen, der um die Submenü-Liste gelegt wird. DerErste-Array-Teil wird vor dem <ul><ul> des Submenüs ausgegeben, der 2. Teil nach dem schließenden </ul></ul> desSubmenüs.Beispiel:Parameter: "submenuWrapper":"['<div class=\"submenu\">','</div>']":"submenuWrapper":"['<div class=\"submenu\">','</div>']":Ausgabe: <div class="submenu"><ul>…</ul></div><div class="submenu"><ul>…</ul></div>

ulClass (string) [""]Klassen-Name für das UL-Tag von Submenüs (Ab Verschachtelungstiefe 2): <ul class="parameter"><ul class="parameter">Menüs werden ja als unordered lists (ul) ausgegeben und dann per CSS entsprechend formatiert. Um eineFormatierung mittels CSS zu ermöglichen, können verschiedene Klassen-Namen oder auch IDs als Parameterübergeben werden, welche dann bei der Ausgabe der Listen-Elemente als class="_Parameter_"class="_Parameter_" bzw.id="_Parameter_"id="_Parameter_" ausgegeben werden.

liClass (string) [""]Klassen-Name für das LI-Tag von Submenüs (Ab Verschachtelungstiefe 2): <li class="parameter"><li class="parameter">

activeClass (string) [“active”]Klassen-Name für <li><li> - und <a><a> -Tags, der ausgegeben wird, wenn das Menü für die aktive Seite ausgegebenwird bzw. für eine Seite, welche die aktive Seite als Unterseite enthält:<li class="parameter"><a class="parameter" href="#">Seite</a></li><li class="parameter"><a class="parameter" href="#">Seite</a></li>

openClass (string) [""]Klassen-Name für <li><li> -Tags, der ausgegeben wird, wenn das Menü für Seiten welche die aktive Seite alsUnterseite enthalten: <li class="parameter"></li><li class="parameter"></li>Hiermit kann man z.B. für Dropdown-Menüs festlegen, wie ein geöffneter Menüeintrag aussehen soll.

showDescription (boolean) [false]Legt fest ob der in den Seiteneigenschaften bei “Beschreibung” eingegebene Text mit ausgegeben wird. Dies wirdüblicherweise nur von Sitemaps genutzt. Das Sitemap-Widget nutzt ebenfalls das submenu.html Partial, daher wirddieser Parameter benötigt.

showHiddenPages (boolean) [false]Legt fest ob Einträge für Seiten, die via Seiteneigenschaften nicht im Navigations-Menü angezeigt werden,ausgegeben werden . Dies wird üblicherweise nur von Sitemaps genutzt. Das Sitemap-Widget nutzt ebenfalls dassubmenu.html Partial, daher wird dieser Parameter benötigt.

submenu.html

Zeta Producer

Seite 105 von 153

Als Layout- oder Widget-Entwickler programmieren Sie mit der integrierten JavaScript-Engine Ihren Code innerhalb vonHTML- und CSS-Dateien.

Hier finden Sie eine Dokumentation aller vorhandenen JavaScript-Objekte mit ihren Methoden und Eigenschaften.

article-Objektcontainer-Objektcontext-Objektpage-Objektparagraph-ObjektparagraphColumn-Objektproject-ObjektprojectFolder-Objektsystem-Objekt

Praxis-Beispiele finden Sie im Schnellstart-Tutorial sowie indem Sie sich die mitgelieferten Layouts und Widgets vonZeta Producer selbst in einem Editor anschauen.

Objektmodell

Zeta Producer

Seite 106 von 153




http://localhost:10953/preview/container-objekt.html

http://localhost:10953/preview/context-objekt.html

http://localhost:10953/preview/page-objekt.html

http://localhost:10953/preview/paragraph-objekt.html

http://localhost:10953/preview/paragraph-objekt-01.html

http://localhost:10953/preview/project-objekt.html

http://localhost:10953/preview/projectfolder.html

http://localhost:10953/preview/system-objekt.html


Eine Seite enthält 0..n Artikel. Benutzer von Zeta Producer geben ihre Daten in Artikeln ein, z.B. einText-Artikel, ein Bild-Artikel oder auch umfangreichere Artikel wie ein Gästebuch oder einVeranstaltungskalender. Ein Artikel ist innerhalb eines paragraphColumnparagraphColumn -Objekts definiert unddieses wiederum innerhalb eines paragraphparagraph -Objekts.

Die Artikel sind als Widgets definiert. In der JSON-Datei eines Widgets ist festgelegt, welche Werteder Benutzer eingeben kann; in der HTML-Datei eines Widgets ist festgelegt, wie dieseeingegebenen Werte auf der erstellten HTML-Seite dargestellt werden.

Sie werden auf das articlearticle -Objekt hauptsächlich per Skripting innerhalb der HTML-Datei ("Partial")eines Widgets zugreifen.

activeareacolumncssClassheadlineheadlineAlignheadlineColorheadlineLevelidinlineCssinArea()inheritedmodifyDatepageparagraphrender()urlvalue()valueExpanded()valueRaw()widgetName

Syntax: article.activearticle.active

Boolescher Wert, der angibt, ob der Artikel sichtbar oder unsichtbar ist.

Ein unsichtbarer Artikel verhält sich wie ein gelöschter Artikel; er ist in der erstellten HTML-Seite nichtenthalten. Der Vorteil gegenüber dem Löschen ist, dass Sie den Artikel jederzeit wieder sichtbarmachen können.

Die Eigenschaft activeactive gibt sowohl dann falsefalse zurück, wenn der Artikel inaktiv/unsichtbar ist, alsauch wenn dieser, aufgrund der konfigurierten Sichtbarkeit, zum Zeitpunkt des Erstellens der Seitenicht angezeigt wird.

article-Objekt

active

Zeta Producer

Seite 107 von 153





http://localhost:10953/preview/article-objekt.html#a1559





















Syntax: article.areaarticle.area

Der Name des Bereichs auf der Seite, in dem sich der Artikel befindet (bzw. die Spalte und derAbsatz des Artikels).

Werte sind z.B. "standard" oder "news".

Syntax: article.columnarticle.column

Gibt ein paragraphColumnparagraphColumn -Objekt mit der Spalte zurück, in dem sich der Artikel befindet.

Syntax: article.cssClassarticle.cssClass

Der vom Benutzer im erweiterten Artikel-Bearbeiten-Dialogfenster eingegebene CSS-Klassen-Name.

Im Widget muss die Eingabe einer CSS-Klasse für den Benutzer manuell aktiviert werden, damitdieser die CSS-Klasse eingeben kann.

<div class="<$= article.cssClass $>">

area

column

cssClass

Beispiel:

Zeta Producer

Seite 108 von 153


</div>

Verfügbar ab Version 13

Syntax: article.headlinearticle.headline

Die Überschrift des Artikels. Dieser Wert kann leer sein, wenn der Benutzer keine Überschrifteingegeben hat.

Syntax: article.headlineAlignarticle.headlineAlign

Die horizontale Ausrichtung der Überschrift Artikel.

Mögliche Werte sind:

leftleft - Linksbündig.centercenter - Zentriert.rightright - Rechtsbündig.

Syntax: article.headlineColorarticle.headlineColor

Die Farbe der Überschrift des Artikels als fertig zu benutzende Farbcode-Zeichenfolge. Wenn keineFarbe ausgewählt ist, wird eine leere Zeichenfolge zurückgegeben.

Zurückgegebene Werte können z.B. #3345F8#3345F8 sein, oder auch rgba(215, 40, 40, 0.9)rgba(215, 40, 40, 0.9) , falls derBenutzer einen Transparenzwert in der Farbe definiert hat.

Syntax: article.headlineLevelarticle.headlineLevel

Die Überschriften-Ebene des Artikels. Mögliche Werte sind h1, h2, h3 (entspricht den Überschriften-Tags H1, H2, H3).

headline

headlineAlign

headlineColor

headlineLevel

Zeta Producer

Seite 109 von 153

Syntax: article.idarticle.id

Die interne Datenbank-ID des Artikels.

Syntax: article.inlineCssarticle.inlineCss

Der vom Benutzer im erweiterten Artikel-Bearbeiten-Dialogfenster eingegebene Inline-CSS-Code.

Im Widget muss die Eingabe von Inline-CSS-Code für den Benutzer manuell aktiviert werden, damitdieser den Inline-CSS-Code eingeben kann.

<div style="<$= article.inlineCss $>">

</div>


Syntax: article.inArea(name)article.inArea(name)

Prüft ob der Artikel sich in dem angegebenen Bereich (z.B. "news") befindet und gibt einenbooleschen Wert zurück.

Syntax: article.inheritedarticle.inherited

Gibt an, ob der Artikel ein vererbter Artikel ist oder nicht. Gibt einen booleschen Wert zurück.

id

inlineCss

Beispiel:

inArea()

inherited

Zeta Producer

Seite 110 von 153

Syntax: article.modifyDatearticle.modifyDate

Das Datum, an dem der Artikel zuletzt geändert wurde.

Syntax: article.pagearticle.page

Gibt ein pagepage -Objekt mit der Seite zurück, in dem sich der Artikel befindet.

<div class="article">

<p>Die Seiten‐ID ist <$= article.page.id $>.</p>

</div>

Syntax: article.paragrapharticle.paragraph

Gibt ein paragraphparagraph -Objekt mit dem Absatz zurück, in dem sich der Artikel befindet.

Syntax: article.render()article.render()

Generiert den HTML-Code des fertigen Artikels.

Diese Funktion nimmt das HTML-Template, das im Widget des Artikels definiert ist, ruft den Skript-Code darin auf, ersetzt alle Platzhalter und liefert das Ergebnis als Zeichenfolge zurück.

<div class="article">

<$= article.render() $>

</div>

modifyDate

page

Beispiel:

paragraph

render()

Beispiel:

Zeta Producer

Seite 111 von 153



Syntax: article.urlarticle.url

Die relative URL des Artikels. Das entspricht der URL der Seite, auf der sich der Artikel befindetsowie der Sprungmarke innerhalb der Seite, um direkt zum Artikel zu scrollen.

Syntax: article.value(key, fallBack = null)article.value(key, fallBack = null)

Liefert einen vom Benutzer eingegebenen/ausgewählten Wert des Artikels.

keykey - Der Name des Werts, der gelesen werden soll. Das entspricht den "name""name" -Einträgender "fields""fields" -Liste in der "widget.json"-Datei.fallBackfallBack - Falls der Wert nicht gefunden wurde, kann optional beim Aufruf der Funktion ein

Wert angegeben werden, der zurückgeliefert wird.

Der Rückgabewert ist kommt immer mit dem richtigen Datentyp zurück, also z.B. als boolescher Wert,ganze Zahl oder Fließkommazahl. Das kann wichtig bei der weiteren Verarbeitung im JavaScriptwerden, so dass Sie z.B. keinen parseInt()parseInt() -Aufruf machen müssen.

Syntax: article.valueExpanded(key, fallBack = null)article.valueExpanded(key, fallBack = null)

Verhält sich analog zur value()value() -Funktion mit dem Unterschied, dass etwaige im zurückgegebenWert enthalten Skript-Aufrufe und Platzhalter bereits expandiert sind.

Syntax: article.valueRaw(key, fallBack = null)article.valueRaw(key, fallBack = null)

Verhält sich analog zur value()value() -Funktion mit dem Unterschied, dass der Rückgabewert immer alsZeichenfolge zurückgegeben wird und der Datentyp nicht geändert wird.

Es werden also z.B. auch boolesche Werte und Zahlen immer als Zeichenfolge zurückgegeben.

url

value()

valueExpanded()

valueRaw()

Zeta Producer

Seite 112 von 153

Syntax: article.widgetNamearticle.widgetName

Der Name (uiname) des Widgets, das für den Artikel verwendet wird. Z.B. "Button" oder"Konfiguration / Warenkorb".

widgetName

Zeta Producer

Seite 113 von 153

Ein containercontainer -Objekt fasst mehrere paragraphparagraph -Objekte zusammen. Es ist also die logischübergeordnete Struktur zu Absätzen.

Dieses Objekt ist nicht in allen Layouts verfügbar.

Mithilfe eines Container-Objekts kann während des Render-Vorgangs ein übergeordnetes Container-DIV-Tag um mehrere Paragraph-DIV-Tags herum aufgebaut werden.

Damit können Effekte erreicht werden wie z.B. ein Hintergrundbild über die ganze Seitenbreite fürmehrere Absätze.


cssClassidinlineCssparagraphvalue()valueExpanded()valueRaw()

Syntax: container.cssClasscontainer.cssClass

Der vom Benutzer im Absatz-Bearbeiten-Dialogfenster in der Container-Sektion eingegebene CSS-Klassen-Name.


<div class="<$= container.cssClass $>">

</div>

Syntax: container.idcontainer.id

Die interne Datenbank-ID des Containers.

container

cssClass

Beispiel:

id

Zeta Producer

Seite 114 von 153

http://localhost:10953/preview/container-objekt.html#a2407







Syntax: container.inlineCsscontainer.inlineCss

Der vom Benutzer im Absatz-Bearbeiten-Dialogfenster in der Container-Sektion eingegebene Inline-CSS-Code.


<div style="<$= container.inlineCss $>">

</div>

Syntax: container.paragraphcontainer.paragraph

Gibt das erste paragraphparagraph -Objekt zurück, vor dem der Container beginnt.

Der Benutzer kann pro Absatz über ein Kontrollkästchen konfigurieren, ob ein Container an diesemAbsatz beginnen soll.

Der Container ist dann für alle nachfolgenden Absätze so lange gültig, bis der Benutzer wieder beieinem Absatz das Kontrollkästchen aktiviert. Alternativ ist der letzte Absatz eines Bereichs implizitdas Ende des Containers.

Syntax: container.value(key, fallBack = null)container.value(key, fallBack = null)

Liefert einen vom Benutzer eingegebenen/ausgewählten Wert des Containers.

keykey - Der Name des Werts, der gelesen werden soll. Das entspricht den "name""name" -Einträgender "fields""fields" -Liste in der JSON-Datei der Seitenvorlage.fallBackfallBack - Falls der Wert nicht gefunden wurde, kann optional beim Aufruf der Funktion ein



inlineCss

Beispiel:

paragraph

value()

Zeta Producer

Seite 115 von 153


Syntax: container.valueExpanded(key, fallBack = null)container.valueExpanded(key, fallBack = null)


Syntax: container.valueRaw(key, fallBack = null)container.valueRaw(key, fallBack = null)



valueExpanded()

valueRaw()

Zeta Producer

Seite 116 von 153

Das contextcontext -Objekt ermöglicht einen direkten Zugriff auf den Ausgabestrom der aktuellen Seite.

Der Ausgabestrom ist die Zeichenfolge (String), die am Ende als fertige HTML-Datei aus einerVorlagendatei, den verwendeten Widgets und den vom Benutzer eingegebenen Texten erstellt wird.

Syntax: context.write(text)context.write(text)

Schreibt einen Text an der aktuellen Position in die aktuell erstellte Seite.

Nutzen Sie diese Funktion um innerhalb eines Skriptblocks direkt einen Text auszugeben, ohne in denHTML-Kontext wechseln zu müssen um mit <$= ... $><$= ... $> einen Wert zu schreiben.

context.write(system.generator);

Schreibt die Programmversion von Zeta Producer in den Ausgabestrom.

Dieser Beispiel-Code ist also gleichwertig zu <$= system.generator $><$= system.generator $> .

context-Objekt

write()

Beispiel:

Zeta Producer

Seite 117 von 153

Das pagepage -Objekt erlaubt den Zugriff auf die Eigenschaften einer einzelnen Seite.

absoluteUrlactiveanyAreaArticles()articlesarticlesInArea()attribute()descriptionextensionidkeywordslastChangelevelnamepagesparagraphs()parentPageparentPageIdpathToRootprojectFoldersearchTermstargettitletypeurlvalue()valueExpanded()valueRaw()visible

Syntax: page.absoluteUrlpage.absoluteUrl

Die absolute URL der Seite, komplett mit der öffentlichen Web-URL.

Syntax: page.activepage.active

Boolescher Wert, der angibt, ob die Seite aktiv oder inaktiv ist.

page-Objekt

absoluteUrl

active

Zeta Producer

Seite 118 von 153





























Inaktive Seiten werden nicht erstellt und nicht auf den Webserver kopiert, sind also physikalisch nichtvorhanden. Wir eine ehemals aktive Seite deaktiviert, wird sie beim nächsten Veröffentlichungs-Vorgang vom Webserver gelöscht.

Syntax: page.anyAreaArticles(name)page.anyAreaArticles(name)

Boolescher Wert, der angibt, ob es im Bereich mit dem angegebenen Namen (z.B. "news") Artikelzum Anzeigen gibt.

Syntax: page.articlespage.articles

Ermittelt eine Liste mit 0..n Artikel-Objekten vom Typ articlearticle , aus allen Spalten in allen Absätzender Seite.

Über die Liste kann mit einer for-Schleife iteriert werden:

countcount ist die aktuelle Anzahl von Artikeln in der Liste.item(item(indexindex)) liefert den Artikel am angegebenen Index (0-basiert).

Syntax: page.articlesInArea(name)page.articlesInArea(name)

Ermittelt eine Liste mit 0..n Artikel-Objekten vom Typ articlearticle , aus allen Spalten in allen Absätzen imangegebenen Bereich mit dem Namen namename in der Seite.



Syntax: page.attribute(name, fallBack = null)page.attribute(name, fallBack = null)

Liest ein Seiten-Attribut mit dem angegebenen Namen. Ist das Attribut nicht vorhanden, dann wird der

anyAreaArticles()

articles

articlesInArea()

attribute()

Zeta Producer

Seite 119 von 153

http://docs.zeta-producer.com/website-veroeffentlichen.html



http://docs.zeta-producer.com/attribute.html#a1633

Standardwert aus dem fallBackfallBack -Parameter zurückgegeben.


Syntax: page.descriptionpage.description

Liefert die Beschreibung der Seite.

<meta name="description" content="<$= page.description $>" />

Gibt die Seitenbeschreibung als HTML-Meta-Tag aus.

Syntax: page.extensionpage.extension

Der Dateityp der Seite. Z.B. ".html" oder ".php".

Syntax: page.idpage.id

Die interne Datenbank-ID der Seite.

Syntax: page.keywordspage.keywords

Liefert die Keywords der Seite.

description

Beispiel:

extension

id

keywords

Beispiel:

Zeta Producer

Seite 120 von 153

http://docs.zeta-producer.com/seiten-eigenschaften-optimieren.html

http://docs.zeta-producer.com/seiten-eigenschaften-optimieren.html

Syntax: page.paragraphs(areaName)page.paragraphs(areaName)

Ermittelt eine Liste mit 0..n Absatz-Objekten vom Typ paragraphparagraph , dem Bereich areaNameareaName .


countcount ist die aktuelle Anzahl von Absätzen in der Liste.item(item(indexindex)) liefert den Absatz am angegebenen Index (0-basiert).

Syntax: page.parentPagepage.parentPage

Gibt die übergeordnete Seite zurück. Liefert nullnull , wenn die Seite bereits die oberste ist.

<p><$= page.parentPage.name $></p>

Syntax: page.parentPageIdpage.parentPageId

Die ID der übergeordneten Seite.

Eine Hauptseite liefert die ID des Projektordners zurück.

Syntax: page.pathToRootpage.pathToRoot

Der relative Pfad der Seite zum Stammordner der Website. Z.B. "../../".

Syntax: page.projectFolderpage.projectFolder

paragraphs()

parentPage

Beispiel:

parentPageId

pathToRoot

projectFolder

Zeta Producer

Seite 122 von 153


Liefert das Projektordner-Objekt vom Typ projectFolderprojectFolder , zu dem die Seite gehört.

Syntax: page.searchTermspage.searchTerms

Liefert eine Leerzeichen-getrennte Zeichenfolge von allen Suchbegriffen dieser Seite.

Dies beinhaltet den Volltext der einzelnen Artikel sowie der Felder der Seite selbst.

Syntax: page.targetpage.target

Falls der Benutzer in den Seiteneigenschaften eine alternative URL hinterlegt hat und ein Linkziel("Target"), dann liefert diese Eigenschaft das Linkziel als Zeichenfolge zurück, z.B. "_blank".

Syntax: page.titlepage.title

Liefert den Titel der Seite.

Hat der Benutzer keinen Titel angegeben, wird stattdessen der Wert der Eigenschaft namenamezurückgegeben.

Syntax: page.typepage.type

Gibt an, ob es sich um eine Seite oder einen Projektordner handelt.

Mögliche Rückgabewerte sind:

pagepageprojectFolderprojectFolder

searchTerms

target

title

type

Zeta Producer

Seite 123 von 153

http://localhost:10953/preview/projectfolder.html

Syntax: page.urlpage.url

Liefert die relative URL einer Seite zur aktuellen Seite.

Falls der Benutzer in den Seiteneigenschaften eine alternative URL hinterlegt hat, dann wird diesezurückgegeben.

Syntax: page.value(key, fallBack = null)page.value(key, fallBack = null)

Liefert einen vom Benutzer eingegebenen/ausgewählten Wert der Seite.




Syntax: page.valueExpanded(key, fallBack = null)page.valueExpanded(key, fallBack = null)

Verhält sich analog zur value()value() -Funktion mit dem Unterschied, dass etwaige im zurückgegebenWert enthalten Skript-Aufrufe und Platzhalter bereits ersetzt ("expandiert") sind.

Syntax: page.valueRaw(key, fallBack = null)page.valueRaw(key, fallBack = null)



url

value()

valueExpanded()

valueRaw()

Zeta Producer

Seite 124 von 153

Syntax: page.visiblepage.visible

Boolescher Wert, der angibt, ob die Seite im Menü auf der Website sichtbar ist oder nicht.

Seiten, die nicht im Menü sichtbar sind, werden ganz normal erstellt und veröffentlicht. Sie müssenmanuell innerhalb eines Artikels verlinkt werden, damit sie für Website-Besucher erreichbar sind.

visible

Zeta Producer

Seite 125 von 153

Das paragraphparagraph -Objekt repräsentiert einen Absatz (eine "Zeile") mit 1 oder mehreren Spalten mitjeweils 1 oder mehreren Artikel.

areaarticlescolumnscontainercssClasshasArticlesidinlineCssvalue()valueExpanded()valueRaw()

Syntax: paragraph.areaparagraph.area

Der Name des Bereichs auf der Seite, in dem sich der Absatz befindet.


Syntax: paragraph.articlesparagraph.articles

Ermittelt eine Liste mit 0..n Artikel-Objekten vom Typ articlearticle , aus allen paragraphColumnparagraphColumn -Objekten im aktuellen Absatz.



Die zurückgegebenen Artikel sind abhängig von:

1. Ob Artikel aktiv/inaktiv sind (entweder weil der Benutzer den Artikel explizit auf inaktiv gesetzthat, oder weil dieser aufgrund der zeitgesteuerten Sichtbarkeit zum aktuellen Zeitpunktunsichtbar ist)

2. Wie der Benutzer den "Einfügen an/aus"-Schalter im Hauptfenster rechts oben gesetzt hat.

Folgende Logik gilt:

paragraph-Objekt

area

articles

Zeta Producer

Seite 126 von 153

http://localhost:10953/preview/paragraph-objekt.html#a2420












Wenn "Einfügen an/aus" auf "aus" steht und ein Artikel aktiv ist, wird der Artikel mit in dieserListe zurückgegeben.Wenn "Einfügen an/aus" auf "an" steht und ein Artikel aktiv ist, wird der Artikel mit in dieser Listezurückgegeben. Inaktive Artikel werden ebenfalls zurückgegeben, und zwar dann, wenn für dieinterne Vorschau in Zeta Producer gerendert wird. Also wenn system.previewsystem.preview den Wert truetruehat. Hat system.previewsystem.preview den Wert falsefalse , werden inaktive Artikel nicht zurückgegeben.

Syntax: paragraph.columnsparagraph.columns

Ermittelt eine Liste mit 0..n Objekten vom Typ paragraphColumnparagraphColumn , mit allen Spalten im aktuellenAbsatz.


countcount ist die aktuelle Anzahl von Spalten in der Liste.item(item(indexindex)) liefert die Spalte am angegebenen Index (0-basiert).

Syntax: paragraph.containerparagraph.container

Wenn an genau diesem Absatz ein neuer Container beginnt, wird ein Objekt vom Typ containercontainerzurück gegeben.

Ist hingegen der Absatz nicht der erste Absatz in einem Container ist (also z.B. der zweite oder dritteAbsatz), wird nullnull zurück gegeben.

Der Benutzer kann pro Absatz über ein Kontrollkästchen konfigurieren, ob ein Container an diesemAbsatz beginnen soll.

Der Container ist dann für alle nachfolgenden Absätze so lange gültig, bis der Benutzer wieder beieinem Absatz das Kontrollkästchen aktiviert. Alternativ ist der letzte Absatz eines Bereichs implizitdas Ende des Containers.

Syntax: paragraph.cssClassparagraph.cssClass

Der vom Benutzer im Absatz-Bearbeiten-Dialogfenster eingegebene CSS-Klassen-Name.

Im Widget muss die Eingabe einer CSS-Klasse für den Benutzer manuell aktiviert werden, damit

columns

container

cssClass

Zeta Producer

Seite 127 von 153



dieser die CSS-Klasse eingeben kann.

<div class="<$= paragraph.cssClass $>">

</div>


Syntax: paragraph.hasArticlesparagraph.hasArticles

Prüft, ob im Absatz Artikel enthalten sind.

Das zurückgegebene Ergebnis ( truetrue / falsefalse ) ist abhängig von:

1. Ob Artikel aktiv/inaktiv sind (entweder weil der Benutzer Artikel explizit auf inaktiv gesetzt hat,oder weil Artikel aufgrund der zeitgesteuerten Sichtbarkeit zum aktuellen Zeitpunkt unsichtbarsind).



Wenn keine Artikel vorhanden sind, wird falsefalse zurückgegeben.Wenn "Einfügen an/aus" auf "aus" steht und mindestens ein Artikel aktiv ist, wird truetruezurückgegeben.Wenn "Einfügen an/aus" auf "an" steht und mindestens ein Artikel aktiv ist, wird truetruezurückgegeben. Sind inaktive Artikel vorhanden, wird ebenfalls truetrue zurückgegeben, und zwardann, wenn für die interne Vorschau in Zeta Producer gerendert wird. Also wennsystem.previewsystem.preview den Wert truetrue hat. Hat system.previewsystem.preview den Wert falsefalse , wird falsefalse

zurückgegeben.

Syntax: paragraph.idparagraph.id

Die interne Datenbank-ID des Absatzes.

Syntax: paragraph.inlineCssparagraph.inlineCss

Beispiel:

hasArticles

id

inlineCss

Zeta Producer

Seite 128 von 153

Der vom Benutzer im Absatz-Bearbeiten-Dialogfenster eingegebene Inline-CSS-Code.


<div style="<$= paragraph.inlineCss $>">

</div>


Syntax: paragraph.value(key, fallBack = null)paragraph.value(key, fallBack = null)

Liefert einen vom Benutzer eingegebenen/ausgewählten Wert des Absatzes.




Syntax: paragraph.valueExpanded(key, fallBack = null)paragraph.valueExpanded(key, fallBack = null)


Syntax: paragraph.valueRaw(key, fallBack = null)paragraph.valueRaw(key, fallBack = null)



Beispiel:

value()

valueExpanded()

valueRaw()

Zeta Producer

Seite 129 von 153

Zeta Producer

Seite 130 von 153

Ein paragraphColumnparagraphColumn -Objekt repräsentiert eine Spalte in einem Absatz ( paragraphparagraph -Objekt). Ineiner Spalte können 0..n articlearticle -Objekte enthalten sein.

areaarticlescssClassidinlineCsshasArticlesvalue()valueExpanded()valueRaw()

Syntax: paragraphColumn.areaparagraphColumn.area

Der Name des Bereichs auf der Seite, in dem sich die Spalte befindet.


Syntax: paragraphColumn.articlesparagraphColumn.articles

Ermittelt eine Liste mit 0..n Artikel-Objekten vom Typ articlearticle , aus allen paragraphparagraph -Objekten.



Die zurückgegebenen Artikel sind abhängig von:

1. Ob Artikel aktiv/inaktiv sind (entweder weil der Benutzer den Artikel explizit auf inaktiv gesetzthat, oder weil dieser aufgrund der zeitgesteuerten Sichtbarkeit zum aktuellen Zeitpunktunsichtbar ist)



paragraphColumn-Objekt

area

articles

Zeta Producer

Seite 131 von 153



http://localhost:10953/preview/paragraph-objekt-01.html#a2421










Wenn "Einfügen an/aus" auf "aus" steht und ein Artikel aktiv ist, wird der Artikel mit in dieserListe zurückgegeben.Wenn "Einfügen an/aus" auf "an" steht und ein Artikel aktiv ist, wird der Artikel mit in dieser Listezurückgegeben. Inaktive Artikel werden ebenfalls zurückgegeben, und zwar dann, wenn für dieinterne Vorschau in Zeta Producer gerendert wird. Also wenn system.previewsystem.preview den Wert truetruehat. Hat system.previewsystem.preview den Wert falsefalse , werden inaktive Artikel nicht zurückgegeben.

Syntax: paragraphColumn.cssClassparagraphColumn.cssClass

Der vom Benutzer im Spalte-Bearbeiten-Dialogfenster eingegebene CSS-Klassen-Name.


<div class="<$= paragraphColumn.cssClass $>">

</div>


Syntax: paragraphColumn.idparagraphColumn.id

Die interne Datenbank-ID der Spalte.

Syntax: paragraphColumn.inlineCssparagraphColumn.inlineCss

Der vom Benutzer im Spalte-Bearbeiten-Dialogfenster eingegebene Inline-CSS-Code.


<div style="<$= paragraphColumn.inlineCss $>">

</div>

cssClass

Beispiel:

id

inlineCss

Beispiel:

Zeta Producer

Seite 132 von 153


Syntax: paragraph.hasArticlesparagraph.hasArticles

Prüft, ob in der Spalte Artikel enthalten sind.

Das zurückgegebene Ergebnis ( truetrue / falsefalse ) ist abhängig von:

1. Ob Artikel aktiv/inaktiv sind (entweder weil der Benutzer Artikel explizit auf inaktiv gesetzt hat,oder weil Artikel aufgrund der zeitgesteuerten Sichtbarkeit zum aktuellen Zeitpunkt unsichtbarsind).



Wenn keine Artikel vorhanden sind, wird falsefalse zurückgegeben.Wenn "Einfügen an/aus" auf "aus" steht und mindestens ein Artikel aktiv ist, wird truetruezurückgegeben.Wenn "Einfügen an/aus" auf "an" steht und mindestens ein Artikel aktiv ist, wird truetruezurückgegeben. Sind inaktive Artikel vorhanden, wird ebenfalls truetrue zurückgegeben, und zwardann, wenn für die interne Vorschau in Zeta Producer gerendert wird. Also wennsystem.previewsystem.preview den Wert truetrue hat. Hat system.previewsystem.preview den Wert falsefalse , wird falsefalse

zurückgegeben.

Syntax: paragraphColumn.value(key, fallBack = null)paragraphColumn.value(key, fallBack = null)

Liefert einen vom Benutzer eingegebenen/ausgewählten Wert der Spalte.




hasArticles

value()

Zeta Producer

Seite 133 von 153

Syntax: paragraphColumn.valueExpanded(key, fallBack = null)paragraphColumn.valueExpanded(key, fallBack = null)


Syntax: paragraphColumn.valueRaw(key, fallBack = null)paragraphColumn.valueRaw(key, fallBack = null)



valueExpanded()

valueRaw()

Zeta Producer

Seite 134 von 153

Das projectproject -Objekt bietet Ihnen Zugriff auf projektbezogene Einstellungen und Funktionen.

assetsCss()assetsJs()bundleCss()bundleJs()canContainercharsetgetArticlesWithStyle()getFile()getImage()getPage()outputFolderrssserverFolderurlwebFonts()webFontFamiliesgetAlbumImages()

Syntax: project.assetsCss()project.assetsCss()

Rendert den kompletten Bundle-HTML-Code, also inklusive CSS-Tags. Funktioniert nur für Nicht-Bundles.

<$= project.assetsCss() $>

Wenn diese Beispielcode im HTML-Head der Seite eingefügt wird, wird beim Erstellen der Seite einentsprechender Code in der Form

<link rel="stylesheet" type="text/css" href="..." /><link rel="stylesheet" type="text/css" href="..." />

in der erstellten HTML-Seite erzeugt. Je nach Anzahl der CSS-/Less-Dateien werden mehrere CSS-Tags erstellt.

project-Objekt

assetsCss()

Beispiel:

assetsJs()

Zeta Producer

Seite 135 von 153


















http://localhost:10953/preview/wichtige-begriffe.html

Syntax: project.assetsJs()project.assetsJs()

Rendert den kompletten Bundle-HTML-Code, also inklusive Skript-Tags. Funktioniert nur für Nicht-Bundles.

<$= project.assetsJs() $>


<script src="..." type="text/javascript"></script><script src="..." type="text/javascript"></script>

in der erstellten HTML-Seite erzeugt. Je nach Anzahl der JavaScript-Dateien werden mehrere Skript-Tags erstellt.

Syntax: project.bundleCss()project.bundleCss()

Rendert den kompletten Bundle-HTML-Code, also inklusive CSS-Tags. Funktioniert nur für Bundles.



<link rel="stylesheet" type="text/css" href="..." /><link rel="stylesheet" type="text/css" href="..." />

in der erstellten HTML-Seite erzeugt. Auch bei mehreren CSS-/Less-Dateien wird immer nur einCSS-Tag erstellt.

Syntax: project.bundleJs()project.bundleJs()

Rendert den kompletten Bundle-HTML-Code, also inklusive Skript-Tags. Funktioniert nur für Bundles.

Beispiel:

bundleCss()

Beispiel:

bundleJs()

Beispiel:

Zeta Producer

Seite 136 von 153




Liefert eine Liste von 0..n Artikeln vom Typ article zurück. Über die Liste kann mit einer for-Schleifeiteriert werden:


var items = project.getArticlesWithStyle("warenkorb‐onlineshop‐konfiguration");

for ( var g=0; g < items.count; ++g )

var item = items.item(g);

if ( item.active )

basketArticle = items.item(g);

b r e a k ;

Ermittelt alle Artikel mit dem Widget-Stil "warenkorb-onlineshop-konfiguration".

Syntax: project.getFile(id)project.getFile(id)

Ermittelt das Objekt zu einem Datei-Link (z.B. einer PDF-Datei) mit der ID oder Objekt-ID idid . Gibtnullnull zurück, wenn der Datei-Link nicht gefunden wird.

Das zurückgegebene Objekt verfügt über folgende Eigenschaften:

pathpath - Der relative Pfad zur Datei, ausgehend von der aktuellen Seite. Z.B. "/media/files/my-download.pdf".

var mp3id = project.getFile(article.value("file‐mp3", ""))

Setzt die Variable mp3idmp3id auf eine im aktuellen Artikel ausgewählte MP3-Datei.

Syntax: project.getImage(id)project.getImage(id)

Ermittelt das Objekt zu einer vom Benutzer eingefügten Bild-Datei mit der ID oder Objekt-ID idid . Gibt

Beispiel:

getFile()

Beispiel:

getImage()

Zeta Producer

Seite 138 von 153


http://docs.zeta-producer.com/datei-link-pdf.html

http://docs.zeta-producer.com/bilder-einfuegen.html

nullnull zurück, wenn das Bild nicht gefunden wird.

Das zurückgegebene Objekt verfügt über folgende Eigenschaften:

contentCopyPathcontentCopyPath - Der relative Pfad zur Bild-Datei, ausgehend von der aktuellen Seite. Z.B."/media/Images/my-image.png".contentCopyWidthcontentCopyWidth - Die Breite des Bildes in Pixel.contentCopyHeightcontentCopyHeight - Die Höhe des Bildes in Pixel.

<$

var imageId = article.value("Bild");

var image = project.getImage(imageId);

$>

<img

s r c = "<$= image.contentCopyPath $>"

w i d t h = "<$= image.contentCopyWidth $>"

h e i g h t = "<$= image.contentCopyHeight $>" />

Gibt ein vom Benutzer im aktuellen Artikel ausgewähltes Bild aus.

Syntax: project.getPage(id)project.getPage(id)

Ermittelt das Seiten-Objekt einer Seite mit der ID oder Objekt-ID idid . Gibt nullnull zurück, wenn dieSeite nicht gefunden wurde.

Das zurückgegebene Objekt ist vom Typ page.

var p = project.getPage(pageId);

Ermittelt die Seite mit der ID oder Objekt-ID, die in der Variable pageIdpageId steht.

Syntax: project.outputFolderproject.outputFolder

Der lokale, absolute Pfad zum Ausgabe-Ordner des Projekts.

Beispiel:

getPage()

Beispiel:

outputFolder

Zeta Producer

Seite 139 von 153


var configFileName = "config.inc.php";

var configFilePath = project.outputFolder + "assets\\php\\" + configFileName;

var content = "...";

system.writeFile( configFilePath, content );

Schreibt den Inhalt der Variable contentcontent in die Datei "config.inc.php", im Ordner "assets\php\shop",relativ zum Ausgabe-Ordner.

Syntax: project.rssproject.rss

Boolescher Wert, der angibt, ob das Erstellen von RSS-Feeds aktiv ist.

Syntax: project.serverFolderproject.serverFolder

Der Ordner auf dem FTP-Server, so wie er vom Benutzer konfiguriert wurde. Z.B. "/" oder"/html_home".

Syntax: project.urlproject.url

Die öffentliche URL der Website. Z.B. http://www.example.org.

Syntax: project.webFonts()project.webFonts()

Rendert den kompletten HTML-Code, also inklusive CSS-Tags, aller im Projekt verwendetenWebfonts. Funktioniert für Bundles und Nicht-Bundles.

Beispiel:

rss

serverFolder

url

webFonts()

Zeta Producer

Seite 140 von 153

http://docs.zeta-producer.com/erstellen-eines-rss-feeds.html

https://de.wikipedia.org/wiki/Webtypografie



<$= project.webFonts() $>


<link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'><link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>

in der erstellten HTML-Seite erzeugt. Je nach Anzahl der verwendeten Webfonts werden mehrereCSS-Tags erstellt.


Syntax: project.webFontFamiliesproject.webFontFamilies

Liefert eine Liste aller im Projekt verwendeten Webfont-Schriftart-Familien.

<$

var fams = project.webFontFamilies;

for ( var i=0; i<fams.count; ++i )

var fam = fams.item(i);

// Gibt z.B. "Droid Sans" aus.

context.write(fam);

$>


Syntax: project.getAlbumImages(id)project.getAlbumImages(id)

Ermittelt eine Liste von Projekt-Bilder, die im Bilderalbum mit der ID oder Objekt-ID idid enthaltensind.

Beispiel:

webFontFamilies

Beispiel:

getAlbumImages()

Zeta Producer

Seite 141 von 153

https://de.wikipedia.org/wiki/Webtypografie

Wird das Album nicht gefunden, wird ein Fehler ausgelöst und die Verarbeitung abgebrochen.

var albumId = article.value("album");

var images = project.getAlbumImages(albumId);

Liest alle Bilder des vom Anwender ausgewählten Albums im aktuellen Artikel.

Beispiel:

Zeta Producer

Seite 142 von 153

Ein projectFolderprojectFolder -Objekt repräsentiert einen Projektordner. Ein Projektordner ist das Wurzel-Element zu den Hauptseiten einer Website.

Mehrere Projektordner werden bei mehrsprachigen Websites eingesetzt. Jedes Projekt hatmindestens einen Projektordner, der standardmäßig in der Benutzeroberfläche ausgeblendet ist.

Der Projektordner erbt vom Typ pagepage , besitzt also alle Eigenschaften und Funktionen, die ein Seiten-Objekt auch besitzt plus seiner eigenen.

Syntax: projectFolder.allPagesprojectFolder.allPages

Ermittelt eine verschachtelte Liste mit 0..n Seiten-Objekten vom Typ pagepage , aus dem Projektordner,unterhalb der die aktuelle Seite liegt.


countcount ist die aktuelle Anzahl von Seiten in der Liste.item(item(indexindex)) liefert die Seite am angegebenen Index (0-basiert).

Die Liste ist verschachtelt, enthält also alle Seiten samt alles Unterseiten und wiederum derenUnterseiten (rekursiv).

Syntax: page.languagepage.language

Liefert die vom Benutzer eingegebene Sprache. Z.B. "de" oder "en".

projectFolder

allPages

language

Zeta Producer

Seite 143 von 153

http://docs.zeta-producer.com/mehrere-sprachen.html



http://docs.zeta-producer.com/mehrere-sprachen.html#a2555

Das systemsystem -Objekt stellt globale Funktionen und Programmeigenschaften zur Verfügung.

addFinishScript()encrypt()error()generatorhtmlDecode()htmlEncode()less()lessBlock()log()markdown()partial(filename, param1, param2, ...)previewremoveHtmlTags()showEmptyPreviewAreaswarn()writeFile()

Syntax: system.addFinishScript(text)system.addFinishScript(text)

Fügt den angegebenen Text ganz am Anfang der Seite ein.

Nutzen Sie diese Funktion, um von einer beliebigen Stelle aus im Code Text an den Anfang der Seitezu schreiben. Nützlich um z.B. in einem PHP-Widget die Ausgabepufferung mit ob_start()ob_start() zuaktivieren.

var text = '<?php ';

text += "header('Expires: Mon, 26 Jul 1997 05:00:00 GMT'); ";

text += "header('Last‐Modified: ' . Gmdate('D, d M Y H:i:s') . ' GMT'); ";

text += "header('Cache‐Control: no‐store, no‐cache, must‐revalidate'); ";

text += "header('Cache‐Control: post‐check=0, pre‐check=0', false); ";

text += "header('Pragma: no‐cache'); ";

text += 'session_start(); ?>';

system.addFinishScript( text );

Fügt HTTP-Caching-Header-Informationen am Anfang der Seite ein.

system-Objekt

addFinishScript()

Beispiel:

Zeta Producer

Seite 144 von 153

















http://php.net/manual/de/function.ob-start.php

Syntax: system.encrypt(text)system.encrypt(text)

Verschlüsselt einen Text reversibel.

Wird in den Zeta-Producer-Formularen verwendet, um die E-Mail-Adresse des Formular-Empfängersauf der fertigen Website vor Spam-Robotern zu verstecken.

system.encrypt("Hallo");

Liefert einen verschlüsselten Text.

Syntax: system.error(message)system.error(message)

Löst einen Fehler aus und bricht die Verarbeitung ab.

Die Fehlermeldung messagemessage wird auf dem Bildschirm ausgegeben.

if ( !project.url )

system.error("Bitte geben Sie die URL Ihrer Website ein.");

Bricht das Erstellen einer Seite ab, wenn der Benutzer keine Website-Adresse eingegeben hat.

Syntax: system.generatorsystem.generator

Enthält den Programmname und -Version von Zeta Producer. Diese Eigenschaft kann im meta-generator-Tag verwendet werden.

<meta name="generator" content="<$= system.generator $>" />

encrypt()

Beispiel:

error()

Beispiel:

generator

Beispiel:

Zeta Producer

Seite 145 von 153

Syntax: system.htmlDecode(text)system.htmlDecode(text)

Dekodiert eine HTML-Zeichenfolge und gibt diese dekodiert zurück.

system.htmlDecode("<p>Mein Text</p>")

Liefert die Zeichenfolge " <p>Mein Text</p><p>Mein Text</p> " zurück.

Syntax: system.htmlEncode(text)system.htmlEncode(text)

Kodiert eine Zeichenfolge in HTML und gibt diese kodiert zurück.

system.htmlEncode("<p>Mein Text</p>")

Liefert die Zeichenfolge " <p>Mein Text</p><p>Mein Text</p> " zurück.

Syntax: system.less(expression)system.less(expression)

Führt einen Ausdruck in der LESS-Stylesheet-Sprache aus und gibt das Ergebnis als Zeichenfolgezurück.

Zeta Producer unterstützt weitestgehend den Syntax-Umfang der Less CSS for .NET-Bibliothek.

Im Gegensatz zur Funktion lessBlock()lessBlock() wird in der less()less() -Funktion ein Ausdruck direkt evaluiert.Die lessBlock()lessBlock() -Funktion benötigt einen vollständigen CSS-Block, kann also z.B. nicht für Inline-CSS mit LESS-Syntax verwendet werden.

system.less("darken(#4D926F, 10%)")

htmlDecode()

Beispiel:

htmlEncode()

Beispiel:

less()

Beispiel:

Zeta Producer

Seite 146 von 153

http://de.wikipedia.org/wiki/LESS_(Stylesheet-Sprache)

http://www.dotlesscss.org/

Verdunkelt den HTML-Farbwert #4D926F um 10 Prozent und gibt das Ergebnis als Zeichenfolgezurück.

Syntax: system.lessBlock(expression)system.lessBlock(expression)

Führt einen Ausdruck in der LESS-Stylesheet-Sprache aus und gibt das Ergebnis als Zeichenfolgezurück.

Diese Version der Funktion nutzt intern die Less CSS for .NET-Bibliothek und unterstützt somit dengesamten Funktionsumfang dieser Bibliothek. Im Gegensatz zur less()less() -Funktion ist hier kein Zugriffauf Varianten-Werte und andere Zeta-Producer-spezifische Konstrukte möglich.

Die less()less() -Funktion evaluiert im Gegensatz zur Funktion lessBlock()lessBlock() einen Ausdruck direkt. DielessBlock()lessBlock() -Funktion hingegen benötigt einen vollständigen CSS-Block, kann also z.B. nicht für

Inline-CSS mit LESS-Syntax verwendet werden.

<$= system.lessBlock("#header color: darken(#4D926F, 10%); ") $>

Verdunkelt den HTML-Farbwert #4D926F um 10 Prozent und gibt das gesamte Ergebnis alsZeichenfolge zurück:

#header color: #3b7156; #header color: #3b7156;

Syntax: system.log(text)system.log(text)

Schreibt eine Meldung in die Protokolldatei von Zeta Producer.

system.log("Erstelle Suchindex für Seite '" + p.name + "'.");

lessBlock()

Beispiel:

log()

Beispiel:

markdown()

Zeta Producer

Seite 147 von 153

http://de.wikipedia.org/wiki/LESS_(Stylesheet-Sprache)

http://www.dotlesscss.org/

Syntax: system.markdown(md)system.markdown(md)

Konvertiert eine Markdown-Zeichenfolge nach HTML.

Anwender können in Artikeln mit dem entsprechenden Widget-Feld Markdown eingeben. Über einensystem.markdownsystem.markdown -Aufruf wird der Text nach HTML konvertiert.

Zeta Producer verwendet als Markdown-Renderer die Bibliothek CommonMark.NET, die dieCommonMark-Spezifikation abbildet.

Syntax: system.partial(filename)system.partial(filename)

Lädt ein Partial und führt es aus.

Geben Sie optional Parameter an, auf die Sie innerhalb des Partials über context.param(context.param(indexindex))oder context.param(context.param(index, Standardwertindex, Standardwert)) zugreifen.

system.partial("begin.html");

Lädt das Partial begin.htmlbegin.html . Der Inhalt des Partials wird gelesen, ausgeführt und das Ergebnis andieser Stelle eingefügt.

Sie können sowohl integrale Typen (Strings, Integer, usw.) als auch JSON-Objekte als Parameter anein Partial übergeben. Sind vielen Parameter zu übergeben, bietet es sich an, mit einem JSON-Objekt zu arbeiten, da dort die Parameter über ihren Namen angesprochen werden können und nichtnur per Index.

Ein Partial-Aufruf mit integralen Parameter-Typen sieht z.B. so aus:

system.partial("mein‐partial.html", 10, 20, "abc");system.partial("mein‐partial.html", 10, 20, "abc");

Hier werden drei Wert Parameter übergeben; zwei Integer-Zahlen und eine Zeichenfolge.

Innerhalb eines Partials greifen Sie dann per Index (0..n) auf die Parameter zu:

var pageId = context.param(0);var pageId = context.param(0);var level = context.param(1);var level = context.param(1);

Sie können auch zusätzlich Standard-Werte angeben:

var pageId = context.param(0, 444);var pageId = context.param(0, 444);

partial(filename, param1, param2, ...)

Beispiel:

Partial-Aufruf mit integralen Typen

Zeta Producer

Seite 148 von 153

http://de.wikipedia.org/wiki/Markdown

https://github.com/Knagis/CommonMark.NET

http://spec.commonmark.org/

http://de.wikipedia.org/wiki/JavaScript_Object_Notation

var level = context.param(1, 333);var level = context.param(1, 333);

Die Variable pageIdpageId wird dann entweder mit dem Wert von Parameter 0 gefüllt, oder, falls beimAufruf kein Parameter 0 übergeben wurde, mit dem Wert 444.

Ein Partial-Aufruf mit einem JSON-Objekt kann z.B. so aussehen:

<$=system.partial("partial.html", "name1": "Zeta", "name2": "Producer")$><$=system.partial("partial.html", "name1": "Zeta", "name2": "Producer")$>

Der Zugriff auf ein so übergebenes JSON-Objekt erfolgt innerhalb eines Partials dann im einfachstenFall:

var json = context.param(0);var json = context.param(0);var name1 = args["name1"];var name1 = args["name1"];var name2 = args["name2"];var name2 = args["name2"];

In der Praxis sollten Sie innerhalb eines Partials auch mit unvollständig übergebenen Parameternumgehen können:

var json = context.param(0, );var json = context.param(0, );var name1 = args["name1"] || "Kein name1";var name1 = args["name1"] || "Kein name1";var name2 = args["name2"] || "Kein name2";var name2 = args["name2"] || "Kein name2";

Hier wurde zunächst versucht das JSON-Objekt zu lesen. Wenn keines übergeben wurde, wird derStandard-Wert (also ein leeres JSON-Objekt) verwendet.

Anschließend werden die Variablen name1name1 und name2name2 gefüllt. Es wird entweder der JSON-Wertgelesen, oder, falls dieser nicht angegeben wurde, ein Standardwert ("Kein name1" bzw. "Keinname2").

Syntax: system.previewsystem.preview

Boolescher Wert, der angibt, ob das aktuelle Skript im Kontext einer Vorschau-HTML-Seite oder einerAusgabe-HTML-Seite ausgeführt wird.

Zeta Producer erstellt immer zwei Versionen einer Seite:

Eine Vorschau-Seite, die im Hauptfenster von Zeta Producer angezeigt wird und Bearbeitungs-Elemente ("Inline Editing") enthält.Ein Ausgabe-Seite, die später 1:1 auf den Webserver per FTP kopiert wird.

Partial-Aufruf mit JSON-Objekt

preview

Beispiel:

Zeta Producer

Seite 149 von 153

<$ if ( system.preview ) $>

<p>Sie sehen die Vorschau‐Seite.</p>

<$ else $>

<p>Sie sehen die Fertige‐Seite.</p>

<$ $>

Syntax: system.removeHtmlTags(text)system.removeHtmlTags(text)

Entfernt alle HTML-Tags aus einer Zeichenfolge und gibt die neue Zeichenfolge zurück.

Es werden die HTML-Tags gelöscht, die Texte zwischen den HTML-Tags bleiben erhalten.

system.removeHtmlTags("<p>Zeta Producer ist <em>das</em> CMS.</p>")

Liefert eine Zeichenfolge "Zeta Producer ist das CMS." zurück.

Syntax: system.showEmptyPreviewAreassystem.showEmptyPreviewAreas

Gibt den Status der "Einfügen an/aus"-Schaltfläche im Hauptfenster rechts oben zurück:

truetrue , wenn die Schaltfläche auf "an" steht.falsefalse , wenn die Schaltfläche auf "aus" steht.

<$ if ( system.showEmptyPreviewAreas ) $>

<p>Die Schaltfläche "Einfügen an/aus" steht auf "an".</p>

<$ else $>

<p>Die Schaltfläche "Einfügen an/aus" steht auf "aus".</p>

<$ $>

Wenn die Schaltfläche "Einfügen an/aus" auf "an" steht, dann werden auch deaktivierte Artikel (mitrotem Rand) angezeigt. Außerdem können Sie im Modus "an" Artikel in leere Bereiche einfügen.

removeHtmlTags()

Beispiel:

showEmptyPreviewAreas

Beispiel:

Zeta Producer

Seite 150 von 153


Syntax: system.warn(text)system.warn(text)

Schreibt einen Warnungs-Text in das Erstellprotokoll. Die Verarbeitung wird nicht abgebrochen.

var imageId = article.value("Bild");

var image = project.getImage(imageId);

if ( isNull(image) )

system.warn("Bild wurde nicht gefunden");

Gibt die Warnung aus "Bild wurde nicht gefunden", falls ein im Artikel referenziertes Bild nichtgefunden wurde.

Syntax: system.writeFile(filePath, content)system.writeFile(filePath, content)

Erstellt eine Textdatei mit einem angegebenen Inhalt. Falls die Datei bereits vorhanden ist, wird sieüberschrieben.

var configFileName = "config.inc.php";

var configFilePath = project.outputFolder + "assets\\php\\" + configFileName;

var content = "...";

system.writeFile( configFilePath, content );

Schreibt den Inhalt der Variable contentcontent in die Datei "config.inc.php", im Ordner "assets\php\shop",relativ zum Ausgabe-Ordner.

warn()

Beispiel:

writeFile()

Beispiel:

Zeta Producer

Seite 151 von 153

Zeta Producer inkludiert in jedem Layout, welches JavaScript über den project.bundleJs()project.bundleJs() -Befehleinbindet, auch die jQuery-Bibliothek in Version 1.7.2. Ihnen steht somit jQuery zur Benutzung bereitund Sie sollten – auch um Ladezeiten zu reduzieren – jQuery nicht einfach nochmals laden.

Die von Zeta Producer geladene jQuery Bibliothek kann auf drei Arten angesprochen werden.

Beispiel Syntax:

1. jQuery("body").width()jQuery("body").width()2. $("body").width()$("body").width()3. $z("body").width()$z("body").width()

Beispiele 1. jQuery()jQuery() und 2. $()$() zeigen die gewohnte, im Standard von jQuery vorgegebeneSyntax.

Beispiel 3. $z()$z() ist ein von Zeta Producer definierter Alias, der dazu dient, die von Zeta Producergeladene jQuery-Bibliothek gegen überladen mit anderen jQuery-Versionen abzusichern.Hierdurch erreichen wir, dass eine später z.B. im Quellcode einer Seite nachgeladene jQuery-Bibliothek nicht die mit Zeta Producer ausgelieferten Widgets beeinflusst und somit Fehler verursacht.

Wenn Sie in Ihrem javaScript-Code den $z$z -Alias nutzen, können Sie sich darauf verlassen, dass Sieimmer die von Zeta Producer ausgelieferte Version von jQuery ansprechen.

Nutzen Sie hingegen in Ihrem Code jQueryjQuery oder den $$ -Alias, dann spricht dieser Code immer diezuletzt geladene jQuery-Bibliothek an. Dies muss also nicht zwingend die von Zeta Producerausgelieferte Version sein und Sie können sich daher nie sicher sein, mit welcher Version Siearbeiten.

Wenn Ihr Code mit jQuery Version 1.7.2 kompatibel ist, dann nutzen Sie doch einfach den $z$z -Alias.Wenn Sie hingegen eine neuere jQuery-Version benötigen, dann laden Sie diese einfach in IhremCode und sprechen Sie dann einfach auf die gewohnte Art mit jQuery()jQuery() oder $()$() an.

Quellcode:

<!DOCTYPE html><!DOCTYPE html><html lang="de"><html lang="de"><head><head> < m e t a c h a r s e t = " u t f ‐ 8 " / > < m e t a c h a r s e t = " u t f ‐ 8 " / > < t i t l e > j Q u e r y h o c h 2 < / t i t l e > < t i t l e > j Q u e r y h o c h 2 < / t i t l e > < $ = p r o j e c t . b u n d l e J s ( ) $ > < $ = p r o j e c t . b u n d l e J s ( ) $ > </head></head><body><body>Zeta Producer jQuery Version: Zeta Producer jQuery Version: <script><script>document.write($.fn.jquery);document.write($.fn.jquery);</script></script><br /><br />

jQuery

Beispiel einer Seite mit 2 verschiedenen jQuery-Versionen

Zeta Producer

Seite 152 von 153


https://jquery.com

Nachgeladene jQuery Version:Nachgeladene jQuery Version:<script src="http://code.jquery.com/jquery‐1.11.3.min.js"></script><script src="http://code.jquery.com/jquery‐1.11.3.min.js"></script><script><script>document.write($.fn.jquery);document.write($.fn.jquery);</script></script><br /><br />Zeta Producer jQuery Version nach dem nachladen einer anderen Version: Zeta Producer jQuery Version nach dem nachladen einer anderen Version: <script><script>document.write($z.fn.jquery);document.write($z.fn.jquery);</script></script></body></body></html></html>

Ausgabe:

Zeta Producer jQuery Version: 1.7.2 Zeta Producer jQuery Version: 1.7.2 Nachgeladene jQuery Version: 1.11.3 Nachgeladene jQuery Version: 1.11.3 Zeta Producer jQuery Version nach dem nachladen einer anderen Version: 1.7.2Zeta Producer jQuery Version nach dem nachladen einer anderen Version: 1.7.2

Zeta Producer

Seite 153 von 153

Zeta Producer · Wenn der Entwickler-Live-Modus aktiv ist, "beobachtet" Zeta Producer alle...

Documents

Transcript of Zeta Producer · Wenn der Entwickler-Live-Modus aktiv ist, "beobachtet" Zeta Producer alle...