I'm using JSF2 with Primefaces3.4.2 I have created a layout in layoutComplex.xhtml as below:
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="EmulateIE8" />
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>PrimeFaces - ShowCase</title>
</f:facet>
<h:outputScript library="js" name="jscolor.js" target="head" />
<script type="text/javascript">
function handleValidateRequest(xhr, status, args) {
//alert("");
//jscolor.addEvent(window, 'load', jscolor.init);
}
</script>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit id="left" position="west" size="300" resizable="true"
closable="true" collapsible="true" header="Options" minSize="200">
<h:form>
<p:slideMenu style="width:235px;margin-left:-3px;margin-top:-6px;"
id="tree">
<p:submenu label="Product" icon="ui-icon-play">
<p:menuitem value="test color picker"
update=":centerContentPanel " action="#{navigationBean.doNav}"
oncomplete="handleValidateRequest(xhr, status, args)"
icon="ui-icon-arrow-4-diag">
<f:param name="urlParam" value="colorPicker" />
</p:menuitem>
</p:submenu>
</p:slideMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center">
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
<h:form id="centerContentPanel">
<ui:include src="#{navigationBean.pageName}.xhtml" />
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
Yes,I can dynamically change the source of centerContentPanel without refreshing the whole page and just the centerContentPanel i.e for on click of menuitem present in the layoutComplex.xhtml,and then the colorPicker page's content will be displayed in the centerContenPanel. But issue is: I added a colorpicker.js in the layoutComplex.xhtml head and hope it can work when update centerContent, but actually, it's not working ..
but after refresh all page by press F5 ,it works fine as I expected. Why? How can i fix this?
Following is colorPicker.xhtml:
<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:p="http://primefaces.org/ui">
<h:outputScript library="js" name="jscolor.js" target="head" />
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
</ui:composition>
and NavigationBean.java
package com.singtel.eshop.control;
import java.io.IOException;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
#SessionScoped
#ManagedBean
public class NavigationBean {
private String pageName = "blank";
public NavigationBean() {
}
public void doNav() {
String urlStr = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("urlParam");
this.pageName = urlStr;
}
public String getPageName() {
return pageName;
}
public void setPageName(String pageName) {
this.pageName = pageName;
}
}
You should call the jscolor.init after ajax call too. Seems like it is being called right after page load and needs to be called after your ajax call or inside your component. You can achieve this by calling jscolor.init in your colorPicker.xhtml file like this.
<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:p="http://primefaces.org/ui">
<h:outputScript library="js" name="jscolor.js" target="head" />
<script>
jscolor.init;
</script>
<p:panel header="Colors">
<h:panelGrid columns="2" cellpadding="10">
<h:inputText class="color">
<p:ajax event="change" update="osssutcolor" />
</h:inputText>
<h:outputText style="display: none" id="osssutcolor" />
</h:panelGrid>
</p:panel>
</ui:composition>
Related
I have used p:layoutUnit to set up a menu on the left and a main page on the right. This works ok until I add a p:dialog. Now when I select the stocks menu item the whole page refreshes instead of just the main page. I realise p:dialog applies to the whole page since it is modal, so I wondered what is the correct way to implement this to avoid a whole page refresh?
Here is my layout:
Index2.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets">
<h:head>
<title>Index2</title>
</h:head>
<h:body>
<p:layout style="min-width:400px;min-height:700px;">
<p:layoutUnit position="west" resizable="false" size="300" minSize="40" maxSize="200">
<h:form>
<p:menu>
<p:submenu label="Menu">
<p:menuitem value="Stocks" outcome="stocks" />
<p:menuitem value="Portfolio" outcome="portfolio"/>
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<h3 style="margin-top:0">Plain Menu</h3>
<ui:insert name="source" />
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Stocks.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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
template="index2.xhtml">
<ui:define name="source">
<script type="text/javascript">
function handleMessage(data)
{
if(data == 'price')
{
updateWidget();
console.log("stocks: data is price");
}
}
function onError(){
console.log("on error");
}
function onStart(){
console.log("on start");
}
function onComplete(){
console.log("on complete");
}
function onSuccess(){
console.log("on success");
}
</script>
<h:form id="form">
<p:dataGrid id="prices" var="orderBooks" value="#{stocksView.latestPricesResults}" columns="3" rows="12">
<f:facet name="header">
WST 100
</f:facet>
<p:column>
<p:panel header="#{orderBooks.bidOrderId.member.memberId}">
<h:panelGrid columns="1">
<h:outputText value="#{orderBooks.price}" />
<h:outputText value="#{orderBooks.bidOrderId.member.party}" />
<h:outputText value="#{orderBooks.lastUpdate}" />
<p:commandLink update=":form:buyDetail" oncomplete="PF('buyDialog').show()" title="View Detail">
<h:outputText value="Buy"/>
<f:setPropertyActionListener value="#{orderBooks}" target="#{stocksView.selectedStock}" />
</p:commandLink>
</h:panelGrid>
</p:panel>
</p:column>
</p:dataGrid>
<p:dialog header="Buy Shares" widgetVar="buyDialog" modal="true" showEffect="fade" hideEffect="fade" resizable="false" appendTo="#(body)">
<p:outputPanel id="buyDetail" style="text-align:center;">
<p:panelGrid columns="2" columnClasses="label,value">
<h:outputText value="Member" />
<h:outputText value="#{stocksView.selectedStock.bidOrderId.member.memberId}" />
</p:panelGrid>
</p:outputPanel>
</p:dialog>
<p:remoteCommand name="updateWidget"
actionListener="#{stocksView.findLatestPrices}"
autoRun="true"
update="prices"
onstart="onStart()"
oncomplete="onComplete()"
onsuccess="onSuccess()"
onerror="onError()">
</p:remoteCommand>
</h:form>
<p:socket onMessage="handleMessage" channel="/notify" />
</ui:define>
</ui:composition>
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.
We are migrating our App from glassfish to wildfly. However, the primefaces theme no longer loads. I am attaching the pages which are loaded .
Firebug console shows an error - ReferenceError: $ is not defined
Index.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: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>
<link rel="shortcut icon"
href="http://www.hs-furtwangen.de/fileadmin/templates/favicon.ico"
type="image/x-ico; charset=binary" />
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<title>#{messages.finquasCompleteName}</title>
</f:facet>
</h:head>
<h:body>
<ui:composition template="./mainTemplate.xhtml">
<ui:define name="NonServiceView">
<h:form>
<p:growl autoUpdate="true" />
<div class="activitySream">
<div class="activityStreamHeader">
#{messages.activityStream}
</div>
<p:outputPanel deferred="true">
<p:dataList id="id_list_activity_stream"
value="#{activityStreamController.logEntries}" var="logEntry"
type="none" emptyMessage="#{messages.noActivitiesFound}">
<div class="activityDescriptionArea">
<div class="activityIconArea">
<h:outputText value="#{activityStreamController.getActionSpecificIconCode(logEntry.changeType)}"
escape="false" />
</div>
<div class="activityDescription">
<h:outputText value="#{logEntry.creator.name}" styleClass="boldLabel" />
<h:outputText value="#{activityStreamController.getActivityTextFirstPartForLogEntry(logEntry)}" />
<h:commandLink styleClass="boldLabel"
action="#{activityStreamController.navigateToEntity(logEntry.abstractEntity)}">
#{activityStreamController.getEnitityText(logEntry.abstractEntity)}
</h:commandLink>
<h:outputText value="#{activityStreamController.getChangeLogLabelOfLogEntry(logEntry)}." />
<div class="activityDate">
<h:outputText value="#{logEntry.changeDate}">
<f:convertDateTime pattern="dd.MM.yyyy HH:mm:ss" timeZone="Europe/Berlin" />
</h:outputText>
</div>
</div>
</div>
</p:dataList>
<p:commandButton value="#{messages.showMore}" action="#{activityStreamController.showMore()}"
update="id_list_activity_stream"
rendered="#{not empty activityStreamController.logEntries}"
styleClass="plainText greenButton showMoreActivitiesButton"/>
</p:outputPanel>
</div>
</h:form>
</ui:define>
</ui:composition>
</h:body>
</html>`
mainTemplate.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: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:body>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:composition template="./headerFooterLoggedInPagesTemplate.xhtml">
<ui:define name="leftHeaderUnit">
<p:commandButton
id="id_btn_home"
action="#{navigationController.navigateHome()}"
value="#{iconSetController.home}"
escape="false" title="#{messages.home}"
update=":structureTreeForm" ajax="false" />
</ui:define>
<ui:define name="rightHeaderUnit">
<p:commandButton id="id_btn_main_user_profile"
action="userProfile"
title="#{messages.myProfile}"
value="#{iconSetController.user}"
ajax="false"
escape="false" />
<p:commandButton id="id_btn_main_help"
action="help"
title="#{messages.help}"
value="#{iconSetController.help}"
escape="false" />
<p:commandButton id="id_btn_main_logout"
title="#{messages.logout}"
value="#{iconSetController.logout}"
escape="false"
action="#{navigationController.logout()}" />
</ui:define>
<!--The empty header field is a necessary in order to display the collapsible button-->
<ui:define name="navigationArea">
<p:layoutUnit position="west"
collapsible="true"
header=""
effect="none"
resizable="true" id="id_lu_navigationBarLeft" size="320" minSize="300">
<p:tabView id="id_tabView_navigationBar"
dynamic="true"
activeIndex="#{navigationController.activeNavigationBarTabIndex}"
styleClass="finquasTabs">
<p:ajax event="tabChange" listener="#{navigationController.onNavigationBarTabChange}" />
<p:tab title="#{messages.myServicesTab}">
<p:panel rendered="#{not empty navigationController.administrationServicesOfCurrentUser}" header="#{messages.myAdministrationServices}">
<h:form id="myAdministrationServicesForm">
<p:dataList id="id_list_my_administration_services"
value="#{navigationController.administrationServicesOfCurrentUser}"
var="service"
rendered="#{not empty navigationController.administrationServicesOfCurrentUser}">
<p:column>
<h:commandLink
action="#{navigationController.viewServiceViaObject(service)}">
#{service.name}
</h:commandLink>
</p:column>
</p:dataList>
</h:form>
</p:panel>
<p:panel rendered="#{not empty navigationController.educationalServicesOfCurrentUser}" header="#{messages.myEducationalServices}">
<h:form id="myEducationalServicesForm">
<p:dataList id="id_list_my_product_services"
value="#{navigationController.educationalServicesOfCurrentUser}"
var="service"
rendered="#{not empty navigationController.educationalServicesOfCurrentUser}">
<p:column>
<h:commandLink
action="#{navigationController.viewServiceViaObject(service)}">
<h:outputText value="#{service.name}" />
<h:outputText value=" #{messages[service.getDegree().getAbbreviation()]}#{messages[service.getDegreeType().getAbbreviation()]}" rendered="#{navigationController.isDegreeProgram(service)}"/>
<h:outputText value=" #{navigationController.getStateOfService(service)}" rendered="#{navigationController.isServiceDegreeProgramOrStudyModule(service)}"/>
</h:commandLink>
</p:column>
</p:dataList>
</h:form>
</p:panel>
<p:panel rendered="#{not empty navigationController.peerReviewsOfCurrentUser}" header="#{messages.myPeerReviews}">
<h:form id="myPeerReviewsForm">
<p:dataList id="id_list_my_review_services"
value="#{navigationController.peerReviewsOfCurrentUser}"
var="service"
rendered="#{not empty navigationController.peerReviewsOfCurrentUser}">
<p:column>
<h:commandLink
action="#{navigationController.viewServiceViaObject(service)}">
#{service.name} (#{messages[service.state.class.name]})
</h:commandLink>
</p:column>
</p:dataList>
</h:form>
</p:panel>
<p:panel rendered="#{not empty navigationController.qualityReportServicesOfCurrentUser}" header="#{messages.myQualityReportServices}">
<h:form id="myQualityReportServicesForm">
<p:tree id="id_list_my_quality_report_services"
value="#{navigationController.qualityReportServiceRoot}"
var="serviceNode"
dynamic="true"
rendered="#{not empty navigationController.qualityReportServicesOfCurrentUser}">
<p:ajax event="expand" listener="#{navigationController.onNodeExpandQualityReportGraph}" />
<p:ajax event="collapse" listener="#{navigationController.onNodeCollapse}" />
<p:treeNode>
<h:commandLink
action="#{navigationController.viewServiceViaObject(serviceNode)}">
<span title="#{messages.qualityReportFinished}"><h:panelGroup layout="block" class="greenCircle" rendered="#{serviceNode.state.position == 3}"/> </span>
<span title="#{messages.qualityReportWaitingForStatement}"><h:panelGroup layout="block" class="yellowCircle" rendered="#{serviceNode.state.position == 2}"/></span>
<span title="#{messages.qualityReportWaitingForStatementStudyDean}"><h:panelGroup layout="block" class="redCircle" rendered="#{serviceNode.state.position == 1}"/></span>
#{serviceNode.simpleName}
</h:commandLink>
</p:treeNode>
</p:tree>
</h:form>
</p:panel>
</p:tab>
<p:tab title="#{messages.serviceStructureTab}">
<p:panel header="#{messages.search}" styleClass="finquasinput">
<h:form id="id_form_main_search">
<p:autoComplete id="id_input_main_search"
forceSelection="true"
placeholder="#{messages.autoCompleteHint}"
value="#{navigationController.serviceName}"
effect="fade"
required="true"
requiredMessage="#{messages.noServiceFound}"
styleClass="autocompleteService"
completeMethod="#{navigationController.completeService}" />
<p:commandButton id="id_btn_main_search"
value="#{iconSetController.search}" escape="false"
action="#{navigationController.viewServiceViaAutoComplete}"
ajax="false" />
</h:form>
</p:panel>
<p:panel header="#{messages.structure}">
<h:form id="structureTreeForm">
<p:tree value="#{navigationController.serviceRoot}"
dynamic="true"
var="serviceNode"
styleClass="finquastree"
animate="true">
<p:ajax event="expand" listener="#{navigationController.onNodeExpandEducationalServiceGraph}" />
<p:ajax event="collapse" listener="#{navigationController.onNodeCollapse}" />
<p:treeNode>
<h:commandLink
action="#{navigationController.viewServiceViaObject(serviceNode)}">
<h:outputText value="#{serviceNode.name} #{messages[serviceNode.getDegree().getAbbreviation()]}#{messages[serviceNode.getDegreeType().getAbbreviation()]}" rendered="#{serviceNode['class'].simpleName == 'DegreeProgram'}"/>
<h:outputText value="#{serviceNode.name}" rendered="#{serviceNode['class'].simpleName != 'DegreeProgram'}"/>
</h:commandLink>
</p:treeNode>
</p:tree>
</h:form>
</p:panel>
</p:tab>
</p:tabView>
</p:layoutUnit>
</ui:define>
</ui:composition>
</ui:composition>
</h:body>
</html>`
headerFooterTemplate.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: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:body>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<ui:insert name="loggedInCheck" />
<f:facet name="last">
<h:outputStylesheet library="css" name="default.css" />
<h:outputScript library="scripts" name="primefacesLocalization.js"
target="head" />
</f:facet>
<p:layout fullPage="true">
<p:layoutUnit id="id_lu_headerUnit" position="north">
<h:form id="id_form_headerForm">
<p:toolbar styleClass="finquasheader">
<p:toolbarGroup styleClass="headerBar">
<ui:insert name="leftHeaderUnit" />
</p:toolbarGroup>
<p:toolbarGroup align="right" styleClass="headerBar">
<ui:insert name="rightHeaderUnit" />
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
<ui:insert name="navigationArea" />
<p:layoutUnit id="id_lu_centerUnit" position="center">
<div id="contentArea">
<div class="nonServiceView">
<ui:insert name="NonServiceView" />
</div>
<ui:insert name="ServiceView" />
</div>
</p:layoutUnit>
<p:layoutUnit position="south" id="footerUnit">
<h:form>
<p:toolbar styleClass="finquasfooter">
<p:toolbarGroup>
<ui:insert name="leftFooterContent" />
</p:toolbarGroup>
<p:toolbarGroup align="right" styleClass="footerToolbar">
#{messages.finquasCompleteName}
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
</p:layout>
</f:view>
</ui:composition>
</h:body>
</html>`
headerFooterLoggedInPagesTemplate.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: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:body>
<ui:composition template="./headerFooterTemplate.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<ui:param name="currentUser" value="#{sessionController.currentUser}" />
<ui:define name="loggedInCheck">
<c:if test="#{!sessionController.loggedIn}">
<meta HTTP-EQUIV="REFRESH"
content="0;URL='#{navigationController.serverUrl}'" />
</c:if>
</ui:define>
<ui:define name="leftFooterContent">
#{currentUser.firstName} #{currentUser.lastName}
<script>
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o),
m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-49887094-1', 'hs-furtwangen.de');
ga('send', 'pageview');
</script>
</ui:define>
</ui:composition>
</h:body>
</html>`
I got the error. All my template pages were using composition and each had its own head tag. While this worked with glassfish, wildfly did not allow it.
Removing head from all but the base template and making the base template not a composition solved this
I'm using PF 4.0 and I'm trying to use templating and dialog. This is my template:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<p:growl for="message" id="msg" showDetail="true" />
<p:layout id="page" fullPage="true">
<!-- North -->
<p:layoutUnit position="north" size="150px" style="border: none !important">
<h:form id="menutoolbar">
<p:toolbar>
[...]
</p:toolbar>
</h:form>
</p:layoutUnit>
<!-- Center -->
<p:layoutUnit position="center" style="border: none !important">
<ui:insert name="content">Center of page</ui:insert>
</p:layoutUnit>
<!-- South -->
<p:layoutUnit position="south" collapsible="false" gutter="0">
<ui:insert name="status"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I'm using the template to render another page:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<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:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<f:metadata>
<f:viewParam name="id_file" value="#{csvDetalleBean.idFile}" />
</f:metadata>
<ui:composition template="./baseTemplate.xhtml">
<ui:define name="content">
<h:form id="tableform" prependId="false">
<p:dataTable id="detalle" value="#{csvDetalleBean.tableModel}" var="row" selection="#{csvDetalleBean.selectedRows}">
[...columns definition...]
</p:dataTable>
</h:form>
</ui:define>
<ui:define name="status">
<h:form id="statusform">
<p:panel id="panel" header="Status" style="margin-bottom:10px;">
[...controls definitions...]
</p:panel>
<p:poll interval="20" async="true" update="panel" />
</h:form>
</ui:define>
<p:dialog header="Dialog" widgetVar="respuestasDialog" resizable="false" appendToBody="true">
<p:dataTable id="respuestas" value="#{transactions.rows}" var="trRow">
<p:column headerText="Confirmation number">
<h:outputText value="#{trRow.get('confirmation_nm')}" /> hola
</p:column>
</p:dataTable>
</p:dialog>
</ui:composition>
</h:body>
</html>
The point is that I cannot show the dialog because it is not rendered at all. I think the point is the composition tag, I've already tried to put the dialog outside the composition, with same results.
What's the correct way to put components outside the layout? Of course don't want to put the dialog inside the template.
Thank you very much!
I'm new to primefaces JSF, I have three pages called Template page, Master page with dialog option and bean attached with dialog option but when I click command button in dialog box the bean method not calling. please help us if anybody knows about this issue. Thanks
MasterTemplate.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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<title><h:outputText value="#{prop.application_name}"/></title>
</f:facet>
<link type="text/css" rel="stylesheet" href="${facesContext.externalContext.requestContextPath}/css/default.css"/>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit header="#{prop.application_name}" position="north" size="240" resizable="false" closable="false" collapsible="true">
<h:form id="toolBarForm">
<p:toolbar>
<p:toolbarGroup align="right">
<h:outputText value="Welcome :#{sessionScope.userName}"/>
<p:separator />
<p:commandButton action="#{userLogout.logout}" value="#{prop.Template_button}" ajax="false" />
<p:menuButton value="Quick Access">
<p:menuitem action="ChangePassword" icon="ui-icon-key" value="Change password"/>
<p:menuitem icon="ui-icon-person" value="View Profile"/>
<p:menuitem action="#{userLogout.logout}" icon="ui-icon-locked" value="Logout"/>
</p:menuButton>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="west" size="300" header="#{prop.Template_Menu_Header}" collapsible="true">
<h:form id="f2">
<p:tree value="#{menuBean.root}" var="node" id="tree" highlight="true "
selection="#{menuBean.selectedNode}"
selectionMode="single" >
<p:ajax event="select" listener="#{menuBean.onNodeSelect}" update=":mainArea"/>
<p:treeNode id="treeNode" >
<h:outputText value="#{node}"/>
</p:treeNode>
</p:tree>
</h:form>
</p:layoutUnit>
<ui:insert name="MainBody" />
<p:layoutUnit header="#{prop.application_footer}" position="south" closable="false" collapsible="false">
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
</html>
default.xhtml
<ui:composition template="templates/MasterTemplate.xhtml"
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">
<ui:define name="MainBody">
<p:layoutUnit position="center">
<h:panelGroup id="mainArea">
<ui:include src="#{menuBean.renderPage}"/>
</h:panelGroup>
</p:layoutUnit>
</ui:define>
</ui:composition>
ThirdPage.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:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title> Title</title>
</h:head>
<h:body>
<h:form id="test">
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton value="New User" onclick="newUserDialog.show()"/>
<p:commandButton action="#{lbc.login}" process="#test" value="View" >
</p:commandButton>
<p:commandButton type="button" value="Edit" title="Update" icon="ui-icon-pencil">
</p:commandButton>
<p:separator />
<p:commandButton type="button" value="Delete" title="Delete" icon="ui-icon-trash"/>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:commandButton type="button" value="Search" icon="ui-icon-search"/>
</p:toolbarGroup>
</p:toolbar>
</h:form>
<h:form prependId="false">
<p:dialog header="Create New User" widgetVar="newUserDialog" resizable="true" id="newUserDlg" >
<h:panelGrid id="region" columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText value="#{lbc.username}"
id="username" required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<p:password value="#{lbc.password}"
id="password" required="true" label="password" />
<f:facet name="footer">
<p:commandButton partialSubmit="true" action="#{lbc.login}" value="add">
</p:commandButton>
</f:facet>
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
</html>
package mod.om.login;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.event.ActionEvent;
import javax.faces.event.AjaxBehaviorEvent;
#ManagedBean(name = "lbc")
#RequestScoped
public class LoginBean implements Serializable{
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public void login() {
System.out.println("Called");
}
}
I had the same problem; but in my case, it was when I migrated primefaces from version 5.0 to 6.2.
I solved it removing the <f:facet name="footer"... or wrapping with <h:panelGrid ... the <p:commandButton ... like the following example.
<f:facet name="footer">
<h:panelGrid columns="1" >
<p:commandButton partialSubmit="true" action="#{lbc.login}" value="add">
</p:commandButton>
</h:panelGrid>
</f:facet>