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









up vote
48
down vote

favorite
41












I've done tutorial about Facelets templating.



Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:



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


I can use absolute referencing by starting with /:



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


But this will bring me troubles when I'll be moving application to a different context.



So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?










share|improve this question



























    up vote
    48
    down vote

    favorite
    41












    I've done tutorial about Facelets templating.



    Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:



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


    I can use absolute referencing by starting with /:



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


    But this will bring me troubles when I'll be moving application to a different context.



    So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?










    share|improve this question

























      up vote
      48
      down vote

      favorite
      41









      up vote
      48
      down vote

      favorite
      41






      41





      I've done tutorial about Facelets templating.



      Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:



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


      I can use absolute referencing by starting with /:



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


      But this will bring me troubles when I'll be moving application to a different context.



      So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?










      share|improve this question















      I've done tutorial about Facelets templating.



      Now I've tried to create a page that isn't in same directory as the template. I've got problems with page style, because of styles are referenced with relative path like so:



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


      I can use absolute referencing by starting with /:



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


      But this will bring me troubles when I'll be moving application to a different context.



      So I'm wondering what is best way to reference CSS (and JS and image) resources in Facelets?







      jsf resources jsf-2 facelets templating






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited May 29 '15 at 5:57









      BalusC

      836k29431003184




      836k29431003184










      asked Dec 3 '11 at 11:47









      kravemir

      4,966134582




      4,966134582






















          3 Answers
          3






          active

          oldest

          votes

















          up vote
          98
          down vote



          accepted










          Introduction



          The proper JSF 2.x way is using <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> with a name referring the path relative to webapp's /resources folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?



          Folder structure



          Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /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, it should be in /main/webapp/resources and thus not /main/resources (those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.



          Referencing in Facelets



          Ultimately, those resources are available as below everywhere without the need to fiddle with 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 the full path relative to the /resources folder. It does not need to start with /. You do not need the library attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.



          You can reference the <h:outputStylesheet> anywhere, also in <ui:define> of template clients without the need for an additional <h:head>. It will via the <h:head> component of master template automatically end up in generated <head>.



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


          You can reference <h:outputScript> also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head> via <h:head>, then add target="head" attribute.



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


          Or, if you want it to end up at the end of <body> (right before </body>, so that e.g. window.onload and $(document).ready() etc isn't necessary) via <h:body>, then 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, its HeadRenderer will messup the default <h:head> script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.



          Packaging in JAR



          You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.



          Referencing in EL



          You can in EL use the #resource mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.



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



          Here's the @import example.



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


          Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.



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


          Referencing third-party CSS files



          Third party CSS files loaded via <h:outputStylesheet> which in turn reference fonts and/or images may need to be altered to use #resource expressions as described in previous section, otherwise an UnmappedResourceHandler needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.



          Hiding in /WEB-INF



          If you intend to hide the resources from public access by moving the whole /resources folder into /WEB-INF, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml context parameter as 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 this is not possible.



          See also:




          • Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)

          • What is the JSF resource library for and how should it be used?

          • How do I override default PrimeFaces CSS with custom styles?





          share|improve this answer






















          • I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
            – mrswadge
            Jan 21 '16 at 18:25











          • @mrswadge: stackoverflow.com/q/30130657
            – BalusC
            Jan 21 '16 at 22:05










          • Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
            – mrswadge
            Jan 22 '16 at 11:19











          • What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
            – YoYo
            Feb 25 '17 at 22:13










          • Thanks useful documentation
            – Vision Mkhabela
            Sep 12 '17 at 16:14

















          up vote
          7
          down vote













          Suppose that you are running the in the sub directories of the web application. You may try like this :



           <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>


          The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.



          In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.



          Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):



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





          share|improve this answer


















          • 1




            Thanks. It's what i'm searching for.
            – kravemir
            Dec 3 '11 at 11:58






          • 6




            This is not the proper Facelets way though. This is more the JSP way.
            – BalusC
            Dec 3 '11 at 15:38


















          up vote
          2
          down vote













          These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.



          I had to change (please note the "" in front of the #. Probably side effect from gulp:



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

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





          share|improve this answer




















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f8367421%2fhow-to-reference-css-js-image-resource-in-facelets-template%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            3 Answers
            3






            active

            oldest

            votes








            3 Answers
            3






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes








            up vote
            98
            down vote



            accepted










            Introduction



            The proper JSF 2.x way is using <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> with a name referring the path relative to webapp's /resources folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?



            Folder structure



            Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /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, it should be in /main/webapp/resources and thus not /main/resources (those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.



            Referencing in Facelets



            Ultimately, those resources are available as below everywhere without the need to fiddle with 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 the full path relative to the /resources folder. It does not need to start with /. You do not need the library attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.



            You can reference the <h:outputStylesheet> anywhere, also in <ui:define> of template clients without the need for an additional <h:head>. It will via the <h:head> component of master template automatically end up in generated <head>.



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


            You can reference <h:outputScript> also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head> via <h:head>, then add target="head" attribute.



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


            Or, if you want it to end up at the end of <body> (right before </body>, so that e.g. window.onload and $(document).ready() etc isn't necessary) via <h:body>, then 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, its HeadRenderer will messup the default <h:head> script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.



            Packaging in JAR



            You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.



            Referencing in EL



            You can in EL use the #resource mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.



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



            Here's the @import example.



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


            Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.



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


            Referencing third-party CSS files



            Third party CSS files loaded via <h:outputStylesheet> which in turn reference fonts and/or images may need to be altered to use #resource expressions as described in previous section, otherwise an UnmappedResourceHandler needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.



            Hiding in /WEB-INF



            If you intend to hide the resources from public access by moving the whole /resources folder into /WEB-INF, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml context parameter as 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 this is not possible.



            See also:




            • Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)

            • What is the JSF resource library for and how should it be used?

            • How do I override default PrimeFaces CSS with custom styles?





            share|improve this answer






















            • I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
              – mrswadge
              Jan 21 '16 at 18:25











            • @mrswadge: stackoverflow.com/q/30130657
              – BalusC
              Jan 21 '16 at 22:05










            • Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
              – mrswadge
              Jan 22 '16 at 11:19











            • What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
              – YoYo
              Feb 25 '17 at 22:13










            • Thanks useful documentation
              – Vision Mkhabela
              Sep 12 '17 at 16:14














            up vote
            98
            down vote



            accepted










            Introduction



            The proper JSF 2.x way is using <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> with a name referring the path relative to webapp's /resources folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?



            Folder structure



            Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /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, it should be in /main/webapp/resources and thus not /main/resources (those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.



            Referencing in Facelets



            Ultimately, those resources are available as below everywhere without the need to fiddle with 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 the full path relative to the /resources folder. It does not need to start with /. You do not need the library attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.



            You can reference the <h:outputStylesheet> anywhere, also in <ui:define> of template clients without the need for an additional <h:head>. It will via the <h:head> component of master template automatically end up in generated <head>.



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


            You can reference <h:outputScript> also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head> via <h:head>, then add target="head" attribute.



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


            Or, if you want it to end up at the end of <body> (right before </body>, so that e.g. window.onload and $(document).ready() etc isn't necessary) via <h:body>, then 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, its HeadRenderer will messup the default <h:head> script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.



            Packaging in JAR



            You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.



            Referencing in EL



            You can in EL use the #resource mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.



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



            Here's the @import example.



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


            Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.



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


            Referencing third-party CSS files



            Third party CSS files loaded via <h:outputStylesheet> which in turn reference fonts and/or images may need to be altered to use #resource expressions as described in previous section, otherwise an UnmappedResourceHandler needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.



            Hiding in /WEB-INF



            If you intend to hide the resources from public access by moving the whole /resources folder into /WEB-INF, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml context parameter as 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 this is not possible.



            See also:




            • Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)

            • What is the JSF resource library for and how should it be used?

            • How do I override default PrimeFaces CSS with custom styles?





            share|improve this answer






















            • I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
              – mrswadge
              Jan 21 '16 at 18:25











            • @mrswadge: stackoverflow.com/q/30130657
              – BalusC
              Jan 21 '16 at 22:05










            • Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
              – mrswadge
              Jan 22 '16 at 11:19











            • What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
              – YoYo
              Feb 25 '17 at 22:13










            • Thanks useful documentation
              – Vision Mkhabela
              Sep 12 '17 at 16:14












            up vote
            98
            down vote



            accepted







            up vote
            98
            down vote



            accepted






            Introduction



            The proper JSF 2.x way is using <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> with a name referring the path relative to webapp's /resources folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?



            Folder structure



            Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /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, it should be in /main/webapp/resources and thus not /main/resources (those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.



            Referencing in Facelets



            Ultimately, those resources are available as below everywhere without the need to fiddle with 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 the full path relative to the /resources folder. It does not need to start with /. You do not need the library attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.



            You can reference the <h:outputStylesheet> anywhere, also in <ui:define> of template clients without the need for an additional <h:head>. It will via the <h:head> component of master template automatically end up in generated <head>.



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


            You can reference <h:outputScript> also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head> via <h:head>, then add target="head" attribute.



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


            Or, if you want it to end up at the end of <body> (right before </body>, so that e.g. window.onload and $(document).ready() etc isn't necessary) via <h:body>, then 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, its HeadRenderer will messup the default <h:head> script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.



            Packaging in JAR



            You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.



            Referencing in EL



            You can in EL use the #resource mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.



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



            Here's the @import example.



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


            Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.



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


            Referencing third-party CSS files



            Third party CSS files loaded via <h:outputStylesheet> which in turn reference fonts and/or images may need to be altered to use #resource expressions as described in previous section, otherwise an UnmappedResourceHandler needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.



            Hiding in /WEB-INF



            If you intend to hide the resources from public access by moving the whole /resources folder into /WEB-INF, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml context parameter as 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 this is not possible.



            See also:




            • Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)

            • What is the JSF resource library for and how should it be used?

            • How do I override default PrimeFaces CSS with custom styles?





            share|improve this answer














            Introduction



            The proper JSF 2.x way is using <h:outputStylesheet>, <h:outputScript> and <h:graphicImage> with a name referring the path relative to webapp's /resources folder. This way you don't need to worry about the context path as you would do in JSF 1.x. See also How to include CSS relative to context path in JSF 1.x?



            Folder structure



            Drop the CSS/JS/image files in /resources folder of the public webcontent as below (just create one if not already exist at the same level as /WEB-INF and /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, it should be in /main/webapp/resources and thus not /main/resources (those are for Java resources (properties/xml/text/config files) which must end up in runtime classpath, not in webcontent). See also Maven and JSF webapp structure, where exactly to put JSF resources.



            Referencing in Facelets



            Ultimately, those resources are available as below everywhere without the need to fiddle with 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 the full path relative to the /resources folder. It does not need to start with /. You do not need the library attribute as long as you aren't developing a component library like PrimeFaces or a common module JAR file which is shared by multiple webapps.



            You can reference the <h:outputStylesheet> anywhere, also in <ui:define> of template clients without the need for an additional <h:head>. It will via the <h:head> component of master template automatically end up in generated <head>.



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


            You can reference <h:outputScript> also anywhere, but it will by default end up in the HTML exactly there where you declared it. If you want it to end up in <head> via <h:head>, then add target="head" attribute.



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


            Or, if you want it to end up at the end of <body> (right before </body>, so that e.g. window.onload and $(document).ready() etc isn't necessary) via <h:body>, then 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, its HeadRenderer will messup the default <h:head> script ordering as described above. You're basically forced to force the order via PrimeFaces-specific <f:facet name="first|middle|last">, which may end up in messy and "untemplateable" code. You may want to turn off it as described in this answer.



            Packaging in JAR



            You can even package the resources in a JAR file. See also Structure for multiple JSF projects with shared code.



            Referencing in EL



            You can in EL use the #resource mapping to let JSF basically print a resource URL like /context/javax.faces.resource/folder/file.ext.xhtml?ln=library so that you could use it as e.g. CSS background image or favicon. Only requirement is that the CSS file itself should also be served as a JSF resource, otherwise EL expressions won't evaluate. See also How to reference JSF image resource as CSS background image url.



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



            Here's the @import example.



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


            Here's the favicon example. See also Add favicon to JSF project and reference it in <link>.



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


            Referencing third-party CSS files



            Third party CSS files loaded via <h:outputStylesheet> which in turn reference fonts and/or images may need to be altered to use #resource expressions as described in previous section, otherwise an UnmappedResourceHandler needs to be installed in order to be able to serve those using JSF. See also a.o. Bootsfaces page shows up in browser without any styling and How to use Font Awesome 4.x CSS file with JSF? Browser can't find font files.



            Hiding in /WEB-INF



            If you intend to hide the resources from public access by moving the whole /resources folder into /WEB-INF, then you can since JSF 2.2 optionally change the webcontent-relative path via a new web.xml context parameter as 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 this is not possible.



            See also:




            • Java EE 6 tutorial - Facelets - Resources (which is only 2 chapters away from your link)

            • What is the JSF resource library for and how should it be used?

            • How do I override default PrimeFaces CSS with custom styles?






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited May 23 '17 at 12:26









            Community

            11




            11










            answered Dec 3 '11 at 15:34









            BalusC

            836k29431003184




            836k29431003184











            • I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
              – mrswadge
              Jan 21 '16 at 18:25











            • @mrswadge: stackoverflow.com/q/30130657
              – BalusC
              Jan 21 '16 at 22:05










            • Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
              – mrswadge
              Jan 22 '16 at 11:19











            • What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
              – YoYo
              Feb 25 '17 at 22:13










            • Thanks useful documentation
              – Vision Mkhabela
              Sep 12 '17 at 16:14
















            • I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
              – mrswadge
              Jan 21 '16 at 18:25











            • @mrswadge: stackoverflow.com/q/30130657
              – BalusC
              Jan 21 '16 at 22:05










            • Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
              – mrswadge
              Jan 22 '16 at 11:19











            • What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
              – YoYo
              Feb 25 '17 at 22:13










            • Thanks useful documentation
              – Vision Mkhabela
              Sep 12 '17 at 16:14















            I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
            – mrswadge
            Jan 21 '16 at 18:25





            I've got it working in CSS, but if I wanted to reference a file in JavaScript, then how? The notation url("#resource['otbofaces:date-entry/calendar.gif']") works great in a CSS file, but I've yet to find anything that I can use within a javascript file in order to get the correct resource location.
            – mrswadge
            Jan 21 '16 at 18:25













            @mrswadge: stackoverflow.com/q/30130657
            – BalusC
            Jan 21 '16 at 22:05




            @mrswadge: stackoverflow.com/q/30130657
            – BalusC
            Jan 21 '16 at 22:05












            Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
            – mrswadge
            Jan 22 '16 at 11:19





            Thanks @BalusC. I opted to go a completely different route and have used Font Awesome instead. :)
            – mrswadge
            Jan 22 '16 at 11:19













            What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
            – YoYo
            Feb 25 '17 at 22:13




            What I am missing is that I expected that a 'template.xhtml' is also a resource. So I was fully expecting to do something like <ui:composition template="/templates/report.xhtml"> with my template residing in web/resources/templates/report.xhtml, even making use of how resources are structured in libraries. It is not working that way.
            – YoYo
            Feb 25 '17 at 22:13












            Thanks useful documentation
            – Vision Mkhabela
            Sep 12 '17 at 16:14




            Thanks useful documentation
            – Vision Mkhabela
            Sep 12 '17 at 16:14












            up vote
            7
            down vote













            Suppose that you are running the in the sub directories of the web application. You may try like this :



             <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>


            The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.



            In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.



            Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):



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





            share|improve this answer


















            • 1




              Thanks. It's what i'm searching for.
              – kravemir
              Dec 3 '11 at 11:58






            • 6




              This is not the proper Facelets way though. This is more the JSP way.
              – BalusC
              Dec 3 '11 at 15:38















            up vote
            7
            down vote













            Suppose that you are running the in the sub directories of the web application. You may try like this :



             <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>


            The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.



            In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.



            Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):



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





            share|improve this answer


















            • 1




              Thanks. It's what i'm searching for.
              – kravemir
              Dec 3 '11 at 11:58






            • 6




              This is not the proper Facelets way though. This is more the JSP way.
              – BalusC
              Dec 3 '11 at 15:38













            up vote
            7
            down vote










            up vote
            7
            down vote









            Suppose that you are running the in the sub directories of the web application. You may try like this :



             <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>


            The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.



            In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.



            Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):



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





            share|improve this answer














            Suppose that you are running the in the sub directories of the web application. You may try like this :



             <link href="$facesContext.externalContext.requestContextPath/css/style.css" rel="stylesheet" type="text/css"/>


            The '$facesContext.externalContext.requestContextPath/' link will help you to return immediately to the root of the context.



            In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.



            Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):



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






            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited Jul 12 '17 at 8:21

























            answered Dec 3 '11 at 11:54









            Abimaran Kugathasan

            20.8k85993




            20.8k85993







            • 1




              Thanks. It's what i'm searching for.
              – kravemir
              Dec 3 '11 at 11:58






            • 6




              This is not the proper Facelets way though. This is more the JSP way.
              – BalusC
              Dec 3 '11 at 15:38













            • 1




              Thanks. It's what i'm searching for.
              – kravemir
              Dec 3 '11 at 11:58






            • 6




              This is not the proper Facelets way though. This is more the JSP way.
              – BalusC
              Dec 3 '11 at 15:38








            1




            1




            Thanks. It's what i'm searching for.
            – kravemir
            Dec 3 '11 at 11:58




            Thanks. It's what i'm searching for.
            – kravemir
            Dec 3 '11 at 11:58




            6




            6




            This is not the proper Facelets way though. This is more the JSP way.
            – BalusC
            Dec 3 '11 at 15:38





            This is not the proper Facelets way though. This is more the JSP way.
            – BalusC
            Dec 3 '11 at 15:38











            up vote
            2
            down vote













            These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.



            I had to change (please note the "" in front of the #. Probably side effect from gulp:



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

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





            share|improve this answer
























              up vote
              2
              down vote













              These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.



              I had to change (please note the "" in front of the #. Probably side effect from gulp:



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

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





              share|improve this answer






















                up vote
                2
                down vote










                up vote
                2
                down vote









                These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.



                I had to change (please note the "" in front of the #. Probably side effect from gulp:



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

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





                share|improve this answer












                These answers helped me to fix the same issue. Although my problem was more complex since I was using SASS and GULP.



                I had to change (please note the "" in front of the #. Probably side effect from gulp:



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

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






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Jun 25 '17 at 3:46









                Mircea Stanciu

                1,92522228




                1,92522228



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f8367421%2fhow-to-reference-css-js-image-resource-in-facelets-template%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Top Tejano songwriter Luis Silva dead of heart attack at 64

                    ReactJS Fetched API data displays live - need Data displayed static

                    政党