wake-up-neo.com

Wie verweise ich auf die CSS/JS/Bildressource in der Facelets-Vorlage?

Ich habe Tutorial über Facelets Templating gemacht. 

Jetzt habe ich versucht, eine Seite zu erstellen, die sich nicht im selben Verzeichnis wie die Vorlage befindet. Ich habe Probleme mit dem Seitenstil, da auf Styles mit relativen Pfaden verwiesen wird:

<link rel="stylesheet" href="style_resource_path.css" />

Ich kann die absolute Referenzierung verwenden, indem ich mit / beginne:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

Dies bringt mir jedoch Probleme, wenn ich die Anwendung in einen anderen Kontext versetze.

Ich frage mich also, wie man CSS-Ressourcen (und JS- und Bildressourcen) in Facelets am besten referenzieren kann.

50
kravemir

Einführung

Die richtige Methode für JSF 2.x ist die Verwendung von <h:outputStylesheet> , <h:outputScript> und <h:graphicImage> mit einem name Verweist auf den Pfad zum Ordner _/resources_ von webapp. Auf diese Weise müssen Sie sich nicht wie in JSF 1.x um den Kontextpfad kümmern. Siehe auch Wie binde ich CSS relativ zum Kontextpfad in JSF 1.x ein?

Ordnerstruktur

Legen Sie die CSS/JS/image-Dateien wie folgt im Ordner _/resources_ des öffentlichen Webinhalts ab (erstellen Sie nur eine, falls diese noch nicht auf derselben Ebene wie _/WEB-INF_ und _/META-INF_ vorhanden ist).

_WebContent
 |-- resources
 |    |-- css
 |    |    |-- other.css
 |    |    `-- style.css
 |    |-- js
 |    |    `-- script.js
 |    `-- images
 |         |-- background.png
 |         |-- favicon.ico
 |         `-- logo.png
 |-- META-INF
 |    `-- MANIFEST.MF
 |-- WEB-INF
 |    |-- faces-config.xml
 |    `-- web.xml
 |-- page.xhtml
 :
_

Im Fall von Maven sollte es in _/main/webapp/resources_ und damit nicht _/main/resources_ sein (diese sind für Java Ressourcen (properties/xml)/text/config-Dateien), die im Laufzeitklassenpfad und nicht im Webinhalt enden müssen. Siehe auch Maven- und JSF-Webanwendungsstruktur, wo genau JSF-Ressourcen abgelegt werden sollen .

Referenzierung in Facelets

Letztendlich sind diese Ressourcen wie folgt überall verfügbar, ohne dass Sie sich mit relativen Pfaden herumschlagen müssen:

_<h:head>
    ...
    <h:outputStylesheet name="css/style.css" />
    <h:outputScript name="js/script.js" />
</h:head>
<h:body>
    ...
    <h:graphicImage name="images/logo.png" />
    ...
</h:body>
_

Das Attribut name muss den vollständigen Pfad zum Ordner _/resources_ darstellen. Es muss nicht mit _/_ beginnen. Sie benötigen das library -Attribut nicht , solange Sie keine Komponentenbibliothek wie PrimeFaces oder eine gemeinsame Modul-JAR-Datei entwickeln von mehreren Webapps geteilt.

Sie können den _<h:outputStylesheet>_ überall referenzieren, auch in _<ui:define>_ von Vorlagenclients, ohne dass ein zusätzlicher _<h:head>_ erforderlich ist. Es wird über die Komponente _<h:head>_ der Master-Vorlage automatisch in _<head>_ generiert.

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

Sie können _<h:outputScript>_ auch überall referenzieren, aber es wird standardmäßig genau dort im HTML-Code landen, wo Sie es deklariert haben. Wenn _<head>_ über _<h:head>_ ausgegeben werden soll, fügen Sie das Attribut _target="head"_ hinzu.

_<ui:define name="...">
    <h:outputScript name="js/script.js" target="head" />
    ...
</ui:define>
_

Oder, wenn Sie möchten, dass es am Ende von _<body>_ (direkt vor _</body>_ endet, so dass z. B. _window.onload_ und $(document).ready() etc nicht erforderlich sind) über _<h:body>_ und dann das Attribut _target="body"_ hinzufügen.

_<ui:define name="...">
    <h:outputScript name="js/script.js" target="body" />
    ...
</ui:define>
_

PrimeFaces HeadRenderer

Wenn Sie PrimeFaces verwenden, wird in HeadRenderer die oben beschriebene Standard-Skriptreihenfolge _<h:head>_ durcheinander gebracht. Grundsätzlich sind Sie gezwungen, die Bestellung über PrimeFaces-spezifischen _<f:facet name="first|middle|last">_ zu erzwingen. Dies kann zu unordentlichem und "unvorstellbarem" Code führen. Möglicherweise möchten Sie es deaktivieren, wie in diese Antwort beschrieben.

Verpackung in JAR

Sie können die Ressourcen sogar in eine JAR-Datei packen. Siehe auch Struktur für mehrere JSF-Projekte mit gemeinsamem Code .

Referenzierung in EL

Sie können in EL die Zuordnung _#{resource}_ verwenden, damit JSF im Grunde eine Ressourcen-URL wie _/context/javax.faces.resource/folder/file.ext.xhtml?ln=library_ druckt, damit Sie sie z. CSS Hintergrundbild oder Favicon. Einzige Voraussetzung ist, dass die CSS-Datei selbst auch als JSF-Ressource bereitgestellt wird, da sonst EL-Ausdrücke nicht ausgewertet werden. Siehe auch JSF-Bildressource als CSS-Hintergrundbild-URL referenzieren .

_.some {
    background-image: url("#{resource['images/background.png']}");
}
_

Hier ist das _@import_ Beispiel.

_@import url("#{resource['css/other.css']}");
_

Hier ist das Favicon-Beispiel. Siehe auch Favicon zum JSF-Projekt hinzufügen und in <link> referenzieren .

_<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />
_

Wenn Sie einen SCSS-Compiler verwenden (z. B. Sass Compiler Plugin für Maven ), beachten Sie, dass der SCSS-Prozessor _#_ möglicherweise als Sonderzeichen interpretiert. In diesem Fall müssten Sie es mit _\_ schließen.

_.some {
    background-image: url("\#{resource['images/background.png']}");
}
_

Verweisen auf CSS-Dateien von Drittanbietern

Über _<h:outputStylesheet>_ geladene CSS-Dateien von Drittanbietern, die wiederum möglicherweise zur Verwendung von _#{resource}_ Ausdrücken geändert werden müssen, andernfalls muss ein UnmappedResourceHandler installiert werden um die mit JSF bedienen zu können. Siehe auch a.o. Die Bootsfaces-Seite wird im Browser ohne Styling angezeigt und Verwendung der CSS-Datei Font Awesome 4.x mit JSF? Der Browser kann keine Schriftdateien finden .

Versteck in/WEB-INF

Wenn Sie beabsichtigen, die Ressourcen vor dem öffentlichen Zugriff zu verbergen, indem Sie den gesamten Ordner _/resources_ in _/WEB-INF_ verschieben, können Sie den webinhaltsbezogenen Pfad seit JSF 2.2 optional über einen neuen Kontextparameter _web.xml_ ändern wie folgt:

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

In älteren JSF-Versionen ist dies nicht möglich.

Siehe auch:

106
BalusC

Angenommen, Sie führen das in den Unterverzeichnissen der Webanwendung aus. Sie können es so versuchen:

 <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

Der '${facesContext.externalContext.requestContextPath}/'-Link hilft Ihnen, sofort zum Stamm des Kontextes zurückzukehren.

Bei relativen URLs zeigt der führende Schrägstrich auf das Domänenstammverzeichnis. Wenn die JSF-Seite beispielsweise von http://example.com/context/page.jsf angefordert wird, verweist die CSS-URL unbedingt auf http://example.com/styles/decoration.css . Um die gültige relative URL zu kennen, müssen Sie die absolute URL sowohl der JSF-Seite als auch der CSS-Datei kennen und die andere aus der anderen extrahieren.

Lassen Sie sich vermuten, dass sich Ihre CSS-Datei tatsächlich unter http://example.com/context/styles/decoration.css befindet. Dann müssen Sie den führenden Schrägstrich entfernen, damit er relativ zum aktuellen Kontext ist der page.jsp):

<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
7

Diese Antworten haben mir geholfen, dasselbe Problem zu beheben. Obwohl mein Problem komplexer war, seit ich SASS und GULP verwendete.

Ich musste mich ändern (bitte beachten Sie das "\" vor dem #. Wahrscheinlich Nebeneffekt von Schluck:

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

 background: $blue url("\#{resource['my_theme/images/background-homepage-h1.png']}");
2
Mircea Stanciu

Der resourcehandlers.UnmappedResourceHandler hilft bei der Zuordnung von JSF-Ressourcen zu einem URL-Muster von /javax.faces.resource/*.

Für mich diese 2 xml-Konfigurationen in faces-config.xml: org.omnifaces.resourcehandler.UnmappedResourceHandler

und in web.xml:

<servlet-mapping>
<servlet-name>facesServlet</servlet-name>
<url-pattern>/javax.faces.resource/*</url-pattern>
<url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

half mit css und bilder. 

0
Behruz Zaripov