This question already has answers here:
How to use <h:form> in JSF page? Single form? Multiple forms? Nested forms?
(2 answers)
Closed 6 years ago.
As per HTML standard nested form not allowed and JSF follow same thing but if we have design like below
MainPage.xhtml
<ui:composition template="../templates/home.xhtml">
<ui:define name="content">
<h:form>
<rich:panel>
..........................................
..........................................
</rich:panel>
<rich:panel>
<ui:insert name="createLinkTemplate">
<ui:include src="../pages/page.xhtml" />
</ui:insert>
</rich:panel>
<h:form>
</ui:define>
</ui:composition>
Content inside page.xhtml
<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"
xmlns:rich="http://richfaces.org/rich"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
</h:head>
<h:body>
<h:form id="formID">
<rich:panel>
..........................
............................
............................
</rich:panel>
</h:form>
</h:body>
</html>
is this come under the nested case ?
home-template.xhtml content
<?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:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich"
xmlns:c="http://java.sun.com/jsp/jstl/core">
...................................................
...................................................
...................................................
<rich:panel styleClass="tabs-main" id="tabsMain">
<h:form id="contentform">
<ui:insert name="content"/>
</h:form>
</rich:panel>
</h:body>
</html>
Along with that one more question First i am alnding to Main.xhtml page from here i am going to page.xhtml and when from there i am coming back all the value which i write in textbox or select from drop down gone and i got a empty form .
Forms are nested when they are nested in the resulting page - the shape of templates and includes has nothing to do with this.
Browser has no way of knowing where <form> tags come from. All it sees is that there are two form tags, one placed in the other.
Related
I am a beginner programming Java and I am doing a project using primefaces. I want to include another XHTML page in an XHTML page. The include page is in /WEB-INF/facelets/include.xhtml (It has some data from a Managed Bean)
In my "page.xhtml", at first, I put this line inside <ui:define name="content">:
<ui:include src="WEB-INF/facelets/include.xhtml" />
But, it does not work.
Later, I tried to do this inside <ui:define name="content">
<ui:include src="WEB-INF/facelets/include.xhtml">
<ui:param name="fullName" value="#{identityInformationBean.fullName}" />
</ui:include>
And in the "include.xhtml":
<h:outputText
rendered="#{fullName!=null}"
value="#{fullName}" />
But, it does not work too. Nevertheless, if I do this:
On "page.xhtml"
<ui:include src="WEB-INF/facelets/include.xhtml">
<ui:param name="fullName" value="Helen" />
</ui:include>
The "include.xhtml" receives the information correctly.
I'd tried to registering the include file as a tagfile, as suggest here How to include another XHTML in XHTML using JSF 2.0 Facelets?
But, it does not work.
Any idea to solve this problem? Thanks!
This is a piece of code from "include.xhtml":
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition 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:p="http://primefaces.org/ui">
<h:outputText
rendered="#{identityInformationBean.fullName!=null}"
value="#{identityInformationBean.fullName}" />
</ui:composition>
This is a piece of code from "page.xhtml":
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition 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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" template="templates/generaltemplate.xhtml">
<ui:define name="content">
<h2>
<h:outputText value="Identity Information"/>
</h2>
</ui:define>
</ui:composition>
I'm not sure why you need ui:param. Think of the include file as just saving you the trouble of typing that included code into all the pages that might use it. You don't need to pass it a parameter.
What about using a single line of code: <ui:include src="WEB-INF/facelets/include.xhtml"/> And the include file would have <h:outputText value="#{identityInformationBean.fullName}"/>
I am trying include a common page into a template but all I get is a blank page without error.
common.xhtml actually has the content that indicate in the template.xhtml. It seems the template.xhtml doesn't recognize the two level include.
template.xhtml
<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:s="http://jboss.com/products/seam/taglib"
xmlns:c="http://java.sun.com/jstl/core"
xmlns:ub="http://jboss.com/products/seam/ub-taglib"
xmlns:rich="http://richfaces.ajax4jsf.org/rich">
<head>
<ui:insert name="css" />
<ui:insert name="header" />
</head>
<body>
<ui:insert name="body" />
</body>
</html>
custom.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
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:rich="http://richfaces.ajax4jsf.org/rich"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
xmlns:c="http://java.sun.com/jstl/core"
template="template.xhtml">
<ui:define name="css">
<link rel="stylesheet" type="text/css" href="/custom.css/>
</ui:define>
<ui:include src="common.xhtml" />
</ui:composition>
common.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
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:rich="http://richfaces.ajax4jsf.org/rich"
xmlns:a4j="https://ajax4jsf.dev.java.net/ajax"
xmlns:c="http://java.sun.com/jstl/core"
template="template.xhtml">
<ui:define name="header">
<h1>header</h1>
</ui:define>
<ui:define name="body">
<table><tr><td>Table</td></tr></table>
</ui:define>
</ui:composition>
This indeed won't work. The <ui:define> is supposed to be used in a template client (i.e. a page with <ui:composition template="...">), not in an include file (i.e. a page with <ui:composition> without template). You can however just "extend" from existing master templates.
Remove from custom.xhtml:
<ui:include src="common.xhtml" />
Change in common.xhtml
template="custom.xhtml"
And open common.xhtml instead of custom.xhtml in browser.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
Unrelated to the concrete problem, to prevent the enduser form being able to open custom.xhtml or template.xhtml directly in browser, it's recommended to move them into the /WEB-INF folder. Further, are you aware of the <h:head> and <h:outputStylesheet> components? I suggest to make use of them. Also, having a <h1> to ultimately end up in <head> makes no sense. Perhaps you meant the <ui:insert name="header"> to be inside <body>? Further, you could easily put that <h1> in the template so that you don't need to repeat them in every template client.
/WEB-INF/templates/template.xhtml
<html ...>
<h:head>
</h:head>
<h:body>
<ui:insert name="header" />
<ui:insert name="body" />
</body>
</html>
/WEB-INF/templates/custom.xhtml (CSS file is placed in /resources folder)
<ui:composition ... template="/WEB-INF/templates/template.xhtml">
<ui:define name="header">
<h1><ui:insert name="custom-header" /></h1>
</ui:define>
<ui:define name="body">
<h:outputStylesheet name="custom.css" target="head" />
<ui:insert name="custom-body" />
</ui:define>
</ui:composition>
/page.xhtml
<ui:composition ... template="/WEB-INF/templates/custom.xhtml">
<ui:define name="custom-header">
header
</ui:define>
<ui:define name="custom-body">
<table><tr><td>Table</td></tr></table>
</ui:define>
</ui:composition>
See also:
Which XHTML files do I need to put in /WEB-INF and which not?
How to reference CSS / JS / image resource in Facelets template?
So I have:
<!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">
<h:body>
<ui:composition template="template.xhtml">
<ui:define name="content">
<h:outputText value="Test!!!" />
</ui:define>
</ui:composition>
</h:body>
</html>
as my main page on my website and on template.xhtml:
<div id="content">
<h:panelGroup layout="block" styleClass="centercss">
<ui:insert name="content" />
</h:panelGroup>
</div>
...in the middle of the footer and the header views.
Now if I try to change the template="template.xhtml" to template.jsf it does not appear anywhere... the way it is right now I get my 'content' page perfectly in the middle of header and footer on the eclipse preview, but on the browser there's no content at all.
Im using primefaces3.1.1 and I have javax.faces-2.1.14 + jsf-api and jsf-impl, so I think its primefaces 3 and JSF 2.
What is the problem here ?
I think you are using facelets (templating) in a wrong way. You should'nt have html and body tags on your main page. The page that will use the template must be defined in a <ui:composition> tag, and the template shall define the page as a whole (html, body, head tags, etc).
Example:
index.html
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui"
template="template.xhtml">
<ui:define name="content">
<h:outputText value="Test!!!" />
</ui:define>
</ui:composition>
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:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:body>
<div id="content">
<h:panelGroup layout="block" style="background-color: red;">
<ui:insert name="content" />
</h:panelGroup>
</div>
</h:body>
</html>
I have such situation situation:
in file form.xhtml i have form used for filter some tables, i gave button "filter" defined here.
in file tableOne.xhtml, tableTwo.html, .. i have dataTable with id "filterTable", i've also included form.xhtml into this page. all pages with dataTables includes form.xhtml and all dataTables on them have the same id "filterTable"
what i want to do is to update dataTable[#filterTable] on after filter button is pressed using ajax. button is created by <p:commandButton>. if form and datatable are defined in the same file, all i need is simply add update="filterTable" to my command bytton. but if i add it to button defined in form.xhtml i get "Cannot find component with identifier" error.
is it possible to dynamic update dataTables from outside xhtml files included on page? if it is, how can i do it?
Example:
test.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form id="dtForm">
<p:dataTable id="dataTable" />
</h:form>
<ui:include src="/include.xhtml" />
</h:body>
</html>
include.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form>
<p:commandButton value="button" update=":dtForm" />
</h:form>
</h:body>
</html>
I have problems including a facelet template. I wanted to split some content up, so that I can reuse it somewhere else.
So I changed this code:
<!DOCTYPE html>
<ui:composition 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"
template="/layout/template.xhtml">
<ui:define name="head">
<title>Title</title>
</ui:define>
<ui:define name="header">
<h3>Header</h3>
</ui:define>
<ui:define name="content">
<table><tr><td>table</td></tr></table>
</ui:define>
</ui:composition>
To this:
<!DOCTYPE html>
<ui:composition 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"
template="/layout/template.xhtml">
<ui:define name="head">
<title>Title</title>
</ui:define>
<ui:include src="/admin/admin_generic.xhtml"/>
</ui:composition>
And inside admin-generic.xhtml I wrapped the code in a ui:composition.
<ui:composition 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="header">
<h3>Header</h3>
</ui:define>
<ui:define name="content">
<table><tr><td>table</td></tr></table>
</ui:define>
</ui:composition>
But nothing is shown. I just get a blank page, with no errors. Is it wrong using ui:composition? I have tried with ui:component but that didn't help either.
Update: According to my Facelets Essentials Guide, it says:
The ui:include tag can be used to include another Facelets file into your
document. It simply includes whatever source file you specify. You can
include any Facelets file that has ui:component or ui:composition tags
(which trim the content outside themselves) or simply a fragment of
XHTML or XML.
Is that what is going on? Is the content outside of the include trimmed away? How can I just include the page, without the content outside being trimmed?
The <ui:define> has to be placed in an <ui:composition> or <ui:decorate> with a template containing the appropriate <ui:insert> tags. You've moved it to an <ui:composition> without a template. No template means no content.
Technically, to achieve your requirement, you have to replace the <ui:include> by <ui:insert>.
<!DOCTYPE html>
<ui:composition
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="template.xhtml">
<ui:define name="head">
<title>Title</title>
</ui:define>
<ui:insert />
</ui:composition>
And declare the above page (I assume it as somepage.xhtml) as template in admin_generic.xhtml.
<!DOCTYPE html>
<ui:composition
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="somepage.xhtml">
<ui:define name="header">
<h1>Header</h1>
</ui:define>
<ui:define name="content">
<table><tr><td>table</td></tr></table>
</ui:define>
</ui:composition>
Note that you have to open admin_generic.xhtml in the browser instead. If your intent is to open somepage.xhtml in browser, then the <ui:define> really has to stay in somepage.xhtml. You can however replace the body of <ui:define> by a simple <ui:include>.
<!DOCTYPE html>
<ui:composition
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="template.xhtml">
<ui:define name="head">
<title>Title</title>
</ui:define>
<ui:define name="header">
<h1>Header</h1>
</ui:define>
<ui:define name="content">
<ui:include src="admin_generic.xhtml" />
</ui:define>
</ui:composition>
It allows for <ui:composition>, so you don't necessarily need to put the <table> to root.
<!DOCTYPE html>
<ui:composition
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets">
<table><tr><td>table</td></tr></table>
</ui:composition>
I solved this by removing the <ui:composition> and the <ui:define> and just adding the namespace directly in the <table> like this:
<table class="adminform" xmlns="http://www.w3.org/1999/xhtml"
xmlns:s="http://jboss.com/products/seam/taglib"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j">
So now my page looks like this:
<ui:define name="content">
<ui:include src="/admin/admin_generic.xhtml" />
</ui:define>