Ebenen in einer Skin benutzen

Ein Skin wird logisch in eine Ansammlung von Templates und Scripts namens Ebenen (layers) unterteilt. Das Ändern dieser individuellen Sammlungen erlaubt es dem Benutzer, Komponenten auf einfache Weise zu einer Skin hinzuzufügen oder daraus zu entfernen. Die Ebenen werden in einer Skin durch eine hierarchische Liste von Ordnern dargestellt. Jede Ebene entspricht einem Ordnernamen, und jeder Ordner enthält die Skin-Elemente.

Eine Skin kann z.B. folgende Ebenen haben:

custom, gruf, plone_ecmascript, plone_wysiwyg ...

Die Reihenfolge der Ebenen in dieser Liste ist der bestimmende Faktor dafür, wie Plone die Elemente findet. Wenn ein Element wie logo.jpg von der Skin verlangt wird, geht die Skin die Ebenen durch, um das Element zu finden. Die Skin beginnt bei der ersten ihr zugeordneten Ebene (in diesem Beispiel custom). Wenn die Skin das Element dort nicht finden kann, wird die Suche in der zweiten Ebene fortgesetzt (hier gruf). Das setzt sich so lange fort, bis sie das gesuchte Element findet. Sonst wird ein Fehler 404 ausgelöst und an den Browser zurückgegeben.

Ein ähnliches Konzept dazu ist die Verwendung der Umgebungsvariablen PATH auf den meisten Betriebssystemen. Bei der Eingabe eines Befehls oder bei der Suche nach einem Programm durchsucht das Betriebssystem die Verzeichnisse, wie sie in der Umgebungsvariablen PATH angegeben sind. Etwas Ähnliches passiert bei Ebenen, wo diese auch nacheinander durchsucht werden, um das Element zu finden.

Dadurch, dass höhere Ebenen Vorrang vor niedrigeren haben, verfügen Entwickler und Administratoren nun über die Möglichkeit, ihre Site mit Hilfe von Ebenen anzupassen. Wenn Sie ein bestimmtes Element einer Plone-Skin nicht mögen, können Sie das Element anpassen, indem Sie es eine Ebene nach oben bewegen und das Ergebnis anpassen. Sie können Ihre Skins und Ebenen in Plone mit dem Werkzeug portal_skins sortieren, das ich als Nächstes behandle.

Skins mit dem Werkzeug portal_skins verwalten

Das portal_skins-Werkzeug in Plone können Sie dazu benutzen, das Verhalten von Skins und Ebenen zu definieren. Es verfügt auch über eine API (Application Programming Interface) zum Erstellen und Benutzen von Skins.

Um auf das portal_skins-Werkzeug zuzugreifen, gehen Sie ins ZMI (Zope Management Interface) und klicken auf portal_skins. Im ZMI sehen Sie dann zwei wichtige Bildschirme. Der erste, der Contents-Reiter, zeigt alle Ordner und Dateisystem-Verzeichnisansichten (file system directory views, FSDVs) in diesem Werkzeug an (siehe Abbildung 7.1).

Abbildung 7.1. Inhalt des portal_skins-Werkzeugs in einer Plone-Standardinstallation

Die Ordner und Dateisystem-Verzeichnisansichten unter dem Contents-Reiter sind nicht standardmäßig Ebenen, aber Sie können sie nun in Ebenen verwandeln. Der zweite wichtige Bildschirm, der Properties-Reiter, zeigt alle Skins und Ebenen an, die Sie in Ihrer Plone-Site definiert haben (siehe Abbildung 7.2).

Abbildung 7.2. Skins und Ebenen in einer Plone-Standardinstallation

Wie Abbildung 7.2 zeigt, ist die Liste dieser Ebenen ziemlich lang. Auch wenn sie etwas einschüchternd wirken mag, gibt diese große Anzahl von Ebenen dem Entwickler ein großes Maß an Flexibilität und Wiederverwendbarkeit. Jede Skin wird links angezeigt. Dazu gibt es rechts einen Textbereich, in dem alle zugehörigen Ebenen angezeigt werden. Wie ich schon sagte, durchsucht Plone bei der Suche nach Elementen die Ebenen von oben nach unten. Jede Ebene entspricht dem Namen eines Ordners oder FSDV unter dem Contents-Reiter. In Abbildung 7.2, können Sie ein Verzeichnis namens plone_ecmascript sehen, und in Abbildung 7.1 sehen Sie das passende FSDV-Objekt.

Ein FSDV ist ein neues Objekt, das eine nützliche Fähigkeit in Plone bietet: §s bietet direkten Zugriff auf Skin-Elemente, die im Dateisystem, anstatt wie üblich in Zopes Objektdatenbank, definiert sind. Dadurch machen sie die Entwicklung und Anpassung leichter. Durch das direkte Lesen der Objekte aus dem Dateisystem ist es für Entwickler viel leichter, den Code zu schreiben und zu bearbeiten, aus dem die Site generiert wird. Wenn Sie Plone installieren, wird die Skin ins Dateisystem geschrieben. Wenn Sie ein Objekt anpassen, legen Sie eine lokale Kopie davon in Ihrer Plone-Datenbank an. Ein FSDV erlaubt eine klare Trennung zwischen Code, den Sie aus dem Web heruntergeladen haben, und Code, der in Ihrer lokalen Instanz angepasst wurde.

Plone 2 wird mit zwei Skins ausgeliefert: Plone Default und Plone Tableless. Plone Default verwendet Tabellen bei der Darstellung des Haupttextes, flankiert von zwei Tabellenzellen auf beiden Seiten, die die linken bzw. rechten Slots enthalten. Aus Gründen der Browser-Kompatibilität ist das die Standardeinstellung. Wenn Sie jedoch zu Plone Tableless umschalten, bekommen Sie eine Skin, die gleich aussieht, aber bei der Darstellung der Seiten völlig ohne Tabellen auskommt, was Ihnen als Site-Entwickler mehr Flexibilität gibt. Beim Schreiben dieses Buches war die Plone Tableless-Skin auf manchen Browsern wie dem Internet Explorer vielleicht etwas problematisch. In Zukunft, so hoffe ich, wird die Plone Tableless-Skin der Standard werden.

Um die Skin zu wechseln, scrollen Sie ans untere Formularende, wo Sie den Wert für Default Skin sehen, und wählen die Skin Plone Default aus der Liste aus. Falls Sie die Option Skin Flexibility wählen, können Benutzer ihre eigenen Skins im Abschnitt Meine Einstellungen wählen.

Zurück im Contents-Reiter des portal_skins-Werkzeugs können Sie sehen, dass einige der Ordner, z.B. custom, Standardordner aus Zope sind. Diese haben das normale Ordner-Icon. Andere, z.B. plone_images, sind FSDVs, die in Bereiche des Dateisystems zeigen. Sie haben ein Ordner-Icon mit einem grünen Schloss darin. Dieses Schloss zeigt an, dass Sie keine Elemente über das Web, sondern nur über das Dateisystem in einem FSDV hinzufügen oder bearbeiten können.

Um zu sehen, wo die Dateien zu einem FSDV sich auf Ihrer Festplatte aufhalten, klicken Sie auf den Properties-Reiter des FSDV. Klicken Sie z.B. vom Contents-Reiter des portal_skins-Werkzeugs auf Properties, und Sie sehen den im System verwendeten Dateipfad CMFPlone/skins/plone_images. Dieser Pfad ist der Ort dieses Verzeichnisses im Dateisystem, relativ zum Instanzursprung, den Sie bei der Installation angegeben haben. Da Sie Dateien über das Web im FSDV oder im Dateisystem sehen können, können Sie auf beide Arten lesend darauf zugreifen. Im Allgemeinen ist es angenehmer und leichter, Dateien im Dateisystem anzuzeigen, weswegen ich als Datei einen Pfad im Dateisystem bezeichnen werde, auf den man mit den gewohnten Werkzeugen zugreifen kann.

Logo anpassen, zweiter Teil

In Kapitel 4 haben Sie gelernt, wie Sie das Logo in der oberen linken Ecke einer Plone-Site anpassen können, aber ich habe nicht erklärt, was dabei wirklich passiert. Dieser Abschnitt holt das nach.

Das Bild logo.jpg ist jenes Bild, das in der oberen linken Ecke jeder Seite erscheint. Sie werden nun sehen, was passiert, wenn ein Browser versucht, diese Seite darzustellen. Nachdem Plone die Anfrage zu diesem Bild erhält, durchsucht es die Ebenen nach logo.jpg. In einer Plone Default-Site ist dies das Element in plone_images namens logo.jpg. Weil dies, wie ich zuvor erklärt habe, ein FSDV ist, können Sie das Bild nicht über das Web ändern. Um Ihre Site vor zukünftigen Änderungen zu schützen, wollen Sie es aber auch nicht im Dateisystem ändern. Betrachten Sie also einmal genauer, was der Customize-Button tut. Wenn Sie diesen Button noch einmal anschauen, sehen Sie links daneben ein Dropdown-Menü mit Ordnern unter dem Contents-Reiter des portal_skins-Werkzeugs.

Mit einem Klick auf den Customize-Button wird eine lokale Kopie des Elements in dem Ordner angelegt, der im Dropdown-Menü gewählt wurde. Per Voreinstellung ist dies der Ordner custom. Das heißt, nun haben Sie eine Kopie im custom-Ordner. Wenn Plone das Element logo.jpg sucht, greift es auf die Version im custom-Ordner zu. Wenn Sie wieder die Ebenen der Plone Default-Skin betrachten, sehen Sie, dass der custom-Ordner die oberste Ebene der Skin ist. Da beim Aufruf von logo.jpg das Bild in der custom-Ebene gefunden wird, wird dieses neue logo.jpg dargestellt.

Die Ablage angepasster Elemente in den custom-Ordner ist der schnellste Weg, Ihre Plone-Site abzuwandeln. Dieser Ordner ist ein Standardordner in Plone, d.h., Sie können darin so viele Elemente ablegen und frühere Versionen überschreiben, wie Sie möchten.

Einführung in die Cascading Style Sheets von Plone

Die visuelle Darstellung einer Plone-Site in einem Browser wird fast vollständig mit Hilfe von CSS zusammengestellt. Der vielleicht einfachste Weg, um zu sehen, was das CSS für eine Plone-Site leistet, ist der, die Abbildungen 7.3 und 7.4 zu vergleichen. Die erste zeigt Plone mit Stylesheets, und die zweite zeigt es ohne Stylesheets.

Abbildung 7.3. Plone mit Stylesheets

Abbildung 7.4. Plone ohne Stylesheets

Der Unterschied ist, gelinde gesagt, bestechend. CSS übernimmt nicht nur die visuelle Darstellung von Seiten, sondern auch deren Layout. Durch eine Änderung im CSS können Sie diese visuelle Darstellung und das Layout einer Plone-Site ändern (innerhalb des Rahmens von CSS).

Dass die Darstellung von Plone von CSS durchgeführt wird, ist eine beeindruckende Leistung von vielen talentierten Entwicklern von Benutzerschnittstellen. zu den Vorteilen eines CSS-Layouts zählen unter anderem:

• CSS bietet eine Trennung zwischen der Darstellung und den Templates, die die Darstellung generieren.
• Sie können eine große Anzahl von Änderungen vornehmen, ohne die darunter liegenden Templates anfassen zu müssen. Man braucht nur einen erfahrenen CSS-Entwickler.
• Mit CSS wird die Site schneller, weil kleinere Dateien übertragen werden. Jede HTML-Datei ist kleiner, da das Layout der Site nicht als HTML-Auszeichnungen, sondern als CSS vorliegt, das dann im Cache gespeichert werden kann.
• CSS ermöglicht die Anpassung des Look-and-Feel, ohne die zugrunde liegende Arbeit an der Zugänglichkeit der Site zu ruinieren.

Schriftart, Farben und Abstände anpassen

Das eigentliche Stylesheet, das die meiste Arbeit erledigt, plone.css, enthält eine Reihe von Variablen, die mit DTML (Document Template Markup Language) gesetzt werden. In diesem Buch behandle ich kein DTML, und wahrscheinlich ist das die einzige Stelle in Plone, wo es verwendet wird. Falls Sie DTML nicht schon kennen, rate ich Ihnen davon ab, es zu lernen, wenn es nicht sein muss! Das Zope Page Templates-System enthält alles, was Sie zum Erzeugen von Markup-Code (z.B. XML und [X]HTML) brauchen. DTML empfiehlt sich heutzutage lediglich, wenn Sie Text erzeugen wollen, der kein Markup-Code ist, wie zum Beispiel CSS. Es gibt sehr gute Online-Referenzen zu DTML für Zope, z.B. unter: http://zope.org/Documentation/Books/ZopeBook/2_6Edition/DTML.stx.

Die DTML-Syntax für dieses Stylesheet ist wirklich sehr einfach: Jede Variable bezieht sich auf ein entsprechendes Attribut in einer Eigenschaftsliste. Auf diese Eigenschaftsliste greifen Sie zu, indem Sie nacheinander auf portal_skins, plone_styles und base_properties klicken. In Abbildung 7.5 können Sie sehen, wie diese Datei im ZMI aussieht.

Abbildung 7.5. Die Grundeigenschaften des Stylesheets

So findet z.B. &dtml-fontColor; die Variable fontColor und setzt sie ins Stylesheet, d.h., fontColor wird schwarz sein. Nun sehen Sie, wo diese Variable in der Datei plone.css referenziert wird. Um auf die CSS-Datei zuzugreifen, klicken Sie auf portal_skins, portal_skins und dann auf plone.css. In dieser Datei sehen Sie, dass mainFontColor an mehreren Stellen referenziert wird, z.B. wie folgt im Haupttext einer Seite:

body {
    font: &dtml-fontBaseSize; <dtml-var fontFamily>;
    background-color: &dtml-backgroundColor;;

    color: &dtml-fontColor;;

    margin: 0;
    padding: 0;
}

Sie können einfach im Stylesheet weiterlesen, wenn Sie wirklich wollen, aber die Variable zu ändern ist immer die schnellste Art herauszufinden, was davon betroffen ist.

Klicken Sie im ZMI auf portal_skins, plone_styles, base_properties und dann auf den Customize-Button. Wie Sie gesehen haben, wird dadurch ein Objekt im ZMI erzeugt, das Sie anpassen können. Dieses Mal ist das angepasste Objekt ein Ordner, der über die Eigenschaften verfügt, die in diesem Ordner vorhanden sind. Um auf die gerade angepassten Eigenschaften zuzugreifen, klicken Sie auf portal_skins, custom und dann auf base_properties. Als Nächstes wählen Sie den Properties-Reiter (siehe Abbildung 7.6).

Abbildung 7.6. Eigenschaften des Ordners

In dieser Eigenschaftsliste können Sie die Eigenschaft mainColor ändern, z.B. auf red oder #cc9900. Ändern Sie den Wert dieser Eigenschaft, und klicken Sie dann auf Save Changes. Zurück in der Plone-Site sollten Sie nun die neue Farbe sehen.

In Kapitel 4 haben Sie ein Beispiel gesehen, in dem Benutzer Aktionen verändert haben, um einen Reiter oben auf der Seite zu ändern. Obwohl eine Aktion zwar mit einem Großbuchstaben anfangen kann, z.B. Mitglieder, wird sie dann auf der Webseite in Kleinbuchstaben angezeigt. Das liegt daran, dass CSS den Text wegen der Eigenschaft textTransform in der Eigenschaftsliste in Kleinbuchstaben umwandelt. Um diese Umwandlung auszusetzen, ändern Sie die Eigenschaft textTransform auf none.

Im Stylesheet werden Eigenschaften für alle Farben, Abstände und Schriftarten definiert, die in einer Plone-Site benutzt werden. Tabelle 7.1 beschreibt all diese Parameter.

Tabelle 7.1. CSS-Eigenschaften

CSS anpassen

Wenn Sie kleine Anpassungen vornehmen, können Sie das in ploneCustom.css tun. Dies ist ein zweites Stylesheet, das nach plone.css geladen wird. Dank der Kaskadierungsfunktion von Stylesheets können Sie in ploneCustom.css beliebige Änderungen am gesamten Stylesheet vornehmen.

Um z.B. die Verfasserangaben zu ändern, die unten auf jeder Seite erscheinen, ändern Sie einfach ploneCustom.css. Greifen Sie noch einmal mit dem ZMI auf die Datei zu, und klicken Sie dann auf Customize. Dadurch wird eine Kopie dieses Stylesheets im Ordner custom angelegt. Ändern Sie die Verfasserangaben, indem Sie sie auf der Seite nach links verschieben und sie fett machen, wie in Abbildung 7.7 zu sehen ist.

Abbildung 7.7. Neue fette Verfasserangaben links

Das tun Sie, indem Sie Folgendes hinzufügen:

div.documentByLine {
    text-align: left;
    font-weight: bold;
}

Hierbei haben Sie zwei Attribute für das byline-Element gesetzt: text-align und font-weight. Beachten Sie, dass Sie keine anderen Attribute im byline-Element ändern. Die anderen Attribute werden vom Original-Stylesheet geerbt. Mit ein paar einfachen Zeilen CSS haben Sie die Site geändert und haben sichergestellt, dass andere Änderungen an Plone keinen Einfluss auf Ihre Site haben. Für kleine Änderungen ist ploneCustom.css der am besten geeignete Ort.

Durch die Verwendung verschiedener Stylesheets können Sie Plone so benutzen, dass es für verschiedene Clients unterschiedlich aussieht. Websites verfügen oftmals über einen Button für eine Druckansicht, bei der die Seite in vereinfachter Form mit weniger Formatierungen angezeigt wird. Plone verringert dieses Problem dadurch, dass es ein separates Stylesheet anbietet. Wenn ein Browser die Seite druckt, wird sie von diesem Stylesheet formatiert. Alle weiteren Stylesheets sind oben auf der Seite enthalten. Sie finden sie, wenn Sie nacheinander auf portal_skins, plone_templates und header.pt klicken.

Das Haupt-Template anpassen

Wie Sie im vorigen Kapitel gesehen haben, müssen Sie das master-Makro aus main_template benutzen, um das Look-and-Feel von Plone auf einer Seite zu erhalten. Jede Plone-Seite benutzt dieses Makro und füllt darin die passenden Slots. Wenn Sie sich dieses Haupt-Template im Detail anschauen, können Sie genau sehen, wie eine Plone-Seite in einem Page-Template gebaut wird und wie Sie diese individuellen Seitenelemente anpassen können.

Wenn Sie sich die Plone-Hauptseite anschauen, sehen Sie darauf eine Reihe von Elementen. Abbildung 7.8 zeigt eine Plone-Seite, auf der alle wesentlichen Elemente der Benutzerschnittstelle markiert sind. Tabelle 7.2 beschreibt den Zweck jedes dieser Elemente. Zu jedem Element in Abbildung 7.8 finden Sie einen entsprechenden Eintrag in der Tabelle.

Abbildung 7.8. Alle Hauptelemente in der Plone-Benutzerschnittstelle

Tabelle 7.2. Elemente der Benutzerschnittstelle

Einen Abschnitt dieses Templates habe ich nicht behandelt: den Inhalt. Der ganze Text von Welcome to Plone bis hinunter zu The Plone Team ist Inhalt, der von Benutzern erstellt und bearbeitet wird. Dies ist der main-Slot im Page Template, der mit einem bestimmten Inhaltstyp oder Page Template gefüllt wird, wie Sie gesehen haben. In Kapitel 6 habe ich Slots behandelt und Ihnen gezeigt, wie Sie durch die Verwendung des main-Slots sicherstellen können, dass der Inhalt einer Plone-Seite erscheint.

Wie passen Sie also bei all diesen Komponenten einer Plone-Seite einen bestimmten Teil an? Die Antwort lautet, dass Sie den passenden Teil im main_template erst finden und dann sehen müssen, welchen Teil er aufruft, um diesen anschließend anzupassen. Aus diesem Grund werde ich das Haupt-Template im Detail behandeln.

Auf den ersten Blick scheint das Haupt-Template ziemlich lang und kompliziert zu sein, aber es besteht fast nur aus Makros, und seine Hauptaufgabe ist lediglich die, Inhalte aus anderen Bereichen zu holen. Das Haupt-Template finden Sie, indem Sie nacheinander auf portal_skins, plone_templates und main_template klicken.

Die Philosophie hinter dem Haupt-Template ist, dass ein Benutzer die aktuelle Konfiguration des Templates nicht ändern muss, es sei denn, es sind größere Veränderungen geplant. Weil das Haupt-Template alle Inhalte aus anderen Stellen in Plone zusammenträgt, können Sie die zusammengestellte Seite ändern, indem Sie diese individuellen Elemente anpassen. Das heißt, Sie können genau die gewünschten Abschnitte modifizieren und müssen nicht das gesamte Template ändern.

Das Haupt-Template macht ausgiebigen Gebrauch von XML-Namespaces, um den metal-Code so einfach mit möglich zu halten. Beispiel:

<metal:headslot define-slot="head_slot" />
   <!-- A slot where you can insert elements in the header from a template -->

Hierbei entspricht der Tag-Name keinem XHTML-Standardelement, sondern er verwendet das metal:-Präfix, um den Namespace metal:headslot zu definieren. Das hat folgende Vorteile:

• Das Element headslot hat eine Semantik, da es das Element beschreibt. Man kann leicht feststellen, dass es der Slot für alles Mögliche ist, was Sie zum Kopf Ihrer Seite hinzufügen möchten.
• Attribute in diesem Element benutzen den Namespace im Element, falls nicht anders angegeben, d.h., statt metal:fill-slot können Sie einfach fill-slot benutzen.
• Das eigentliche Tag ist kein gültiges XHTML-Tag, d.h., es wird nicht dargestellt. Wenn die Darstellung des Tags jedoch gültiges XHTML generiert, wird dieser XHTML-Code dargestellt.

Wenn ein Makro verwendet wird, wird der Inhalt des aufrufenden Templates entfernt, d.h., man kann Kommentare in das aufrufende Template als Text ins Makro setzen. Beispiel:

<div metal:use-macro="here/global_searchbox/macros/quick_search">
    The quicksearch box, normally placed at the top right
</div>

Wegen des Kommentars kann man leicht feststellen, dass sich dieses Makro auf den Kasten mit der Suchabfrage in der oberen rechten Ecke der Seite (Element 2 in Abbildung 7.8) bezieht. Um das Makro zu sehen, müssen Sie das Script namens global_searchbox mit dem Makro quick_search darin finden. Das Haupt-Template geht durch die main-Makros und zieht dabei Informationen aus verschiedenen Templates und Scripts heraus.

Nach diesem Abschnitt erreicht das Haupt-Template den Hauptinhalt der Seite, d.h. das darzustellende Objekt. In Kapitel 6 habe ich den Unterschied zwischen einem Slot und einem Makro erklärt. Erinnern Sie sich daran, dass ein Template Slots definiert, die dann mit Inhalt gefüllt werden. Für diesen Inhalt gibt es wirklich nur einen wichtigen Slot, den ich schon oft genannt habe: den main-Slot.

Ein häufiges, vielleicht verwirrendes Muster in Plone kommt bei der Definition eines Slots innerhalb eines fill-Slots vor. Folgendes ist z.B. die Definition des Slots css_slot:

<metal:cssslot fill-slot="css_slot">
    <!-- A slot where you can insert CSS from a template -->
    <metal:cssslot define-slot="css_slot" />
</metal:cssslot>

Dieses Muster sieht etwas merkwürdig aus, aber es definiert den Slot und erzeugt dann den fill-Slot erneut. Wenn Sie sich das Haupt-Template genau anschauen, befinden sich diese Slots tatsächlich innerhalb von use-macro im Kopf, d.h., das Kopf-Makro darf diesen Slot füllen. Aber Sie möchten auch, dass das End-Template den Slot füllen kann, deswegen wird der Slot neu definiert. Somit kann ein Slot nun an zwei Orten gefüllt werden, was ein nützliches Vorgehen beim Ändern des Templates ist.

Bei der Durchsicht des restlichen Haupt-Templates werden Sie die linke und rechte Spalte, die Fußzeilen und das Kolophon erreichen. Beachten Sie, dass die linke Spalte möglicherweise vor dem Hauptinhalt einer Seite erscheint (jedenfalls, wenn Ihre Sprache von links nach rechts gelesen wird), aber das Stylesheet bewegt sie dorthin. Das garantiert, dass beim Besuchen der Site mit einem rein textbasierten Browser der Hauptinhalt zuerst erscheint und nicht erst nach den ganzen Navigationsoptionen.

Tabelle 7.3 beschreibt die Makros und Slots im Haupt-Template.

Tabelle 7.3. Makros und Slots im Haupt-Template

Mit dieser Information ausgestattet, ist es nun eine Frage der Anpassung eines Makros oder Slots, wenn das Look-and-Feel der Seite geändert werden soll. Um es noch einmal zu sagen: Sie sollten nicht das Haupt-Template selbst anpassen, sondern die Teile, die es aufruft. Der nächste Abschnitt zeigt ein paar Beispiele für Anpassungen, die Sie in Plone vornehmen können.

Beispiele für Anpassungs-Code-Schnipsel untersuchen

Die folgenden Abschnitte enthalten einige Beispiele, die einfache Anpassungen an einer Plone-Site demonstrieren. Bei manchen Lösungen werden ein oder zwei Alternativen zur Lösung der Aufgabe gezeigt.

Einen Block entfernen

Ein ziemlich netter Trick ist es, wenn man einen Block wie die Pfadleiste oder den Suchkasten aus der Benutzerschnittstelle leicht entfernen kann. Das können Sie auf zwei Arten erreichen. Der offensichtlichste Ansatz besteht in der Anpassung des Makros, mit dem das Element angezeigt wird. Um z.B. die Pfadleiste zu entfernen, könnten Sie nacheinander auf portal_skins, plone_templates und global_pathbar klicken und dann das Element auf der Ebene des Page Templates entfernen. Sie können z.B. Folgendes ändern:

<div metal:define-macro="path_bar"
    id="pathBar"
    tal:define="breadcrumbs python:here.breadcrumbs(here);
        portal_url portal_url|here/portal_url">

indem Sie wie folgt eine Code-Zeile hinzufügen:

<div metal:define-macro="path_bar"
    id="portal-breadcrumbs"
    tal:condition="nothing"
    tal:define="breadcrumbs python:here.breadcrumbs(here);
        portal_url portal_url|here/portal_url">

Das bedeutet, es wird ein Page Template angepasst, was überhaupt kein Problem ist, weil Sie mittlerweile schon damit vertraut sein sollten. Ein etwas anderer Ansatz besteht darin, Elemente auf CSS-Ebene zu verstecken. Das bedeutet, ein Element wird weiterhin dargestellt, und es wird HTML dafür generiert, wird dann aber für den Client ausgeschaltet, d.h., es wird unsichtbar. Da das HTML weiterhin generiert wird, ist diese Lösung suboptimal, aber es ist ein netter Trick.

Die meisten Elemente in Plone haben eine eindeutige DOM-Element-ID (Document Object Model). Im Fall der Pfadleiste lautet sie portal-breadcrumbs, wie Sie im Code oben sehen können. Um portal-breadcrumbs nicht mehr anzuzeigen, fügen Sie einfach Folgendes zu ploneCustom.css hinzu:

#portal-breadcrumbs {
    display: none;
}

Portal-Reiter ändern

Ich habe Ihnen bereits gezeigt, wie Sie den Text der Portal-Reiter ändern können, indem Sie die Aktionen ändern. Sie werden mit Hilfe des Stylesheets angezeigt, nicht etwa mit Tabellen, auch wenn man als Benutzer das vielleicht erst einmal denkt. In Tabelle 7.3 sehen Sie, dass der Code für die Portal-Reiter in portalTabs steht. Um den Rahmen der nicht ausgewählten Reiter gepunktet darzustellen, können Sie einfach das Stylesheet ploneCustom wie folgt ändern:

#portal-globalnav li a {
    border: 1px dotted;
}

Die Reiter bestehen aus einer Reihe von HTML-Listen- (li) und Anker-Elementen (a), d.h., durch eine Änderung des CSS für diese Elemente ändern Sie das Erscheinungsbild dieser Reiter. Im später folgenden Abschnitt "Fallstudie: Die NASA-Skin" werde ich zeigen, wie man diese Reiter zu Bildern abändert.

Dank CSS können Sie mit dem Attribut position alle Elemente an einen anderen Platz verschieben. Verschieben Sie Ihre Reiter als Nächstes nach ganz oben auf den Bildschirm, oberhalb des Logos und des Suchen-Kastens. Zu diesem Zweck verwenden Sie den Wert absolute bei der Position, wo Sie auch die Werte left, right, top und bottom verwenden dürfen. Fügen Sie Folgendes zum Stylesheet ploneCustom hinzu, um die Portal-Reiter oben auf Ihre Plone-Site zu platzieren:

#portal-globalnav {
  position: absolute;
  top: 0em;
}

Das ist ein mächtiges Verfahren zum Verschieben von Elementen. Beim Positionieren der Elemente haben Sie mehrere Möglichkeiten, inklusive einer relativen Positionierung, aber das erfordert etwas Arbeit mit CSS, um die Positionierung genau hinzubekommen.

Linke und rechte Slots verschieben

Die linken und rechten Slots habe ich in Kapitel 4 beschrieben. Dort habe ich auch gezeigt, wie Sie einen neuen Slot zur Slot-Liste hinzufügen. Vielleicht haben Sie bemerkt, dass die Bezeichnungen linke und rechte Slots ein wenig missverständlich sein können. Standardmäßig werden die Slots in diesen Positionen angezeigt, aber sie lassen sich leicht verschieben.

Wenn Sie z.B. die linken Portlets rechts auf der Seite anzeigen möchten, könnten Sie das mit der folgenden Änderung in ploneCustom.css bewirken:

#portal-column-one  {
    float: right;
}
#portal-column-content {
    float: left;
}

Dadurch wird die Spalte ganz links nach rechts verschoben, und der Hauptteil wandert nach links.

Hilfe in Formularen verstecken

Wenn Sie in allen Formularen die Hilfe ausblenden wollten, wäre es unrealistisch, dafür alle Templates zu ändern. Aber eine ähnliche Taktik könnten Sie einsetzen, um die Pfadleiste zu verstecken, indem Sie bei den Forularelementen einfach nur display: none setzen. Folgendes hat den gewünschten Effekt, nämlich das Eingabeelement nicht in eine neue Zeile zu setzen:

div.formHelp {
    display: none;
}

Abbildung 7.9 zeigt die Feedback-Seite ohne Pfadnavigation, mit versteckter Hilfe, gepunkteten Reitern und mit einem nach rechts verschobenen linken Slot, was alles mit nur ein paar Zeilen CSS geändert wurde.

Abbildung 7.9. Kombinationseffekt einiger Beispiele

Wie finden Sie Element X?

Wie ich gezeigt habe, sind die Templates, Scripts und Bilder, die eine Plone-Skin ausmachen, im Verzeichnis skins einer Plone-Installation enthalten. In diesem Verzeichnis befinden sich viele Dateien, d.h., es wäre langwierig und unproduktiv, bei einer Dateiänderung durch die ganze Liste zu gehen. Stattdessen ist es sehr hilfreich, einige Grundtechniken zum Finden jener Elemente zu beherrschen, die Sie ändern möchten.

Überlegen Sie sich, auf welcher Ebene Sie das Element anpassen möchten. Wie schon erwähnt, stehen Ihnen bei der Darstellung eines Objekts drei Ebenen zur Verfügung. Wenn Sie die visuelle Darstellung oder Platzierung des Elements ändern möchten, können Sie die Änderungen wahrscheinlich allein mit CSS vornehmen und müssen sonst nichts tun.

Falls CSS nicht ausreicht, finden Sie den nächstbesseren Ort bei der Suche in den Templates. Nehmen Sie beispielsweise an, sie möchten den Text ändern, der auf der Seite erscheint, wenn sich ein Benutzer anmeldet, oder Sie möchten gleich die ganze Seite ändern. In diesem Beispiel werden Sie die Seite in Abbildung 7.10 ändern, damit daraus ein Script wird, das etwas Ungewöhnliches macht.

Abbildung 7.10. Die Seite "Sie sind jetzt eingeloggt"

Es gibt einige Hinweise darauf, wie man dieses Template findet, das Sie ändern können. Im Folgenden gehe ich sie alle durch.

Suchen mit Hilfe der URL

Der URL (Uniform Resource Locator) auf eine Seite wird in eine Folge von Objekten in Plone übersetzt, die traversiert werden. In Abbildung 7.11 habe ich eine Traversierung zur Seite login_success durchgeführt. In diesem Fall ist der letzte Teil des URL login_success, wie Sie in der Adresszeile in Abbildung 7.11 sehen können. Wenn ein Objekt in ein FSDV geladen wird, wird die Dateierweiterung weggelassen, d.h., Sie suchen nach einem Template oder Script, das mit login_success anfängt.

Abbildung 7.11. Suche nach einer ID

In Zope können Sie diese Suche durchführen, indem Sie zum portal_skins-Werkzeug gehen und auf den Find-Reiter klicken. Dort geben Sie login_success im Feld with ids ein. Lassen Sie alle anderen Einstellungen unverändert, und klicken Sie auf den Find-Button. Dann finden Sie ganz bestimmt das Template login_success.

Diese Suche können Sie auch im Dateisystem durchführen, je nach Betriebssystem und verfügbaren Werkzeugen. Die schnellste Methode, um diese Datei unter Linux zu finden, ist die, in Ihr CMFPlone-Verzeichnis zu gehen und Folgendes zu machen:

$ cd skins
$ find -name 'login_success*' -print
./plone_forms/login_success.pt

Unter Windows öffnen Sie den Ordner CMFPlone im Windows Explorer und klicken auf den Suchen-Reiter. Geben Sie dann den Namen der Datei als login_success ein, und klicken Sie auf Suchen. Danach sollten Sie eine Liste der passenden Dateien erhalten.

Als Ergebnis dieser Suche sollte CMFPlone/plone_forms/login_success.pt herauskommen. Wenn Sie die gleiche Suche im ZMI durchführen, klicken Sie nacheinander auf portal_skins, plone_forms und login_success.

Suche nach einem Textteil

Ein etwas grober Ansatz, der meist auch zum Erfolg führt, besteht darin, eine Volltextsuche im Code durchzuführen, um das Element zu finden, das die Seite darstellt. Wenn Sie z.B. die Seite in Abbildung 7.12 betrachten, sehen Sie, dass darauf der Text Notice that the top vorkommt. Die einfachste Methode, den Teil zu finden, der diesen Text anzeigt, ist, danach zu suchen.

Abbildung 7.12. Suche nach Text

In Zope können Sie diese Suche auch durchführen, indem Sie zum portal_skins-Werkzeug gehen und auf den Find-Reiter klicken. Dort geben Sie Notice that the top im Feld containing ein. Alle anderen Einstellungen lassen Sie unverändert und klicken dann auf den Find-Button. Auch dann sollten Sie ganz bestimmt das Template login_success finden.

Diese Suche können Sie auch im Dateisystem durchführen, je nach Betriebssystem und verfügbaren Werkzeugen. Die schnellste Methode, diese Datei unter Linux zu finden, ist die, in Ihr CMFPlone-Verzeichnis zu gehen und Folgendes einzugeben:

$ grep -ri "Notice that the top" *
plone_forms/login_success.pt: Notice that the top

Unter Windows öffnen Sie den Ordner CMFPlone im Windows Explorer und klicken auf den Suchen-Reiter. Geben Sie dann als Inhalt der Datei Notice that the top ein, und klicken Sie auf Suchen. Danach sollten Sie eine Liste der passenden Dateien erhalten. Mit dieser etwas groben Technik haben Sie das Template login_success gefunden, das einem Benutzer diese Meldung anzeigt.

Diese Methode hat folgende Tücken:

• Passen Sie auf die Schreibweise von Inhalten in CSS auf! Suchen Sie immer unabhängig von der Schreibweise (ist in Windows standardmäßig eingestellt). Es ist ärgerlich, nach home zu suchen, wenn es im Template tatsächlich Home heißt und nur von CSS mit Kleinbuchstaben angezeigt wird.
• Wenn Sie das in einer anderen Sprache als Englisch versuchen, wurde der Inhalt eventuell lokalisiert, wodurch die Suche fehlschlägt.
• Gelegentlich gibt es keinen suchbaren Text, den man finden kann. In diesem Fall ist eine Suche über die URL ratsam.

Neue Skins erstellen

Wie Sie gesehen haben, ist eine Skin nicht mehr als eine Ansammlung von Ebenen. Für meine neue Skin wollte ich all meinen eigenen Code an einer Stelle konzentrieren. Dazu habe ich das portal_skins-Werkzeug gewählt und habe einen neuen Ordner mit der ID custom_chrome hinzugefügt.

Um dann eine neue Skin zu erstellen, müssen Sie portal_skins anklicken, den Properties-Reiter wählen und unter dem Text Add a new skin eine neue Skin hinzufügen. Sie müssen eine Reihe von Ebenen eingeben, die Sie für diese Skin einrichten möchten. In diesem Beispiel habe ich eine neue Skin namens Custom Chrome sowie eine Reihe von Ebenen hinzugefügt, wie in Abbildung 7.13 zu sehen ist.

Abbildung 7.13. Hinzufügen der Skin Custom Chrome

Dann habe ich die Ebenen für die Skin hinzugefügt. In diesem Fall hatte die Skin keine Ebene namens custom darin. Stattdessen hatte sie einen Ordner namens custom_chrome. Nun haben Sie zwei Skins, die zwei Ebenen und zwei Ordner verwenden. Alle zum custom_chrome-Ordner hinzugefügten Objekte beeinflussen diese Skin, aber nicht die Plone-Default-Skin.

Mehrere Skins benutzen

Wie schon erwähnt wurde, enthält eine Standard-Plone-Site zwei Skins: Plone Default und Plone Tableless. Im vorigen Abschnitt habe ich eine neue Skin hinzugefügt, Custom Chrome. Wie ich in Kapitel 4 beschrieben habe, können Sie die Standard-Skin mit der Plone-Schnittstelle setzen. Klicken Sie auf Plone Konfiguration und dann auf den Aussehen-Button. Dieser bildet die Möglichkeiten ab, die im ZMI verfügbar sind, wenn Sie dort portal_skins anklicken, den Properties-Reiter wählen und auf der Seite nach unten scrollen.

Aber Sie haben noch eine weitere Möglichkeit: eine Variable namens REQUEST. Dies ist die Anfragevariable, die die Informationen über die Skin des Benutzers enthält. Standardmäßig ist das plone_skin, was der Name des Cookies ist. Aber sie kann auch über andere Anfragevariablen wie den Abfrage-String übergeben werden. Diese Variable ist nur über das ZMI verfügbar.

Sie können Skins auch mit Hilfe eines Programms setzen. Damit können Entwickler unterschiedliche Benutzer abhängig von irgendeiner Geschäfts- oder Site-Logik mit jeweils einer eigenen Skin bedienen. Wenn ein Benutzer z.B. Inhalte für eine Site schreibt, sieht er die Plone-Standard-Skin. Anonyme Benutzer hingegen sehen eine völlig andere Skin. Nicht der Benutzer trifft dann die Entscheidung, sondern die Site. Wenn Sie wirklich wollen, können Sie die Skin abhängig vom Ordner machen, auf den zugegriffen wird, allerdings kann dieser Ansatz verwirrend sein, daher möchte ich ihn nicht empfehlen.

Um die Skin zu ändern, fügen Sie ein Script(Python)-Objekt namens setSkin zur Wurzel Ihrer Plone-Site hinzu. Dann fügen Sie den folgenden Code hinzu:

##title=Skin changing script
##parameters=
req = context.REQUEST
if req['SERVER_URL'].find('internal.somesite.org') > -1:
    context.changeSkin("Plone Default")
context.changeSkin("Custom Chrome")

Die eigentliche Logik für die Auswahl der Skin wird von der Geschäftslogik der Site abhängig sein. In diesem Fall erhalten alle, die auf http://internal.somesite.org zugreifen, die Plone-Default-Skin, während alle, die auf http://external.somesite.org zugreifen, die Custom Chrome-Skin erhalten. Leider ist ein Haken dabei, und zwar der, dass Sie die Skin nicht in Abhängigkeit von der Sicherheitsstufe des Benutzers wählen können (z.B. wenn authentifizierte Benutzer die eine Skin und Manager eine andere Skin sehen sollen). Dieser offensichtliche Bedarf kann momentan nicht erfüllt werden, ohne die Plone-Site ganz heftig zu hacken.

Um diesen Code zu aktivieren, weisen Sie diesem Objekt eine Zugriffsregel zu. Das bedeutet, dass bei jedem Zugriff auf die Plone-Site das Script (Python)-Objekt ausgeführt wird. Jedes Mal, wenn das Script läuft, wird die Skin abhängig vom Skript gesetzt. Um einem Skript eine Regel zuzuweisen, wählen Sie Set Access Rule im Dropdown-Menü und geben dann den Namen Ihres Script (Python)-Objekts ein. Machen Sie nun einen Test, indem Sie Ihre Site besuchen und nachsehen, welche Skin Sie erhalten.

Mit Zugriffsregeln müssen Sie vorsichtig sein, weil sie bei jedem Zugriff auf diesen Ordner (oder die Plone-Site) aufgerufen werden. Sie müssen sicherstellen, dass sie korrekt sind und dass nichts Falsches darin passiert. Wenn Sie versehentlich ein fehlerhaftes oder unkorrektes Script(Python)-Objekt geschrieben haben und nicht einmal mehr im ZMI einen Zugriff darauf bekommen, um es zu reparieren, dann können Sie die Zugriffsregeln ausschalten, indem Sie Plone mit der folgenden Umgebungsvariablen neu starten:

SUPPRESS_ACCESSRULE = 1

Anhang A erklärt, wie Umgebungsvariablen gesetzt werden, falls Sie mit ihnen nicht vertraut sein sollten.

Eine neue Skin im Dateisystem erstellen

Während dieser Kapitel habe ich durchgehend das ZMI benutzt. Aber die meisten Plone-Entwickler arbeiten tatsächlich mit dem Dateisystem. Eine Skin kann man im Dateisystem in der Tat sehr leicht erstellen.

Gehen Sie ins Home-Verzeichnis der Instanz Ihrer Plone-Installation. Erstellen Sie ein neues Verzeichnis im Products-Verzeichnis. Dessen Name ist der Name des Produkts, und laut Konvention ist er relativ kurz, ohne Leerzeichen oder Unterstriche und mit Groß- und Kleinschreibung. Beispiele hierfür sind PloneBookExample, CMFPlone und PloneSilverCity. Erstellen Sie in diesem Ordner eine neue Datei namens __init__.py und ein Verzeichnis namens skins. In der Datei __init__.py müssen Sie die beiden folgenden Zeilen hinzufügen:

from Products.CMFCore import DirectoryView
DirectoryView.registerDirectory('skins', globals())

Als Nächstes starten Sie Plone erneut und klicken auf portal_skins, um ein FSDV hinzuzufügen. Dann wird eine Liste der registrierten Verzeichnisse geöffnet. Scrollen Sie nach unten, bis Sie dasjenige finden, das dem gerade registrierten Verzeichinis entspricht. Das wird der Name des Verzeichnisses sein, mit /skins am Ende. Geben Sie eine ID ein, die Sinn macht, und klicken Sie auf Add. Nun haben Sie ein leeres Verzeichnis, in dem Sie die Ebenen Ihrer Skin erstellen können.

Fehlersuche in Skins

Ein weiterer Grund, aus dem ich mit Ihnen immer wieder das ZMI statt des Dateisystems benutzt habe, ist der, dass es Feedback bei Fehlern gibt und Sie damit vertraut macht, Objekte in andere Objekte zu platzieren. Noch eine positive Eigenschaft des ZMI ist, dass Änderungen sofort wirksam sind. Wenn Sie ein Objekt ändern und die Ansicht aktualisieren, sehen Sie sofort die Änderungen (vorausgesetzt, Sie haben keinen Cache).

Beim Dateisystem ist das nicht so. Wenn Sie etwas im Dateisystem ändern, wird es in Plone nicht aktualisiert. Der Grund dafür liegt in der Performance. Plone kann nicht wissen, dass Sie diese Änderung vorgenommen haben, d.h., es muss die Kopie dieses Objekts im Zope-Cache aktualisieren. Ohne sich auf Tricksereien mit Benachrichtigungen in Dateisystemen einzulassen ist eine Plone-Site in einem von zwei Zuständen: im Produktions- oder im Debug-Modus. Im Debug-Modus prüft Plone alle Verzeichnisse, findet veränderte Dateien und aktualisiert sich selbst. Das heißt, Sie können etwas ändern, und es wird sofort erscheinen. Im Produktionsmodus werden Ihre Änderungen jedoch erst dann wirksam, wenn Sie die Skin aktualisieren (siehe Kapitel 11) oder Zope neu starten.

Aus offensichtlichen Gründen ist bei der Entwicklung von Skins in Plone der Betrieb im Debug-Modus die richtige Wahl. Kapitel 2 zeigte, wie man die Konfiguration von Plone so ändern kann, dass es im Debug-Modus läuft. Hier eine kurze Wiederholung: Öffnen Sie die Datei zope.conf im Verzeichnis etc Ihrer Installation, und stellen Sie sicher, dass die Direktive debug-mode auf on gesetzt ist.

Dateisystemobjekte verwenden

FSDVs können nur jene Zope-Objekte abbilden, die speziell zu diesem Zweck konfiguriert wurden. Das Zope-Objekt wird auf Grund der Erweiterung des Dateinamens bestimmt. Der Inhalt dieser Datei ist der Inhalt eines Attributs des Objekts, normalerweise der Hauptinhalt, z.B. der binäre Inhalt eines Bildes oder der Textinhalt des Templates.

Um ein Objekt in Ihrem leeren FSDV zu erstellen, gehen Sie einfach ins Verzeichnis skins und beginnen damit, Dateien hinzuzufügen, die den Objekten entsprechen, die Sie erstellen möchten. Wenn die Datei einmal in Zope als Zope-Objekt geladen ist, wird diese Erweiterung abgeschnitten. Beispielsweise wird aus ein_template.pt ein Dateisystem-Page Template mit der ID ein_template. Tabelle 7.4 beschreibt diese Erweiterungen.

Tabelle 7.4. Erweiterungen

Um also ein Bild in Ihrer Verzeichnisansicht zu erhalten, stellen Sie eine .gif- oder .jpeg-Datei hinein. Wenn Sie ein Script(Python)-Objekt wollen, fügen Sie eine Datei mit der Endung .py hinzu.

Metadaten von Dateisystemobjekten setzen

Zusätzliche Informationen zu einem Objekt wie Titel, Sicherheit oder Cache werden in einer separaten Datei gespeichert. Diese Datei hat den gleichen Namen wie die Originaldatei, hat aber am Ende die Erweiterung .metadata. Falls die Originaldatei z.B. logo.jpg lautet, so liegen ihre Metadaten in der Datei logo.jpg.metadata.

Die Metadaten-Datei verwendet das Windows-Format der .ini-Dateien mit key = value-Paaren darin. Dieses Format wurde um Angaben zu Formularen für das Form Controller-Objekt erweitert, was Sie im nächsten Abschnitt sehen werden. Alle Angaben und sogar das Vorhandensein dieser Datei selbst sind optional. Es folgt eine Beispieldatei:

[default]
title = Testobjekt
cache = RAMCache
proxy = Manager
 
[security]
Access contents information = 1:Manager,Anonymous

In dieser Datei können Sie folgende Werte setzen:

• title: Dies ist der Titel, der dem Objekt im ZMI und in Plone zugewiesen wird. Er erscheint auch in den Plone-Templates.
• cache: Dies ist die ID des Cache-Objekts, in dem Sie das Objekt cachen möchten. Plone enthält standardmäßig zwei Cache-Objekte: einen RAM-Cache-Manager und einen HTTP-Cache-Manager. Kapitel 14 beschreibt die Funktion dieser zwei Objekte.
• proxy: Dies ist die Proxy-Rolle, die Sie auf dieses Objekt anwenden möchten. In Kapitel 9 finden Sie weitere Informationen dazu.
• security: Dies ist der Sicherheitsbereich, in dem mehrere Zeilen mit Sicherheitseinstellungen stehen können. Der Schlüssel enthält den Namen der Berechtigung, und die rechte Seite enthält die Akquisitionseinstellungen, gefolgt von den durch Kommata getrennten Rollen. Beispielsweise bedeutet View = 0:Manager, dass nur Benutzer mit den Rollen Mitglied und Manager ein Objekt sehen können und dass Sicherheitseinstellungen für diese Berechtigung nicht akquiriert werden.

Validierer im Dateisystem verwenden

Um einen Validierer im Dateisystem anzugeben, fügen Sie den Validierer in der .metadata-Datei hinzu. Der Validierer-Abschnitt der .metadata-Datei sähe wie folgt aus:

[validators]
validators = validate_script1, validate_script2

Damit werden die zwei Validierungsscripts validate_script1 und validate_script2 ausgeführt, und zwar in dieser Reihenfolge. Ein Validierungsscript wird die Daten untersuchen und Fehler zum Formular-Controller-Status hinzufügen, falls es Probleme gibt.

Die Optionen contextType und button benötigen eine leicht andere Syntax. Validierungen werden im gerade ausgeführten Kontext, z.B. einem Dokument oder Bild, ausgeführt. Sie könnten jeweils verschiedene Validierer für ein Dokument und für ein Bild ausführen. Um z.B. ein anderes Validierungsscript auszuführen, wenn es als Dokument ausgeführt wird, fügen Sie folgende Zeile hinzu:

validators.Document = validate_script2

Den Validierer können Sie abhängig von dem angeklickten Formular-Button variieren, indem Sie den Namen des Buttons im Formular links vom Validierer hinzufügen. Der Button-Name muss mit form.button beginnen. Beispiel:

<input type="submit" name="form.button.button1" value="First" />

Die Metadaten-Datei sähe dann wie folgt aus:

validators..button1 = validate_script1

Das .. steht für ein Leerzeichen beim Kontexttyp. Wenn Sie also wie zuvor möchten, dass dieses Leerzeichen bei button1 in einem Dokument erscheint, dann sähe die Metadaten-Datei wie folgt aus:

validators.Document.button1 = validate_script5

Aktionen im Dateisystem verwenden

Aktionen können Sie, wie Validierer auch, in der .metadata-Datei angeben. Die Syntax für den Abschnitt actions Ihrer Datei sähe wie folgt aus:

[actions]
action.success = traverse_to:string:script1

Wenn im vorherigen Beispiel das Formular abgeschickt wird und die Validierungsscripts einen Erfolg zurückgeben, wird die Aktion traverse to mit dem Argument string:script1 aufgerufen. Dieses Argument ist eigentlich ein Ausdruck. Die Standardaktion bei einem Fehlschlag besteht darin, das aktuelle Formular neu zu laden. Das Formular hat Zugriff auf alle Fehlermeldungen über das state-Objekt in seinen Optionen.

Noch einmal: Sie können eine bestimmte Aktion in einem bestimmten Kontext angeben. Um z.B. eine Aktion bei Erfolg auf einem Dokument anzugeben, können Sie Folgendes tun:

action.success.Documnent = traverse_to:string:document_script

Wieder können Sie die Aktion für den folgenden Button angeben:

<input type="submit" name="form.button.button1" value="Button" />

Dazu fügen Sie Folgendes zur .metadata-Datei hinzu:

action.success..button1 = traverse_to:string:script1

Dieses Beispiel enthält keinen expliziten Kontext, d.h., es ist für alle Kontexttypen gültig.

Portlets und einige Hauptelemente entfernen

Die Site verwendet keine Portlets. Sie wurden entfernt, weil es für diese Site keine relevanten Portlets gibt. Nachrichten erscheinen stattdessen auf der Homepage. Um die Portlets von Ihrer Site zu entfernen, gehen Sie zur Wurzel der Plone-Site und klicken auf den Properties-Reiter. Löschen Sie alle Werte in den Formularfeldern neben left_slots und right_slots.

Auf der Maestro-Site wurden ein paar Elemente entfernt. Manchmal habe ich festgestellt, dass es das Beste ist, was man mit Merkmalen tun kann, die auf einer Site einfach nicht benötigt werden. Es kann schwierig sein, jedes Element einer Benutzerschnittstelle in eine Plone-Site zu zwängen, aber das müssen Sie gar nicht immer tun. Entfernen Sie stattdessen einfach die unnötigen Elemente. In diesem Fall wurden auch einige Elemente entfernt: die Site-Aktionen, der Suchen-Kasten, die Fußzeile sowie das Kolophon.

Um das zu bewerkstelligen, wurden die Templates, die den Code produzieren, angepasst und so verändert, dass sie nichts darstellen. Um z.B. den Suchen-Kasten zu entfernen, klicken Sie im ZMI nacheinander auf portal_skins, plone_templates und global_searchbox. Klicken Sie dann auf den Customize-Button, und ändern Sie das Template wie folgt:

<html
    xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="en" lang="en"
    i18n:domain="plone">
    <body>
 
        <div id="portal-searchbox"
               metal:define-macro="quick_search"
               tal:condition="nothing">
            Nothing to see here.
        </div>
    </body>
</html>

Diese Technik beim Entfernen von Elementen habe ich weiter oben gezeigt. Setzen Sie einfach tal:condition im Makro-Element, um sicherzustellen, dass die Bedingung false ist.

Farben anpassen

Im Objekt base_properties haben Sie die Grundfarben der Site gesetzt. Dieses Objekt wurde angepasst, und die Farben wurden wie folgt geändert (alle weiteren Elemente sind unverändert, sofern nichts anderes vermerkt ist):

linkColor: #776a44
globalBorderColor: #776a44
globalBackgroundColor: #e0d3ad
globalFontColor: #776a44

Die Farbänderung, die ich am stärksten bemerkt habe, ist die von globalBackgroundColor, was die Farbe der persönlichen Leiste von Blau auf Bräunlich ändert. Diese geringfügigen Farbänderungen ändern das Grund-Stylesheet, damit es besser zu den Bildern und dem allgemeinen Look-and-Feel passt.

Stylesheet erstellen

Der größte Teil dieser Site ist das Stylesheet, das in Anhang B vollständig wiedergegeben ist. Hier möchte ich nur einige wesentliche Teile davon hervorheben. Dieses Stylesheet basiert auf ploneCustom.css, das im custom-Ordner angepasst wurde. Dann wurden einige Elemente der Webseite in der neuen Datei ploneCustom.css überschrieben.

Zuerst wird die Hintergrundfarbe für den ganzen Hauptteil auf #343434 gesetzt.

body {
    background: #343434;
}

Zweitens gilt, dass sich der eigentliche Inhalt einer Plone-Seite, der Teil, den Sie bearbeiten können, in einer Klasse namens documentContent befindet. Da die Hintergrundfarbe des Elements documentContent in der Hauptdatei plone.css auf white gesetzt ist, hat der Text einen weißen Hintergrund und bildet in der Mitte des Bildschirms einen weißen Bereich.

Anschließend wird das Bild vom Satelliten und Roboter als großes Bild mittels CSS oben auf der Website platziert. Der Code dafür ist folgender:

#portal-top {
   background: url("http://mars.telascience.org/header.jpg") transparent no-repeat;
   padding: 162px 0 0 0;
   position: relative;
}

Dieser CSS-Code setzt die Parameter für das Element mit der ID portal-top. Wenn Sie sich den HTML-Code einer Plone-Site anschauen, werden Sie oben auf der Seite direkt unter dem body-Element das Element portal-top sehen. Dadurch, dass der Hintergrund für dieses Bild auf den URL des entsprechenden Bildes gesetzt wird, erscheint dieses Bild. Es ist 162 Pixel hoch, weswegen im padding-Wert der obere Wert des #portal-top-Elements auf 162px gesetzt ist. Ohne diese Einstellung werden alle Bilder darunter nach oben geschoben und überschreiben das Bild.

Das Titelbild ist 677 Pixel breit, und Sie werden bemerken, dass der Text auf der Seite sauber unter das Bild passt und nicht links oder rechts darüber hinaussteht. Das erreichen Sie dadurch, dass Sie den Wert des Elements auf 680px setzen. Das HTML-Element visual-portal-wrapper ist direkt unter dem Hauptteil und setzt die Breite für die ganze Seite. Der Code dafür lautet wie folgt:

#visual-portal-wrapper {
   width: 680px;
   margin: 1em auto 0 auto;
}

Dies setzt die Breite aller Seiten auf einen festen Wert, was in Ordnung ist, solange Sie sicherstellen, dass die Breite kleiner als die Standardbreite von 800 Pixel ist. Egal wie groß der Benutzer das Browserfenster macht, der Hauptteil der Seite wird nie breiter als 680 Pixel, was garantiert, dass er passend zum Bild bleibt.

Die anderen offensichtlichen Änderungen sind die Reiter oben auf der Seite, die nun aus Bildern bestehen statt aus den Standardkästen in Plone. Die Reiter werden aus drei Bildern zusammengesetzt: einem Abstandshalter zwischen den Reitern sowie dem linken und dem rechten Teil eines Reiters. Die Kombination dieser drei Bilder ergibt den Effekt eines Reiters. Abbildung 7.15 zeigt diese drei Bilder.

Abbildung 7.15. Kombination dreier Bilder für den Reiter

Denken Sie beim Bearbeiten des CSS daran, dass jeder Reiter nichts weiter als ein Listeneintrag mit einem Link in einem Element mit der ID portal-globalnav ist. Um den Hintergrund-Abstandshalter zwischen den Reitern zu setzen, setzt die Skin zuerst den Hintergrund für das gesamte Element. Auch hier gilt, dass Sie durch das Setzen der Höhe auf 21 Pixel, d.h. auf die gleiche Größe wie beim Bild, garantieren, dass es ausreichend Platz für das Bild gibt. Der Code dafür ist folgender:

#portal-globalnav {
    background: url("http://mars.telascience.org/listspacer.gif") transparent;
    padding: 0;
    height: 21px;
    border: 0;
    margin: 0 0 1px 6px;
    clear: both;
}

Das Startbild verwenden Sie, um das Bild am linken Rand des Reiters zu setzen. Dieses setzen Sie, indem Sie den Wert des li-Elements statt des anchor-Elements wie folgt setzen:

#portal-globalnav li {
   display: block;
   float: left;
   height: 21px;
   background: url("/liststart.gif") transparent no-repeat;
   padding: 0 0 0 33px;
   margin: 0 0.5em 0 0;
}

Und schließlich setzen Sie den rechten Teil des Reiters, indem Sie ein Bild zum Ankerelement hinzufügen. Dazu ändern Sie das Ankerelement innerhalb des Reiters. Der folgende Code zeigt, wo Sie das Hintergrundbild als rechten Teil gesetzt haben:

#portal-globalnav li a {
    display: block;
    float: left;
    height: 21px;
    background: url("/listitem.gif") transparent right top;
    padding: 0 33px 0 0;
    border: 0;
    line-height: 2em;
    color: black;
    font-size: 90%;
    margin: 0;
}

Nun haben Sie die ziemlich standardmäßig aussehenden Plone-Reiter durch tolle Buttons ersetzt.

Eine Splash-Seite erstellen

Diese Site verfügt über ein weiteres Schlüsselmerkmal. Die Eingangsseite der Site ist eine Splash-Seite, die eine hübsche Grafik anzeigt und den Benutzer dazu einlädt, die Site zu betreten. Eine solche Seite können Sie hinzufügen, indem Sie ins ZMI gehen und das Objekt index_html entfernen, das normalerweise vorhanden ist. Erstellen Sie dann eine neue Datei namens index_html. Darin schreiben Sie einen eigenen Code, um die Homepage zu erzeugen, inklusive eines eigenen CSS. Das Hauptelement davon ist ein Bild, das mit folgendem CSS-Code dort platziert wird:

div {
    background: url(/splash.jpg) transparent no-repeat;
    width: 260px;
    height: 335px;
    position: absolute;
    ...
}

Das restliche CSS platziert den Text und die Links innerhalb des Bildes. Diese Seite enthält keinerlei Plone-Elemente, sondern ist statisches HTML.

Schlussfolgerung

Das sieht nach einer einigermaßen komplexen Site aus, wobei der relativ einfache CSS-Code die meiste Arbeit erledigt. Durch die Verwendung von CSS und mit einigen HTML-Kenntnissen haben Sie das Look-and-Feel von Plone verändert, ohne viel über Plone wissen zu müssen. Durch die Platzierung der Bilder mittels CSS haben Sie außerdem wesentliche Eigenschaften beibehalten, die für die Zugänglichkeit der Site sorgen.

Ein großes Dankeschön geht an die NASA und alle beteiligten Leute aus der Plone-Community für ihre Hilfe bei dieser Site und Fallstudie. Dazu gehören besonders, aber nicht ausschließlich, John Graham, Alma Ong, Joe Geldart, Michael Zeltner und Tom Croucher.