Oracle Fusion Middleware Blog

Deutsche Informationen rund um Oracle Fusion Middleware

ADF Faces Stylesheet rückverfolgen

leave a comment »

Problem:

Wie finde ich die entsprechende Styledefinition einer UI Komponente in einem ADF Faces Skin, um diese wie gewünscht zu gestalten.

Lösungsvariante 1:

Man kennt die ADF Faces UI Komponenten und schaut in deren Dokumentation, um die notwendigen Stylesheet Klassen in einer eigenen Skindefinition anzugeben.

Lösungsvariante 2:

Man verfolgt den im Browser ankommende Stylesheet zurück bis zur Definition im ADF Faces Skin. Aber wie ?

An dieser Stelle sei nochmal erwähnt, dass ein Skin eine auf CSS 3.0 Syntax basierende Stylesheetdefinition ist. Skins benutzen also CSS, um die Darstellung von ADF Faces und Trinidad UI Komponenten zu definieren.

Für Variante 1 ist die im Blogeintrag vom 11.Februar beschriebene Lösung ein gutes Hilfsmittel. Deshalb behandeln wir nun Variante 2. Als Beispiel dazu dient eine ADF Faces Rel. 11 Anwendung, die mit einem Standard ADF Faces Skin („blafplus-rich„) versehen ist.

Beispielanwendung

Bild 1: ADF Beispielanwendung

Wir wollen nun die CSS Definition für bestimmte Oberflächenelemente ermitteln, um sie wunschgemäß anpassen zu können. Schauen wir zunächst auf den im Browser ankommenden HTML Sourceode und suchen den Link zur Stylesheet Definition, die der Browser umsetzt.

<link rel=“stylesheet“ charset=“UTF-8″ type=“text/css“ href=“/HRSystem-ViewController-context-root/adf/styles/cache/blafplus-rich-desktop-f72ien-ltr-gecko-1.9.0.8-cmp.css“>…

Hier erkennen wir, dass dies aber nicht die eigentliche CSS Definition aus dem Skin ist, sondern ein vom ADF Faces Renderer zur Laufzeit generierter Stylesheet. Dabei liest der ADF Faces Renderer die Skindefinition aus  und erstellt eine browserspezifische CSS Datei mit dynamischen, komprimierten Klassennamen. Wie schließen wir aber aus den dynamischen CSS Klassen im Browser auf den originär im Skin definierten Style der betreffenden UI Komponente?

Über die Firefox Community gibt es ein paar nützliche Add-Ons, die wir hier gut gebrauchen können. Es empfehlt sich, die Firebug– und die Web Developer – Erweiterungen runterzuladen und zu installieren, falls nicht schon geschehen.

Nach erfolgreicher Installation der Plugins starten wir nocheinmal die ADF Anwendung, um jetzt beispielsweise die Darstellung eines Tabreiters vom Browser bis zur ursprünglichen Definition im Skin zurückzuverfolgen. Dazu klickt man mit der rechten Maustaste auf den Tabreiter und wählt „Inspect Element“ aus.

css_bild2a

Bild 2: Aufruf Firebug Erweiterung in Firefox

Firebug öffnet sich und stellt im unteren Fenster den HTML Source Code sowie im rechten Fenster die im Browser anliegenden CSS Settings dar.

css_bild3

Bild 3: Ansicht Firebug Erweiterung in Firefox

Bewegt man nun den Mauszeiger im Source Code Fenster über andere Codpassagen, so wird im oberen Darstellungsfenster die betreffende HTML Komponenten markiert.

Eine schöne Möglichkeit, gleich an Ort und Stelle in der laufenden Anwendung verschiedene CSS Attribute auszutesten, bietet die Web Developer Erweiterung. Mit Ctrl + Shift + E gelangt man in den CSS Editor und sieht nocheinmal den geladenen Stylesheet.

css_bild4

Bild 4: Ansicht Web Developer Erweiterung – Stylesheet Editor

Man kann in dieser Liste Attribute von CSS Klassen verändern und gleich die Auswirkungen auf der Seite sehen.

Über Firebug findet man also die gültige CSS Klasse der betreffenden UI Komponente (hier Tabreiter) und über Web Developer kann man diese gezielt verändern. In unserem  Beispiel möchten wir den Text des Tabreiters ShowDetailItem1 rot einfärben. Wir klicken daher im Browserfenster mit der rechten Maustaste auf den Text ShowDetailItem1 und wählen Inspect Element aus. Wir sehen, dass hier die CSS Klasse .xs4 verwendet wird.

css_bild4

Bild 5: Ad-Hoc Änderungen von Stylesheet Attributen im Web Developer

Im CSS Editorfenster links suchen wir nun die CSS Klasse  .xs4. p_AFSelected und deren Attribut [color:#000000], welches wir dann auf [color:#FF0000] ändern. Man sieht sofort, dass sich der Text des Tabreiters rot färbt.

Bleibt nur noch die Frage, wie man von der dynamisch erzeugten CSS Klasse .xs4 im Browser auf die tatsächliche Styledefinition im ADF Faces Skin schließt? Dort werden ja die für die jeweilige UI Komponente festgelegten CSS Klassen definiert, die nicht xs4 oder ähnlich heissen, sondern irgendwie den Komponentennamen enthalten. Man muss zuerst in der web.xml der JSF Anwendung die Kompression der CSS Klassen deaktivieren. Damit werden keine dynamischen Klassennamen vom Renderer generiert, sondern die Klassennamen des Skins verwendet. Man öffnet im JDeveloper im Projekt der JSF unter Web-INF die web.xml und fügt unter Context Initialization Parameters einen neuen Parameter org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION mit dem Wert True hinzu.

css_bild5c

Bild 6: Einschalten der CSS Dekompression in der web.xml

Nun startet man die Anwendung neu und schaut über Firebug auf den Tabreiter. Die Stylesheet Klasse des Tabreitertextes heißt in unserem Beispiel nun .af_PanelTabbed _tab-text-link (Zur Erinnerung: vorher war der CSS Klassenname .xs4)

css_bild6

Bild 7: dekomprimierte Stylesheet Klassenamen

 

 

Auf OTN kann man sich die Skindefinition dieser UI Komponente anschauen und weiß nun, welche Klassen in der CSS Datei des eigenen Skins definiert werden müssen, um ein gewünschtes Layout der Komponente zu erhalten. Man kann aber auch aus aus dem im Browser anliegenden Klassennamen auf die CSS Klasse im Skin schließen, in dem man .af_ mit .af| und dann jedes weitere _ mit :: ersetzt. In gegebenen Beispiel würde man .af_PanelTabbed _tab-text-link mit .af|PanelTabbed ::tab-text-link ersetzen und hätte ohne nachzuschauen den Klassennamen für die eigene Skindefinition.

Wie man eine eigene ADF Faces Skindefinition anlegt,  ist in der ADF Faces Doku beschrieben oder in diversen BLOG Postings zu finden.

<DM>

Written by fmtechteam

09/04/2009 um 07:24

Veröffentlicht in ADF, Detlef Müller, JDeveloper, WebCenter

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s

%d Bloggern gefällt das: