Come fare riferimento a CSS / JS / risorsa immagine nel modello Facelets?

Ho fatto tutorial sui modelli Facelets .

Ora ho provato a creare una pagina che non è nella stessa directory del modello. Ho problemi con lo stile della pagina, perché gli stili sono referenziati con il percorso relativo in questo modo:

 

Posso usare riferimenti assoluti iniziando con / :

  

Ma questo mi porterà problemi quando trasferirò l’applicazione in un contesto diverso.

Quindi mi chiedo quale sia il modo migliore per fare riferimento alle risorse CSS (e JS e image) in Facelets?

    introduzione

    Il modo corretto di JSF 2.x utilizza , e con un name fa riferimento al percorso relativo alla cartella webapp /resources . In questo modo non devi preoccuparti del percorso di contesto come faresti in JSF 1.x. Vedi anche Come includere i CSS relativi al percorso di contesto in JSF 1.x?

    Struttura delle cartelle

    Trascina i file CSS / JS / image nella cartella /resources del webcontent pubblico come di seguito (creane uno solo se non esiste già allo stesso livello di /WEB-INF e /META-INF ).

     WebContent |-- META-INF |-- WEB-INF |-- resources | |-- css | | |-- other.css | | `-- style.css | |-- js | | `-- script.js | `-- images | |-- background.png | |-- favicon.ico | `-- logo.png |-- page.xhtml : 

    Nel caso di Maven, dovrebbe essere in /main/webapp/resources e quindi non /main/resources (quelli sono per le risorse Java (proprietà / xml / text / config files) che devono finire nel runtime classpath, non nel webcontent) . Vedi anche la struttura webapp Maven e JSF, dove inserire esattamente le risorse JSF .

    Riferimento in Facelets

    In definitiva, quelle risorse sono disponibili come di seguito ovunque senza la necessità di giocherellare con percorsi relativi:

      ...     ...  ...  

    L’attributo name deve rappresentare il percorso completo relativo alla cartella /resources . Non è necessario iniziare con / . Non è necessario l’attributo della library se non si sta sviluppando una libreria di componenti come PrimeFaces o un file JAR del modulo comune condiviso da più webapp.

    È ansible fare riferimento a ovunque, anche in dei client del modello senza la necessità di un aggiuntivo. Tramite il componente , il modello principale verrà automaticamente terminato in .

       ...  

    Puoi anche fare riferimento a ovunque, ma per impostazione predefinita verrà nell’HTML esattamente dove l’hai dichiarato. Se vuoi che finisca in tramite , quindi aggiungi target="head" attributo target="head" .

       ...  

    Oppure, se vuoi che finisca alla fine di (prima di , in modo che ad esempio window.onload e $(document).ready() ecc non siano necessari) tramite , quindi aggiungi target="body" attributo target="body" .

       ...  

    PrimeFaces HeadRenderer

    Nel caso in cui si utilizzi PrimeFaces, il relativo HeadRenderer eseguirà l’ordinamento predefinito come descritto sopra. In pratica, sei costretto a forzare l’ordine tramite specifico di PrimeFaces, che può finire in codice disordinato e “non contemplabile”. Potresti voler distriggersrlo come descritto in questa risposta .

    Confezionamento in JAR

    Puoi persino impacchettare le risorse in un file JAR. Vedi anche Struttura per più progetti JSF con codice condiviso .

    Riferimento in EL

    In EL è ansible utilizzare la mapping #{resource} per fare in modo che JSF stampi fondamentalmente un URL di risorsa come /context/javax.faces.resource/folder/file.ext.xhtml?ln=library modo da poterlo utilizzare come ad esempio lo sfondo CSS immagine o favicon. Unico requisito è che il file CSS stesso debba anche essere servito come risorsa JSF, altrimenti le espressioni EL non verranno valutate. Vedi anche Come fare riferimento alla risorsa immagine JSF come URL immagine di sfondo CSS .

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

    Ecco l’esempio di @import .

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

    Ecco l’esempio favicon. Vedi anche Aggiungi favicon al progetto JSF e facci riferimento in .

      

    Riferimento a file CSS di terze parti

    I file CSS di terze parti caricati tramite che a loro volta fanno riferimento a caratteri e / o immagini potrebbero dover essere modificati per utilizzare le espressioni #{resource} come descritto nella sezione precedente, altrimenti è necessario installare UnmappedResourceHandler per poter per servire quelli che usano JSF. Vedi anche ao La pagina di Bootsfaces si presenta nel browser senza alcuno stile e Come usare il file CSS di Font Awesome 4.x con JSF? Il browser non riesce a trovare i file dei font .

    Nascondere in / WEB-INF

    Se si intende hide le risorse dall’accesso pubblico spostando l’intera cartella /resources in /WEB-INF , allora è ansible, dal momento che JSF 2.2 modifica facoltativamente il percorso relativo al webcontent tramite un nuovo parametro di contesto web.xml come segue:

      javax.faces.WEBAPP_RESOURCES_DIRECTORY /WEB-INF/resources  

    Nelle versioni JSF precedenti questo non è ansible.

    Guarda anche:

    • Esercitazione su Java EE 6 – Facelets – Risorse (che distano solo 2 capitoli dal tuo link)
    • Qual è la libreria di risorse JSF e come dovrebbe essere utilizzata?
    • Come sovrascrivo CSS PrimeFaces predefinito con stili personalizzati?

    Supponiamo che tu stia eseguendo il comando nelle sottodirectory dell’applicazione web. Puoi provare in questo modo:

       

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

    Nell’URL relativo, 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 punta assolutamente su 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.

    Supponiamo 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 della pagina. jsp):

      

    Queste risposte mi hanno aiutato a risolvere lo stesso problema. Anche se il mio problema era più complesso da quando usavo SASS e GULP.

    Ho dovuto cambiare (si prega di notare il “\” di fronte al #. Probabilmente effetto collaterale del gulp:

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