10/01/2010

Styling von ice:menuItem

Problem:

ICEFaces erlaubt das erstellen von <ice:menuItem> EInträgen entweder durch Nutzen eines ActionListeners oder eines Links. Je nach dem, welche Version genommen wird, wird entweder die css Klasse iceLink oder iceCmdLnk genommen. Das kann dazu führen, daß die Einträge innerhalb eines< ice:menuBar> Eintrags unterschiedlich aussehen.

Weiteres Problem: Es lässt sich kein Style direkt an das <a href ... welches gerendert wird, anhängen. direkt iceCmdLnk zu nutzen, bringt auch nichts, da iceLink die Werte überschreibt.

Einzige Lösung: Eigene leere CSS - Klasse, deren untergestellt ein spezieller Eintrag nur für a - Elemente unterhalb der neuen Klasse:


.myMenuItem{ }


.myMenuItem a{
    //CSS Werte ...
}


Diese neue eigene Klasse lässt sich nun dem <ice:menuItem> verpassen.



<ice:menuItem value="value" styleClass="myMenuItem
link="http://etc"
id="myId"/ >


Der zweite Schritt besteht nun darin, auch den Style anzuwenden, der bei Hover funktioniert.
Hierzu muss zuerst der Style applied werden, der die Box um den Wert herum stylt:



.myMenuItem a:hover {}

Danach wird der Style angewandt, der den Text innerhalb der Box stylt:


myMenuItem a
:hover span {}



Genau so, und nicht anders wird dafür Sorge getragen, daß andere menuItems nicht unabsichtlich mitgestylt werden.