Plone - Erstellen von angepassten Layouts PDF Drucken E-Mail
Geschrieben von: Andreas Mantke   
Mittwoch, den 22. August 2007 um 21:44 Uhr

DIYPloneStyle: Erstellen von angepassten Layouts für Plone

In diesem Tutorial lernen Sie, wie DIYPloneStyle als Basis zum Erstellen von angepassten Layout-Produkten für Plone 2.1 oder Plone 2.5 benutzt werden kann, die zu einer Plone-Seite eine neue Oberflächen-Auswahl hinzufügen und neue Stylesheets und Javaskript-Funktionen benutzen.

Einführung

Einführung in DIYPloneStyle und das Ziel dieses Tuturials.

Seit Version 2.1 benutzt Plone ResourceRegistries, eine Komponente, die Werkzeuge zum Verwalten von Stylesheets und Javaskript-Dateien, die mit Plone-Seiten (Vorlagen) verbunden sind, bereit stellt. Diese Werkzeuge - portal_css and portal_javascripts - erlauben es Ihnen, register CSS und JS-Dateien sozusagen ähnlich zu registrieren, wie Aktionen mit portal_actions (zum Beispiel können Sie sie mit einer Bedingung versehen) registriert werden. Dank ResourceRegistries können wir jetzt das Aussehen von Plone viel sauberer und auf einem viel leistungsfähigeren Weg anpassen.

Einer der gebräuchlichen Wege, um Komponenten einer Plone-Seite anzupassen, ist es, dies über das Zope Management Interface (ZMI) zu erledigen, indem man angepasste Ebenen im Oberflächen-Werkzeug benutzt. Obwohl dies funktioniert, passt diese Herangehensweise nur für kleine Änderungen an Kundenseiten, die von Personen erstellt werden, die keinen Zugang zum Dateisystem haben. Falls dies alles ist, was Sie tun müssen, sind Sie wahrscheinlich zufrieden, wenn Sie Kapitel 7 des Plone 2.0 Buches gelesen haben. Aber wenn Sie darüber nachdenken, eien komplette grafische Umgebung für Plone erstellen wollen, ist es am besten, ein Python-Code-Produkt im Dateisystem zu erstellen.

In diesem Tutorial benutzen wir DIYPloneStyle - ein einfaches Beispielgerüst eines Oberflächen-Produktes für Plone 2.1 - als Basis, um zu erkennen, wie Stylesheets und Javaskript-Registries arbeiten und um damit zu beginnen, ein neues Produkt zu erstellen, das sich als angepasster Stil in jeder Plone-Seite installiert.

DIYPloneStyle basiert auf zwei sich gegenseitig ergänzenden Produkten:

  • Martin Aspeli's MySkin, einem Produktgerüst für Plone, das eine Oberflächenauswahl mit eigenen Ebenen installiert, aber keinen Gebrauch von Resource Registries macht.
  • David Convent's SimplePloneStyle, einem anderen Produktgerüst, das die Resource Registries benutzt, aber keine neue Oberflächenauswahl erstellt.

Diese zwei Produkte sind nicht tot. Beispielsweise können Sie SimplePloneStyle benutzen, um ein neues Projekt zu starten, das einige Stylesheets für alle Plone-Skin-Auswahlen registrieren soll. Sie mögen auch auf der Basis von MySkin das Erstellen eines neues Produkt beginnen wollen, das nicht mehr tun soll, als zu Plone eine Skin-Auswahl mit ein Paar Ebenen hinzuzufügen.

Dieses Tutorial deckt die Benutzung der aktuellen Version von DIYPloneStyle ab, welche aktuell Version 2.1.1 ist.

Installation und Grundbeispiel

Schnelles Lernen anhand des Grundbeispiels, das in DIYPloneStyle enthalten ist.

Installation des Produkts

Zuerst laden Sie die letzte Version von DIYPloneStyle (Dieses Tutorial behandelt Version 2.1.x.) herunter, entpacken Sie und folgen den Installationsanweisungen, die Sie in der Datei README.txt finden (Es ist die klassische Installationsprozedur für ein Plone-Produkt.).

Ihr Portal sollte nun etwa so aussehen:

DIY Plone Style 2.1

Grundbeispiel

Der Code für das Beispiel befindet sich in den Dateien, die sich in den Ordnern befinden, deren Namen im Verzeichnis DIYPloneStyle/skins/ mit diystyle_example beginnen.

Sie werden feststellen, dass sich viele Dateien in diesen Ordnern befinden:

  • Einige Bilder

    Sie werden im Ordner diystyle_example_images aufbewahrt.
    Sie können diesem Ordner diejenigen Bilder hinzufügen, die diejenigen überschreiben, die mit Plone ausgeliefert werden (hauptsächlich Symbole für Aktionen und Inhaltstypen).

    Es ist besser, Sie in in einem seperaten Ordner unterzubringen, um aufgeräumte Ordner-Auflistungen im Werkzeug portal_skins zu haben.

  • Eine angepaßte Datei base_properties.props

    Anhand dieser Datei können Sie lernen, wie Sie das Portal-Logo durch ein anderes ersetzen und wie einfach es ist, die Stileigenschaften des Plone-Portals zu ändern.

    Diese Datei wird nicht von dem Beispiel benutzt, aber sie wird von dem Layout-Gerüst zur Verfügung gestellt, das von dem generator script zu Ihrem Nutzen erstellt wird.

    Anmerkung:
    Anpassen von base_properties.props ist der einfachste Weg, um Stilattribute von Elementen der Plone-Benutzeroberfläche zu verändern, aber es hat seine Widersprüche, wie Sie später in diesem Tutorial noch sehen werden.

  • Ein angepaßtes Stylesheet (diystylesheet.css.dtml)

    Das interessanteste am Stylesheet ist vermutlich, dass sein Name nicht ploneCustom.css.dtml ist (und auch nicht sein muss).

    Sie werden in einem weiteren Kapitel dieses Tutorials lernen, wie Sie Stylesheets mit dem neuen Werkzeug portal_css, eingeführt mit Plone 2.1, registrieren, anstatt hierfür die alte Implementation ploneCustom.css zu benutzen.

    Stylesheets und base_properties.props sind abgelegt in dem Ordner DIYPloneStyle/skins/diystyle_example_styles.

  • Einen Satz leerer Stylesheets

    Ihre Namen sind public.css.dtml, base.css.dtml, generated.css.dtml, and portlets.css.dtml.

    Sie werden benutzt um entsprechende Plone-Stylesheets abzuschalten, indem diese mit leeren CSS-Dateien überschrieben werden (siehe das Kapitel zu Oberflächenebenen / skin layers).

  • Einige Vorlagen

    Wie Alexander Limi darlegte, ist es in Ordnung, Plone-Vorlagen anzupassen, solange dies nur für kleine strukturelle Veränderungen geschieht. Die Vorlagen, die im Beispiel angepaßt worden sind, werden in DIYPloneStyle/skins/diystyle_example_templates aufbewahrt.

Beginn - Der manuelle Weg

Vorbereiten von DIYPloneStyle, um es zum Gerüst für eines neuen visuellen Themas für Plone zu machen.

  1. Deinstallieren des Produktes (mit dem Portal Quick Installer) bevor Sie irgendetwas verändern.
  2. Umbenennen des Produktes mit einem anderen Namen als DIYPloneStyle (1). Dies muss im Dateisystem erfolgen, nicht im ZMI (nicht lachen, dies ist bereits vorgekommen).
  3. Umbenennen von skins/diystyle_base_styles/diystylesheet.css.dtml zu etwas, das besser zu Ihrem Produktnamen passt.
    Dies ist die Datei, in die Sie Ihre eigenen CSS-Regeln einfügen werden.
  4. Umbenennen aller Ordner, deren Neme mit diystyle_base im Verzeichnis skins/ beginnt zu etwas, das besser zu Ihrem Produktnamen passt (2).
  5. In der Datei config.py ändern Sie den Namen für Ihre Oberflächenauswahl, indem Sie in SKINSELECTIONS (3) den Wert hinter "name" entsprechend anpassen. Falls Ihr Produkt nicht mehr als eine Oberflächenauswahl anbietet, können Sie den Schlüssel layers aus diesem Eintrag entfernen (achten Sie darauf, dass SKINSELECTIONS zu den Ordnernamen Ihres Oberflächen-Verzeichnisses passt).(3)
    Ändern Sie DEFAULTSKIN , damit es den Namen Ihre Oberflächenauswahl verwendet.
    In der Deklaration der STYLESHEETS ersetzen Sie diystylesheet.css durch den Namen, den Sie für die Vorlage gewählt haben, den Dateianhang .dtml weglassend.
  6. In Extensions/Install.py bearbeiten Sie die relevanten Zeilen in den Import-Deklarationen (siehe # CHANGE Kommentare).
  7. In tests/testStyleInstallation.py ersetzen Sie jedes Vorkommen von DIYPloneStyle durch den Namen Ihres Produktest (siehe # CHANGE Kommentare).
  8. Bearbeiten von README.txt: geben Sie in der Datei eine andere Beschreibung und entfernen Sie die Absätze zu Gebrauch (usage) sowie Dank (credits) und ersetzen Sie Autorenname und EMail-Adresse.
    Falls Sie planen, Ihre Arbeit zu verteilen, hinterlassen Sie bitte eine Notiz, dass Sie das Produkt auf der Basis von DIYPloneStyle erstellt haben.
  9. Aufräumen von HISTORY.txt in Bezug auf die DIYPloneStyle betreffenden Inhalte.
  10. Entfernen des Basisbeispiels
    • Entfernen Sie alle Dateien, die im Verzeichnis skins/ mit dem Namen diystyle_example beginnen.
    • In config.py entfernen Sie in der Deklaration SKINSELECTIONS die Zeilen, die die DIY Style Example Oberfläche angeben.
  11. Entfernen des Verzeichnisses bin/, da das enthaltene Skript nur mit einer sauberen, unmodifizierten Version von DIYPloneStyle zusammenarbeitet.

Das ist es!
Nun können Sie den Anfangsstatus Ihres visuellen Motivs testen, indem Sie den Zope-Server neu starten und Ihr neues Produkt über Konfiguration > Produkte hinzufügen / entfernen (als Manager in der Plone-Seite) installieren.

Ihre Plone-Seite sollte danach etwa folgendermaßen aussehen:

Und nun haben Sie Spaß mit Ihrem neuen Projekt!

Fehlerbehebung
Dieser Teil des Tutorials ist wahrscheinlich derjenige, der Sie etwas in Schwierigkeiten bringen wird.
Schauen Sie in den Abschnitt Fehlerbehung in diesem Tutorial, falls Sie sich in einer ausweglosen Situation fühlen sollten.

(1) Es ist sicherer, mit einer Kopie des Produkts zu arbeiten, so dass leicht mit der Originalversion abgleichen können, wenn Sie sich in Schwierigkeiten befinden.

(2) Wenn Sie es nicht anders im Modul config.py eingestellt haben, wird jeder Ordner im Verzeichnis skins/ Ihres Produktes als FSDirectoryView mit dem Portal-Skin-Werkzeug registriert. Da FSDirectoryViews einen eindeutigen Namen/IDmust im Skins-Werkzeug haben müssen, ist es ein guter Brauch, den Namen Ihres Produktes in den Ordnernamen einzuschließen, um sicherzustellen, dass es keine Namenskollisionen gibt - insbesondere dann, wenn ein Name benutzt wird, der möglicherweise häufig verwendetet wird

(3) In Versionen vor 1.0.3, wird für das Setzen der Namen der Skin-Auswahl die Variable SKINNAME verwandt.

Beginn - Der automatische Weg

Benutzen des eingebauten Skripts zum schnellen Erzeugen eines Gerüstes.

Sie lernten im ersten Teil dieses Abschnitts, wie Sie manuell einen DIYPloneStyle aufsetzen, um diesen Start klar zu machen, um als Gerüst für Ihr neues Produkt zu dienen.

Es gibt einen sehr viel schnelleren Weg, um ein aufgeräumtes Produkt zu bekommen, das zu einem neuen Stil für Plone werden kann. Für diesen Weg benutzen Sie das mitgelieferte Skript.

In dem Produktverzeichnis von DIYPloneStyle finden Sie ein Verzeichnis bin/ , in dem sich ein Python-Skript mit dem Namen generator.py befindet. Dieses Skript können Sie benutzen, um all die manuellen Veränderungen vorzunehmen, die im vorhergehenden Abschnitt aufgeführt worden sind.

Herunterladen und Entpacken von DIYPloneStyle

  • Platzieren Sie den entpackten OrdnerDIYPloneStyle in das Verzeichnis Products/ Ihre Zope-Instanz.
  • Deinstallieren Sie DIYPloneStyle, falls Sie es bereits installiert haben (Gehen Sie in Plone - als Manager- zu Konfiguration > Produkte hinzufügen / entfernen).

Starten des Skripts

Unter Unix/Linux/OSX

In einer Bash-Shell (vom Terminal) benutzen Sie ein Kommando, das etwa so aussieht wie folgendes:

  /Pfad_zum_Zope_Instanze_Home_Verzeichnis/Products/DIYPloneStyle/bin/generator.py --productname MyOwnPloneSkin

Unter Windows

  • Wählen Sie Starten aus dem Windows-Startmenü und tippen Sie cmd ein. Drücken Sie OK
  • Starten Sie das Skript mit einem Kommando, das etwa folgendermaßen aussieht:
       python c:\Instance_Home_Verzeichnis\Products\DIYPloneStyle\bin\generator.py --productname MyOwnPloneSkin

Auf Unix-ähnlichen Systemen können Sie das Skript von jedem Verzeichnis aus aufrufen.
Unter Windows können Sie das nicht: Ihr aktuelles Arbeitsverzeichnis muss sich beim Aufruf des Skripts außerhalb des Produkts befinden.

Ich habe von Zugriffs-Problemen (Rechte-Problemen) unter Windows gehört, wenn das Skript aus einem Subversion Checkout von DIYPloneStyle benutzt wurde.
Falls Sie mit der letzten SVN-Trunk-Version des Produkts unter Windows arbeiten müssen, nehmen Sie sich die Zeit, alle Verzeichnisse .svn darin zu entfernen, bevor Sie das Skript starten.

Beginn der Erstellung

Sie haben nun ein frisches Plone-Oberflächen-Produkt im Verzeichnis "Products" Ihrer Zope-Instanz.

Alles, was Sie zu tun haben, wenn es in Plone installierbar sein soll, ist es, den Zope-Server neu zu starten.

Hinweis
Falls Sie mehr über die möglichen Argumente des Skripts lernen wollen, können Sie entweder die Ausgabe ansehen, wenn Sie das Skript ohne Argumente (oder mit dem Option --help ) aufrufen, oder den relativ leicht verständlichen Code des Skripts lesen.

Organisation der Oberflächen-Ebenen

Ein bißchen Theorie zum Mechnanismus des Werkzeugs portal_skins.

Um besser zu verstehen, wie das Werkzeug Oberflächenwerkzeug (Skins Tool) und seine Ebenentraversale arbeitet, empfehle ich Ihnen, den Abschnitt über das Benutzen von Ebenen innerhalb einer Oberfläche und das Verwalten von Oberflächen mit dem Werkzeug portal_skins in Kapitel 7 des offiziellen Plone-Buches von Andy McKay. Die Links sind inoffiziell, aber Sie sind die einzigen öffentlichen, von den ich weiß, dass Sie eine HTML-Version des Buches bereit stellen und gleichzeitig auch aktuell sind. Diese Abschnitte behandeln TTW Plone Anpassung. Obwohl es ein guter Weg zum Erlernen des Ebenen-Traversalmechanismus des Skins Werkzeugs ist, wissen wir, dass die Arbeit im ZMI nicht die beste Herangehensweise ist, was das Erstellen einer kompletten grafischen Umgebung für Plone betrifft.

Wenn man Skin-Produkte im Dateisystem erstellt, sind die Konzepte die selben:
Die Installationsfunktion erstellt zuerst eine Skin-Kollektion, die die Ebenen der Skin enthält, auf der sie aufbaut. Danach fügt sie die Produkt spezifischen Ebenen hinzu. Im Dateisystem sind die Produkt spezifischen Ordner diejenigen, die sich im skins/ Verzeichnis des Produktes befinden (*).

Wenn Ihr Produkt zur Anpassung einer Plone-Seite durch das Hinzufügen von ein Paar Stylesheets und dem Austausch der grafischen Benutzerschnittstelle (Grafiken wie das Logo und ein Paar Symbole) erstellt wird, werden Sie in der Praxis nicht mehr als eine Ebene zu Ihrer Skin-Kollektion hinzufügen müssen.(**).

Aber es gibt Situationen, in denen es nützlich ist, verschiedene Ebenen zu haben, hauptsächlich um Skin-Elemente in Kategorien zu organisieren (Grafiken, Anpassungen, Stylesheets etc.).

(*) Jeder Ordner, der im Verzeichnis skins/ Ihres Produkts enthalten ist, wird mit dem Portal Skins-Werkzeug als ein FSDirectoryView registriert und danach zu Ihren Skin-Auswahl-Ebenen hinzugefügt. Ausnahmen sind die Ordner, deren Name mit einemh . oder Gleichheitszeichen, CVS oder {arch} beginnt (Dies ist so in der Funktion Products.DIYPloneStyle.Extensions.utils.getSkinsFolderNames() so vorgeben.).

(**)Falls DIYPloneStyle mehr als eine Skin-Ebene bereitstellt (falls sein Ordner skins/ mehr als einen Unterordner enthält), geschieht dies nur, um den Entfernenteil des Beginnens einfacher zu gestalten.


Arbeiten mit Grundeigenschaften

Bearbeiten von base_properties.props für eine schnelle Anpassung.

Anpassen von base_properties.props ist der einfachste Weg, um die Style-Attribute von Elementen der Plone-Benutzerschnittstelle zu verändern. Aber es hat seine Widersprüche: aufgrund der Weise, wie das Skin-Werkzeug arbeitet, müssen Sie alle Standard-Plone-Basis-Eigenschaften in der Datei haben, auch wenn Sie nur planen, lediglich einen kleinen Teil von ihnen anzupassen. Wenn Sie einige Eigenschaften aus der Datei entfernten, wäre Plone niicht mehr in der Lage, weiterhin auf sie zurückzugreifen.

All dies macht die Ansatz mit den base_properties.props ideal für Wartung, Updates und Anpassung. Das ist einer der Gründe, warum es allmählich in Plone ausläuft (außerdem um das Benutzen von DTML in CSS-Dateien zu vermeiden).
David Convent hat aktuell noch keine Kenntnis davon, wie und wann dies eingeführt wird, so dass Sie nach weiteren Aktualisierungen dieses Abschnitts schauen müssen.

Sie können weitere Informationen zu von Plone vordefinierten Eigenschaften in der Datei CMFPlone/skins/plone_styles/ploneCustom.css finden.

Sie müssen eventuell Ihre eigenen Eigenschaften in Ergänzung zu den von Plone vordefinierten benutzen. Statt neue Eigenschaften zu base_properties.props hinzuzufügen, ist es möglicherweise ein besseres Verfahren, eine neue Datei .props in Ihrer Skin-Ebene zu erstellen und ein Stylesheet zu registrieren, das diese Datei nutztt (statt der base_properties - schauen Sie sich in der originalen DIYPloneStyle/skins/diystyle/renameThisFile.css.dtml den DTML-Code an).

Registrierung und Anpassung von Stylesheets

Bester Gebrauch der Resource Registries.

Registrierung neuer Stylesheets

Bevor die ResourceRegistries in Plone eingebunden wurden, bestand der einzige Weg, die Standard-CSS-Regeln von Plone zu überschreiben, darin, die Dateien base_properties.props und ploneCustom.css. anzupassen. Aus diesem Grund musst die Vorgabe, welche Regeln diejenigen von Plone überschreiben sollten, mittels eines Probierens mit den Traversalebenen im Skins-Werkzeug oder durch das Setzen von uneleganten Zope-Zugangs-Regeln zu erfolgen.
Wie wir im vorhergehenden Abschnnitt gesehen haben, müssen wir noch base_properties.props für die Definition der grafischen Darstellung benutzen. Aber da wir nun Stylesheets mit dem CSS-Werkzeug registrieren können, wird ploneCustom.css nur für die Rückwärtskompatibilität beibehalten.

Eine andere Beschränkung von Plone ohne die ResourceRegistries bestand darin, dass es keine Möglichkeit gab, eine Bedingen einzubauen, ob ein Stylesheet geladen werden sollte oder nicht.

Die Registrierung von Stylesheets erfolgt in DIYPloneStyle in der Datei config.py und dort in der STYLESHEETS -Deklaration. STYLESHEETS ist einTupel von Python-Verzeichnisse, ein Verzeichnis für jedesm mit dem Werkzeug portal_css zu registrierende Stylesheet.

Falls Sie eine Bedingung auf ein Stylesheet setzen müssen, müssen Sie zu seinem Verzeichnis einen Schlüsselausdruck hinzufügen. Sein Wert ist ein TAL-Ausdruck, der in der gleichen Weise arbeitet wie für die Aktionen im Werkzeug portal_actions.

Sie können mehr über die Stylesheet-Attribute (Verzeichnisschlüssel) aus den Kommentaren innerhalb von STYLESHEETS lernen.

Anpassen von existierenden Stylesheets

DIYPloneStyle kann nicht nur für das Registrieren von neuen Stylesheets nützlich sein: Sie können ebenso in der Datei config.py definieren, wie Sie Ressourcen anpassen wollen, die bereits in den Registries registriert sind.

In der STYLESHEETS-Deklaration fügen Sie einfach ein Verzeichnis mit derselben ID (Identity) hinzu, die derjenigen entspricht, die Sie anpassen wollen, und schreiben Sie einen Schlüssel in das Verzeichnis für jede Ressourcen-Eigenschaft, die sie verändern wollen.

Es kann beispielsweise für das Ausschalten von einigen Plone-Standard-Ressourcen bequem sein, um ganz von vorne ohne Style anzufangen oder um spezielle Bedingungen für diese Ressourcen einzuführen, um so verschiedene Styles für öffentliche und angemeldete Betriebsmodi vorzugeben.

Hinweis: Alle Anpassungen werden automatisch zurückgesetzt, wenn das Produkt deinstalliert wird.

Praktisches Beispiel

Ein sehr gebräuchlicher Fall ist die Definition einer Skin für den öffentlichen anonymen Zugriff und das Beibehalten eines Plone-Basis-Styles für den Zugriff von angemeldeten Benutzern.

Ein einfacher Weg, um diese zu erreichen, besteht darin, eine Bedingung auf das/die Produkt spezifischen Stylesheet(s) zu setzen und unter der gleichen Bedingung die Plone-Basis-Ressourcen auszuschalten.

In der Datei config.py Ihres Produktes deklarieren Sie Ihr Stylesheet entsprechend dem folgenden Beispiel (in STYLESHEETS):

STYLESHEETS = (
{'id': 'diystylesheet.css', 'media': 'screen', 'rendering': 'import',
'expression': 'python: member is None'},
{'id': 'base.css', 'expression': 'python: member is not None'},
{'id': 'public.css', 'expression': 'python: member is not None'},
{'id': 'portlets.css', 'expression': 'python: member is not None'},
{'id': 'generated.css', 'expression': 'python: member is not None'},
)

Fehlerbehebung

Einige Lösungsvorschläge falls Sie auf Probleme treffen.

Benutzen und Entwickeln Ihres Produktes

Benutzen Sie gültige Namen für Ihr Produkt
Ein Produkt, dessen Name mit einer Zahl beginnt, ist in Plone nicht installierbar, auch wenn Sie es im ZMI - Bereich Produkte installieren/deinstallieren als in Zope registriertes Produkt sehen.
Leeren Sie alle Caches (Zwischenspeicher) (!!)
Falls die Veränderungen, die Sie an Ihrem Produkt angebracht haben, nicht in geplanten Weise angezeigt werden, oder falls einige Skin-Elemente bestehen bleiben, nachdem Sie das Produkt deinstalliert haben, stellen Sie sicher, dass entweder der Browser oder der Eingangs-Proxycache (Apache, Squid) geleert sind, und laden Sie die aktuelle Seite danach neu.
Im Firefox drücken Sie Shift (Hochstelltaste), während Sie auf die Schaltfläche "Aktuelle Seite neu laden" drücken. Im Internet Explorer benutzen Sie die Tastenkombination "ctrl-f5".
Unterschätzen Sie dieses mögliche Problem nicht, da es zumindest 60% der Probleme abdeckt, auf die Sie im Zusammenhang mit einem Skin-Produkt treffen werden (beruhend auf DIYPloneStyle oder nicht).
Hüten Sie sich vor jeder TTW-Anpassung (Thru The Web Anpassung)
Einige Skin-Elemente Ihrer Produkte mögen über das ZMI angepasst worden sein und durch Ihre Äquivalente in der Custom-Skin-Ebene überschrieben worden sein. Genau dies erzeugt auch eine Menge der möglichen Probleme, die Sie durchmachen können.
Deinstallieren Sie Ihr Produkt, bevor Sie seine Elemente umbenennen.
Falls Sie diesen Schritt vergessen sollten, bevor Sie Stylesheets oder Javaskripts umbenennen, können Sie Konflikte mit den Werkzeugen portal_css und portal_javascripts tools im ZMI beheben.
Falls Sie das Produkt nicht deinstallieren, bevor Sie es selbst oder die Skin-Auswahl umbenennen, nehmen Sie Ihre Änderungen im Dateisystem zurück, deinstallieren das Produkt und benennen die Elemente danach erneut um.
Überprüfen Sie, dass das Produkt in Zope geladen ist.
Im ZMI, gehen Sie zu /Control_Panel/Products/manage_main (in der Browser-Adresszeile hinter dem Seitennamen und evtl. dem Port eingeben, Beispiel für Seite auf Localhost: http://localhost:8080/Control_Panel/Products/manage_main) und überprüfen Sie, dass das Produkt aufgeführt und nicht als defekt gekennzeichnet ist.
Falls es nicht aufgeführt ist, sollten Sie die Installation des Produkts im Dateisystem gegen kontrollieren, um sicherzustellen, dass der Benutzer, der den Zope-Server startet, zumindest Leserechte für das Produkt hat.
Falls es als defekt markiert ist, sollten Sie Ihr Error-Log überprüfenIf und sicherstellen, dass Ihr Pflicht-Pythoncode gültig ist (Dies sollte nur passieren, wenn Sie eine defekte Python-Klassendefinition zu Ihrem Startgerüst des Plone-Style-Produkts hinzufügen.).
Stellen Sie sicher, dass das Produkt in Plone installierbar ist.
Falls Ihr Produkt auf der Seite in Site Setup > Add/Remove Products oder im Quick-Installer (portal_quickinstaller im ZMI) nicht gelistet oder als entfernt markiert ist, bedeutet dies wahrscheinlich, dass Sie das Modul Extensions/Install.py debuggen (überprüfen) müssen.
Benutzen Sie das bereit gestellteTestsystem.
DIYPloneStyle enthält ein Basis-Element-Tests.
Folgen Sie den Links aus dem Kapitel Quellen dieses Tutorials, falls Sie sich für das Erlernen des Plone-Element-Testsystems interessieren.

Benutzen des Generator-Skripts

Überprüfen Sie, dass das Skript den richtigen Python-Interpreter benutzt
Dank an Casper R. Nielsen, der darauf hingewiesen hat, diesen Punkt zu ergänzen.
Auf Unix- oder Systemen von Unix-Derivaten können Sie das Skript direkt durch seinen Aufruf starten unter Weglassen des Python-Kommandos. Falls Sie den Fehler bad interpreter: No such file or directory bekommen, wenn Sie das Skript auf diese Weise aufrufen, liegt dies daran, dass die erste Zeile des Skripts auf eine Datei verweist, die nicht existiert.
Um das Skript dann ohne Fehler ablaufen zu lassen, können sie entweder:
  • prefix the shell command by the python command
    $ python generator.py --productname CustomSkin
    or by the full path of the python interpreter. For instance:
    $ /usr/local/bin/python generator.py --productname CustomSkin
  • Bearbeiten Sie die erste Zeile des Skripts, um es auf Ihren Python-Interpreter zeigen zu lassen.
Überprüfen Sie, dass das Skript ausführbar ist.
Falls Sie den Fehler Permission denied bekommen, wenn Sie das Skript direkt aufrufen (unter Linux/Unix), besteht die große Wahrscheinlichkeit, dass das Ausführungs-Bit aus den Rechten der Skriptdatei entfernt worden ist. Sie können das Skript starten entweder durch Voranstellen des Python-Kommandos (siehe vorhergehenden Absatz) oder durch Verändern der Rechte mit dem Kommando chmod:
      $ chmod 0755 generator.py
Überprüfen Sie , dass Sie die notwendigen Schreibrechte haben
Falls Sie einen Traceback bekommen, der etwa folgender Maßen aussieht,
Traceback (most recent call last):
File
"DIYPloneStyle/bin/generator.py",
line 226, in ?
generateDirectoryCopy(
path, path.replace(DIYPloneStyle,
productname) )
File
"DIYPloneStyle/bin/generator.py", line 182, in
generateDirectoryCopy

os.mkdir(dstDirectory)
OSError: [Errno 13] Permission denied:
/Users/david/plone-instance/Products/CustomStyle/
liegt dies möglicherweise daran, dass Sie nicht die notwendigen Schreibrechte in dem Ordner haben, in dem sich DIYPloneStyle befindet und wo das neue Produkt erstellt wird.

Erhalten Sie weitere Unterstützung

Von der Plone Community
Bevor Sie der Anleitung einen Kommentar hinzufügen, stellen Sie Ihre Frage/Ihr Problem in der plone-users Mailingliste oder versuchen Sie Unterstützung im IRC-Kanal #plone zu bekommenl.
Vom Autor des DIYPloneStyle-Produkts
Wenden Sie sich an den Autor von DIYPloneStyle, indem Sie ihm eine EMail senden (Die EMail-Adresse finden Sie in der Datei README.txt im Produkt).

Quellen

Verwandte Dokumentationen, Zope/Plone Produkte und CSS orientierte Entwickler-Werkzeuge.

Laden Sie die aktuellste Version von DIYPloneStyle hier herunter.

Wichtige Quellen

Die folgenden Links geben sicher die Antwort auf die meisten Fragen, die nach dem Lesen dieses Tutorials unbeantwortet bleiben.

ResourceRegistries
Die Project Beschreibung oder die Datei README.txt des Produkts geben einen guten Überblick über ihre Funktionalitäten.
Um mehr über das Registries' API zu lernen, könne Sie DocFinderTab installieren. Dieses Prodkukt ist auf jeden Fall empfehlenswert sowie Sie mit dem Lernen des Zope/Plone API beginnen.
Customizing Plone - the Plone 2.0 approach by Alex Limi
Ein Überblick über Plone 2.0 Layout-Struktur und -Philosopie sowie darüber, was Sie mit CSS tun können.
(Dieses Dokument kann als gute Demo des Full-Skreen-Modus (Ganzer-Bildschirmmodus) in Opera benutzt werden, der projection CSS Media benutzt, welcher Plone-Seiten-Abschnitte als Folienprojektionen - wie bei einer Präsentation - anzeigt.).

TTW Anpassung

Diese Links können für das bessere Verstehen der Maschinerie des Skins Werkzeugs hilfreich sein sowie die Verdeutlichung, wie die Dinge unter Berücksichtigung derElemente der Plone Benutzerschnittstelle organisiert sind.

Das Plone-Buch von Andy McKay
Kapitel 7, über Customizing the Look and Feel of Plone sollte von jedem gelesen werden, der die Maschinerie des Skins Werkzeugs besser verstehen muss.
Where is what? von Jet Wilda
Eine Quelle A reference on what templates and CSS control the UI elements and where to find them in the ZMI (covers Plone 2.0).
Plone Skin Dump
Ein von der Quinta Group entwickeltes Plone-Produkt, das es erlaubt, Plone-Produkte auf der Basis von einigen im ZMI verfügbaren Skin-Ordnern (z.B. "custom") aus portal_skins zu erstellen. So können Sie leicht Plone-Produkte mit Skins erstellen, die auf Ordnern mit angepaßten Styles und Seitenvorlagen basieren. Plone Skin Dump unterstützt Stylesheets Registration seit Version 0.3.0.

Entwicklung im Dateisystem

Der How-to Bereich von plone.org
Dort sind viele gute Dokumentationen im Bereich User Interface: Styles and styling, CSS.
Speziell dasjenige über Creating a Custom Skin von Ben Calder.
Best Practices for Plone development von Joel Burton
Es gibt Ihnen gute Ratschläge, falls Sie planen, auf im Dateisystem Python-Code basierende Produkte zu entwickeln.

Die folgenden Quellen sehen so aus, als wenn sie nicht zum Thema gehören würden, da sie sich hauptsächlich mit dem Entwickeln von Inhaltstypen beschäftigen, aber sie sind nützlich für das Erlernen, wie man Python-Produkte für Plone erstellt.

MySite von Raphael Ritz
Dieses Tutorial/Produkt für Plone-Neulinge (und andere) behandelt viele Aspekte der Produktentwicklung im Dateisystem.
RichDocument von Martin Aspeli
Obwohl dieses Tutorial/Produkt stärker das Erstellen von neuen Inhaltstypen für Plone behandelt, hat es einen kurzen Abschnitt use of the ResourceRegistries
(der Gebrauch der ResourceRegistries)
Das Plone-Buch von Andy McKay
Dort gibt es ein Kapitel über Writing a Product in Python.

DIYPloneStyle enthält Elementteste.
Auch wenn die meisten der folgenden Referenzen die Zope- und Plone-Element-Testsysteme beschreiben, ist es wirklich sehr einfach, sie an jedes Produkt für Plone anzupassen.

PloneTestCase
PloneTestCase ist eine kleine Ebene auf dem ZopeTestCase Paket. Es wurde entwickelt, um einfach Plone basierte Anwendungen und Produkte zu testen
How to write unit tests for Plone
Dieses Dokument zeigt, wie einfach es ist, Element-Tests zu schreiben, und bescheibt, wie Sie Ihre Umgebung einrichten müssen, um die Tests aufzurufen.
the ZopeTestCase Wiki
Eine umfangreiche Dokumentation über das Zope-Element-Testsystem.

Andere Plone Skins Produkte

Die meisten grafischen Designs für Plone machen aktuell noch keinen Gebrauch von Resource Registries, aber das Anpassen des Code sollte jetzt, nachdem Sie dieses Tutorial gelesen haben, leicht sein. ;-)

Der Produktbereich von plone.org
ist eine zentrale Ressource für Plone-Ergänzungen. Er hat einen Bereich für visual themes, der als Quelle für hilfreiche Beispiele genutzt werden kann, wiet man neue Designs auf eine Plone-Seite anwenden kann.
ploneskins.org
ist eine andere Ablage fürPlone-Skins.

CSS Design

offizielle W3C CSS DoKumentation
Die offizielle Cascading-Style-Sheets-Dokumentation erstellt vom Word Wide Web Consortium.
CSS Zen Garden: The Beauty in CSS Design
Eine Demonstration, was optisch mit einer CSS-basierten Gestaltung erreicht werden kann.
A List Apart
Ein Web-Magazine, das "die Gestaltung, die Entwicklung und Bedeutung von Web-Inhalten mit speziellem Fokus auf die Techniken und Vorteile der Gestaltung mit Web-Standards untersucht.
Web-Seiten von berühmten Buchautoren
Einige Autoren von Büchern über Gestaltung mit CSS wie Eric Meyer, Jeffrey Zeldman, Dan Cederholm und Owen Briggs haben Ihre eigenen Web-Seiten, auf denen sich Dokumentationen, Beispiele und Rezepte finden lassen.

Mozilla/Firefox Werkzeuge und Erweiterungen

Die folgenden Werkzeuge sind Ihre besten Freunde, wenn Sie die CSS-Attribute von Elementen auf Plone-Seiten inspizieren oder herausfinden müssen, welche ID (Identität) oder Klasse Sie in Ihrem Stylesheet überschreiben wollen.

DOM Inspector
Dieses Mozilla-Werkzeug können Sie benutzen, um das aktuelle DOM (Document Object Model) von jedem Web-Dokument zu inspizieren oder zu editieren.
Web Developer
Fügt ein Menü und eine Werkzeugleiste mit verschiedenen Webentwickler-Werkzeugen hinzu.
Aardvark
Diese Erweiterung zeigt auf einer Webseite die Attribute (wie ID [Identität] oder Klassenname) der ausgewählten Elemente an.
EditCSS
Ein Stylesheet-Modifikator in der Seitenleiste.
ColorZilla
Fortgeschrittenes Pipettenwerkzeug, ColorPicker (Farbenwähler), Seitenvergrößerer und andere farbenfrohe Goodies.Es unterstützt Webentwickler und Grafikdesigner mit Funktionen in Bezug auf das Farbmanagement - sowohl Basis- als auch Fortgeschrittenenfunktionen.
Ansicht von formatiertem Source (format source extension)
Zeigt formatierten und farbkodierte Quelltext und optional CSS-Informationen für jedes Element. Sie können genau sehen, welche CSS-Regeln für ein Element Anwendung finden. Die Regeln werden einschließlich des Dateinamens und der Zeilennummer angezeigt. Das oberste Element ist das mit der höchsten Priorität. Sie können Blockelemente (table, tr, td, div, span,...) ein- und ausklappen sowie hervorheben. Eine wirklich tolle Funktion: wählen Sie ein interessierendes Blockebenenelement direkt in der Seite aus und schauen Sie seinen Quelltext an! Um Ihnen schnell bei der Analyse des Quellcodes zu helfen, können Sie die Anzeigeänderung direkt aus dem Sourcecode ansehen und Kommentare zu den geklappten Blockelementen hinzufügen. Die Codeansicht basiert auf dem gerenderten Dokument, so dass Sie damit dynamisch (mit Javaskript) erzeugte und modifizierte Html-Elemente ansehen! Dies funktioniert auch mit Frames und ausgewähltem Text..
View Source Chart
Erzeugt ein anschauliches Bild des gerenderten Quellcodes einer Webseite.
Zeigt dynamisch erzeugtes und statisches HTML zusammen an.
Entfernt Javaskriptcode, zeigt die Ausgabe vonJavaskript an.
Hervorragend als visuelles Hilfsmittel in Lernumgebungen.

Dies ist eine freie Übersetzung des Tutorials von David Convent, das er auf Plone.org veröffentlicht hat. Copyright für die Übersetzung Andreas Mantke

Die Übersetzung ist in einer ersten Fassung erstellt. Kommentare sind willkommen (an den Übersetzer maandreas at gmx.de)

Valid XHTML 1.0 Transitional

Zuletzt aktualisiert am Freitag, den 28. Dezember 2007 um 23:08 Uhr