Facelets inheritance

Question

I'd like to inherit from a base template with Facelets and i don't know how to do it; I have on the same folder two files : base.xhtml and login.xhtml i want login.xhtml to inherit from base.xhtml, should i include any library for a simple inheritance ? all what i want is to overwrite title tag and body tag on login.xhtml ;

base.xhtml :

<?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:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title><ui:insert name="titre" /></title>
        <link type="text/css" rel="stylesheet" href="resources/css/bootstrap.css"></link>
        <link type="text/css" rel="stylesheet" href="resources/css/tether.min.css"></link>
        <script type="text/javascript" src="resources/js/jquery.js"></script>
        <script type="text/javascript" src="resources/js/tether.min.js"></script> 
        <script type="text/javascript" src="resources/js/bootstrap.js"></script>
        <script type="text/javascript" src="resources/js/sortable.js"></script>

    </h:head>
    <h:body>

    </h:body>
</html>

score 0 · Accepted Answer · answered Nov 22 '16 at 00:22

Template pages, i.e., template_name.xhtml normally go inside the WEB-INF folder, probably under a newly created folder by you, something like this:

--WEB-INF 
    |--templates
        |--template.xhtml

template.xhtml:

<?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://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">

    <h:head>
      <ui:insert name="tabTitle">
          Some default title
      </ui:insert>

      // normally you leave spaces for you to define external resources
      <ui:insert name="css" />
      <ui:insert name="js" />

    </h:head>
    <h:body>

      <ui:insert name="body">
           Default content
      </ui:insrt>               

    </h:body>
</html>

Then whenever you want to use the above template:

some_page.xhtml

<ui:composition xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"

      template="/WEB-INF/templates/template.xhtml">


    // the just override any <ui:insert /> tag you want by setting the
    // name="" attribute to which ever you want to override

    <ui:define name="body">
          this will be the content that overrides your template "body", the rest will stay the same
    </ui:define>

</ui:composition>

The reason Nothing else is needed is because <ui:compsition tag will not take in to account anything outside of its tags.

Facelets inheritance

1 Answers1