jsf - How to reference CSS / JS / image resource in Facelets template? -

now i've tried create page isn't in same directory template. i've got problems page style, because of styles referenced relative path so:

<link rel="stylesheet" href="style_resource_path.css" />

i can use absolute referencing starting /:

<link rel="stylesheet" href="/project_root_path/style_resource_path.css" />

but bring me troubles when i'll moving application different context.

so i'm wondering best way reference css (and js , image) resources in facelets?

introduction

the proper jsf 2.x way using <h:outputstylesheet>, <h:outputscript> , <h:graphicimage> name referring path relative webapp's /resources folder. way don't need worry context path in jsf 1.x. see how include css relative context path in jsf 1.x?

folder structure

drop css/js/image files in /resources folder of public webcontent below (just create 1 if not exist @ same level /web-inf , /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  :

in case of maven, should in /main/webapp/resources , not /main/resources (those java resources (properties/xml/text/config files) must end in runtime classpath, not in webcontent). see maven , jsf webapp structure, put jsf resources.

referencing in facelets

ultimately, resources available below everywhere without need fiddle relative paths:

<h:head>     ...     <h:outputstylesheet name="css/style.css" />     <h:outputscript name="js/script.js" /> </h:head> <h:body>     ...     <h:graphicimage name="images/logo.png" />     ... </h:body>

the name attribute must represent full path relative /resources folder. not need start /. not need library attribute long aren't developing component library primefaces or common module jar file shared multiple webapps.

you can reference <h:outputstylesheet> anywhere, in <ui:define> of template clients without need additional <h:head>. via <h:head> component of master template automatically end in generated <head>.

<ui:define name="...">     <h:outputstylesheet name="css/style.css" />     ... </ui:define>

you can reference <h:outputscript> anywhere, default end in html there declared it. if want end in <head> via <h:head>, add target="head" attribute.

<ui:define name="...">     <h:outputscript name="js/script.js" target="head" />     ... </ui:define>

or, if want end @ end of <body> (right before </body>, e.g. window.onload , $(document).ready() etc isn't necessary) via <h:body>, add target="body" attribute.

<ui:define name="...">     <h:outputscript name="js/script.js" target="body" />     ... </ui:define>

primefaces `headrenderer`

in case you're using primefaces, headrenderer messup default <h:head> script ordering described above. you're forced force order via primefaces-specific <f:facet name="first|middle|last">, may end in messy , "untemplateable" code. may want turn off described in this answer.

packaging in jar

you can package resources in jar file. see structure multiple jsf projects shared code.

referencing in el

you can in el use #{resource} mapping let jsf print resource url /context/javax.faces.resource/folder/file.ext.xhtml?ln=library use e.g. css background image or favicon. requirement css file should served jsf resource, otherwise el expressions won't evaluate. see how reference jsf image resource css background image url.

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

here's @import example.

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

here's favicon example. see add favicon jsf project , reference in <link>.

<link rel="shortcut icon" href="#{resource['images/favicon.ico']}" />

referencing third-party css files

third party css files loaded via <h:outputstylesheet> in turn reference fonts and/or images may need altered use #{resource} expressions described in previous section, otherwise unmappedresourcehandler needs installed in order able serve using jsf. see a.o. bootsfaces page shows in browser without styling , how use font awesome 4.x css file jsf? browser can't find font files.

hiding in /web-inf

if intend hide resources public access moving whole /resources folder /web-inf, can since jsf 2.2 optionally change webcontent-relative path via new web.xml context parameter follows:

<context-param>     <param-name>javax.faces.webapp_resources_directory</param-name>     <param-value>/web-inf/resources</param-value> </context-param>

in older jsf versions not possible.

Search This Blog

Guide