images avec url Accès CSS() dans Primefaces

Question

C'est des Primefaces docs:

bouton Icônes

Une icône sur un bouton est affiché en utilisant CSS et attribut d'image.

<p:commandButton value=”With Icon” image=”disk”/> 

<p:commandButton image=”disk”/> 

.disk est une simple classe css avec une propriété de fond :

.disk { background-image: url (« de disk.png ») importante; }

Ma question est: où cet URL() pointe-t-il? En d'autres termes, où dois-je mettre mes images pour que le CSS puisse y accéder?

J'ai essayé/resources,/resources/img, pas de chance. Oui, cela fonctionnait avec une URL absolue (incluant le chemin du contexte), mais cela rend l'application non portable.

Answer 1

Il semble que votre question est plus préoccupé par les aspects côté client de choses, de sorte que même si je ne sais pas Primefaces, voici un coup de couteau à y répondre:

chemins CSS sont liés à l'emplacement où la règle CSS est déclarée. Si cela figure dans votre code HTML (dans un bloc de <style>), disk.png doit être dans le même répertoire que votre fichier.

Si cette règle se trouve dans un fichier CSS distinct, disk.png doit se trouver dans le répertoire où se trouve le fichier CSS.

Si vous créez un répertoire images, le répertoire sera également relatif à partir du CSS.

Espérons que cela aide?

Answer 2

solution simple:

Si vous utilisez JavaServer Faces 2.0 vous avez la chance de mettre toutes les ressources à l'intérieur répertoire spécialement conçu. Vous avez donc besoin d'avoir cette structure de dossier dans l'application Web:

-rootdir 
--resources 
---images 
----disk.png 

Et pour recevoir l'image en arrière-plan css vous devez taper quelque chose comme ceci:

.disk { 
background: url(#{resource['images/disk.png']}) !important; 
} 

Answer 3

J'ai fait face au même problème pour un moment et je Reckon documentation à ce sujet n'est pas claire! Il fonctionne de cette façon pour Primefaces commandButton et similaire (ligneMenu, sous-menu, etc.):

Ce que je fait est:

• télécharger un thème de la bibliothèque thématique sur le site de PrimeFaces (exemple: aristo ou redmond) .
• Décompressez l'archive sur votre application Web ressources dossier, (dans mon cas: root/ressources/css/aristo
• Notez que dans le dossier aristo vous avez: theme.css et/images dossier où une image indexée png contient toutes les icônes utilisées par le thème
• Si vous ouvrez le theme.css vous remarquerez que pour accéder à une icône de l'image indexée vous devez appeler deux classes:. .ui-icon et .ui -icon-theiconyouwant (l'icône .ui récupère l'index png en utilisant #{resource['primefaces.......png']} et .ui-icon-agivenicon délimitent l'icône par sa position X & Y (index) dans l'image png).
• Maintenant, affichez le theme.css dans votre application, en utilisant **<h:outputStyleSheet />**. La meilleure façon de le faire est entre les balises de votre modèle.
• Donc, dans votre xhtml ou jsp, faire **<p:commandButton image="ui-icon ui-icon-someicon"} />**.

• Maintenant, si vous voulez ajouter vos images personnelles à utiliser avec un <p:commandButton, créer des classes dans theme.css:

  .smiley { background-image: url ("# {resource ['images/smiley.png']}")! important;/cela sera ignoré par Internet Explorer s'il n'est pas compatible/ largeur: 16px; hauteur: 16px; }

  Normalement, JSF accède au premier dossier d'images disponible dans votre dossier de ressources.

• Maintenant, faites: <p:commandButton image="smiley" value="Smile" />