it-swarm.com.de

So referenzieren Sie die JSF-Bildressource als CSS-Hintergrundbild-URL

Ich ändere oft die Bilder meiner Buttons mit dem Image-Attribut, aber jemand sagte mir, dass es eine gute Praxis ist, dies mit .css zu tun. Das habe ich gemacht:

1-Die Ressourcen meines Projekts werden wie folgt gespeichert:

enter image description here

2-So habe ich die style.css für den Zugriff auf das Bild erstellt

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

3-So greife ich vom Hauptteil meiner Seite auf die CSS zu (ich bin mir sicher, dass dies korrekt ist, da andere Klassen in demselben Dokument auch in anderen Tags auf dieser Seite funktionieren)

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

4-So erstellen Sie ein Beispiel für eine Befehlsschaltfläche, die die entsprechende css-Klasse verwendet

<h:commandButton styleClass="c2"/>

Ich denke, das Problem liegt in der .css. Ich habe ein paar Kombinationen ausprobiert, aber keine hat funktioniert:

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

Wo ist der Fehler?

aktualisierenIch habe es mit dem folgenden Code geschafft, dass es funktioniert:

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

Beachten Sie den Unterschied, wenn ich css (rechts) und Bildattribute (links) verwende.

enter image description here

Wie könnte ich das lösen, damit das Hold-Bild angezeigt wird?

32
sfrj

Beim Importieren von CSS-Stylesheets mit <h:outputStyleSheet> wird das Stylesheet von FacesServlet über /javax.faces.resource/* importiert und verarbeitet. Schauen Sie sich das generierte <link>-Element an, das auf das betreffende Stylesheet zeigt, und Sie werden es verstehen.

Sie müssen alle url()-Abhängigkeiten ändern, um stattdessen #{resource['library:location']} zu verwenden. JSF ersetzt es dann automatisch mit dem richtigen Pfad. In Anbetracht Ihrer Ordnerstruktur müssen Sie ersetzen 

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

durch

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

Wenn Sie davon ausgehen, dass Ihr Webapp-Kontextname playground lautet und Ihr FacesServlet auf *.xhtml zugeordnet ist, sollte das obige in der zurückgegebenen CSS-Datei wie folgt enden

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

Es sollte beachtet werden, dass die JSF-Implementierung nur während der ersten Anforderung der CSS-Datei ermittelt, ob sie EL-Ausdrücke enthält. Wenn dies nicht der Fall ist, wird aus Effizienzgründen nicht mehr versucht, den Inhalt der CSS-Datei durch EL auszuwerten. Wenn Sie also zum ersten Mal einen EL-Ausdruck zu einer CSS-Datei hinzufügen, müssen Sie die gesamte Anwendung neu starten, damit JSF die CSS-Datei erneut überprüft.

Wenn Sie auf eine Ressource aus einer Komponentenbibliothek wie PrimeFaces verweisen möchten, stellen Sie den Bibliotheksnamen voran und trennen Sie ihn mit :. Z.B. Wenn Sie das Start-Thema von PrimeFaces verwenden, das durch primefaces-start identifiziert wird.

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

Dies wird als generiert

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

Siehe auch:


Nicht verwandt zu dem konkreten Problem, die Art und Weise, wie Sie die library verwenden, ist nicht ganz richtig. Es soll der gemeinsame Bezeichner/Unterordner aller zugehörigen CSS/JS/Bildressourcen sein. Die Schlüsselidee ist, in der Lage zu sein, das gesamte Look'n'-Feel zu ändern, indem einfach library geändert wird (was von EL gemacht werden kann). Sie scheinen sich jedoch auf die Bibliothek default zu verlassen. In diesem Fall könnten Sie library in Ihrem <h:outputStylesheet> und #{resource} einfach weglassen.

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

Siehe auch:

63
BalusC

Da ich damit ein wenig zu kämpfen hatte und BalusC zwar die Frage bereits beantwortet hat, aber vielleicht kommentieren kann, warum das so ist. Ich habe 5 EAR-Projekte, die aus gebündelten WAR- und EJB-Projekten bestehen. Ich habe dann ein eigenständiges WAR-Projekt. Der folgende Code funktionierte perfekt mit allen EARs:

<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">
.
.
.

Wenn sich der Ordner "img" innerhalb des WEB-INF-Ordners befand, aber für das EAR-Projekt, würde er nicht funktionieren, und das Bild würde nicht einmal im Browser geladen, indem die URL manuell eingegeben wurde. Ich verifizierte, dass das resultierende HTML 100% ig war. Das ganze Gerede von "Ressourcen" brachte mich zu dem Gedanken, dass es vielleicht eine "Sicherheit" war. Eine Ausgabe, die zwischen den WAR- und EAR-Bereitstellungen nicht sinnvoll erscheint, also habe ich einen "Ressourcen" -Ordner im Stammverzeichnis der Webanwendung erstellt, z. In Eclipse wäre das übergeordnete Element WebContent. Dann wurde den Ressourcen mit dem Namen "img" ein Unterordner hinzugefügt. Dort wurde mein Bild eingefügt.

Der Code sieht nun so aus:

<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">
.
.
.

Nun wird das Bild angezeigt. Wieder nicht versucht, Baluscs ausführliche Antwort zu hijacken, ich wollte es nur ansprechen, falls jemand auf ein ähnliches Problem stoßen sollte. Wenn jemand möchte, dass ich ein separates Q und A öffne, werde ich das tun!

Ja, das war auf JBoss EAP 7, Servlet API 3.1, Facelets 2.2, Rich Faces 4.5.17 Java 1.8.

Edit @ Antwort von Basil-Bourque Wofür wird WEB-INF in einer Java EE-Webanwendung verwendet scheint ziemlich relevant zu sein 

Aber es ist immer noch etwas verwirrend, wie kann ein WAR innerhalb einer EAR auf diesen Ort zugreifen, aber nicht auf einen eigenständigen WAR?

0
JGlass