I can't get facelets file to load into a template.
I have a content facelet called frontpage.xhtml that is set as the welcome page in web.xml. This loads the template. The template then is to include a number of other files. When they wouldn't load I pared it down to one (header.xhtml) to try to troubleshoot. It wouldn't even load when I put the header xhtml file in the same directory as the template and frontpage file.
When the app is run the frontpage.xhtml is run inside the template. I can see this because I can see the effects of the css loaded in the template. And I can see the "Hello World" in the title bar and "Hello World!" displayed in the page. But the header is not loaded at the top.
I tried removing all div and class info from the template body as well. There are none in the facelets. It didn't help.
Can someone provide some insight here? Maybe I'm off base, but I thought I could define the template this way so that I could call different facelets that load into the template's content area.
This app does run correctly without the templating. i.e. when everything is lumped into one page, which I am trying get away from for modularity.
Directory Structure (starting at the root for web pages)
/frontpage.xhtml
/soulard_base_template.xhtml
/sections/base/header.xhtml
web.xml (what I think are the relevant sections)
<context-param>
<param-name>javax.faces.PROJECT_STAGE</param-name>
<param-value>Development</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<!--<welcome-file>faces/welcome.xhtml</welcome-file>-->
<welcome-file>faces/frontpage.xhtml</welcome-file>
</welcome-file-list>
frontpage.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 template="soulard_base_template.xhtml">
<ui:define name="windowTitle">
Hello World
</ui:define>
<ui:define name="content">
<h2>Hello World!</h2>
</ui:define>
</ui:composition>
</body>
</html>
soulard_base_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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="windowTitle" /></title>
<link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if lt IE 8]>
<link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->
<link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />
</h:head>
<h:body>
<div class="container showgrid" title="Container">
<div class="span-24" title="Banner">
<ui:insert name="header">
<ui:include src="sections/base/header.xhtml"/>
</ui:insert>
</div><!-- End of Banner -->
<div class="span-16" title="Content Column">
<ui:insert name="content" />
</div><!-- End of Centre Column -->
</div><!-- End of Container -->
</h: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"
xmlns:h="http://java.sun.com/jsf/html">
<body>
<ui:composition>
<ui:define name="header">
<h2>Header</h2>
<h:graphicImage url="/images/header.png"
width="950"
height="175"/>
</ui:define>
</ui:composition>
</body>
</html>
The problem is the additional "define" entry in header.xhtml <ui:define name="header">. You use ui:define usually to replace some content from a template, but note the outer <ui:composition> does not have a reference to a template. So, if there is no template, facelets doesn't know where to apply it, and finally the inner content is never used.
OK, it figures. After hours of screwing around and frustration I ask the question on stackoverflow. Then I walk away for a few hours. Go to the gym, relax, come back and figure it out in 10 minutes.
Unlike the text book (Core JSF 2.0) I removed a bunch of inserts and defines and it worked.
e.g. the header.xhtml looks like this now:
<?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">
<body>
<ui:composition>
<h2>Header</h2>
<h:graphicImage url="/images/williamrosmusdotcomHeader.png"
width="950"
height="175"/>
</ui:composition>
</body>
</html>
and the template looks 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"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title><ui:insert name="windowTitle" /></title>
<link href="${facesContext.externalContext.requestContextPath}/css/print.css" rel="stylesheet" type="text/css" media="print" />
<link href="${facesContext.externalContext.requestContextPath}/css/screen.css" rel="stylesheet" type="text/css" media="screen, projection" />
<!--[if lt IE 8]>
<link href="${facesContext.externalContext.requestContextPath}/css/ie.css" rel="stylesheet" type="text/css" media="screen, projection" />
<![endif]-->
<link href="${facesContext.externalContext.requestContextPath}/css/soulardtheme.css" rel="stylesheet" type="text/css" media="screen, projection" />
<link href="${facesContext.externalContext.requestContextPath}/css/soulard_base.css" rel="stylesheet" type="text/css" media="screen, projection" />
</h:head>
<h:body>
<div class="container showgrid" title="Container">
<div class="span-24" title="Banner">
<ui:include src="sections/base/header.xhtml"/>
</div><!-- End of Banner -->
<div class="span-24" title="Menu">
<ui:include src="sections/base/menu.xhtml"/>
</div><!-- End of Menu -->
<div class="span-4" title="Left Column">
<ui:include src="sections/base/leftsidebar.xhtml"/>
</div><!-- End of Left Column -->
<div class="span-16" title="Content Column">
<ui:insert name="content" />
</div><!-- End of Centre Column -->
<div class="span-4 last" title="Right Column">
<ui:include src="sections/base/rightsidebar.xhtml"/>
</div><!-- End of Right Column -->
<div title="Footer" class ="span-24">
<ui:include src="sections/base/footer.xhtml"/>
</div><!-- End of Footer -->
</div><!-- End of Container -->
</h:body>
</html>
So now the question is, what is the point of the "insert" and "define" since all they seemed to do is to make things not work. That is for another day.
Related
When I upload my custom XML to Blogger, the code validates, but my <b:section>s do not show up in the Layout Editor for adding Widgets.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin>
<![CDATA[
]]>
</b:skin>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"/>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body>
<header role="banner">
<b:section class='header container' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='' type='Header'></b:widget>
</b:section>
</header>
<nav>
<b:section class='tabs container' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'></b:widget>
</b:section>
</nav>
<div class='container'><div class='row'><!-- start container for page + advertiser -->
<section id="page" role="main" class='col-md-8'>
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'></b:widget>
</b:section>
</section>
<section id="advertisement" role="complimentary" class='col-md-4'>
<b:section class='sidebar' id='sidebar-right-1' maxwidgets='' showaddelement='yes'>
<b:widget id='HTML-1' type='HTML'></b:widget>
</b:section>
<b:section class='sidebar' id='sidebar-right-2' maxwidgets='' showaddelement='yes'>
<b:widget id='HTML-2' type='HTML'></b:widget>
</b:section>
</section>
</div></div><!-- end container for page + advertiser -->
<footer role="contentinfo">
<b:section class='footer container' id='footer' maxwidgets='' showaddelement='yes'></b:section>
</footer>
</body>
</html>
The layout page is cached. Try after editing f.e. shift-F5 (in Chrome) to clear the cache.
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.
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.
I can't figure out how to include a piece of HTML (say a little table) in each of the pages of my web app.
Say this is the table I want to include, so I made a template:
<?xml version ... ?>
<!DOCTYPE ...">
<html xmlns="... all the required namespaces ...">
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
then I have the code that uses it:
<?xml version ...?>
<!DOCTYPE ...">
<html xmlns="... all required namespaces ...">
<body>
<h3>Will this be displayed?</h3>
<ui:composition template="tableTemplate.xhtml">
<h4>Will this?</h4>
</ui:composition>
</body>
</html>
the page that I get on the browser is:
<html xmlns ...>
<head>
</head>
<body>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
so there is the table but all the rest is missing!
In the master template, you need to use <ui:insert> to declare the place where the template definitions will be inserted.
template.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">Default title</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="body">Default body</ui:insert>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</h:body>
</html>
In the template client, you need to use <ui:define> to define the template definitions which are to be inserted in the places declared in the template.
page.xhtml
<ui:composition template="template.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">
Define your page title here
</ui:define>
<ui:define name="body">
<h3>Define your body content here</h3>
<p>Blah blah</p>
</ui:define>
</ui:composition>
No HTML around <ui:composition> is necessary. They will be ignored anyway. Just don't put any HTML there, that's only waste of space and confusing for yourself.
When you open page.xhtml in the browser, the following will end up in the rendered output:
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Define your page title here</title>
</head>
<body>
<h3>Define your body content here</h3>
<p>Blah blah</p>
<table>
<tr><td>first</td><td>second</td><td>third</td><td>...</td></tr>
</table>
</body>
</html>
TRY
<ui:include src="tableTemplate.xhtml"/>
and in your tableTemplate.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
put your template here
</ui:composition>
I created template (template.xhtml) which resides in root context of application.
I wanted to apply it to page (newTemplateClient.xhtml) which resides in the folder 'public'.
So newTemplateClient.xhtml looks like this:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://www.w3.org/1999/xhtml"
template="./../template.xhtml">
.
.
.
I have links to this page in index.xhtml:
<h:link outcome="/public/newTemplateClient" value="Login"/>
<h:commandLink action="/public/newTemplateClient?faces-redirect=true" value="Login"/>
<h:commandLink action="/public/newTemplateClient" value="Login"/>
And only last works. When I use first two page displays but template isn't applied.
So it works only when page is redirected, not forwarded. Why?
Thanks in advance
Okay it seems that template is applied but css files aren't. I'm using NetBeans wizards to create templates and templates clients. The css files are located /resources/css/ directory.
They are referenced from template.xhtml:
`
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
<title><ui:insert name="title">template</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:insert name="top">Top</ui:insert>
</div>
<div id="content" class="center_content">
<ui:insert name="content">Content</ui:insert>
</div>
<div id="bottom">
<ui:insert name="bottom">Bottom</ui:insert>
</div>
</h:body>
`
How can I reference that css files other way?
Folder structure:
Root
public
newClientTemplate.xhtml
template.xhtml
index.xhtml
Okay problem solved.
Solution was to use:
<h:outputStylesheet name"css/default.css"/>
<h:outputStylesheet name"css/cssLayout.css"/>
Instead:
<link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
<link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />