I'm new to JSF and I'm facing this weird issue. I'm sure it's a silly mistake but I just can't seem to figure it out. Basically, when I insert rich:calendar within ui:composition it does not display. My (simplified) template is defined 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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title></title>
</h:head>
<h:body>
<ui:insert name="content"/>
<ui:debug/>
</h:body>
</html>
My index page
<?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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:rich="http://richfaces.org/rich">
<head>
<title></title>
</head>
<body>
<ui:composition template="/indexLayout.xhtml">
<h:outputScript library="javascript" name="common.js" target="head"/>
<ui:define name="content">
<h:form>
<h:panelGrid columns="2">
From
<rich:calendar id="pickup" onchange="#{rich:component('return')}.setValue(#{rich:component('pickup')}.getValue())"
dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" value="#{reservation.pickUp}" />
To
<rich:calendar id="return" dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" />
</h:panelGrid>
<h:commandButton value="Redisplay" />
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
If I define the index page without ui:composition it displays just fine. Please help. Thank you.
You should place your <h:outputScript /> inside the <ui:define></ui:define> since when you are using <ui:composition />, every <ui:insert /> inside the template are replaced by respective <ui:define />. Everything outside <ui:define /> is not rendered.
In your case the JavaScript function disablementFunction is not loaded so your rich:calendar doesn't work properly.
Here is how your index page should look like :
<ui:composition template="/indexLayout.xhtml">
<ui:define name="content">
<h:outputScript library="javascript" name="common.js" target="head"/>
<h:form>
<h:panelGrid columns="2">
From
<rich:calendar id="pickup" onchange="#{rich:component('return')}.setValue(#{rich:component('pickup')}.getValue())" dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" value="#{reservation.pickUp}" />
To
<rich:calendar id="return" dayDisableFunction="disablementFunction" datePattern="MMM d, yyyy" />
</h:panelGrid>
<h:commandButton value="Redisplay" />
</h:form>
</ui:define>
</ui:composition>
More info :
JSF 2 templating with Facelets example
Related
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.
I am writing a simple page using JSF and Primefaces.
This is my 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:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" header="North - header" style="font-size: 15px;">
<h:form>
<ui:include src="header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" header="West - menu" style="font-size: 15px;">
<h:form>
<ui:include src="menu.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Center - content" style="font-size: 15px;">
<ui:insert name="content"/>
</p:layoutUnit>
<p:layoutUnit position="east" header="East - nothing" style="font-size: 15px;">
</p:layoutUnit>
<p:layoutUnit position="south" header="South - footer" style="font-size: 15px;">
<ui:include src="footer.xhtml"/>
</p:layoutUnit>
</p:layout>
</h:head>
<h:body>
</h:body>
</html>
I have made simple menu:
<?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"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition>
<p:menu>
<p:submenu label="Main">
<p:menuitem value="Show main" action="glowna?faces-redirect=true"/>
<p:menuitem value="Show resultPage" action="resultPage?faces- redirect=true"/>
<p:menuitem value="Pictures" action="obrazek?faces-redirect=true"/>
</p:submenu>
</p:menu>
</ui:composition>
</h:body>
</html>
And now: I wanted to add some content to "content" unitlayout. I made simple page which uses the template below. If I add to the menuitem action like: action="glowna", when I click that item while my page is running, all the template is shown but without header part.
The left, right, center and footer part is shown properly, but header disappears.
However, if I add to the action atribute faces-redirect=true (action="glowna?faces-redirect=true") everything works fine.
This is my content page: glowna.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>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition template="template.xhtml"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h1>Oto zawartość strony głownej - content</h1>
<p:growl id="growl" showDetail="true"/>
<p:panelGrid columns="1">
<p:inputText value="#{user.imie}" required="true"/>
<p:inputText value="#{user.nazwisko}" required="true"/>
<p:commandButton value="Show it!" actionListener="#{user.click}" update="growl"/>
</p:panelGrid>
</ui:define>
</ui:composition>
</h:body>
</html>
Anyone knows why?
Be grateful for ansewers :)
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>
I want to show a rich:calendar on my xhtml site. Here is my code. I don't understand why its not working (that code doesn't show a calendar).
I don't get any errors, the calendar isn't appearing.
<?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:rich="http://richfaces.org/rich"
>
<f:view>
<h:head>
<title>Title</title>
</h:head>
<h:body>
<h:panelGrid columns="2" styleClass="center">
<h:outputText value="Date from" />
<rich:calendar id="calendar_from" datePattern="d/M/yy HH:mm" value="18/11/12 09:00" popup="true" locale="de/DE" />
</h:panelGrid>
</h:body>
</f:view>
</html>
Make sure that the richfaces jar in classpath...
I have a backing bean method (session scoped) within two nested forms which will not fire.
I set out the question with a generic example which exhibits the problem.
I would appreciate an insight into how/why the forms, dialogs and appendToBody tag are causing the problem.
To clarify, the action in contentsOfDialogTwo.xhtml - nestedDialogsBean.actionOnClickOfDialogTwoItem() - does not fire. The javascript alert is displayed, but a breakpoint on the action on the backing bean shows that this is not called.
Template View:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<ui:insert name="content"/>
</ui:composition>
</html>
Parent View:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="../templates/layout.xhtml">
<ui:define name="content">
<h:form>
<p:panel>
<p:tabView id="exampleTabView" dynamic="false">
<p:tab id="nestedDialogsTab" title="Nested Dialogs Tab">
<ui:insert>
<ui:include src="childView.xhtml"></ui:include>
</ui:insert>
</p:tab>
</p:tabView>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
Child view:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition>
<p:commandButton
id="openDialog1"
value="Open Dialog 1"
action="#{nestedDialogsBean.actionOnOpenOfDialog1()}"
oncomplete="dialogOneVar.show()">
</p:commandButton>
<p:dialog id="dialogOne" header="Panel One" widgetVar="dialogOneVar"
resizable="false" modal="true" closable="true" dynamic="true"
hideEffect="fold" draggable="false" height="700" width="1000">
<ui:insert>
<ui:include src="contentsOfDialogOne.xhtml"></ui:include>
</ui:insert>
</p:dialog>
</ui:composition>
</html>
contentsOfDialogOne.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: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">
<p:commandButton
id="openDialog2"
value="Open Dialog 2"
action="#{nestedDialogsBean.actionOnOpenOfDialog2()}"
oncomplete="dialogTwoVar.show()">
</p:commandButton>
<p:dialog id="dialogTwo"
header="Dialog Two"
widgetVar="dialogTwoVar"
closable="true"
dynamic="true"
resizable="false" draggable="false" height="700"
width="1000" hideEffect="fold" appendToBody="true" >
<ui:insert>
<ui:include src="contentsOfDialogTwo.xhtml"></ui:include>
</ui:insert>
</p:dialog>
</ui:composition>
</html>
contentsOfDialogTwo.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: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:composition>
<h:form id="innerWrapperFormForDialogTwoDueToAppendToBody">
<p:commandButton id="actionInsideDialogTwouButton"
action="#{nestedDialogsBean.actionOnClickOfDialogTwoItem()}"
onclick="alert('Button clicked')"
value="Invoke Backing Bean Action">
</p:commandButton>
</h:form>
</ui:composition>
</html>
Never use nested forms
appendToBody : Appends dialog as a child of document body.
When using it the rendered content of the dialog is being appended to the body , so if for example in your xhtml the dialog was wrapped by h:form and you using appendToBody="true" in the generated page the dialog wont be wrapped by the form tag
This is illegal in HTML and the behaviour is unspecified and dependent on the webbrowser used. The ajax link doesn't submit the form, it just collects the input values by JavaScript and then sends a XMLHttpRequest in the background.
why a:commandLink's action attribute works but h:commandLink's does not?
Multiple h:form in a JSF Page