•  08-07-2019
  •  | 
  •  

Domanda

Che cos'è la sintassi per aggiungere un file CSS esterno a jsf?

Ho provato in entrambi i modi. Non ho aiutato.

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>
È stato utile?

Soluzione

Suppongo che BalusC possa avere la tua risposta.

Tuttavia, vorrei aggiungere alcuni punti aggiuntivi:

Supponi di essere in esecuzione nelle sottodirectory dell'applicazione web. Come mia esperienza, potresti provare questo: <link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>

Il link '${facesContext.externalContext.requestContextPath}/' ti aiuterà a tornare immediatamente alla radice del contesto.

MODIFICA : rimosso a partire da / da 'href="/${facesContext.ex...'. Se l'applicazione è in esecuzione nel contesto principale, l'URL CSS inizia con // e i browser non sono riusciti a trovare il CSS poiché è interpretato come http://css/style.css.

Altri suggerimenti

Non ho mai usato il primo, ma il secondo è sintatticamente valido e dovrebbe funzionare tecnicamente. Se non funziona, l'URL relativo nell'attributo href è semplicemente sbagliato.

Negli URL relativi, la barra iniziale / punta alla radice del dominio. Pertanto, se la pagina JSF è richiesta ad esempio da http://example.com/context/page.jsf, l'URL CSS punterà assolutamente a http://example.com/styles/decoration.css. Per conoscere l'URL relativo valido, è necessario conoscere l'URL assoluto della pagina JSF e del file CSS ed estrarre l'uno dall'altro.

Supponi che il tuo file CSS si trovi effettivamente in http://example.com/context/styles/decoration.css, quindi devi rimuovere la barra iniziale in modo che sia relativa al contesto corrente (quello del page.jsp) : 

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

Il metodo JSF 2.0 aggiornato è un po 'più ordinato. Invece di: 

<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>

ora fai questo: 

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

e la risorsa del foglio di stile dovrebbe essere collocata in resources\css. Dove le risorse sono allo stesso livello del WEB-INF.

Penso che il problema Sergionni sia duplice.

Innanzitutto, è vero che il cosiddetto parente principale è, come ha detto BalusC, in effetti relativo al dominio, quindi, nell'esempio è relativo a http://example.com/ e non a http://example.com/context/.

Quindi è necessario specificare 

<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />

BTW BalusC, congratulazioni, questa è la prima volta che vedo questo spiegato correttamente! Ho faticato parecchio a scoprirlo.

Ma, se vuoi semplificare e suggerire: 

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

supponendo che lo stile dir sia un gioco da ragazzi della tua pagina corrente, allora puoi avere il secondo problema:

Sei quindi nel relativo metodo URL e, sono arrivato a questa pagina da un forward e non un reindirizzamento, il tuo browser potrebbe essere ingannato e non essere in grado di seguire il relativo percorso.

Per risolvere questo secondo problema, è necessario aggiungere questo: 

<head>
    <base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />

L'elemento base deve precedere qualsiasi collegamento.

Con il comando di base, dici al tuo browser dove sei veramente.

Spero che sia d'aiuto.

E a proposito un'altra cosa bizzarra in questo meraviglioso mondo jsf:

per collegare da una pagina al suo modello facelet, il collegamento relativo radice IS, questa volta, incluso il contesto così: 

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

questo si collega veramente a http://example.com/context/layouts/layout.xhtml

e non http://example.com/layouts/layout.xhtml come per <a> o <link>.

Jean-Marie Galliot

Prova il codice seguente per importare i CSS nella tua pagina jsf. Funzionerà sicuramente. 

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

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

</style>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top