Consider a nested template:
Base.xhtml:
...
<h:outputText value="#{uiParamter}"/>
<ui:insert name="header"/>
... etc.
Layout.xhtml:
<ui:composition template="Base.xhtml">
...
<ui:insert name="content"/>
... etc.
</ui:composition>
When now defining a template client like this:
<ui:composition template="Layout.xhtml">
<ui:define name="header"> foo </ui:define>
<ui:define name="content"> foo2 </ui:define>
<ui:param name="uiParameter" value="foo3"/>
</ui:composition>
does one have to forward the <ui:param> or <ui:define> in the Layout.xhtml to the Base.xhtml template by redefining it. e.g:
<ui:param name="uiParameter" value="#{uiParameter}">
<ui:define name="header">
<ui:insert name="header"/>
</ui:define>
One could also rephrase this question as: "Do template parameters behave cascading?"
The answer is YES. I've run the following code on JBoss AS 7.0:
nest1.xhtml:
<!DOCTYPE html>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="title">
Nested
</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="main" />
<h:outputText value="#{uiParam}"/>
</h:body>
</html>
nest2.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="nest1.xhtml">
<ui:define name="main">
<p>Nested templated content.</p>
</ui:define>
</ui:composition>
nest3.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="nest2.xhtml">
<ui:define name="title">Nested Template</ui:define>
<ui:param name="uiParam" value="ui param value" />
</ui:composition>
which was rendered as:
Related
I have a simple composition with a menu, and the menu has a p:selectOneMenu for the locale
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view locale="#{sesion.locale}">
<h:head>
<title>Hello World JSF 2.3</title>
</h:head>
<h:body>
<ui:composition template="/template1.xhtml">
<ui:define name="contenido">
<h:form id="content">
<p:outputLabel value="#{i18n_base['helloworld']}"/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</f:view>
</html>
The menu
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view locale="#{sesion.locale}">
<h:head>
</h:head>
<h:body>
<h:form id="menu">
<p:menubar>
<p:submenu label="${i18n_menu['flujos']}">
<p:menuitem value="${i18n_menu['flujo.edicion']}" url="/frontend/gestion/flujo/lista.xhtml"/>
<p:menuitem value="${i18n_menu['flujo.creacion']}" url="/frontend/gestion/flujo/edicionFlujo.xhtml"/>
</p:submenu>
<f:facet name="options">
<p:selectOneMenu value="#{sesion.locale}" converter="localeConverter">
<p:ajax listener="#{sesion.localeCambiado}" update="#form"/>
<f:selectItems value="#{sesion.allLocales}" var="_locale" itemValue="#{_locale}" itemLabel="${i18n_menu['locale.' += _locale.language]}"/>
</p:selectOneMenu>
</f:facet>
</p:menubar>
</h:form>
<ui:insert name="contenido">Contenido</ui:insert>
</h:body>
</f:view>
</html>
And I get this page
With this code it works as expected: When I change the selected language the menu language is updated but the "helloworld" label is not affected.
But if I change the "update" attribute of the "p:ajax" component, when I update the value then the page breaks
What am I doing wrong?
I am using Primefaces 7.0 on WildFly 18.0.0.1
I have the following situation: I want to update the content inside the "tpNavigationDetail" when clicking the commandbutton in the template_detail.xhtml.
query_overview.xhtml and query_detail.xhtml have the same QueryController.
How can I manage it with JSF?
query_detail.xhtml is inside the template_detail.xhtml
query_overview.xhtml is inside the template_navigation.xhtml
I appreciate any Help
query_detail.xhtml
<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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template_detail.xhtml">
<ui:define name="detailLeft">
...
</ui:define>
<ui:define name="detailRight">
......
</ui:define>
</ui:composition>
</h:body>
</html>
template_detail.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:tp="http://www.tp.de/facelets"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template.xhtml">
<ui:param name="renderHeader" value="true"/>
<ui:define name="frame">
<h:form id="form" enctype="multipart/form-data">
<p:panel rendered="#{p:ifAnyGranted(renderOnRole) or fn:contains(pageStyle, 'useNoRole')}" style="min-height:150px">
<p:commandButton update="#(*[id*=tpNavigationDetailContent])"
action="#{controller.update}"
value="#{desk_messages.map['button.save']}"
rendered="#{controller.updateMode}"
disabled="#{!controller.isEntityEditable}"
icon="ui-icon-check" />
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
query_overview.xhtml
<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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions" xmlns:tpd="http://www.tp-dialog.de/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<ui:composition template="/prime/template/template_navigation.xhtml">
<ui:param name="controller" value="#{queryController}"/>
<ui:define name="customDetail">
<f:facet name="header">
<p:spacer width="32" height="32" styleClass="tpTitleIcon tpTitleIconExports" style="margin-right: 10px;" />
<h:outputText value="#{desk_messages.map['title.query']}"/>: <tp:outputText object="#{queryController.entity}"/>
<h:outputText value=" (#{myWithFailedStatusI18nCategoryModel.i18nCodeMap[queryController.entity.status]})"
rendered="#{queryController.entity.status != 'A'}"/>
</f:facet>
<ui:include src="/prime/query/query_result.xhtml"/>
</ui:define>
</ui:composition>
</h:body>
</html>
template_navigation.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template.xhtml">
<ui:param name="renderHeader" value="true"/>
<ui:param name="autosize" value="true"/>
<ui:define name="frame">
<pe:layoutPane id="tpNavigationDetail" position="center" render="false">
<ui:insert name="customScript"/>
<h:form id="form" enctype="multipart/form-data">
<c:if test="${fn:contains(pageStyle, 'customDetail')}">
<p:panel id="tpNavigationDetailContent" style="min-height:150px">
<ui:insert name="customDetail"/>
</p:panel>
</c:if>
</h:form>
</pe:layoutPane>
<!-- tp navigation -->
<pe:layoutPane id="tpNavigationOverview" position="east" size="#{navigationSize}" minSize="#{navigationMinSize}" maxSize="#{navigationMaxSize}">
<f:facet name="header">
<ui:insert name="tpNavigationOverviewHeader"/>
</f:facet>
<ui:insert name="navigationOverview"/>
</pe:layoutPane>
</ui:define>
</ui:composition>
</h:body>
</html>
you wan to update "tpNavigationDetail" but you write this :-
update="#(*[id*=tpNavigationDetailContent])" ,
change update attribute like this
update="#(*[id*=tpNavigationDetail])"
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>
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>