Page breaks when updating #all forms - jsf

I have a simple composition with a menu, and the menu has a p:selectOneMenu for the locale
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view locale="#{sesion.locale}">
<h:head>
<title>Hello World JSF 2.3</title>
</h:head>
<h:body>
<ui:composition template="/template1.xhtml">
<ui:define name="contenido">
<h:form id="content">
<p:outputLabel value="#{i18n_base['helloworld']}"/>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</f:view>
</html>
The menu
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:o="http://omnifaces.org/ui"
xmlns:of="http://omnifaces.org/functions">
<f:view locale="#{sesion.locale}">
<h:head>
</h:head>
<h:body>
<h:form id="menu">
<p:menubar>
<p:submenu label="${i18n_menu['flujos']}">
<p:menuitem value="${i18n_menu['flujo.edicion']}" url="/frontend/gestion/flujo/lista.xhtml"/>
<p:menuitem value="${i18n_menu['flujo.creacion']}" url="/frontend/gestion/flujo/edicionFlujo.xhtml"/>
</p:submenu>
<f:facet name="options">
<p:selectOneMenu value="#{sesion.locale}" converter="localeConverter">
<p:ajax listener="#{sesion.localeCambiado}" update="#form"/>
<f:selectItems value="#{sesion.allLocales}" var="_locale" itemValue="#{_locale}" itemLabel="${i18n_menu['locale.' += _locale.language]}"/>
</p:selectOneMenu>
</f:facet>
</p:menubar>
</h:form>
<ui:insert name="contenido">Contenido</ui:insert>
</h:body>
</f:view>
</html>
And I get this page
With this code it works as expected: When I change the selected language the menu language is updated but the "helloworld" label is not affected.
But if I change the "update" attribute of the "p:ajax" component, when I update the value then the page breaks
What am I doing wrong?
I am using Primefaces 7.0 on WildFly 18.0.0.1

Related

Updating other file component when clicking the commandButton

I have the following situation: I want to update the content inside the "tpNavigationDetail" when clicking the commandbutton in the template_detail.xhtml.
query_overview.xhtml and query_detail.xhtml have the same QueryController.
How can I manage it with JSF?
query_detail.xhtml is inside the template_detail.xhtml
query_overview.xhtml is inside the template_navigation.xhtml
I appreciate any Help
query_detail.xhtml
<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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template_detail.xhtml">
<ui:define name="detailLeft">
...
</ui:define>
<ui:define name="detailRight">
......
</ui:define>
</ui:composition>
</h:body>
</html>
template_detail.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:tp="http://www.tp.de/facelets"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template.xhtml">
<ui:param name="renderHeader" value="true"/>
<ui:define name="frame">
<h:form id="form" enctype="multipart/form-data">
<p:panel rendered="#{p:ifAnyGranted(renderOnRole) or fn:contains(pageStyle, 'useNoRole')}" style="min-height:150px">
<p:commandButton update="#(*[id*=tpNavigationDetailContent])"
action="#{controller.update}"
value="#{desk_messages.map['button.save']}"
rendered="#{controller.updateMode}"
disabled="#{!controller.isEntityEditable}"
icon="ui-icon-check" />
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>
query_overview.xhtml
<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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions" xmlns:tpd="http://www.tp-dialog.de/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<ui:composition template="/prime/template/template_navigation.xhtml">
<ui:param name="controller" value="#{queryController}"/>
<ui:define name="customDetail">
<f:facet name="header">
<p:spacer width="32" height="32" styleClass="tpTitleIcon tpTitleIconExports" style="margin-right: 10px;" />
<h:outputText value="#{desk_messages.map['title.query']}"/>: <tp:outputText object="#{queryController.entity}"/>
<h:outputText value=" (#{myWithFailedStatusI18nCategoryModel.i18nCodeMap[queryController.entity.status]})"
rendered="#{queryController.entity.status != 'A'}"/>
</f:facet>
<ui:include src="/prime/query/query_result.xhtml"/>
</ui:define>
</ui:composition>
</h:body>
</html>
template_navigation.xhtml
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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:tp="http://www.tp.de/facelets" xmlns:p="http://primefaces.org/ui"
xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:c="http://java.sun.com/jsp/jstl/core"
xmlns:pe="http://primefaces.org/ui/extensions">
<h:body>
<ui:composition template="/prime/template/template.xhtml">
<ui:param name="renderHeader" value="true"/>
<ui:param name="autosize" value="true"/>
<ui:define name="frame">
<pe:layoutPane id="tpNavigationDetail" position="center" render="false">
<ui:insert name="customScript"/>
<h:form id="form" enctype="multipart/form-data">
<c:if test="${fn:contains(pageStyle, 'customDetail')}">
<p:panel id="tpNavigationDetailContent" style="min-height:150px">
<ui:insert name="customDetail"/>
</p:panel>
</c:if>
</h:form>
</pe:layoutPane>
<!-- tp navigation -->
<pe:layoutPane id="tpNavigationOverview" position="east" size="#{navigationSize}" minSize="#{navigationMinSize}" maxSize="#{navigationMaxSize}">
<f:facet name="header">
<ui:insert name="tpNavigationOverviewHeader"/>
</f:facet>
<ui:insert name="navigationOverview"/>
</pe:layoutPane>
</ui:define>
</ui:composition>
</h:body>
</html>

you wan to update "tpNavigationDetail" but you write this :-
update="#(*[id*=tpNavigationDetailContent])" ,
change update attribute like this
update="#(*[id*=tpNavigationDetail])"

JSF Primefaces and Bootsfaces

I have a problem.
I'm making a website with the layout of PrimeFaces, which loads a page in the center when I click on any menu item on the left, but when I use the theme of BootsFaces (<bnu: panel ....> </bnu: panel>, page load in the center but it is not another load, when I do not use the theme, everything works fine but the panel shown in plain text without style look = "success" for example.
<?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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:bnu="http://bootsfaces.net/ui">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>My Page</title>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false" >
<h1>PAGE</h1>
</p:layoutUnit>
<p:layoutUnit position="west" size="195" header="Panel" resizable="true" closable="false" collapsible="true" >
<h:form id="form" >
<p:menu>
<p:menuitem id="abc" value="Inicio" action="#{bean.page0()}" update=":content:pcenter" />
<p:submenu label="ABC" >
<p:menuitem id="X1" value="CC1" action="#{bean.page1()}" update=":content:pcenter"/>
<p:menuitem id="X2" value="CC2" action="#{bean.page2()}" update=":content:pcenter"/>
<p:menuitem id="X3" value="CC3" action="#{bean.page3()}" update=":content:pcenter"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Welcome user" >
<h:form id="content">
<p:panel id="pcenter">
<ui:include src="#{bean.page}.xhtml" />
</p:panel>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" header="Bottom" resizable="false" closable="false" collapsible="false">
<h:outputText value="South unit content." />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I try this and not show the style look="success" but show the title
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>
I try this, and the same
<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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</ui:composition>
And try this, working but after not load the pages in the center when click elements of left menu
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:bnu="http://bootsfaces.net/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<head>
</head>
<bnu:panel id="pdata" title="User data" collapsible="true" look="success">
<p:outputLabel value="Name" for="txt_name"/>
<p:inputText id="txt_name" label="Name" required="true">
</p:inputText>
</bnu:panel>
</html>

Actually, each of the three versions work. I've created a project based on your XHTML pages, and it runs flawlessly. Both with and without the PrimeFaces Bootstrap theme. So my best guess is there's a problem with your project setup.
I recommend you check out my example from https://github.com/stephanrauh/BootsFaces-Examples/tree/master/PrimeFacesLayout and try to find the difference to your project.

How to change the content of template dynamicallay using ui:insert and ui:define?

I am new this field.
I am using Facelets for template designing.
In my project,I need a template which is changing the content dynamically when click on p:menuitems with using ui:insert and ui:define.
I already tried this and its working fine like each p:menuitems clicks the page gets one refresh and then change the content.
But,I need to change the content of the template without get refresh of the page.
Here, I added my program.
home.xhtml
<ui:composition template="index.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets">
</ui:composition>
header.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">`enter code here`
<h:form>
<p:menu>
<p:menuitem value="One" url="/pages/one.xhtml"/>
<p:menuitem value="Two" url="/pages/two.xhtml"/>
<p:menuitem value="Three" url="/pages/three.xhtml"/>
</p:menu>
</h:form>
</ui:composition>
footer.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<p>This is Footer</p>
</ui:composition>
template.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>Template Page</title>
</h:head>
<h:body>
<div id="headerId">
<p:panel>
<ui:include src="/pages/header.xhtml"/>
</p:panel>
</div>
<div id="contentId">
<ui:insert name="content">
<p:panel>
<p>Default Content</p>
</p:panel>
</ui:insert>
</div>
<div id="footerId">
<p:panel>
<ui:include src="/pages/footer.xhtml"/>
</p:panel>
</div>
</h:body>
</html>
one.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<ui:define name="content">
<p>Change content from one page</p>
</ui:define>
</ui:composition>
two.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<p>Change content from two page</p>
</ui:define>
</ui:composition>
three.xhtml
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<p>Change content from three page</p>
</ui:define>
</ui:composition>
Here,The home.xhtml is my welcome page.
please,give me an idea to solve this.
Thanks in advance.

JSF templating - header doesn't show while faces-redirect is not set as "true" Primefaces

I am writing a simple page using JSF and Primefaces.
This is my template:
<?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:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<p:layout fullPage="true">
<p:layoutUnit position="north" header="North - header" style="font-size: 15px;">
<h:form>
<ui:include src="header.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" header="West - menu" style="font-size: 15px;">
<h:form>
<ui:include src="menu.xhtml"/>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center" header="Center - content" style="font-size: 15px;">
<ui:insert name="content"/>
</p:layoutUnit>
<p:layoutUnit position="east" header="East - nothing" style="font-size: 15px;">
</p:layoutUnit>
<p:layoutUnit position="south" header="South - footer" style="font-size: 15px;">
<ui:include src="footer.xhtml"/>
</p:layoutUnit>
</p:layout>
</h:head>
<h:body>
</h:body>
</html>
I have made simple menu:
<?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:p="http://primefaces.org/ui">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition>
<p:menu>
<p:submenu label="Main">
<p:menuitem value="Show main" action="glowna?faces-redirect=true"/>
<p:menuitem value="Show resultPage" action="resultPage?faces- redirect=true"/>
<p:menuitem value="Pictures" action="obrazek?faces-redirect=true"/>
</p:submenu>
</p:menu>
</ui:composition>
</h:body>
</html>
And now: I wanted to add some content to "content" unitlayout. I made simple page which uses the template below. If I add to the menuitem action like: action="glowna", when I click that item while my page is running, all the template is shown but without header part.
The left, right, center and footer part is shown properly, but header disappears.
However, if I add to the action atribute faces-redirect=true (action="glowna?faces-redirect=true") everything works fine.
This is my content page: glowna.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">
<h:head>
<title>Simple JSF Facelets page</title>
</h:head>
<h:body>
<ui:composition template="template.xhtml"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<h1>Oto zawartość strony głownej - content</h1>
<p:growl id="growl" showDetail="true"/>
<p:panelGrid columns="1">
<p:inputText value="#{user.imie}" required="true"/>
<p:inputText value="#{user.nazwisko}" required="true"/>
<p:commandButton value="Show it!" actionListener="#{user.click}" update="growl"/>
</p:panelGrid>
</ui:define>
</ui:composition>
</h:body>
</html>
Anyone knows why?
Be grateful for ansewers :)

Forwarding template parameters and defines

Consider a nested template:
Base.xhtml:
...
<h:outputText value="#{uiParamter}"/>
<ui:insert name="header"/>
... etc.
Layout.xhtml:
<ui:composition template="Base.xhtml">
...
<ui:insert name="content"/>
... etc.
</ui:composition>
When now defining a template client like this:
<ui:composition template="Layout.xhtml">
<ui:define name="header"> foo </ui:define>
<ui:define name="content"> foo2 </ui:define>
<ui:param name="uiParameter" value="foo3"/>
</ui:composition>
does one have to forward the <ui:param> or <ui:define> in the Layout.xhtml to the Base.xhtml template by redefining it. e.g:
<ui:param name="uiParameter" value="#{uiParameter}">
<ui:define name="header">
<ui:insert name="header"/>
</ui:define>
One could also rephrase this question as: "Do template parameters behave cascading?"

The answer is YES. I've run the following code on JBoss AS 7.0:
nest1.xhtml:
<!DOCTYPE html>
<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:head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><ui:insert name="title">
Nested
</ui:insert></title>
</h:head>
<h:body>
<ui:insert name="main" />
<h:outputText value="#{uiParam}"/>
</h:body>
</html>
nest2.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="nest1.xhtml">
<ui:define name="main">
<p>Nested templated content.</p>
</ui:define>
</ui:composition>
nest3.xhtml:
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets" template="nest2.xhtml">
<ui:define name="title">Nested Template</ui:define>
<ui:param name="uiParam" value="ui param value" />
</ui:composition>
which was rendered as:

Resources