How to dynamically update center layoutunit content from menuitem in primefaces? - jsf

I am using Primefaces 3.5 with JSF 2.0 on Tomcat 7.0. I am trying to accomplish seemingly a simple task of dynamically loading a center layoutunit section of a fullPage layout when selecting a menuitem. I have spent last couple of days researching this problem and none of the answers that I am running into seem to work. When menuitem is selected then the center layoutunit section goes blank.
Here is my layoutTemplate.xhtml that defines two layoutunits top and center with two template sections menu and center inside each.
<!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">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>ESF-12 Control Panel</title>
</f:facet>
<link type="text/css" rel="stylesheet" href="/css/default.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;
}
</style>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="top" position="north" size="50">
<ui:insert name="menu">Top Section</ui:insert>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<ui:insert name="center">Center Section</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
Here is my home.xhtml that uses the layout and defines values for menu and center sections.
<ui:composition template="/layoutTemplate.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p= "http://primefaces.org/ui">
<ui:define name="menu">
<ui:include src="/menu.xhtml" />
</ui:define>
<ui:define name="center">
<ui:include src="#{viewControllerBean.view}" />
</ui:define>
</ui:composition>
Here is a simple ViewControllerBean.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean
#SessionScoped
public class ViewControllerBean {
private String view = "/centerLayoutUnit1.xhtml";
/**
* #return the view
*/
public String getView() {
return view;
}
/**
* #param view the view to set
*/
public void setView(String view) {
this.view = view;
}
}
Here is my menu.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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
<h:form>
<p:menubar>
<p:submenu label="Test" icon="ui-icon-power">
<p:menuitem value="Change Center Layout" icon="ui-icon-pencil" update=":center" actionListener='#{viewControllerBean.setView("/centerLayoutUnit2.xhtml")}'/>
</p:submenu>
</p:menubar>
</h:form>
</ui:composition>
</body>
</html>
And finally two xhtml files that I want to use to populate the center layoutunit template content.
Here is centerLayoutUnit1.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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
Center Layout Unit 1
</ui:composition>
</body>
</html>
Here is centerLayoutUnit2.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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
Center Layout Unit 2
</ui:composition>
</body>
</html>
All help is very much appreciated!!!

Related

triStateCheckbox not rendering initial value

I'm using a triStateCheckbox element with primefaces-extensions 6.0.0 and primefaces 6.0 and it's not renderering the initial value. I created an example view with the three possible values and I still get three empty checkboxes.
This is the example:
<?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:c="http://java.sun.com/jstl/core"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view locale="#{localeBean.locale}" contentType="text/html">
<h:head>
<h:outputStylesheet library="css" name="standard.css" />
</h:head>
<body>
<h:form id="dataForm" prependId="false" >
<pe:triStateCheckbox value="2" />
<pe:triStateCheckbox value="1" />
<pe:triStateCheckbox value="0" />
</h:form>
</body>
</f:view>
</html>
This is what I get:
link to image

JSF page template --html meta refresh is not working [duplicate]

This question already has an answer here:
JSF returns blank/unparsed page with plain/raw XHTML/XML/EL source instead of rendered HTML output
(1 answer)
Closed 5 years ago.
Here's template
<?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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="refresh" content="30">
<title><ui:insert name="title">Default Title</ui:insert></title>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
</h:head>
<h:body>
<h1>
<ui:insert name="title">Default Title</ui:insert>
</h1>
<p>
<ui:insert name="body">Default Body</ui:insert>
</p>
</h:body>
</html>
here's a client
<?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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="/template.xhtml">
<ui:define name="title">
<h:outputText value="#{bundle.ListPhonerecordTitle}"></h:outputText>
</ui:define>
<ui:define name="body">
<h:form styleClass="jsfcrud_list_form">
<p:poll interval="10" listener="#{phonerecordController.prepareList}" update="#all" />
...
...
...
</h:form>
</ui:define>
</ui:composition>
</html>
When I run client page meta refresh is not working (refresh page every 30 seconds).
I tried putting meta refresh tag in template (inside h:head) but when client page is run it is not refreshing the page.
Should I try putting the meta refresh tag inside ui:composition tag in client page?

If I add an image inside h:body in 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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="title">Default Title</ui:insert></title>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
</h:head>
<h:body>
<h:graphicImage value = "resources/phonegirl1.PNG"/><br />
<h1>
<ui:insert name="title">Default Title</ui:insert>
</h1>
<p>
<ui:insert name="body">Default Body</ui:insert>
</p>
</h:body>
</html>
and try to open in client page image is not there. It's not visible when i run template page as well.
This may have the answer:
Template content not displaying

if i add a text "Hello World" in template like so
<?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://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="title">Default Title</ui:insert></title>
<h:outputStylesheet library="css" name="jsfcrud.css"/>
</h:head>
<h:body>
Hello World!
<h1>
<ui:insert name="title">Default Title</ui:insert>
</h1>
<p>
<ui:insert name="body">Default Body</ui:insert>
</p>
</h:body>
</html>
every client page referring to template has Hello World written on its page.
But if I try the same in one of the client pages they don't work.

How can I use ui:define and ui:insert within the same ui:composition?

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>

Dialog closes after action

Whenever I perform an action in the modal dialog it closes but the action is performed because when I open the dialog again method was executed. What's wrong in my code that keeps the dialog closing after action?
mantenimientoItems.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">
<ui:composition 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:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="MantForm">
<h:panelGrid columns="7">
...
<p:inputText id="idClas"
value="#{MantenimientoItemsBean.itemsFiltrosVO.clasTitulo}"
update=":dialog3" onclick="busClas.show(); return false;">
<p:ajax event="click"
listener="#{MantenimientoItemsBean.ValidarTipoBuscador0}"/>
</p:inputText>
...
</h:form>
<p:dialog id="dialog3" appendToBody="true" modal="true"
widgetVar="busClas" dynamic="true" width="1400" height="850">
<ui:include src="buscadorClasificador.xhtml" />
</p:dialog>
</h:body>
</ui:composition>
buscadorClasificador.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">
<ui:composition 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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>
<h:body>
<h:form id="BClasForm">
...
<tr>
<td>
<p:commandButton value="Buscar" ajax="false"
action="#{MantenimientoItemsBean.BuscarClasificador()}"/>
</td>
</tr>
...
</h:form>
</h:body>
</ui:composition>

When you set the attribute ajax="false" on a command button, it will submit its enclosing form causing the dialog to close. If you don't won't this, you have two options, either remove the ajax="false" in which case the form is not submitted, or add an attribute type="button" which renders the type="button" instead of type="submit", thus again avoid form submit.

jsf file not getting loaded from its location

Here is my folder structure of my project,
File contents;
commons.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></h:head>
<h:body>
<div style="border-width:2px; border-color:green; border-style:solid;">
<ui:insert name="header" >
<ui:include src="/templates/header.xhtml" />
</ui:insert>
</div>
<br/>
<div style="border-width:2px; border-color:black; border-style:solid;">
<ui:insert name="content" >
<ui:include src="/templates/contents.xhtml" />
</ui:insert>
</div>
<br/>
<div style="border-width:2px; border-color:red; border-style:solid;">
<ui:insert name="footer" >
<ui:include src="/templates/footer.xhtml" />
</ui:insert>
</div>
</h:body>
</html>
contents.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:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Content</h1>
</ui:composition>
</body>
</html>
footer.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:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Footer</h1>
</ui:composition>
</body>
</html>
header.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:ui="http://java.sun.com/jsf/facelets">
<body>
<ui:composition>
<h1>Default Footer</h1>
</ui:composition>
</body>
</html>
home.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:body>
<ui:composition template="templates/common.xhtml">
<ui:define name="content">
<br/><br/>
<h:link value="Page 1" outcome="page1" />
<h:link value="Page 2" outcome="page2" />
<br/><br/>
</ui:define>
</ui:composition>
</h:body>
</html>
page1.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:body>
<ui:composition template="templates/common.xhtml">
<ui:define name="header">
<h2>Page1 header</h2>
</ui:define>
<ui:define name="content">
<h2>Page1 content</h2>
<h:link value="Back To Home" outcome="home" />
</ui:define>
<ui:define name="footer">
<h2>Page1 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
page2.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:body>
<ui:composition template="templates/common.xhtml">
<ui:define name="header">
<h2>Page2 header</h2>
</ui:define>
<ui:define name="content">
<h2>Page2 content</h2>
<h:link value="Back To Home" outcome="home" />
</ui:define>
<ui:define name="footer">
<h2>Page2 Footer</h2>
</ui:define>
</ui:composition>
</h:body>
</html>
When I run the server and run the page, I see a blank screen,
I somehow feel the template file is not getting loaded from the correct location but where can I find the exact location the file is trying to load from.
Html code of the file,
<?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:body>
<ui:composition template="templates/common.xhtml">
<ui:define name="content">
<br/><br/>
<h:link value="Page 1" outcome="page1" />
<h:link value="Page 2" outcome="page2" />
<br/><br/>
</ui:define>
</ui:composition>
</h:body>
</html>

Resources