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>
Related
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.
I am using page templates in my application so I am using <ui:composition>, <ui:insert> and <ui:define>. For the title of the pages, I am following the same thing mentioned by BalusC here; but the title remains the same on each page. When I see the page source, the actual title is there. How can it happen that the title bar shows the same title on each page but the page source has the correct page title?
The template page MainTemplate.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:pe="http://primefaces.org/ui/extensions"
xmlns:f="http://java.sun.com/jsf/core" xml:lang="en" lang="en">
<h:head>
<title><ui:insert name="title">Place holder for title</ui:insert>
</title>
</h:head>
<h:body>
</h:body>
</html>
Second template which is using MainTemplate.xhtml -
Template1.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core" template="MainTemplate.xhtml">
<ui:define name="body">
<h:outputScript library="script" name="processcript.js" target="head" />
<h:form id="baseForm">
</h:form>
*some layout is defined here*
</ui:define>
</ui:composition>
The page where above template is being used:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:p="http://primefaces.org/ui"
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:pe="http://primefaces.org/ui/extensions"
xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<head></head>
<h:body>
<ui:composition template="/WEB-INF/templates/Template1.xhtml">
<ui:define name="title">
<h:outputText value="#{myBean.title}"></h:outputText>
</ui:define>
</ui:composition>
</h:body>
</html>
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 am using JSF to render an HTML page. I design the page like it :
<f:view xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="language" content="fr" />
<title><ui:insert name="title">My app</ui:insert></title>
</h:head>
<h:body>
<div id="top">
<ui:include src="/header.xhtml"/>
</div>
<h:panelGroup id="center" layout="block" >
<ui:insert name="center"/>
</h:panelGroup>
<div id="bottom">
<ui:include src="/footer.xhtml"/>
</div>
</h:body>
This template has some "client" pages, like this one :
<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"
template="/layouts/master.xhtml">
<ui:define name="center">
<ui:define name="title"><h:outputText value="#{myBean.description}"/></ui:define>
<ui:include src="#{myBean.url}"/>
</ui:define>
In the client, i have to add meta information in the header. It would be great if we have tag like outputScript or outputStylesheet which can be set everywhere in the document and rendered in the html "head" tag.
I have found nothing to do this. Is there a way to add tag in the header when i am in this situation ?
Thank you !
The <h:outputStylesheet> is always automatically relocated to <h:head>, so you don't need to worry about this. For <h:outputScript>, which is by default rendered at the same line as where it's been declared, you can just set the target attribute to head, this way it will automatically be relocated to the <h:head> as well.
<ui:define name="center">
<h:outputStylesheet name="css/style.css" />
<h:outputScript name="js/script.js" target="head" />
...
</ui:define>
For other HTML head meta information, whenever necessary for some reason, you could just declare another <ui:insert>.
<h:head>
<ui:insert name="htmlhead" />
</h:head>
which you can use as follows
<ui:define name="htmlhead">
<meta ... />
</ui:define>
See also:
How to reference CSS / JS / image resource in Facelets template?