In Adobe AEM (ehemals CQ5) ermöglicht die Design-Dialog-Komponente parsys dem Benutzer das Setzen des "Cell Padding". Welcher Wert in das Textfeld eingegeben wird, wird in der Design-CSS angezeigt.
Zum Beispiel:
Da die aktuelle Seite / etc / designs / my-design verwendet, enthält die Seitenausgabe einen Verweis auf den virtuellen Pfad /etc/designs/my-design.css Stylesheet.
Wenn der Benutzer die Ausrichtung der Parsys-Zelle auf 30px konfiguriert hat, enthält die Datei my-design.css Folgendes:
%Vor%Die Zeichenfolge "30px" wird im Attribut "jcr: content / page / par / section" mit dem Namen div.padding gespeichert. Ich kann jedoch nicht herausfinden, wie die Datei parsys.jsp sie in die Datei my-design.css einfügt.
BEARBEITEN:
Um klar zu sein, ist der Aufruf currentDesign.writeCssIncludes(pageContext); in der Foundation-Seite headlibs.jsp der Code, der die Design-CSS-Includes wie folgt einrichtet:
Es ist jedoch nicht klar, wie Sie Ihr eigenes CSS in den Antworttext der Anfrage /etc/designs/my-design.css aufnehmen können.
Die Parsys injizieren die Styles nicht wirklich, aber wenn Sie die Design-Parameter für die Parsys-Komponente ändern, werden sie auf der Designseite gespeichert und wenn diese von einer Designklasse als CSS gerendert wird Die Ausgabe enthält diese Aktualisierungen.
Die Designinformationen werden in /etc/designs/my-design gespeichert, wie Sie bemerkt haben. Diese Komponente für diese Seite unterstützt eine CSS-Wiedergabe der enthaltenen Informationen.
Sie können die Quelle der Wiedergabe mithilfe der CQ-Entwicklungstools verfolgen, die im Produkt enthalten sind ...
Wenn Sie sich Ihre Design-Seite in crx / de oder crx / explorer anschauen, werden Sie feststellen, dass sie folgende Eigenschaft hat: resourceType of wcm/core/components/designer .
Das wird von der folgenden Java-Klasse /libs/wcm/core/components/designer/designer.css.java gerendert. Sie können sich diese Datei auch in crx / de ansehen. Ich bin mir nicht sicher, ob die Lizenz in dieser Datei es mir erlauben würde, hier ein Snippet zu posten, aber Sie sollten es selbst leicht finden können.
Die Klasse übernimmt die Seite Ressource und passt das Objekt an eine com.day.cq.wcm.api.designer.Design -Instanz an.
Wenn Sie den Abhängigkeitsfinder in der Webkonsole betrachten, wird die Klasse Design vom Paket cq-wcm-api bereitgestellt.
%Vor% Dies wird durch das jar bereitgestellt: /libs/wcm/core/install/cq-wcm-api-5.5.0.jar , das mit CQ gebündelt ist.
Blick auf das, was Sie erreichen möchten ... Sie können den Inhalt der Designseite anpassen (normalerweise indem Sie der Komponente, mit der Sie arbeiten, einen Designdialog hinzufügen), indem Sie alle der Komponente zugeordneten Eigenschaften / CSS-Attribute hinzufügen.
Betrachten Sie als Beispiel die Logo-Komponente im Geometrixx-Design ( /etc/designs/geometrixx/jcr:content/contentpage/logo ). Dies hat bereits eine Eigenschaft div img.margin , die in
in der Ausgabe css ( /etc/designs/geometrixx.css?cacheKiller=xyz ).
Durch das Hinzufügen einer Eigenschaft namens div img.border mit einem Wert von 5px solid red zu diesem Knoten wird css als:
Wenn Sie Ihr Beispiel betrachten, sollte Ihr Design-Content-Knoten in /etc/designs/my-design etwa so aussehen:
Oder im Repository-XML-Format wie folgt:
%Vor% Design-Dialoge (die zum Anpassen von Design-Inhalten verwendet werden sollten) werden in gewissem Umfang unter Entwicklung von Komponenten Seite. Sie finden den Design-Dialog (für ein Beispiel) der og Logo-Komponente unter /libs/foundation/components/logo/design_dialog.html
Diese Änderung im CSS erfolgt in den Parsys mit der Klasse IncludeOptions . Wenn Sie sich die parsys.jsp in Foundation-Komponenten ansehen, werden Sie auf die Verwendung dieser Klasse stoßen. Die Methode getCssClassNames () der IncludeOptions-Klasse gibt eine modifizierbare Menge von css-Klassennamen zurück, die zum div-Tag hinzugefügt werden. Wenn also das Abschnittfeld für ein Parsys erstellt wird, wird es in das dynamisch dem CSS der Komponente hinzugefügte Element eingefügt, und dann wird die Ressource in die Seite eingefügt.
Tags und Links cq5