I need to create a layout like this but with all the containers on separated files, like:
top.xhtml
<p:layout fullPage="true">
<p:layoutUnit position="north" header="#{support.applicationTitle}">
<h:form>
<p:menubar>
<p:menuitem value="Quit" icon="ui-icon-close" action="#{userController.logOut()}" />
</p:menubar>
</h:form>
</p:layoutUnit>
Without the </p:layout> because it will be close on my footer.xhtml like:
<p:layoutUnit position="south" header="© 2012 - 2012 PORTAL DE IDEIAS">
</p:layoutUnit></p:layout>
I have tried with both files but I get a error telling me that I need to close the layout tag, what is correct, but how can I solve my problem? Is this the best approach for a template? And another problem is that the layout tag require a center layoutUnit
This is indeed not the right approach. Your template has to be XML well formed. I suggest to create a master template file instead if all you want is to only specify the center unit.
Taking the example on the showcase site, that should look like this:
/WEB-INF/templates/layout.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"
xmlns:p="http://primefaces.org/ui"
>
<h:head>
<title>Title</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
<h:outputText value="Top unit content." />
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="true" closable="true" collapsible="true">
<h:outputText value="South unit content." />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
<h:form>
<ui:include src="../templates/themeMenu.xhtml" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="200" header="Right" resizable="true" closable="true" collapsible="true" effect="drop">
<h:outputText value="Right unit content." />
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">Put default content here, if any.</ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Note the <ui:insert> in the center unit.
The template client can then just look like this:
/page.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"
>
<ui:define name="content">
<p>Here goes your view-specific content.</p>
</ui:define>
</ui:composition>
which you open by http://example.com/contextname/page.xhtml.
See also:
How to include another XHTML in XHTML using JSF 2.0 Facelets?
If you're looking for live open source examples of advanced Facelets templating, you may find OmniFaces showcase app useful.
Related
I have written a template page for using in every page.In this template includes a left div a haed div and a footer.So central is for my forms.But forms are viewing below of footer.How to solve this layout problem.Here is my using of template
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Hakkında</title>
</h:head>
<body>
<ui:composition template="/templates/mainTemplate.xhtml">
<h:form>
Some components
</h:form>
</ui:composition>
</body>
Add in template space for body
<ui:insert name="body">Default Body</ui:insert>
and redefine it in your view (page)
<ui:define name="body">
<h:form id="homeForm">
<!-- your components -->
</h:form>
</ui:define>
I am trying to include an xhtml which is on another domain (on the same server) inside my .xhtml.
The sample code is the following
<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:head>
<h:outputStylesheet library="css" name="style.css" target="body" />
</h:head>
<h:body>
<p:layout id="page" fullPage="true">
<!-- North -->
<p:layoutUnit position="north" size="10%"
style="border: none !important">
</p:layoutUnit>
<!-- South -->
<p:layoutUnit position="south" size="5%" collapsible="true" gutter="0">
<h:outputText value="South unit Content." />
</p:layoutUnit>
<!-- West -->
<p:layoutUnit position="west" size="200" header="Menu"
collapsible="true" effect="slide" styleClass="menuBar">
<h:form id="form1">
<p:panelMenu>
<p:submenu label="Students">
<p:menuitem value="page1" update=":centerpanel"
actionListener="#{layoutController.setNavigation('page2.xhtml')}" />
<p:menuitem value="page2" update=":centerpanel"
actionListener="#{layoutController.setNavigation('http://localhost:8080/externalsite/newpage.xhtml')}" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<!-- Center -->
<p:layoutUnit id="center" position="center">
<h:panelGroup id="centerpanel" layout="block">
<ui:include id="include" src="#{layoutController.navigation}" />
</h:panelGroup>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
So basically in the center layout unit I am trying to include the external .xhtml (which is on the same domain however).
JSF templates can be included only, if they are available within the same classloader.
If you want to embed an external page into your page, you need to user iframe.
For example:
<iframe src="http://www.primefaces.org/showcase/ui/home.jsf"/>
allows you to embed PrimeFaces showcase withing your page.
This is not possible. With the ui:include Tag you can only include Code Snippets from other xhtml files. What you are trying to do is accessing Code from another domain, but what you see in the final web app is only the generated HTML and Javascript Code. You cannot work with that in your application, as you have no access to the sourcecode.
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 have the following template:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>
<ui:insert name="title" />
</title>
</h:head>
<h:body>
<div id="header">Some header</div>
<div id="content">
<ui:insert name="content" />
</div>
<div id="footer">Some Footer</div>
</h:body>
</html>
and the following client template:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
template="templates/template.xhtml">
<ui:define name="title">
English Online
</ui:define>
<ui:define name="content">
<h1>Кириллический шрифт</h1>
</ui:define>
</ui:composition>
Now the problem is:
When I invoke the master template from the composite with the Cyrillic font in "h1"-tag, the browswer gives out:
com.sun.org.apache.xerces.internal.impl.io.MalformedByteSequenceException: Invalid byte 2 of 2-byte UTF-8 sequence.
Even though I use the Cyrillic font in the master-client template it is ok. And when the client template h1-tag contains English it also works.
How can I fight this problem?
That can happen if those files are not saved as UTF-8. The answer depends on the editor used to save the files. If it's for example Eclipse (your question history hints that you're using it or are at least familiar with it), then you need to change Window > Preferences > General > Workspace > Text file encoding to UTF-8.
After making this change, edit and re-save the file(s).
See also:
Unicode - How to get the characters 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>