Version: GSB 7Sonstige Konfiguration

Darstellungsmodule

Organisation der Funktionen als Module

Die GSB-SL besitzt einige, spezielle (dynamische) Darstellungsmodule für die Start- und Unterseiten, die sich durch eine Kombination aus GSB- als auch JavaScript-Funktionen auszeichnen. Für die Konfiguratiion dieser Funktionen sind eine Reihe von GSB-Dokumenten erforderlich, die in den nachfolgenden Kapiteln genauer beschrieben werden. Um diese Funktionen schneller für eine GSB-Website konfigurieren zu können, sind diese Funktionen als Module unterhalb von /standardlsg/SiteGlobals/Modules abgelegt. Mit entsprechendem Namen bezeichnet besitzt an dieser Stelle jedes Modul ein separates Verzeichnis. In diesem sind dann Unterverzeichnisse für die Dokumentation, die - sofern vorhanden - allgemeine Konfiguration, die Kopiervorlage zum Anlegen von neuen Instanzen sowie für die Instanzen selbst enthalten.

Sollen neue Instanzen eines Moduls erstellt werden, so kann das Verzeichnis "_kopiervorlage" dupliziert und mit entsprechendem Name als Verzeichnis im Modul-Ordner abgelegt werden. Die weitere Konfiguration nach dem Kopiervorgang ist dem jeweiligen Dokumentationsdokument unter von /standardlsg/SiteGlobals/Modules/../_Dokumentation/Hinweise zu entnahmen. Sofern das Modul nicht mehrfach instaziiert werden kann, ist dies ebenfalls in der Dokumentation vermerkt.

Modul Bühne

Die Bühne ist ein Modul zur Hervorhebung besonders relevanter Inhalte in Form von Bild-Text-Teasern. Die Anzahl der Elemente kann konfigurativ beeinflusst werden können. Ausgelegt ist die Bühne jedoch für maximal 5 Elemente.

Abhängigkeiten

Das Modul setzt entsprechendes Layout sowie folgende, funktional integrierte JavaScript-Module und Templates voraus.

• materna_slideshow (Wichtig: Labels sind im Mainlayout zu konfigurieren)
• render[TeaserInBuehne TeaserInBuehne] für Dokumenttyp "Standardartikel" (Basepage) und "Textbaustein" (Textfragment)
• render[StandardOhneLayout StandardOhneLayout] für Dokumenttyp "Generische Tabelle" (GenericTable)

Integration

Bitte das allgemeine Modul im Mainlayout "Startseite" mit Text = "buehne" verlinken

Zur Integration von Modul an entsprechender Stelle den Code $cms.include($buehne,"render[StandardOhneLayout StandardOhneLayout]") einfügen

Sofern für einen Seitenbereich ein abweichende Konfiguration verwendet werden soll, so kann diese über den Eintrag "PSBodyParameters" im entsprechenden "_config"-Verzeichnis konfiguriert werden

Instanziierung

Das Modul kann nicht für eine Sprache mehrfach instanziiert werden.

Eine Ablage unterhalb des Modulverzeichnisses muss sprachabhängig erfolgen, z.B. /Module/Buehne/DE/Startseite

Konfiguration

Nach Integration des Moduls kann dieses wie folgt konfiguriert werden.

Die Banner können im Feld "Darzustellende Inhalte" über einen CL2-Block mit "Slotbelegung" = "Dokumente" und ein Dokument vom Typ "Standardartikel" (Basepage) und "Textbaustein" (Textfragment) mit Ansicht render[TeaserInBuehne TeaserInBuehne] hinterlegt werden.

Modul Footer

Der Footer bildet den Seitenabschluss und beinhaltet Funktionen zur aktuellen Seite (Seite drucken, Seite empfehlen, zum Seitenanfang), Copyright und Impressum.
Zudem können auch manuell verlinkte Navigationspunkte ausgegeben werden.

Abhängigkeiten

Das Modul setzt entsprechendes Layout sowie folgende, funktional integrierte JavaScript-Module und Templates voraus.

• materna_toggle (Wichtig: Labels sind im Mainlayout zu konfigurieren)
• renderListEntry für Dokumenttyp "Navigationsknoten" (NavNode)
• render[StandardOhneLayout StandardOhneLayout] für Dokumenttyp "Generische Tabelle" (GenericTable)

Integration

Bitte das allgemeine Modul im Mainlayout "Startseite" und "Unterseite" mit Text = "footernavigation" verlinken
Zur Integration von Modul an entsprechender Stelle den Code $cms.include($footernavigation,"render[StandardOhneLayout StandardOhneLayout]") einfügen
Sofern für einen Seitenbereich ein abweichende Konfiguration verwendet werden soll, so kann diese über den Eintrag "PSBodyParameters" im entsprechenden "_config"-Verzeichnis konfiguriert werden

Instanziierung

Das Modul kann für einzelnen Seiten instanziiert werden.
Eine Ablage unterhalb des Modulverzeichnisses muss sprachabhängig erfolgen, z.B. /Module/Footer/DE/Allgemein

Konfiguration

Nach Integration des Moduls kann dieses wie folgt konfiguriert werden.

Sofern eine Navigation im Footer ausgegeben werden soll, können entsprechende CL2-Blöcke im Feld "Darzustellende Inhalte" angelegt werden.
Hierzu ist im Feld "Slotbelegung" der Name des Bereichs, im Feld "Layout" das Dokument "/standardlsg/SiteGlobals/Layout/Views/GenericTable/ListEntry" und im Feld "Dokument(e)" ein oder mehrere Dokumente vom Typ "Navigationsknoten" zu hinterlegen. Für den Wert im Feld "Slotbelegung" wird hierbei versucht, ein entsprechendes Label zu ermitteln.

Sollen keine Links auf Unterseiten im Footer ausgegeben werden, so kann das Feld "Darzustellende Inhalte" leer gelassen werden.

Modul Kalender

Das Modul Kalender-Box ist eine Übersichts-Darstellung von Terminen in Form eines Kalenders. Tage mit Terminen werden optisch hervorgehoben. Der angezeigte Monat kann gewechselt werden. Über einen Link kann eine Seite mit einer Liste aller Termine erreicht werden.

Abhängigkeiten

Das Modul setzt entsprechendes Layout sowie folgende, funktional integrierte JavaScript-Module und Templates voraus.

• materna_calender (Wichtig: Labels sind im Mainlayout zu konfigurieren)
• renderCalendar für Dokumenttyp "Generische JSP" (GenericJSP)
• renderCalendarEventList für Dokumenttyp "Generische JSP" (GenericJSP)

Integration

Bitte das allgemeine Modul in einem "Navigationsziel" (NavTarget) der "Startseite" oder "Unterseite" mit Slotbelegung = "supplement" und Layout = "/SiteGlobals/Layout/Views/Standard" verlinken

Instanziierung

Das Modul kann für eine Sprache mehrfach instanziiert werden
Eine Ablage unterhalb des Modulverzeichnisses muss sprachabhängig erfolgen, z.B. /Module/Karussell/DE/Startseite

Konfiguration

Nach Integration des Moduls kann dieses wie folgt konfiguriert werden.

Die Suche nach Terminen kann im Dokument "/SiteGlobals/Modules/Kalender/.../Termine_Liste", der Link zur Gesamtliste der Termine im Feld "Konfigurationsdokument" über einen CL2-Block mit "Slotbelegung" = "link" und ein Dokument vom Typ "Navigationknoten" (NavNode) oder die "Generische JSP" (GenericJSPEnt) "/SiteGlobals/Modules/Kalender/.../Termine" hinterlegt werden. Weiter kann über das Feld "Konfigurationsparameter" und den Eintrag "longDate=true" konfiguriert werden, ob die Datumsausgaben im Kalender mit Hinweis auf den Monat ausgegeben werden sollen.

Modul Karussell

Das Karussell kann Teaser, bestehend aus Bild (Thumbnail) und Bildunterschrift bzw. Titel, die nebeneinander platziert werden ausgeben. Sind mehr Teaser vorhanden, als nebeneinander dargestellt werden können, sind diese über Pfeile erreichbar.

Abhängigkeiten

Das Modul setzt entsprechendes Layout sowie folgende, funktional integrierte JavaScript-Module und Templates voraus.

• materna_slideshow (Wichtig: Labels sind im Mainlayout zu konfigurieren)
• render[TeaserImKarussell TeaserImKarussell] für Dokumenttyp "Bild" (IMGObject)
• render[StandardOhneLayout StandardOhneLayout] für Dokumenttyp "Generische Tabelle" (GenericTable)

Integration

Bitte das allgemeine Modul im "Navigationsziel" (NavTarget) der "Startseite" mit Slotbelegung = "bottom" und Layout = "/SiteGlobals/Layout/Views/GenericTable/StandardOhneLayout" verlinken

Instanziierung

Das Modul kann nicht für eine Sprache mehrfach instanziiert werden.
Eine Ablage unterhalb des Modulverzeichnisses muss sprachabhängig erfolgen, z.B. /Module/Karussell/DE/Startseite

Konfiguration

Nach Integration des Moduls kann dieses wie folgt konfiguriert werden.

Die Banner können im Feld "Darzustellende Inhalte" über einen CL2-Block mit "Slotbelegung" = "Dokumente" und ein Dokument vom Typ "Bild" (IMGObject) mit Ansicht render[TeaserImKarussell TeaserImKarussell] hinterlegt werden.

Soll das Modul zeitweise nicht ausgegeben werden, kann dieses aus "Navigationsziel" (NavTarget) wieder entfernt werden.

Modul MobilNavigation

Die mobile Navigation stellt die gesamte Navigation für die Ausgabe auf Smartphones und Tablets bereit.

Abhängigkeiten

Das Modul setzt entsprechendes Layout sowie folgende, funktional integrierte JavaScript-Module und Templates voraus.

• materna_navigation_mobile (Wichtig: Labels sind im Mainlayout zu konfigurieren)
• renderMobileNavigation für Dokumenttyp "Generische JSP" (GenericJSPEnt)

Integration

Bitte das allgemeine Modul über das Feld "Parameter" im Dokument "/standardlsg/SiteGlobals/Frontend/JavaScript/init/variables_JSON" mit Text = "mobileMenu" verlinken.
Bitte das entsprechende "HTML-Formular" (HFForm) über das Feld "Parameter" im Dokument "/standardlsg/SiteGlobals/Frontend/JavaScript/init/variables_JSON" mit Text = "mobileSearch" verlinken.

Instanziierung

Das Modul kann nicht für eine Sprache mehrfach instanziiert werden.
Eine Ablage unterhalb des Modulverzeichnisses muss sprachabhängig erfolgen, z.B. /Module/MobileNavigation/DE/Startseite

Konfiguration

Nach Integration des Moduls kann dieses wie folgt konfiguriert werden.

Die darzustellende Hauptnavigation kann mit Verlinkung des Wurzelknotens "home_node" der entsprechenden Sprache über das Feld "Konfigurationsdokumente" und dem Text = "homeNode" im Dokument "/Modules/MobileNavigation/.../MobileNavigation" bestimmt werden. Die Servicepunkte können durch Verlinkung der jeweiligen Oberpunkte (1..n) im selben Dokument mit dem Text = "serviceNode" hinterlegt werden.

Modul Service-Footer

Der Servicefooter soll Service-Punkte wie Kontakt, Datenschutzerklärung und Newsletter sowie SocialMedia-Links enthalten.

Abhängigkeiten

Das Modul setzt entsprechendes Layout sowie folgende, funktional integrierte JavaScript-Module und Templates voraus.

• renderListEntry für Dokumenttyp "Navigationsknoten" (NavNode)
• render[StandardOhneLayout StandardOhneLayout] für Dokumenttyp "Generische Tabelle" (GenericTable)

Integration

Bitte das Modul im Mainlayout "Unterseite" mit Text = "servicefooter" verlinken
Zur Integration von Modul an entsprechender Stelle den Code $cms.include($servicefooter,"render[StandardOhneLayout StandardOhneLayout]") einfügen
Sofern für einen Seitenbereich ein abweichende Konfiguration verwendet werden soll, so kann diese über den Eintrag "PSBodyParameters" im entsprechenden "_config"-Verzeichnis konfiguriert werden

Instanziierung

Das Modul kann für einzelnen Seiten instanziiert werden.
Eine Ablage unterhalb des Modulverzeichnisses muss sprachabhängig erfolgen, z.B. /Module/Service-Footer/DE/Allgemein

Konfiguration

Nach Integration des Moduls kann dieses wie folgt konfiguriert werden.

Sofern eine Navigation im Servicefooter ausgegeben werden soll, können entsprechende CL2-Blöcke im Feld "Darzustellende Inhalte" angelegt und befüllt werden.
Hierzu ist im Feld "Slotbelegung" der Name "Service" und "InformiertBleiben", im Feld "Layout" das Dokument "/standardlsg/SiteGlobals/Layout/Views/GenericTable/ListEntry" und im Feld "Dokument(e)" mehrere Dokumente vom Typ "Navigationsknoten" zu hinterlegen. Für den Wert im Feld "Slotbelegung" wird hierbei versucht, ein entsprechendes Label zu ermitteln.

Das Icon für die Liste "InformiertBleiben" kann über den entsprechenden "Navigationsstil" im Dokumenttyp "Navigationsknoten" (NavNode) gewählt werden.

Hinweis: Die in Instanzen dieses Moduls verlinkten Knoten müssen zudem noch im Dokument "/standardlsg/DE/Home/servicefooter_hidden_node" bzw. "/standardlsg/EN/Home/servicefooter_hidden_node" verlinkt werden.

Modul Service-Leiste

Die Serviceleiste ist ein Bereich mit entsprechenden Servicepunkten in Form eines beschrifteten Icons. Es können bis zu 5 Punkte integriert werden.

Abhängigkeiten

Das Modul setzt entsprechendes Layout sowie folgende, funktional integrierte JavaScript-Module und Templates voraus.

• materna_serviceborder (Wichtig: Labels sind im Mainlayout zu konfigurieren)
• render[TeaserInServiceleiste TeaserInServiceleiste] für Dokumenttyp "Standardartikel" (Basepage), "Textbaustein" (Textfragment), "Video" (Video) und "Download" (Publication)
• render Link für Dokumenttyp "Navigationsknoten" (NavNode)
• render[StandardOhneLayout StandardOhneLayout] für Dokumenttyp "Generische Tabelle" (GenericTable)

Integration

Bitte das allgemeine Modul im Mainlayout "Startseite" und "Unterseite" mit Text = "footernavigation" verlinken
Zur Integration von Modul an entsprechender Stelle den Code

## display servicebar

#set ($hideServicebar = $navnode.getConfigBool("HideServicebar", true, false))

#if(!$hideServicebar)

  $cms.include($serviceleiste,"render[StandardOhneLayout]")

#end

einfügen
Sofern für einen Seitenbereich ein abweichende Konfiguration verwendet werden soll, so kann diese über den Eintrag "PSBodyParameters" im entsprechenden "_config"-Verzeichnis konfiguriert werden

Instanziierung

Das Modul kann nicht für eine Sprache mehrfach instanziiert werden
Eine Ablage unterhalb des Modulverzeichnisses muss sprachabhängig erfolgen, z.B. /Module/Service-Leiste/DE/Startseite

Konfiguration

Nach Integration des Moduls kann dieses wie folgt konfiguriert werden.

Die Anzahl der in der Service-Leiste ausgegebenen Tabs kann über das Feld "Darzustellende Inhalte" im Dokument "/Module/Service-Leiste/.../service-leiste_table" bestimmt werden, wobei max. 5 Elemente in der Leiste unter der Bühne Platz finden. Die eigentlichen Tab-Blöcke und Inhalte werden dann in den verlinkten Dokumenten vom Typ "Generische Tabelle" (GenericTable) konfiguriert. Im Feld "Überschrift" kann hier der Titel des Tabs, im Feld "Darzustellende Inhalte" über einen CL2-Block mit "Slotbelegung" = "Dokumente" und ein Dokument vom Typ "Standardartikel" (Basepage), "Textbaustein" (Textfragment), "Video" (Video) oder "Download" (Publication) mit Ansicht render[TeaserInServiceleiste TeaserInServiceleiste] hinterlegt werden. Sofern ein "Mehr"-Link ausgegeben werden soll, kann dieser über einen CL2-Block mit "Slotbelegung" = "Link" und einem "Navigationsknoten" (NavNode) konfiguriert werden.

Soll das Modul zeitweise nicht ausgegeben werden, kann dies über den Konfigurationseintrag /standardlsg/_config/HideServicebar gesteuert werden.

Mandantenspezifische Silbentrennung

Eine Silbentrennung auf der Ausgabeseite (JSP-Templates oder Velocity-Skripte) wird mit Hilfe eines allgemeinen Trennalgorithmus und -lexikons realisiert. Eine Silbentrennung wird für die Sprachen Deutsch und Englisch zur Verfügung gestellt.

Für allgemein verwendete Begriffe der jeweiligen Sprache arbeitet die Silbentrennung in der Regel korrekt. Es kann aber vorkommen, dass mandantenspezifische Fachbegriffe, etc. nicht korrekt getrennt werden. Diese Begriffe können in eine mandantenspezifische Trennliste aufgenommen werden. Die mandantenspezifischen Trennlisten werden im Ordner /SiteGlobals/_config als „Konfiguration-Richtest 1.0“-Dokument angelegt. Die deutschsprachige Trennliste findet sich im Dokument „Hyphenation_de“ und die englischsprachige Trennliste im Dokument „Hyphenation_en“. Die einzelnen Trennvorschläge werden zeilenweise in der Dokument-Property „Wert“ erfasst. Als Trennzeichen wird der Bindestrich „-“ verwendet. Das Prozentzeichen leitet einen Kommentar ein.

Beispiel:

ASCII % Korrektur falsch Trennung ASCII

As-sem-bler

Bun-des-amt

Achtung: Änderungen an den mandantenspezifischen Trennlisten werden erst nach Neustart des Tomcat-Servers übernommen.

Download Optimierung

In diesem Kapitel werden einige Optimierungsmöglichkeiten vorgestellt, welche zu einer Beschleunigung der Ladezeiten von Seiten im Webbrowser führen. Grundsätzlich sollten keine unnötigen http-Requests erzeugt werden. Dies ist bspw. der Fall wenn viele kleine Javascript- oder CSS-Dateien geladen werden.

Javascript-Zusammenfassung

Eine Zusammenfassung der in die Seiten eingebundenen Javascript-Dateien zu einer großen Javascript-Datei kann erreicht werden, indem ein Script Dokument „init“ angelegt wird. Dieses Dokument wird anstatt der einzubindenden Javascript-Dateien in das Seitenlayout integriert. Die eigentlichen Javascript-Dateien werden in das „init“-Dokument integriert. Der folgende Screenshot verdeutlicht die Konfiguration des init-Dokumentes.

Die einzubindenden Javascript-Dokumente werden in der klassifizierten Linkliste scriptFiles definiert und mittels einer Velocity-Schleife (s.a. Property Script-Text) ausgegeben.

Die Ausgabeformatierung muss auf „Text mit Velocity-Unterstützung“ konfiguriert werden, als Cachingstrategie kann „cachebar“ (VORSICHT) gewählt werden, wenn die zusammengefassten Scripte keine Request- oder Session-abhängigen Bestandteile enthalten. Ansonsten sollte die Cachingstrategie auf „prüfen“ konfiguriert werden.

CSS-Zusammenfassung

Analog zur Javascript-Zusammenfassung können mehrere Style-Dokumente zusammengefasst werden. Hierbei müssen allerdings die Media-Type-Definitionen der Style-Dokumente beachtet werden. Es sollten nur Dokumente mit gleichen Media-Types oder –Kombinationen zusammengefasst werden.

Der einzige Unterschied bei der Konfiguration besteht darin, dass die inkludierten CSS-Dokumente mit der View „main“ gerendert werden. Die restliche Konfiguration entspricht der Javascript-Zusammenfassung (siehe Abbildung 26: CSS-Zusammenfassung).

Data-URI

Über Data-URIs (Uniform Resource Identifier) können externe Resourcen direkt in HTML- oder StyleSheet-Dokumente eingebunden werden. Details zu Data-URIs finden sich bspw. auf http://de.wikipedia.org/wiki/Data-URL.

Background-Images in StyleSheets sind ideale Kandidaten für die Realisierung als Data-URI und können als Alternative zu CSS-Sprites verwendet werden. CSS-Sprites sind realitiv aufwändig zu erstellen und zu aktualisieren, da mehrere Bilder geeignet zu einem großen Bild zusammengefasst und das für einen Style-Selektor benötigte Background-Image über eine geeignete Positionierung des Sprite-Images dargestellt wird.

Die Zusammenfassung von Bildern zu einem CSS-Sprite und Positionierung des Sprites entfällt bei Nutzung von Data-URIs. Einzelne Backbround-Images können weiterhin als eigenständiges Bilddokument im CMS gepflegt werden.

Die Ausgabe eines Bildes als Data-URI erfolgt über folgende Notation im StyleSheets: datauri(IMAGE_NAME)

Der folgende StyleSelektor verdeutlicht dies exemplarisch:

#content .shoppingCartLink { background: transparent datauri(shoppingcart.jpg); padding-left:18px; }

Bei der Verwendung von Data-URIs sollte darauf geachtet werden, dass insbesondere die Internet-Explorer in der Version 6 bzw. 7 noch keine Data-URIs unterstützen. Für diese Browser muss ein Fallback realisiert werden. Dazu kann entweder ein spezielles StyleSheet-Dokument für den Internet-Explorer verwendet werden welches per Conditional Comment in die Seiten eingebunden wird. Diese Lösung wird in der Standardlösung verwendet:

background: transparent url(shoppingcart.jpg);

Alternativ kann auch ein CSS-Hack genutzt werden, der dazu führt, dass aktuelle Browser, die Data-URIs nutzen und Internet-Explorer 6 u. 7, die Bilder wie bisher laden:

background: transparent datauri(../../img/shoppingcart.jpg); *background: transparent url(../../img/shoppingcart.jpg);

Das ‘*’ sorgt dafür dass der Internet-Explorer 6 u. 7 die zweite Definition des Backgrounds verwenden alle anderen Browser verwenden die erste Definition und damit die Data-URI.

Komprimierung von CSS- und Javascript-Dateien

Komprimierung von CSS

Zur Komprimierung der Dokumente vom Typ "CSS-Style-Sheet" kann über den Konfigurationseintrag "/standardlsg/SiteGlobals/_config/CSSCompression" und den Wert "1" für den Mandanten bzw. einzelne Subsites die Kompression von CSS global aktiviert werden. Anschließend werden Kommentare und überflüssige Leerzeichen aus diesen Dokumenten entfernt. Sofern hingegen der Wert "0" im o.a. Konfigurationseintrag hinterlegt wird, findet keine Komprimierung statt.

Komprimierung von Javascript

Zur Komprimierung von Javascript wurde der Dokumenttyp "Script" um die Felder "Art der Komprimierung" sowie "Script (komprimiert)" erweitert. Das Javascript wird imFeld "Script (lesbar)" hinterlegt und je nach "Art der Komprimierung" automatisch beim Einchecken komprimiert. Folgende Komprimierungsarten stehen zur Verfügung:

• keine Komprimierung: Das Skript wird beim Einchecken nicht komprimiert, das Feld "Script (komprimiert)" wird nicht akutalisiert. Beim Rendern des Javascriptes wird der Inhalt des Feldes "Script (lesbar)" verwendet
• Manuelle Komprimierung: Das komprimierte Skript wird manuell durch den SiteAdmin im Feld "Script (komprimiert)" hinterlegt. Beim Rendern des Javascriptes wird vorrangig der Inhalt des Feldes "Script (komprimiert)" verwendet. Ist dieses Feld leer, so wird das Script aus dem Feld "Script (lesbar)" gelesen. Die manuelle Komprimierung bietet sich an, wenn bspw. Javascript-Bibliotheken aus dem Internet in den GSB übernommen werden.
• Kommentare und Leerzeichen: Beim Einchecken des Dokumentes wird das Skript aus dem Feld "Script (lesbar)" gelesen und um Leerzeichen und Kommentare bereinigt in das Feld "Skript (komprimiert)" geschrieben. Beim Rendern des Javascriptes wird vorrangig der Inhalt des Feldes "Script (komprimiert)" verwendet. Ist dieses Feld leer, so wird das Script aus dem Feld "Script (lesbar)" gelesen.
  Kommentare die auch bei der Komprimierung erhalten bleiben sollen, sind wie folgt aufgebaut:

/*! Wichtiger Kommentar*/

Zu beachten ist, dass die Komprimierung über den JSCompressor-Validator durchgeführt wird. Dieser wurde mit o.a. Konfiguration in den Editor der Standardlösung integriert.