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


i've done tutorial facelets templating.

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.

see also:


-

Comments

Post a Comment

Popular posts from this blog

c# - Binding a comma separated list to a List<int> in asp.net web api -

the default binder in web api expecst http://url.com/webapi/report/?pageids=3243&pageids=2365 to bind public ihttpactionresult report(list<int> pageids){ // exciting webapi code} i wish bind http://url.com/webapi/report/?pageids=3243,2365 as running out of space in url get . i have created class public class commaseparatedmodelbinder : system.web.http.modelbinding.imodelbinder { public bool bindmodel(httpactioncontext actioncontext, modelbindingcontext bindingcontext) { //binding in here } } and registered in webapiconfig.cs var provider = new simplemodelbinderprovider( typeof(list<int>), new commaseparatedmodelbinder()); config.services.insert(typeof(modelbinderprovider), 0, provider); i have altered method signature use model binder so public ihttpactionresult report( [modelbinder] list<int> pageids){ // exciting webapi code} however break point in binder not being
Read more

Delphi 7 and decode UTF-8 base64 -

in delphi 7, have widestring encoded base64(that received web service widestring result) : pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg== when decoded it, result not utf-8: <?xml version="1.0"?> <string>طھط³طھ</string> but when decoded base64decode.org, result true : <?xml version="1.0"?> <string>تست</string> i have use encddecd unit decodestring function. the problem have using decodestring . function, in delphi 7, treats decoded binary data being ansi encoded. , problem text utf-8 encoded. to continue encddecd unit have couple of options. can switch decodestream . instance, code produce utf-8 encoded text file data: {$apptype console} uses classes, encddecd; const data = 'pd94bwwgdmvyc2lvbj0ims4wij8+dqo8c3ryaw5nptiq2lpyqjwvc3ryaw5npg=='; var input: tstringstream; output: tfilestream; begin input := tstringstream.create(data); try output := tfilestream.
Read more

html - Is there any way to exclude a single element from the style? (Bootstrap) -

so, have img logo, overlaid on div styled background-image: url("...") , , both elements inside 2 div classes .to-color , .to-overlay respectively, black transparent overlay. is there way exclude logo style given these 2 classes? here's jsfiddle example: link html , css example: - html - <div class="to-color"> <div class="to-overlay"> <div class="respo"> <div class="row"> <div class="col-xs-4 col-xs-offset-4 text-center"> <img src="http://ansonalex.com/wp-content/uploads/2011/06/google-logo-768x260.png" alt="..." class="img-responsive"> </div> </div> </div> </div> </div> - css - .to-color { background-color: #000; } .to-overlay { opacity : 0.5; } .respo { background-image: url("https://source.unsplash.com/category/objects/1600x900"); background-position: center center;
Read more