Ältere Projekte mit individuellen Layouts in Version 14 konvertieren

Im folgenden beschreiben wir, wie Sie vorgehen können, wenn ein Projekt aus einer Vorversion von Zeta Producer 14 beim Ö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 verschiedener Dateien:

  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_.NameOrTitleIntelli jetzt page.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. Dabei hilft Ihnen der neue Entwickler-Live-Modus, womit nach jeder Änderung das Layout automatisch neu geladen wird.

Vorgehen um ein Projekt zu konvertieren

  1. Projekt im Layout-Konverter öffnen und in einen Zielordner konvertieren lassen.
  2. Konvertiertes Projekt in Zeta Producer 14 öffnen
  3. Entwickler-Live-Modus aktivieren
  4. Skriptfehler in der Seitenvorlage, in Widgets und Partials korrigieren
  5. Seitenvorlage und Widgets aktualisieren

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

Das Layout-Konverter konvertiert Ihr altes Projekt und wandelt dabei die Struktur des alten Layout-Ordners in die neue Ordner-Struktur um. Ihre Datenbank wird ebenfalls konvertiert und ggf. vorhandene Widgets (eigene Artikelstile) werden in 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 nun benö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 konvertierte Projekt (zum Beispiel den "Projects-"-Ordner im "Zeta-Producer-14"-Ordner)
  • Klicken Sie auf den Button Konvertieren
Der Layout-Konverter nach dem Programmstart

2. Konvertiertes Projekt in Zeta Producer 14 öffnen

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

3. Entwickler-Live-Modus aktivieren

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

Hierdurch wird nach jeder Änderung an einer Datei des verwendeten Layouts das Layout im Projekt automatisch neu geladen, 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.

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

  • Nun öffnen Sie die Seitenvorlage im Texteditor Ihrer Wahl. Die Seitenvorlage heißt meist "default.html" und befindet sich 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 in Zeta 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 den Fehler beinhaltet. Sollte dies nicht der Dateiname Ihrer Seitenvorlage sein, so öffnen Sie bitte Datei, die im Fehlerdialog referenziert wird.
  • Bearbeiten Sie die genannte Datei und korrigieren Sie nach und nach die Fehler, die in Zeta Producer angezeigt werden 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 Zeta Producer keine Fehler mehr angezeigt werden.
Fehleranzeige in Zeta Producer mit Indikation der Zeilennummer der Fehlerquelle sowie der Datei, welche den Fehler enthält.

Hinweis!

Der Layout-Konverter wird von uns kostenlos zur Verfügung gestellt und ist nicht dazu gedacht ein Projekt automatisch und 100%ig zu konvertieren. Er soll lediglich eine Starthilfe sein und ihnen als Entwickler einen Großteil der Arbeit abnehmen. 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 muss in if ( p.target ) { geändert werden.
  • "item-*"-Partials referenzieren page.url page.target und article.headline.
    Dies sollte jeweils ersetzt werden durch: p.url, p.target und p.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!=2 durch p.level!=1

5. Seitenvorlage und Widgets aktualisieren

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 Code verursacht keine Fehlermeldungen und ist daher etwas schwerer zu finden. Entweder wird veralteter Code einfach gerendert und Sie sehen den Quellcode dann in der Zeta Producer Vorschau, oder der Code liefert kein Ergebnis mehr und daher auch keinen sichtbaren Inhalt.

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

In Ihrem Layout verwenden Sie üblicherweise auch Assets, also Bilder und Logos, die im "_media"-Unterordner innerhalb 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.

Durch den Konverter wurde der Ordner "_media" automatisch in "assets" umbenannt, was der neuen Konvention in Version 12.5 entspricht.
Der Konverter ersetzt im Pfad zu Referenzen auch bereits "_media/" durch "assets/", sodass Ihre vorhandenen Referenzen 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 darin enthaltenen Dateien und Unterordner (/*) beim Erstellen von Seiten berücksichtigt und entsprechend in den Ausgabe-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 zu externen CSS- oder JavaScript-Dateien referenziert werden können. Ohne den Eintrag in layout.json würden die Dateien nicht 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="<$= page.pathToRoot $>media/Scripting/ServerSideScripting/jQuery/jquery-1.7.min.js"></script<
<script	type="text/javascript" src="<$= page.pathToRoot $>media/Scripting/ServerSideScripting/js/zp-widgets.js"></script>

ersetzen Sie bitte durch folgende Zeile:
<$= project.bundleJs() $>

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

Nun sollten Ihre vorhandenen Referenzen funktionsfähig sein.

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

Seitenvorlage und Widgets auf veralteten Code überprüfen

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 aktuellen Code ersetzen. Gute Text-Editoren biete eine Suchfunktion über mehrere Dateien hinweg. So können Sie schnell alle alle 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 eine genaue 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 korrekte Funktionsweise Ihrer im Layout enthaltenen Widgets überprüfen.

Gratulation! Ihr Projekt ist nun vollständig konvertiert.