Wie referenziere ich CSS / JS / Bild-Ressource in Facelets Vorlage?
Ich getan habe,tutorial über den Facelets-templating.
Nun habe ich versucht, eine Seite zu erstellen, die nicht in demselben Verzeichnis wie die Vorlage. Ich habe Probleme mit Seite Stil, weil von Stilen verwiesen wird, mit dem relativen Pfad in etwa so:
<link rel="stylesheet" href="style_resource_path.css" />
Kann ich verwenden absolute Referenzierung durch, beginnend mit /
:
<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />
Aber das bringt mir Probleme, wenn ich ' ll werden verschieben von Anwendung zu einem anderen Kontext.
So Frage ich mich, was ist der beste Weg, um die Referenz auf die CSS (und JS-und Bild -) Ressourcen in Facelets?
InformationsquelleAutor der Frage kravemir | 2011-12-03
Du musst angemeldet sein, um einen Kommentar abzugeben.
Einführung
Den richtigen JSF-2.x Weg ist, mit
<h:outputStylesheet>
<h:outputScript>
und<h:graphicImage>
mit einemname
er den Pfad relativ zum webapp ist/resources
Ordner. Auf diese Weise müssen Sie nicht sorgen zu machen über den Kontext-Pfad, wie in JSF 1.x. Siehe auch Wie CSS relativ zum Kontext-Pfad in JSF 1.x?Ordner-Struktur
Drop die CSS/JS/Bild-Dateien in
/resources
Ordner des öffentlichen webcontent, wie unten (nur erstellen falls nicht bereits vorhanden auf dem gleichen Niveau wie/WEB-INF
und/META-INF
).Im Falle von Maven ist, sollte es in
/main/webapp/resources
und damit nicht/main/resources
(die sind für Java-Ressourcen (Eigenschaften/xml - /text - /config-Dateien), die muss am Ende in runtime-classpath, nicht in webcontent). Siehe auch Maven und JSF webapp-Struktur, wo Sie genau stellen JSF-Ressourcen.Auf Facelets
Letztlich, diese Ressourcen verfügbar sind, wie unten, überall, ohne die Notwendigkeit, Geige mit relativen Pfaden:
Den
name
Attribut darstellen müssen den vollständigen Pfad relativ zum/resources
Ordner. Sie nicht brauchen, um mit zu beginnen/
. Sie nicht müssen dielibrary
Attribut, solange Sie nicht die Entwicklung einer Komponenten-Bibliothek wie PrimeFaces oder ein gemeinsames Modul-JAR-Datei, die gemeinsam von mehreren webapps.Können Sie die Referenz -
<h:outputStylesheet>
überall, auch in<ui:define>
template-clients, ohne die Notwendigkeit für eine zusätzliche<h:head>
. Es wird über die<h:head>
- Komponente der master-Vorlage automatisch am Ende in die erzeugten<head>
.Können Sie die Referenz -
<h:outputScript>
auch überall, aber es wird standardmäßig am Ende in der HTML-genau da, wo Sie es erklärte. Wenn Sie wollen, dass es am Ende in<head>
über<h:head>
ist, dann fügen Sietarget="head"
Attribut.Oder, wenn Sie wollen, es zu Ende bis Ende
<body>
(rechts vor</body>
so dass z.B.window.onload
und$(document).ready()
etc ist nicht notwendig) über<h:body>
ist, dann fügen Sietarget="body"
Attribut.PrimeFaces
HeadRenderer
Falls Sie mit PrimeFaces, seine
HeadRenderer
wird messup der Standard -<h:head>
Skript-Bestellung, wie oben beschrieben. Sie sind im Grunde gezwungen, zu zwingen, die Bestellung via PrimeFaces-spezifische<f:facet name="first|middle|last">
die bis Ende Mai in chaotisch und "untemplateable" code. Möchten Sie vielleicht deaktivieren Sie es, wie in diese Antwort.Verpackung in GLAS
Können Sie auch Paket die Ressourcen in einer JAR-Datei. Siehe auch Struktur für mehrere JSF-Projekte mit freigegebenen code.
Referenzierung in EL
Können Sie in EL nutzen die
#{resource}
mapping zu lassen, JSF im wesentlichen drucken eine Ressource-URL wie/context/javax.faces.resource/folder/file.ext.xhtml?ln=library
so dass Sie können es verwenden, wie z.B. CSS-hintergrund-Bild oder favicon. Einzige Voraussetzung ist, dass die CSS-Datei selbst sollte auch bedient werden als JSF-Ressource, sonst EL-Ausdrücke werden nicht ausgewertet. Siehe auch Wie auf JSF-Bild-Ressource als CSS-hintergrund-Bild-url.Hier ist die
@import
Beispiel.Hier ist das favicon Beispiel. Siehe auch Hinzufügen favicon JSF-Projekt und verweisen Sie im <link>.
Referenzierung von Drittanbietern CSS-Dateien
Dritter CSS-Dateien geladen, über
<h:outputStylesheet>
was wiederum die Referenz Schriften und/oder Bilder kann geändert werden müssen, verwenden Sie#{resource}
Ausdrücke wie beschrieben im vorherigen Abschnitt, da sonst eineUnmappedResourceHandler
muss installiert werden, um der Lage sein zu dienen, die mit JSF. Siehe auch eine.o. Bootsfaces Seite erscheint im browser ohne styling und Wie zu verwenden Font Awesome 4.x-CSS-Datei mit JSF? Browser nicht finden können font-Dateien.Versteckt sich in /WEB-INF
Wenn Sie beabsichtigen, zu verbergen, die Ressourcen, die vom öffentlichen Zugang durch das verschieben der gesamten
/resources
Ordner in/WEB-INF
dann kann man seit JSF 2.2 ändern Sie Optional die webcontent-relativen Pfad über eine neueweb.xml
Kontext-parameter wie folgt:In älteren JSF-Versionen ist dies nicht möglich.
Siehe auch:
InformationsquelleAutor der Antwort BalusC
Nehme an, dass Sie die in der sub-Verzeichnisse der web-Anwendung. Sie können versuchen, wie diese :
Den
'${facesContext.externalContext.requestContextPath}/'
link wird Ihnen helfen, sofort wieder zurück zu den Wurzel der Kontext.In der relativen URL ' s, die führenden Schrägstrich /Punkte, um die domain-root. Also, wenn die JSF-Seite ist zum Beispiel verlangt http://example.com/context/page.jsfdie CSS-URL wird absolut zeigen Sie auf http://example.com/styles/decoration.css. Zu wissen, die gültige relative URL, die Sie brauchen, zu wissen, die absolute URL der sowohl die JSF-Seite und die CSS-Datei und extrahieren Sie die eine von der anderen.
Lassen vermuten, dass Ihre CSS-Datei tatsächlich befindet sich an http://example.com/context/styles/decoration.cssdann müssen Sie entfernen den führenden Schrägstrich, so dass es relativ zum aktuellen Kontext (der von der Seite.jsp):
InformationsquelleAutor der Antwort Abimaran Kugathasan
Diese Antworten, hat mir geholfen, zu lösen das gleiche Problem. Obwohl mein problem war komplexer, da ich mit SASS und SCHLUCKEN.
Musste ich ändern (bitte beachten Sie die "\" vor dem"#. Wahrscheinlich Nebenwirkung von gulp:
InformationsquelleAutor der Antwort Mircea Stanciu