1

I am trying to apply some CSS on a web page that is using a templates composed of subtemplates. I have taken a template from primefaces and tried to decompose as much as I can into 2 sub templates : commonFooter.xhtml and commonHeader.xhtml. Then I have assembly them in template.xhtml and I want to use this template.xhtml in my pages.

However, I did not succeed (following this tutorial https://www.mkyong.com/jsf2/jsf-2-templating-with-facelets-example/).

Here is the expected result when I do not explode my template.xhtml into two sub-templates a simple website menu etc

But the result is this one: ...

and Here is the code:

commonHeader.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:body>

            <ui:composition>
                <p:layoutUnit id="top" position="north" size="50">

                    <p:menubar>
                        <p:submenu label="File" icon="ui-icon-document">
                            <p:submenu label="New" icon="ui-icon-contact">
                                <p:menuitem value="Project" url="#" />
                                <p:menuitem value="Other" url="#" />
                            </p:submenu>
                            <p:menuitem value="Open" url="#" />
                            <p:menuitem value="Quit" url="#" />
                        </p:submenu>

                        <p:submenu label="Edit" icon="ui-icon-pencil">
                            <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
                            <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
                        </p:submenu>

                        <p:submenu label="Help" icon="ui-icon-help">
                            <p:menuitem value="Contents" url="#" />
                            <p:submenu label="Search" icon="ui-icon-search">
                                <p:submenu label="Text">
                                    <p:menuitem value="Workspace" url="#" />
                                </p:submenu>
                                <p:menuitem value="File" url="#" />
                            </p:submenu>
                        </p:submenu>
                    </p:menubar>
                </p:layoutUnit>
            </ui:composition>

        </h:body>

    </f:view>


</html>

commonFooter.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">

        <h:body>

            <ui:composition>
                <p:layoutUnit id="bottom" position="south" size="60">
                    Bottom Content
                </p:layoutUnit>

                <p:layoutUnit id="left" position="west" size="300" resizable="true" closable="false" collapsible="true" header="Options" minSize="200">
                    <p:accordionPanel>
                        <p:tab title="Menu 1">
                            <br />
                            <p:calendar mode="inline" navigator="none"/>
                            <br />
                        </p:tab>

                        <p:tab title="Menu 2">
                            <h:outputText value="Menu 2 Content" />
                        </p:tab>

                        <p:tab title="Menu 3">
                            <h:outputText value="Menu 3 Content" />
                        </p:tab>

                        <p:tab title="Menu 4">
                            <h:outputText value="Menu 3 Content" />
                        </p:tab>
                    </p:accordionPanel>
                </p:layoutUnit>

                <p:layoutUnit id="center" position="center">

                </p:layoutUnit>
            </ui:composition>

        </h:body>

    </f:view>
</html>

template.xhtml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      >    
    <h:head>
        <h:outputStylesheet library="css" name="/showcase.css" />
        <h:outputStylesheet library="css" name="/sh.css" />

        <style type="text/css">
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }
            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }

            body {
                background-color: #FFFFFF;
            }
        </style>
    </h:head>
    <h:body>
        <ui:composition>
            <p:layout fullPage="true" >
                <!-- <div id="header">
                    <ui:insert name="header" >
                      <ui:include src="/WEB-INF/templates/commonHeader.xhtml" />
                    </ui:insert>
                </div> -->
                <ui:insert name="header" >
                    <ui:include src="/WEB-INF/templates/commonHeader.xhtml"/>
                </ui:insert>
                <!-- 
                <div id="content">
                    <ui:insert name="content" >
                      <ui:include src="/WEB-INF/templates/commonContent.xhtml" />
                    </ui:insert>
                </div> -->

                <ui:insert name="footer" >
                    <ui:include src="/WEB-INF/templates/commonFooter.xhtml"/>
                </ui:insert>
            </p:layout>

            <script language="javascript" src="resources/js/sh.js"></script>
            <script language="javascript">
                SyntaxHighlighter.all();
            </script>
        </ui:composition>
    </h:body>
</html>

and my page is: 

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <h:outputStylesheet library="css" name="/showcase.css" />
        <h:outputStylesheet library="css" name="/sh.css" />

        <style type="text/css">
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }
            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }

            body {
                background-color: #FFFFFF;
            }
        </style>
    </h:head>
    <h:body>

    <ui:composition template="WEB-INF/templates/template.xhtml"/>

    </h:body>

</html>

Edit: To be more precise, the path of the css is not important here because it works when the template is in one piece. The problem I think is that dissociating the template into two separate entities and then assembly it has broken the primefaces presentation. enter image description here

FabRoussel
  • 190
  • 1
  • 1
  • 15
  • Please provide a [mcve]. Where are your CSS files located? – Jasper de Vries Jul 20 '18 at 14:45
  • Possible duplicate of [How to reference CSS / JS / image resource in Facelets template?](https://stackoverflow.com/questions/8367421/how-to-reference-css-js-image-resource-in-facelets-template) – Jasper de Vries Jul 20 '18 at 14:46
  • @JasperdeVries, okay I will try to be more specific. The problem is not the location of the file, as you can see the first screen where everything is perfect when the template is not multiple .xhtml – FabRoussel Jul 20 '18 at 14:56
  • See also https://stackoverflow.com/questions/11988415/what-is-the-jsf-resource-library-for-and-how-should-it-be-used – Jasper de Vries Jul 20 '18 at 15:26
  • Thank you @JasperdeVries I have found the solution, it was because I did not use well the tag ui:composition. I will describe exactly what was wrong in an answer – FabRoussel Jul 20 '18 at 15:42

1 Answers1

2

Thanks to another tutorial I found the way to use the tags composition include etc from jsf. I did not used them well

First you need to create simple templateFooter.xhtml and templateHeader.xhtml as followed with no html tag, but with a ui:composition tag:

<ui:composition 
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
       <p:layoutUnit id="top" position="north" size="50">

           <p:menubar>
               <p:submenu label="Satisfact'IT" icon="ui-icon-document">
                   <p:submenu label="New" icon="ui-icon-contact">
                       <p:menuitem value="Project" url="#" />
                       <p:menuitem value="Other" url="#" />
                   </p:submenu>
                   <p:menuitem value="Open" url="#" />
                   <p:menuitem value="Quit" url="#" />
               </p:submenu>

               <p:submenu label="Edit" icon="ui-icon-pencil">
                   <p:menuitem value="Undo" url="#" icon="ui-icon-arrowreturnthick-1-w"></p:menuitem>
                   <p:menuitem value="Redo" url="#" icon="ui-icon-arrowreturnthick-1-e"></p:menuitem>
               </p:submenu>

               <p:submenu label="Help" icon="ui-icon-help">
                   <p:menuitem value="Contents" url="#" />
                   <p:submenu label="Search" icon="ui-icon-search">
                       <p:submenu label="Text">
                           <p:menuitem value="Workspace" url="#" />
                       </p:submenu>
                       <p:menuitem value="File" url="#" />
                   </p:submenu>
               </p:submenu>
           </p:menubar>
       </p:layoutUnit>
</ui:composition>

Then we need to create a page template.xhtml that will use our templateXXXXX.xhtml. This page needs to have an html tag because it will be used by your page that will be directly seen by the user. Thus you need to use the tag ui:include (which will import your templateXXX.xhtml) into a tag ui:insert. You will have something like that:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"   
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      >    
    <h:head>
        <h:outputStylesheet library="css" name="/showcase.css" />
        <h:outputStylesheet library="css" name="/sh.css" />
        
        <style type="text/css">
            .ui-layout-north {
                z-index:20 !important;
                overflow:visible !important;;
            }
            .ui-layout-north .ui-layout-unit-content {
                overflow:visible !important;
            }
            
            body {
                background-color: #FFFFFF;
            }
        </style>
 </h:head>
    <h:body>
  <p:layout fullPage="true" >   
      <ui:insert name="header" >
          <ui:include src="commonHeader.xhtml" />
      </ui:insert>
  
      <ui:insert name="footer" >
          <ui:include src="commonFooter.xhtml" />
      </ui:insert>
  </p:layout>
            
        <script language="javascript" src="resources/js/sh.js"></script>
        <script language="javascript">
            SyntaxHighlighter.all();
        </script>
    </h:body>
</html>

And then to call you page in for exemple index.xhtml juste write:

<ui:composition template="WEB-INF/templates/template.xhtml"
  xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:p="http://primefaces.org/ui"
/>

I have not find yet the way to easily change it when I am in the index.xhtml, but I will keep you updated !

FabRoussel
  • 190
  • 1
  • 1
  • 15