web-dev-qa-db-fra.com

Comment référencer une ressource image JSF en tant qu'URL d'image de fond CSS

Je modifie souvent les images de mes boutons en utilisant l'attribut image, mais quelqu'un m'a dit que c'était une bonne pratique de le faire en utilisant .css J'ai essayé mais je ne peux pas, qu'est-ce que je fais de travers? C'est ce que j'ai fait:

1-Les ressources de mon projet sont stockées comme ceci:

enter image description here

2-Voici comment j'ai créé le style.css pour accéder à l'image 

.c2 {
    background: url(/resources/images/smiley.jpg);  
}

3-C'est comme ça que j'accède au css à partir du corps de ma page (je suis sûr que c'est correct car d'autres classes du même document fonctionnent dans d'autres balises de cette page) 

<h:outputStylesheet library="css" name="style.css"  />

4-Voici comment créer un exemple de bouton de commande qui utilise la classe css appropriée 

<h:commandButton styleClass="c2"/>

Je pense que le problème est dans le .css, j'ai essayé quelques combinaisons mais aucune n'a fonctionné:

background-image: url(/resources/images/smiley.jpg);    
background: url(resources/images/smiley.jpg);   
background: url(smiley.jpg);    
background: url(../smiley.jpg);

Où est l'erreur?

mettre à jour J'ai réussi à le faire fonctionner avec le code suivant:

.c2 {   
     background: url("#{resource['images:smiley.jpg']}");               
    }

Remarquez la différence quand j'utilise css (à droite) et quand j'utilise un attribut d'image (à gauche)

enter image description here

Comment pourrais-je résoudre ceci afin que l'image de maintien soit affichée?

cssjsfjsf-2resourcesbackground-image
32
sfrj

Lors de l'importation de feuilles de style CSS par <h:outputStyleSheet>, la feuille de style est importée et traitée par les variables FacesServlet à /javax.faces.resource/*. Regardez l'élément <link> généré pointant sur la feuille de style en question et vous comprendrez.

Vous devez modifier toutes les dépendances url() pour utiliser #{resource['library:location']} à la place. JSF le remplacera alors automatiquement avec le bon chemin. Étant donné la structure de votre dossier, vous devez remplacer 

.c2 {
    background: url("/resources/images/smiley.jpg");  
}

par

.c2 {
    background: url("#{resource['images/smiley.jpg']}");  
}

En supposant que votre nom de contexte d'application Web soit playground et que votre FacesServlet soit mappé sur *.xhtml, le fichier ci-dessus devrait se retrouver dans le fichier CSS renvoyé comme suit

.c2 {
    background: url("/playground/javax.faces.resource/images/smiley.jpg.xhtml");
}

Il convient de noter que l’implémentation JSF ne déterminera que lors de la première demande sur le fichier CSS si elle contient des expressions EL. Si ce n'est pas le cas, l'efficacité ne tentera plus d'évaluer le contenu du fichier CSS. Donc, si vous ajoutez une expression EL à un fichier CSS pour la première fois, vous devez redémarrer toute l'application pour que JSF revérifie le fichier CSS.

Si vous souhaitez référencer une ressource à partir d'une bibliothèque de composants telle que PrimeFaces, préfixez le nom de la bibliothèque, séparé par :. Par exemple. lorsque vous utilisez le thème "Démarrer" de PrimeFaces identifié par primefaces-start

.c2 {
    background: url("#{resource['primefaces-start:images/ui-bg_gloss-wave_50_6eac2c_500x100.png']}");  
}

Ce sera généré comme

.c2 {
    background: url("/playground/javax.faces.resource/images/ui-bg_gloss-wave_50_6eac2c_500x100.png.xhtml?ln=primefaces-start");
}

Voir également:

Sans lien avec le problème concret, la façon dont vous utilisez library n’est pas tout à fait juste. Il est censé être l'identificateur/sous-dossier commun de toutes les ressources CSS/JS/image associées. L'idée principale est de pouvoir changer tout le look en changeant simplement library (ce qui peut être fait par EL). Vous semblez toutefois vous appuyer sur la bibliothèque par défaut. Dans ce cas, vous pouvez simplement omettre la library de vos <h:outputStylesheet> et #{resource}.

<h:outputStylesheet name="css/style.css"  />

Voir également:

63
BalusC

Depuis que j'ai un peu lutté avec cela et que BalusC a déjà répondu à la question, mais pourrait peut-être expliquer pourquoi cela se produit. J'ai 5 projets EAR consistant en un ensemble de projets WAR et EJB. J'ai ensuite un projet WAR autonome déployé seul. Le code suivant a fonctionné parfaitement avec tous les EAR:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

Lorsque le dossier "img" se trouvait dans le dossier WEB-INF mais pour le projet EAR, cela ne fonctionnerait pas et le chargement de l'image dans le navigateur ne serait même pas effectué en tapant manuellement l'URL. J'ai vérifié que le résultat HTML était précis à 100%. Alors tout le discours de "ressources" m'a fait penser que c'était peut-être une? Sécurité? problème qui semble ne pas avoir de sens entre les déploiements WAR et EAR, j’ai donc créé un dossier "ressources" à la racine de l’application Web, par exemple. Dans Eclipse, son parent serait WebContent, puis a ajouté un sous-dossier aux ressources appelé "img", y a placé mon image.

Le code ressemble maintenant à ceci:

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Super FIPS Calculator PRO</title>
    <style>              
        .Bimage{background-image:url(#{request.contextPath}/resources/img/phonetoolsBackground.png);}
    </style>
</h:head>
<h:body styleClass="Bimage">
.
.
.

Et maintenant, l'image est affichée. Encore une fois, n'essayant pas de donner une réponse complète à Hijack Balusc, je voulais simplement en parler au cas où quelqu'un rencontrerait un problème similaire. Si quelqu'un veut que j'ouvre un Q et A séparé, je le ferai!

Ah oui, c'était sur JBoss EAP 7, API Servlet 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

Edit @ Basil-Bourque answer Quelle est l'utilisation de WEB-INF dans une application Web Java EE semble assez pertinent 

Mais cela reste un peu déroutant en ce que comment une WAR dans un EAR peut-elle accéder à cet emplacement mais pas à un WAR autonome?

0
JGlass