I just learned that I can create a main template which I can replace with different other xhtml jsf pages using ui:insert, ui:define and ui:include srcSo I did some research online and tried to display the combined pages.
However, I can't get to define the named ui:insert content block with another content (I want to put what register.xhtml page has when user goes to the register page)
template.xhtml
<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>
<h:outputStylesheet name="css/bootstrap.css" />
<h:outputStylesheet name="css/font-awesome.css"/>
<h:outputStylesheet name="css/mywebsite.css"/>
<h:outputScript name="js/jquery-3.1.1.js"/>
<h:outputScript name="js/bootstrap.js"/>
</h:head>
<h:body>
<div id="page">
<div id="header">
<ui:insert name="header">
<ui:include src="header.xhtml"/>
</ui:insert>
</div>
<div id="content">
<!--content container-->
<ui:insert name="content">
<ui:include src="content.xhtml" />
</ui:insert>
</div>
<div id="footer">
<!--footer container-->
<ui:insert name="footer">
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</div>
</h:body>
</html>
header.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">
<h1>Default Header</h1>
</ui:composition>
content.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"
>
<h1>Default Content</h1>
</ui:composition>
footer.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">
<h1>Default Footer</h1>
</ui:composition>
register.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">
<h1>I AM REGISTER</h1>
</ui:composition>
What I would like to be able to do is to replace the content block with register.xhtml when user goes to localhost:8080/mywebsite/register.xhtml
I want to replace the default content div. Only when user goes to the register page (localhost:8080/mywebsite/register.xhtml) but keep the header and footer.
I hope you can help.
Thank you.
Your register.xhtml should be like this:
<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"
template="/WEB-INF/templates/template.xhtml">
<ui:define name="content">
<h1>I AM REGISTER</h1>
</ui:define></ui:composition>
You must add template="/WEB-INF/templates/template.xhtml" in the ui:composition tag and override the actual content as
<ui:define name="content">
<h1>I AM REGISTER</h1>
</ui:define>
Related
I have a ui:composition that sits within a template, and I want to repeat an element both in template and the composition itself.
Here's an example.
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:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<h:head>
<title>JSF 2.0 Hello World</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</h:head>
<h:body>
<div class = "header">
<div class = "mylogo"></div>
HEADER
<!-- I want this content logo to be defined within module.xhtml-->
<ui:insert name = "content-logo"></ui:insert>
</div>
<div class = "content">
<ui:insert name = "content"></ui:insert>
</div>
<div class ="footer">
FOOTER
</div>
</h:body>
</html>
module.xhtml
<!DOCTYPE html>
<ui:composition 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:o="http://omnifaces.org/ui"
template="template.xhtml">
<!-- define the module content-logo here-->
<ui:define name ="content-logo">
<div class ="another-logo"> foo</div>
</ui:define>
<ui:define name ="content">
<-- we also want to display the content-logo here-->
<ui:insert name = "content-logo"/>
<div class = "foo">
My main content
</div>
</ui:define>
</ui:composition>
The defined content-logo will display within the template header fine - but it doesn't display in the composition body. Is there a way I can make this work without resorting to copying the HTML?
You can use ui:include in your module.xhtml like this
<ui:composition 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:o="http://omnifaces.org/ui"
template="template.xhtml">
<!-- define the module content-logo here-->
<ui:define name ="content-logo">
<ui:include src="logo.xhtml"/>
</ui:define>
<ui:define name ="content">
<-- we also want to display the content-logo here-->
<ui:include src="logo.xhtml"/>
<div class = "foo">
My main content
</div>
</ui:define>
</ui:composition>
I want to ask a question that i have a master template like this
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title>Login</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include src="header.xhtml" id="header"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
</div>
<div id="bottom" style="position: absolute;top: 675px;width: 100%" align="center">
<ui:insert name="bottom">
<ui:include src="footer.xhtml" id="footer"/>
</ui:insert>
</div>
</h:body>
</html>
On my each page i am using something like this
<?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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>City Setup</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="content">
<h:form id="cityReviewform">
......
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
Now what is happening that because of the ui;composition my tile attribute is now working on each page, because ui:composition discard every tag outside of it. Now on each page i have a title of Login(i.e of master template). So i want to ask that how can i do this that on each page, its own title shown instead of Login(master tempalte title)?
Thanks
In the template client, everything outside <ui:composition> is ignored. You need to change your template approach to provide an <ui:insert> for the title in the master template, so that it can be defined by an <ui:define> in the template client.
Master template:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html">
<h:head>
<title><ui:insert name="title">Login</ui:insert></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">
<ui:include id="header" src="header.xhtml"/>
</ui:insert>
</div>
<div>
<div id="content">
<ui:insert name="content" />
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include id="footer" src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
Template client:
<ui:composition template="/WEB-INF/templates/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">
<ui:define name="title">City Setup</ui:define>
<ui:define name="content">
<h:form id="cityReviewform">
...
</h:form>
</ui:define>
</ui:composition>
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
I am new this field.
I am using Facelets for template designing.
In my project,I need a template which is changing the content dynamically when click on p:menuitems with using ui:insert and ui:define.
I already tried this and its working fine like each p:menuitems clicks the page gets one refresh and then change the content.
But,I need to change the content of the template without get refresh of the page.
Here, I added my program.
home.xhtml
<ui:composition template="index.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
</ui:composition>
header.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">`enter code here`
<h:form>
<p:menu>
<p:menuitem value="One" url="/pages/one.xhtml"/>
<p:menuitem value="Two" url="/pages/two.xhtml"/>
<p:menuitem value="Three" url="/pages/three.xhtml"/>
</p:menu>
</h:form>
</ui:composition>
footer.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<p>This is Footer</p>
</ui:composition>
template.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Template Page</title>
</h:head>
<h:body>
<div id="headerId">
<p:panel>
<ui:include src="/pages/header.xhtml"/>
</p:panel>
</div>
<div id="contentId">
<ui:insert name="content">
<p:panel>
<p>Default Content</p>
</p:panel>
</ui:insert>
</div>
<div id="footerId">
<p:panel>
<ui:include src="/pages/footer.xhtml"/>
</p:panel>
</div>
</h:body>
</html>
one.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<ui:define name="content">
<p>Change content from one page</p>
</ui:define>
</ui:composition>
two.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<p>Change content from two page</p>
</ui:define>
</ui:composition>
three.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<p>Change content from three page</p>
</ui:define>
</ui:composition>
Here,The home.xhtml is my welcome page.
please,give me an idea to solve this.
Thanks in advance.
Hello I am getting the following in the server console everytime I enter on a webpage:f:view contracts attribute found, but not used at top level.
I am using jsf template and I have a default.xhtml template file like this:
<!DOCTYPE html>
<html ...xmlns...>
<f:view contracts="default" locale="#{bbClevcore.locale}">
<h:head>
...
</h:head>
<h:body id="body">
<header>
...
</header>
<section>
<h:panelGroup layout="block">
<h:panelGroup id="section" layout="block">
<ui:insert name="section" />
</h:panelGroup>
</h:panelGroup>
</section>
<footer>
...
</footer>
</ui:insert>
</h:body>
</f:view>
</html>
I have the following contract directory:
-src/main/webapp/contracts/default/common/css/main.css
And in the actual page: index.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:cc="http://xmlns.jcp.org/jsf/composite/components"
template="/templates/default.xhtml">
...
<ui:define name="section">
....
</ui:define>
</ui:composition>
The contract works since when I change contracts value from default to let say alternative , having another main.css in an alternative folder, the page takes the change and shows the alternative style. Am I using f:view in the right location?
Thank you
It is not possible to set contract in global template. JSF allows to
set it in a first requested file (Template-Client) only. Try this!
Template:
<!DOCTYPE html>
<html ...xmlns...>
<h:head>
...
</h:head>
<h:body id="body">
<header>
...
</header>
<section>
<h:panelGroup layout="block">
<h:panelGroup id="section" layout="block">
<ui:insert name="section" />
</h:panelGroup>
</h:panelGroup>
</section>
<footer>
...
</footer>
</h:body>
</html>
Template-Client:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<f:view contracts="alternative">
<ui:composition template="/templates/default.xhtml">
...
<ui:define name="section">
....
</ui:define>
...
</ui:composition>
</f:view>
</ui:composition>
I have created a basic JSF template called Template.xhtml. This template is then being used by the page TestPage.xhtml. In my TestPage.xhtml i have only used the <ui:define> tag to override the pages title. Therefore, I would have expected the rest of the templates content to be displayed the same. However, only the header and footer of the template are being displayed.
Template.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ice="http://www.icesoft.com/icefaces/component"
>
<h:head>
<title><ui:insert name="title"></ui:insert></title>
<link href="#{request.contextPath}/resources/css/Template.css" rel="stylesheet"/>
</h:head>
<h:body>
<header id ="header">
<ui:insert name="header">
<h1>OAG Reference Data</h1>
</ui:insert>
</header>
<section id="container">
<ui:insert>
<section id="sidebar">
<ui:insert name="sideBar">
<h:form>
<ace:menu type="sliding" zindex="2">
<ace:submenu label="Carrier">
<ace:menuItem value="General Carrier Data" />
<ace:menuItem value="Contact Info" />
<ace:menuItem value="Alliance Membership" />
</ace:submenu>
</ace:menu>
</h:form>
</ui:insert>
</section>
<section id="content">
<ui:insert name="content">
<h1>Content</h1>
</ui:insert>
</section>
</ui:insert>
</section>
<footer id ="footer">
<ui:insert name="footer">
<h1>Footer#{bundle['application.defaultpage.footer.content']}</h1>
</ui:insert>
</footer>
</h:body>
</html>
TestPage.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:icecore="http://www.icefaces.org/icefaces/core"
xmlns:ace="http://www.icefaces.org/icefaces/components"
xmlns:ice="http://www.icesoft.com/icefaces/component">
<ui:composition template="WEB-INF/templates/Template.xhtml">
<ui:define name="title">
Test Title
</ui:define>
<ui:define name="content">
Test Content
</ui:define>
</ui:composition>
</html>
Does anybody know why the footer and header sections are being displayed as part of the template, but why the other content and sidebar sections are not (despite me not overriding them).
Thanks.
You need to put <ui:insert name="Container"> instead of <ui:insert> in the "container" section.
The content is not shown because the ui insert tag has no name
so you can't refer to it.