L'apparence par défaut de Icefaces et comment le personnaliser

Question

J'ai une question sur le style de glace. J'ai une application minimale qui peut utiliser des composants Icefaces, mais quand je les utilise et que je vois la page, les composants ne sont pas stylés (par exemple les boutons ont l'apparence par défaut et les onglets ne regardent pas du tout, pas d'images, rien). Je me demandais pourquoi c'est et ce que je devrais faire pour que les Icefaces par défaut fonctionnent. La prochaine chose que je ne comprends pas est de savoir comment personnaliser l'apparence en changeant certaines classes de style CSS par défaut qui sont automatiquement appliquées aux composants, donc chaque composant que j'utilise obtient le style modifié.

Merci pour vos réponses!

Answer 1

Je vous suggère de prendre l'une des feuilles de style existantes, qui sont inclus dans le package ICEfaces (vérifiez les ressources dossier du ICEfaces-1.8.1-bin.zip téléchargé):

• rimer
• royale xp

Vous pouvez les visualiser dans le ICEfaces showcase

l'inclure au sein de votre fichier * .xhtml via la balise <ice:outputStyle>:

(portlet) 
<ice:outputStyle href="/xmlhttp/css/rime/rime-portlet.css"/> 

(servlet) 
<ice:outputStyle href="./css/demo_template.css"/> 

A partir de là, vous pouvez soit manipuler les feuilles de style ou choisis - que je faveur - Déclarez vos propres feuilles de style après Ones de ICEfaces et écraser les styles nécessaires. En ce qui concerne votre deuxième question: Fondamentalement, chaque composant ICEfaces a sa propre classe de style. Parcourez simplement la vitrine et inspectez les composants avec Firebug. Je n'ai pas trouvé beaucoup de classes, qui ont été réutilisées entre différents composants. Par conséquent, vous devrez personnaliser chaque composant vous-même - ou appliquer votre propre classe de style à tous les composants que vous utilisez via la propriété styleClass.

<ice:panelGrid styleClass="myCommonStyleClass"> 
<ice:inputField styleClass="myCommonStyleClass"> 

Answer 2

There are three predefined ICEfaces style sheets included: 

(1) xp.css 
(2) royale.css 
(3) rime.css 

Developers may also create their own custom style sheet based on a predefined ICEfaces style sheet. If the style class names match those defined in the ICEfaces style sheets, the ICEfaces components will use the specified styles by default, without the need to specify the style class names explicitly on each component. 

(1) Where to find CSS class names ? 

IMPORTANT : The default CSS class names associated with each component are listed in the component's TLD (taglib) description. 

(2) How To use a predefined style : 


<link rel="stylesheet" type="text/css" href="./xmlhttp/css/xp/xp.css" /> 

    OR 


<ice:outputStyle href="./xmlhttp/css/xp/xp.css" rel="stylesheet" type="text/css" /> 

(3) Is there any Advantages of using ICEFaces OutputStyle ? 

The ice:outputStyle component has the following advantages over the HTML link tag: 

- Automatically includes browser-specific variants of the main style sheet in the page to adapt the theme styling to account for differences in each browsers' CSS support. See the TLD (taglib) documentation for the ice:outputStyle component for details. 
- Provides the ability to dynamically change the theme style sheet at runtime via a value binding on the component's `href` attribute. 

(4) What is meant by xmlhttp ? 

The xmlhttp->css->xp path is automatically resolved by ICEfaces and all needed resources are loaded from the ICEfaces.jar 

Hope this helps..!! :)