Quelle est la syntaxe pour ajouter un fichier CSS externe à jsf?CSS externe pour JSF
Essayé les deux façons.N'a pas aidé.
1.
<head>
<style type="text/css">
@import url("/styles/decoration.css");
</style>
</head>
2.
<head>
<link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
Je suppose que BalusC peut avoir votre réponse.
Cependant, je voudrais ajouter quelques points supplémentaires:
Supposons que vous exécutez le dans les sous-répertoires de l'application Web. Comme mon expérience, vous voudrez peut-être essayer ceci: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
Le lien '${facesContext.externalContext.requestContextPath}/' vous aidera à revenir immédiatement à la racine du contexte.
EDIT: Suppression du début / de 'href="/${facesContext.ex...'. Si l'application s'exécute dans le contexte racine, l'URL CSS commence par // et les navigateurs n'ont pas trouvé le CSS car il est interprété comme http://css/style.css.
Je n'ai jamais utilisé le premier, mais le second est syntaxiquement valide et devrait fonctionner sur le plan technique. Si cela ne fonctionne pas, l'URL relative de l'attribut href est tout simplement erronée.
Dans les URL relatives, la barre oblique / pointe vers la racine du domaine. Donc, si la page JSF est par exemple demandée par http://example.com/context/page.jsf, l'URL CSS pointera absolument vers http://example.com/styles/decoration.css. Pour connaître l'URL relative valide, vous devez connaître l'URL absolue de la page JSF et du fichier CSS et extraire l'un de l'autre.
laisse deviner que votre fichier CSS est en fait situé à http://example.com/context/styles/decoration.css, vous devez supprimer la barre oblique de sorte qu'il est par rapport au contexte actuel (l'un des page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
étrange, cela n'a pas aidé, va essayer aussi la méthode proposée ci-dessous et notez bientôt les résultats – sergionni
Dites l'URL absolue de la page JSF et le fichier CSS, alors nous pouvons vous aider à faire le calcul. – BalusC
jsf: c: \ sample \ src \ main \ webapp \ store.xhtml css: c: \ sample \ src \ Main \ webapp \ styles \ decoration.css – sergionni
Je pense que le problème de Sergionni est double. Tout d'abord, il est vrai que le soi-disant parent racine est, comme BalusC dit, en fait domaine relatif, donc, dans l'exemple est relatif à http://example.com/ et non http://example.com/context/.
Donc, vous devez spécifier
<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />
BTW BalusC, félicitations, c'est la première fois que je vois cela explique correctement! J'ai eu beaucoup de mal à le découvrir.
Mais, si vous voulez simplifier et de proposer:
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
en supposant que le style dir est un sibbling de votre page en cours, alors vous pouvez avoir le deuxième problème:
Vous êtes alors en la méthode de l'URL relative et, je vous êtes venu à cette page par un avant et non une redirection, votre navigateur peut être dupe et ne pas être en mesure de suivre le chemin relatif.
Pour résoudre ce deuxième problème, vous devez ajouter ceci:
<head>
<base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />
L'élément de base doit précéder tout lien.
Par la commande de base, vous dites à votre navigateur où vous êtes réellement.
Espérons que ça aide.
Et BTW Une autre chose bizarre dans ce monde wondeful JSF:
pour lien d'une page à son modèle Facelet, la racine lien relatif est, cette fois-ci, y compris selon le contexte:
<ui:composition template="/layouts/layout.xhtml">
ce lien vraiment http://example.com/context/layouts/layout.xhtml
et non à http://example.com/layouts/layout.xhtml comme pour <a> ou <link>.
Jean-Marie Galliot
Juste '
Qu'est-ce que la racine de contexte, quelle est la racine du domaine? –
Essayez le code ci-dessous pour importer dans votre css jsf page.It fonctionnera à coup sûr.
<style media="screen" type="text/css">
@import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"
</style>
La méthode JSF 2.0 mise à jour est un peu plus régulière. Au lieu de:
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>
vous faites maintenant ceci:
<h:outputStylesheet library="css" name="compass.css"/>
et la ressource stylesheet doit être placé dans resources\css. Lorsque les ressources sont au même niveau que le WEB-INF.
Tout en gardant à l'esprit l'utilisation correcte de l'attribut de bibliothèque comme expliqué [ici] (http://stackoverflow.com/q/11988415/840977) – Louise
oui, cela a fonctionné pour moi - sans toute première barre – sergionni