I'm trying to use jsf facelets templates, using the components ui: insert
in the template and ui: composition in which they use it, my code is something like this:
Template:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="css/default.css"/>
<h:outputStylesheet name="css/cssLayout.css"/>
<h:outputStylesheet name="css/Cabecera.css"/>
<h:outputStylesheet name="css/StyleButton.css"/>
<h:outputStylesheet name="css/Progreso.css"/>
<title>Registro</title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div>
<div id="left">
<ui:insert name="left">Left</ui:insert>
</div>
<div id="content" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
</html>
And the user:
<ui:composition template="./../Templeates/plantilla.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">
<ui:define name="content">
<h:outputText value="Registrar Nuevo Estudiante" style="font-size: 35px;font-weight: 100;color: #dce9f0"/>
<h:form id = "formInput">
<p:outputLabel for="codigo" value="Codigo "/>
<p:chips id="codigo" label="codigo Estudiante" value="#{RegistroAsistencia.codigos}"/>
</h:form>
<h:form id="formbutton" >
<p:commandButton value="Añadir" icon="ui-icon-star" actionListener="#{RegistroAsistencia.agregarAsesoriaEstudiante()}" update=":formInput">
<p:resetInput target=":formInput"/>
</p:commandButton>
</h:form>
</ui:define>
</ui:composition>
in the managedbean I have something like
public List<String> getCodigos() {
Logger.getLogger(ConsultaInformacionAsistentesBean.class.getName()).log(Level.SEVERE, "--->\n get codigos: "+codigos+"\n");
return codigos;
}
public void setCodigos(List<String> codigos) {
Logger.getLogger(ConsultaInformacionAsistentesBean.class.getName()).log(Level.SEVERE, "--->\nset codigos: "+codigos+"\n");
this.codigos = codigos;
}
I put the loggers to verify that the get and set methods are used respectively, when I use the "Añadir" button, the set request is never made, I verify it without using the template and in this it works:
get codes: null
set codes: null <-- When pressing the button
set codes: [2135494]
but when i try using the template:
get codigos: null
nothing <-- When pressing the button
get codigos: null
And in the agregarAsesoriaEstudiante method, codigos is null.
In conclusion, if I use the template, the "set" method of the elements is never used, so in the managedBean they are null and I am unable to get the input, try other elements of PrimeFaces different to p:chips like p: inputText but I did not find a solution , exactly the same code without using the template works perfectly, it is possible that I need something in the code or there is an error if someone knows or had similar problems I would appreciate it if I shared it.
Related
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 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?
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've created a simple JSF-Page with only one <h:commandLink> from the JSF HTML Library. Unfortunately the link is just shown as text and is therefore not clickable.
Code:
<!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"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title><ui:insert name="title">Title</ui:insert></title>
</h:head>
<h:body>
<div id="header"></div>
<h:form id="form">
<div id="content">
<h:commandLink action="courseList">Courses</h:commandLink>
</div>
</h:form>
<div id="footer">
<ui:insert name="footer">
</ui:insert>
</div>
</h:body>
I am just trying to add an simple link to the page "courseList". What can be the problem?
Try with this
<h:commandLink action="courseList" value="Courses"/>
Everything inside f:view <f:view rendered="#{p.statusmsg!=null}">,<f:view rendered="#{p.picstatus!=null}"> and <f:view rendered="#{p.videostatus!=null}"> is getting executed whether the value of statusmsg,picstatus or videostatus is null or not
1)getMoreStatusUpdate.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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:head></h:head>
<h:body>
<div id="content">
<h:form>
<ui:repeat var="p" value="#{statusBean.moreStatusList}">
<f:view rendered="#{p.statusmsg!=null}">
//Status content
</f:view>
<f:view rendered="#{p.picstatus != null}">
//Picture Status Content
</f:view>
<f:view rendered="#{p.videostatus != null}">
//Video Status Content
</f:view>
</ui:repeat>
</h:form>
</div>
</h:body>
The <f:view> doesn't have a rendered attribute.
This attribute is only supported on UIComponent based tags, which is all tags of the h: library and a few of the ui: library including <ui:fragment>.
Just replace <f:view> by <ui:fragment>.
See also:
Conditionally displaying JSF components