•  08-07-2019
  •  | 
  •  

Question

Quelle est la syntaxe pour ajouter un fichier CSS externe à jsf?

Essayé des deux côtés. 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>
Était-ce utile?

La solution

Je suppose que BalusC a peut-être votre réponse.

Cependant, je voudrais ajouter quelques points supplémentaires:

Supposons que vous exécutiez 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.

MODIFIER : suppression à partir de / de 'href="/${facesContext.ex...'. Si l'application est en cours d'exécution dans le contexte racine, l'URL CSS commence par // et les navigateurs ne peuvent pas trouver le fichier CSS car il est interprété comme http://css/style.css.

Autres conseils

Je n'ai jamais utilisé le premier, mais le second est syntaxiquement valide et devrait fonctionner techniquement. Si cela ne fonctionne pas, l'URL relative dans l'attribut href est tout simplement fausse.

Dans les URL relatives, la barre oblique / au début 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 sur 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'une de l'autre.

Laissez supposer que votre fichier CSS est en réalité situé à http://example.com/context/styles/decoration.css, vous devez ensuite supprimer la barre oblique pour qu'elle soit relative au contexte actuel (celui du page.jsp). : 

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

La méthode JSF 2.0 mise à jour est un peu plus ordonnée. 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 de feuille de style doivent être placés dans resources\css. où les ressources sont au même niveau que WEB-INF.

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 l'a dit, en fait, il est relatif au domaine, donc, dans l'exemple, il est relatif à http://example.com/ et non à http://example.com/context/.

Vous devez donc 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 ceci correctement expliqué! J'ai beaucoup lutté pour découvrir cela.

Mais si vous voulez simplifier et suggérer: 

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

En supposant que le style dir est un frottement de votre page actuelle, alors vous pouvez avoir le deuxième problème:

Vous êtes alors dans la méthode de l'URL relative et, si vous êtes arrivé sur cette page par un renvoi et non par une redirection, votre navigateur peut être dupe et ne pas 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 indiquez à votre navigateur où vous vous trouvez réellement.

J'espère que ça aide.

Et en passant, une autre chose bizarre dans ce merveilleux monde jsf:

pour relier une page à son modèle facelet, le lien relatif racine IS, cette fois-ci, contexte compris: 

<ui:composition template="/layouts/layout.xhtml">

cela relie vraiment à http://example.com/context/layouts/layout.xhtml

et non à http://example.com/layouts/layout.xhtml comme pour <a> ou <link>.

Jean-Marie Galliot

Essayez le code ci-dessous pour importer le fichier css dans votre page jsf. Cela fonctionnera à coup sûr. 

<style media="screen" type="text/css">

  @import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"

</style>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top