Structure of my templates
layout.xhtml
<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">
...
<h:form id="headerForm" />
...
<ui:insert name="content">Put default content here, if any.</ui:insert>
...
integration.xhtml
<ui:composition template="/WEB-INF/templates/layout.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"
xmlns:c="http://java.sun.com/jstl/core">
<ui:define name="content">
...
<ui:insert name="tabContent">Tab content</ui:insert>
...
</ui:define>
customerSide.xhtml
<ui:composition template="/pages/protected/integration/integration.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="tabContent">
...
</ui:define>
</ui:composition>
When i go to the page http://localhost:8080/dcc/pages/protected/integration/customerSide.xhtml
i get this exception
java.lang.IllegalStateException: Component ID headerForm has already been found in the view.
It is not problem with headerForm. If i remove it it will fail on next component with id.
How do i nest these templates without getting the error?
Related
Is possible to have a style class and script function in section head /head where the style class and script function is defined in xhtml file that is included in another xhtml file.
Here an example:
File template.xhtml
<h:body>
<ui:insert name="content" >
Template content
</ui:insert>
</h:body>
File content.xhtml
<ui:composition template="template.xhtml">
<h:outputScript target="head">
function contentJS()
{
}
</h:outputScript>
<ui:define name="content">
<ui:include src="subcontent.xhtml"/>
</ui:define>
</ui:composition>
File subcontent.xhtml
<ui:composition ...>
<h:outputScript target="head">
function subcontentJS()
{
}
</h:outputScript>
<style>
.mystyleclass {color:red}
</style>
<div class="mystyleclass">Text color red</div>
</ui:composition>
In the result xhtml, i have only one javascript funtion and not the two javascript function (contentJS and subcontentJS) and mystyleclass not is in the head section.
You have two issues in your markup:
The h:outputScript block defining contentJS is not within a <ui:define.../> block and thus not incorporated into the rendered output.
The style is a simple html element not placed into the head but directly rendered. Change this to h:outputStylesheet target="head".
template.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://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:insert name="content">
Template content
</ui:insert>
</h:body>
</html>
content.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://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:outputScript target="head">
function contentJS()
{
}
</h:outputScript>
<ui:include src="subcontent.xhtml" />
</ui:define>
</ui:composition>
</h:body>
</html>
subcontent.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://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head />
<h:body>
<ui:composition>
<h:outputScript target="head">
function subcontentJS()
{
}
</h:outputScript>
<h:outputStylesheet target="head">
.mystyleclass {
color: red
}
</h:outputStylesheet>
<div class="mystyleclass">Text color red</div>
</ui:composition>
</h:body>
</html>
This question already has answers here:
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)
(3 answers)
Closed 5 years ago.
I have the following JSF 2 template Page with primefaces menu, I want to partially update the cenral centent of the page onclick of links from left Menu, I don't want to update the entire page.I have gone throu the posts in stackoverflow, they are suggetign that I should have a form name in the central_body_div, but I don't want to sepcify a form in the central_body_div, as the dynamically loaded page will have form with it's own name, I should be able to submit the form in the page appearing dynamically in central_body_div div.
First of all the Layout page itself not loading , giving the below exception.
Cannot find component with identifier "central_body_div" referenced from "leftMenuFormId:menuItem1".
Experts can you give a solution for this problem. would apprecite your replies.
<?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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="cssLayout.css" library="css" />
<h:outputStylesheet name="default.css" library="css" />
<title> Lightweight Mediation - Secure Pages </title>
</h:head>
<h:body id="securebody">
<div id="top">
<ui:insert name="top">
<ui:include src="/secure/home/header.xhtml" />
</ui:insert>
</div>
<div id="content_holder">
<div id="left">
<ui:insert name="left">
<ui:include src="/secure/home/leftMenu.xhtml" />
</ui:insert>
</div>
<div id="central_body_div" class="left_content">
<ui:insert name="content">Content</ui:insert>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="/secure/home/footer.xhtml" />
</ui:insert>
</div>
</h:body>
</f:view>
</html>
My leftMenu.xhtml content is below
<?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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition id="leftMenuCompositionId">
<h:form id="leftMenuFormId">
<p:menu id="lMenuId">
<p:menuitem id="menuItem1" value="page1" action="page1" update="central_body_div" partialSubmit="true"/>
<p:menuitem id="menuItem2" value="page2" action="page2" update="central_body_div" partialSubmit="true" />
</p:menu>
</h:form>
</ui:composition>
</h:body>
</html>
Change your code with following and try again,
leftMenu.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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition id="leftMenuCompositionId">
<h:form id="leftMenuFormId">
<p:menu id="lMenuId">
<p:menuitem id="menuItem1" value="page1" action="page1" update=":form1:central_body_div" partialSubmit="true"/>
<p:menuitem id="menuItem2" value="page2" action="page2" update=":form1:central_body_div" partialSubmit="true" />
</p:menu>
</h:form>
</ui:composition>
</h:body>
and your template xhtml with,
<?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"
xmlns:f="http://java.sun.com/jsf/core">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="cssLayout.css" library="css" />
<h:outputStylesheet name="default.css" library="css" />
<title> Lightweight Mediation - Secure Pages </title>
</h:head>
<h:body id="securebody">
<div id="top">
</div>
<div id="content_holder">
<div id="left">
<ui:insert name="left">
<ui:include src="leftMenu.xhtml" />
</ui:insert>
</div>
<h:form id="form1" >
<h:panelGroup id="central_body_div">
<script type="text/javascript">alert('Content Updated')</script>
<ui:insert name="content">Content</ui:insert>
</h:panelGroup>
</h:form>
</div>
<div id="bottom">
</div>
</h:body>
</f:view>
It's checked and working.
Warning! View build time vs view render time problem ahead!
The usual mistake here is performing navigation, or as you say, refreshing a central holder with <ui:insert>/<ui:define>, which is a view build tag, not a view render UI component. So it simply won't be recalculated on AJAX requests, as your component tree will be restored from view state, and will not be built afresh.
So, just don't do that mistake, by making AJAX navigation, which is defective in many ways (SEO, non-bookmarkability, not user friendliness, etc.) and perform navigation by the components designed for that, like <h:link>, or <p:menuItem> that's generating plain get as.
As per your comment you don't fully distinguish between navigation links and command links. The former are used to perform navigation only and generate bookmarkable a elements, while the latter are used to (partially) submit the form, do business job, and (partially) update the view, or perform navigation.
What you need to do is simply to distinguish between those cases. For navigation use <h:link>/<p:menuitem outcome="/your-view-id">, for POST actions, use <p:commandButton>/<p:menuitem action(listener)="#{bean.action(listener)}" instead.
In this case the templating structure doesn't matter as long as you don't expect tag handlers to be refreshed on AJAX requests.
I have placed the solution I arrived from the discussion in this post and reference from other posts. the page we are including can have different form names.
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: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">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<h:outputStylesheet name="cssLayout.css" library="css" />
<h:outputStylesheet name="default.css" library="css" />
<title> Lightweight Mediation - Secure Pages </title>
</h:head>
<h:body id="securebody">
<div id="top">
<ui:insert name="top">
<ui:include src="header.xhtml" />
</ui:insert>
</div>
<div id="content_holder">
<div id="left">
<ui:insert name="left">
<ui:include src="leftMenu.xhtml" />
</ui:insert>
</div>
<div id="center" class="left_content">
<h:panelGroup id="central_body_div">
<ui:include src="#{templateBean.page}.xhtml" />
</h:panelGroup>
</div>
</div>
<div id="bottom">
<ui:insert name="bottom">
<ui:include src="footer.xhtml" />
</ui:insert>
</div>
</h:body>
</f:view>
</html>
leftMenu.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:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition id="leftMenuCompositionId">
<h:form id="leftMenuFormId">
<f:ajax render=":central_body_div">
<h:commandLink value="page1" action="#{templateBean.setPage('page1')}" /><br></br>
<h:commandLink value="page2" action="#{templateBean.setPage('page2')}" />
</f:ajax>
</h:form>
</ui:composition>
</h:body>
</html>
Page 1
<?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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition>
<h1>Page One</h1>
</ui:composition>
</h:body>
</html>
Page 2
<?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"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition >
<h:form id="form1" >
<h1>Page Two</h1>
</h:form>
</ui:composition>
</h:body>
</html>
package ae.co.gui.beans;
import javax.inject.Named;
import javax.enterprise.context.SessionScoped;
import java.io.Serializable;
import javax.annotation.PostConstruct;
import javax.faces.event.ActionEvent;
#Named(value = "templateBean")
#SessionScoped
public class TemplateBean implements Serializable {
private String page;
public TemplateBean() {
}
#PostConstruct
public void init() {
this.page = "page1"; // Ensure that default is been set.
}
public String getPage() {
return page;
}
public void setPage(String page) {
this.page = page;
}
}
Late to the party... fixing an application for a client currently and face this issue. Didn't like the idea of adding a form. They use primefaces, not sure if this is only unique to them but
<p:commandButton ... update="#(:central_body_div)"/>
fixed the problem in my case.
this is a summary of what i understood:
ui:decorate
can use ui:define
can use ui:param
can have external content
ui:composition
can use ui:define
can use ui:param
-> can NOT have external content
ui:include
-> can NOT use ui:define
can use ui:param
can have external content
assumed these, i can use
ui:decorate as ui:composition
<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">
<!-- no content here -->
<ui:decorate template="templates/page.xhtml">
<ui:define name="test">
<h:outputText value="#{someBean.someProperty}"/>
</ui:define>
</ui:decorate>
<!-- no content here -->
</html>
ui:decorate as ui:include
<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:panelGroup>...</h:panelGroup>
<ui:decorate template="fragments/page.xhtml">
<ui:param name="test" value="#{someBean.someProperty}"/>
</ui:decorate>
<h:panelGroup>...</h:panelGroup>
</html>
so, am i missing something? misunderstanding?
if i'm right, why are there 3 different components? (please do not say that they are used for different goals, if i'm right)
I have been playing with JSF and have a project working that has a header/footer/navigation/content
panels. The project, however, goes from page 1 to page 2, etc., with each page having a different layout. How can I create a reusable template that keeps the same look and feel from page to page, i.e., header/footer/navigation stay the same, but content is updated?
This sounds like a classic case of a master template. In such a template you put everything that's common to all pages and then your actual pages reference this template and "fill in the blanks". In a way it's the reverse of the also classic include.
E.g.
/WEB-INF/templates/masterTemplate.xhtml:
<!DOCTYPE html>
<html lang="en"
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"
>
<h:head>
<title>
<ui:insert name="title">Some title</ui:insert>
</title>
</h:head>
<ui:include src="header.xhtml"/>
<h:body>
<ui:insert name="content" />
</h:body>
<ui:include src="footer.xhtml"/>
</html>
A page uses this as follows, e.g.
/hello.xhtml
<ui:composition template="/WEB-INF/templates/masterTemplate.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"
>
<ui:define name="title">hello</ui:define>
<ui:define name="content">
Hi, this is the page
</ui:define>
</ui:composition>
I'm using RichFaces 4.1 and I found out for my template as shown below:
<!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:a4j="http://richfaces.org/a4j">
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
<h:body>
<ui:insert name="body">Default content</ui:insert>
</h:body>
</html>
It always add extra head info for me:
<link type="text/css" rel="stylesheet" href="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/DEFAULT/skinning.css" /><script type="text/javascript" src="/javax.faces.resource/jsf.js.jsf?ln=javax.faces"></script><script type="text/javascript" src="/org.richfaces.resources/javax.faces.resource/org.richfaces.staticResource/4.1.0.Final/PackedCompressed/packed/packed.js"></script>
If I take out this portion from template, those extra info will be disappear:
<h:head>
<title><ui:define name="title">Application Title</ui:define></title>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
With that extra info, the page renders better however if this page navigate to next page base on value return from form action (as defined in faces-config.xml), the component (e.g. a4j:commandButton ) will not work, need click twice to function.
Is that a bug? If you go to richfaces showcase and open the source, the meta info for head are diff. Any ideal why I get those extra meta info that seem buggy...
---- Some extra info ---
Hi Brendan
Thanks for the suggestion but not help...
[Template]
<!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:a4j="http://richfaces.org/a4j">
<f:view contentType="text/html">
<h:head>
<ui:insert name="head"></ui:insert>
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
<title><ui:insert name="title">CEA</ui:insert></title>
</h:head>
<h:body>
<div id="page">
<div id="header">
<div class="right-controls">
<ul class="top-links layout">
<li>Project Site
</li>
</ul>
</div>
</div>
<div id="page-content">
<ui:include src="/templates/includes/navigation.xhtml" />
<ui:insert name="body">
Body content missed
</ui:insert>
<div class="clear"></div>
</div>
<div id="footer">
<ui:insert name="footer"></ui:insert>
</div>
</div>
</h:body>
</f:view>
</html>
[p.xhtml]
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
template="/templates/template.xhtml">
<h:outputStylesheet>
.red {
color: red;
}
.green {
color: green;
}
</h:outputStylesheet>
<ui:define name="body">
<h:form>
<a4j:commandButton value="Store changes"
action="#{profileCreation.goNext}" />
</h:form>
</ui:define>
</ui:composition>
profileCreation.goNext only do one thing, return the success value:
public String goNext() {
return IdmConst.IDM_CREATE_PROFILES_SUCCESS;
}
[faces-config.xml]
<navigation-rule>
<display-name>p.jsf</display-name>
<from-view-id>/public/idm/p.xhtml</from-view-id>
<navigation-case>
<from-outcome>IDM_CREATE_PROFILES_SUCCESS</from-outcome>
<to-view-id>/jsf/idm/resetpwd.xhtml</to-view-id>
</navigation-case>
</navigation-rule>
[resetpwd.xhtm]
<!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"
xmlns:a4j="http://richfaces.org/a4j">
<ui:composition template="/templates/template.xhtml">
<ui:define name="head">
<style type="text/css">
.leftColumn {
width: 40%;
vertical-align: top;
text-align: left;
padding: 15px;
background: #00FFFF;
}
.rightColumn {
width: 60%;
vertical-align: top;
text-align: left;
padding: 15px;
}
.red {
color: red;
}
.green {
color: green;
}
</style>
</ui:define>
<ui:define name="title">Change / Rest Password</ui:define>
<ui:define name="body">
<h:form id="resetPwdForm">
<rich:graphValidator value="#{passwordValidationBean}" id="gv">
<rich:panel header="Change password" style="width:500px">
<rich:messages for="gv"/>
<rich:messages globalOnly="true"/>
<h:panelGrid columns="3">
<h:outputText value="Enter new password:" />
<h:inputSecret value="#{passwordValidationBean.password}" id="pass" />
<rich:message for="pass" />
<h:outputText value="Confirm the new password:" />
<h:inputSecret value="#{passwordValidationBean.confirm}" id="conf" />
<rich:message for="conf" />
</h:panelGrid>
<a4j:commandButton value="Store changes"
action="#{passwordValidationBean.storeNewPassword}" />
</rich:panel>
</rich:graphValidator>
</h:form>
</ui:define>
</ui:composition>
</html>
[passwordValidationBean]
I use the sample from richfaces showcase (http://richfaces-showcase.appspot.com/richfaces/component-sample.jsf?demo=graphValidator&skin=blueSky)
As you can see as defined in faces-config, after user click the button on p.xhtml it will go to resetpwd.xhtml, if I have .. defined in template, then the button on resetpwd.xhtml will not work properly, I need click twice then will process the request. Well, if I directly go to resetpwd.xhtml wthout go throgh p.xhtml, everything is working fine.
So I suspect the problem cause by the .. defined in template., with this xml element, page source willd isplay extra header info:
Must be some bug in richfaces state management or the extra meta info included in head. As mention if I directly go to resetpwd.xhtml, everything work fine (i.e. button on that page no need click twice to respond). If navigate from p.xhtml to resetpwd.xhtml will work fine if take out the ... from tempalte file, but if I do so then the page will not render with skin.