Ressourcen in JSF-Seite verwenden

Bei der Entwicklung von Webseiten mit JavaServer Faces (JSF) ist es ratsam, alle einzubindenden Dateien (Bilder, Stylesheets, Sounds, etc.) über einen sogenannten Ressourcen-Ordner zu verwenden. In einer JEE-Webanwendung kann der Ordner für Ressourcen in der Datei web.xml mit folgender Deklaration festgelegt werden:

<context-param>
  <param-name>javax.faces.WEBAPP_RESOURCES_DIRECTORY</param-name>
  <param-value>/WEB-INF/resources</param-value>
</context-param>

Wird der Ordner für Ressourcen nicht direkt angegeben, existiert standardmäßig trotzdem einer an folgendem Ort: webapp/src/main/resources/META-INF/resources. Die Verwendung des Ressourcen-Ordners in JSF-Seiten hat den Vorteil, dass sich alle darin befindlichen Dateien durch einen ResourceHandler verwalten lassen. Außerdem besteht die Möglichkeit durch Konfiguration des Ressourcen-Ordners, alle Ressourcen auszulagern, etwa in einem Content Delivery Network (CDN).

Verwendet man den standardmäßig vorgegebenen Ressourcen-Ordner, so gibt es viele Wege, um Dateien daraus in einer JSF-Seite anzuzeigen. Das folgende Beispiel zeigt fünf verschiedene Möglichkeiten, um ein Bild einzubinden.

Pfad zum Bild:
webapp/src/main/resources/META-INF/resources/images/nerd.png

index.xhtml

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets">
  <h:head>
    <meta charset="utf-8" />    
    <title>Test</title>
  </h:head>
 
  <h:body>
 
    <!-- #1 Absolute path -->
    <h:graphicImage name="/images/nerd.png" width="456" height="355" alt="Nerd" />
    <!-- #2 Relative path -->
    <h:graphicImage name="images/nerd.png" width="456" height="355" alt="Nerd" />
    <!-- #3 resource (EL) -->
    <img src="#{resource['images:nerd.png']}" width="456" height="355" alt="Nerd" />
    <!-- #4 facesContext (EL) and path -->
    <img src="#{facesContext.externalContext.requestContextPath}/javax.faces.resource/images/nerd.png.xhtml" width="456" height="355" alt="Nerd" />
    <!-- #5 facesContext (EL) and library -->
    <img src="#{facesContext.externalContext.requestContextPath}/javax.faces.resource/nerd.png.xhtml?ln=images" width="456" height="355" alt="Nerd" />
 
  </h:body>
 
</html>

Im Zusammenspiel mit CSS ist folgende Kombination denkbar:

index.xhtml

<h:head>
  <link rel="stylesheet" href="#{facesContext.externalContext.requestContextPath}/javax.faces.resource/css/style.css.xhtml" />
</h:head>

style.css

#teaser {
  background: url('../images/teaser.jpg.xhtml');
}

Empfehlenswerter ist jedoch:

index.xhtml

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

style.css

#teaser {
  background: url('teaser.jpg.xhtml?ln=images');
}

Eine zuverlässigere Möglichkeit, welche JSF Ressourcen-Erkennung und FacesServlet-Mapping berücksichtigt, ist die Verwendung von „resource“ in EL:

style.css

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

Schreibe einen Kommentar Antworten abbrechen