after updating from pf 7 to pf 11 I have undesirable behavior when navigating in a composite xhtml.
I have a p:tree element on the west, and an ui:insert in the center which includes the composite content which is
updated when clicking on tree nodes). After I have migrated to pf 11 when I click on a node in the tree, not only
the content gets updated, but the tree as well. The problem is when the tree gets expanded to the point where
it cannot be whole visible and the scroll bar is rendered and I scroll to the lower part and click on a node, the
tree gets updated and it scrolls all the way up.
The template page looks like this
<!DOCTYPE html>
<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>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="refresh" content="#{facesContext.externalContext.sessionMaxInactiveInterval};url=#{request.contextPath}/errorpages/session_expired.xhtml"/>
<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/resources/images/favicon.ico" />
<title><ui:insert name="title">#{sessionController.appName}</ui:insert></title>
</f:facet>
</h:head>
<h:body onload="scrollTreeMenu();" >
<p:growl id="growlMessages" for="globalMsg" />
<p:growl id="permanetnMessage" for="permMsg" sticky="true" />
<p:blockUI block="centerPanel" widgetVar="blockCenterWidget">
<p:graphicImage library="images" name="ajax-loader.gif" />
</p:blockUI>
<p:blockUI block="headerForm" widgetVar="blockNorthWidget" />
<p:blockUI block="treeNodes" widgetVar="blockWestWidget" />
...
<div class="p-grid">
<div id="west" class="p-col" style="flex: inherit;">
<p:panel toggleable="true" toggleOrientation="horizontal" header="Menu" style="width: fit-content; width: -moz-fit-content;">
<h:form id="treeNodes">
<p:outputPanel style="width: 100%; height: 700px; overflow: auto; display: block;">
<p:tree id="menuTree" value="#{sessionController.treeRootNode}" var="treeNode" dynamic="true" cache="false"
selectionMode="single" selection="#{sessionController.selectedNode}" widgetVar="mainTreeMenuWidget" style="line-height: 1;">
<p:ajax event="select" listener="#{sessionController.onNodeSelect}" />
<p:ajax event="expand" listener="#{sessionController.onNodeExpand}" />
<p:ajax event="collapse" />
<p:treeNode collapsedIcon="pi pi-folder" expandedIcon="pi pi-folder-open">
<h:outputText id="adminFolder" value="#{treeNode.rowKey}" title="#{treeNode.rowKey}" />
<p:tooltip for="adminFolder" position="top" showDelay="500" />
</p:treeNode>
<p:treeNode type="Folder" collapsedIcon="pi pi-folder" expandedIcon="pi pi-folder-open">
<h:outputText id="folder" value="#{treeNode.rowKey}" title="#{treeNode.rowKey}" />
<p:tooltip for="folder" position="top" showDelay="500" />
</p:treeNode>
<p:treeNode type="ItemTable" icon="pi pi-table">
<h:outputText id="itemTableNode" value="#{treeNode.rowKey}" title="#{treeNode.rowKey}" />
<p:tooltip for="itemTableNode" position="top" showDelay="500" />
</p:treeNode>
...
</p:tree>
...
</p:outputPanel>
</h:form>
</p:panel>
</div>
<div id="center" class="p-col" style="overflow: auto;">
<p:outputPanel id="centerPanel">
<ui:insert name="content">Content commes here...</ui:insert>
</p:outputPanel>
</div>
</div>
...
</h:body>
</html>
and the page that shows the content looks like this
<ui:composition template="/WEB-INF/jsf-templates/layout_template.xhtml"
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">
<ui:define name="content">
<h:form id="analysisForm" rendered="#{not analysisController.analysisInfo.disabled}">
<p:remoteCommand name="loadData" actionListener="#{analysisController.loadData}"
onstart="PF('blockCenterWidget').show(); PF('blockNorthWidget').show(); PF('blockWestWidget').show();"
oncomplete="PF('blockCenterWidget').hide(); PF('blockNorthWidget').hide(); PF('blockWestWidget').hide();"
process="#this" update=":analysisForm" />
...
</h:form>
...
</ui:define>
</ui:composition>
best regards
Andrija
Related
As the subject said, the needed doctype is not rendered in my JSF pages. My used versions:
Payara Server Payara Server 4.1.2.181 #badassfish (build 220)]]
Mojarra 2.3.3 ( 20171008-2230 673408fa9199477d87f44521ff873d709128c88b)
PrimeFaces 6.2 ("official" version)
I already tried the bundled (2.2.14/13/15?) version, no change, so I upgraded to 2.3.3 from github (official release).
In my entire project I have only one doctype and that is in my "master" template:
base.tpl:
<?xml version="1.0" encoding="UTF-8" ?>
<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://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pm="http://primefaces.org/mobile">
<h:doctype rootElement="html" public="-//W3C//DTD XHTML 1.0 Transitional//EN" system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<html lang="#{localizationController.locale.language}" xml:lang="#{localizationController.locale.language}" xmlns="http://www.w3.org/1999/xhtml">
<f:view locale="#{localizationController.locale}" contentType="text/html" />
<h:head>
<f:facet name="first">
<ui:insert name="metadata" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
</f:facet>
<f:loadBundle var="msg" basename="org.mxchange.localization.generic" />
<f:loadBundle var="project" basename="org.mxchange.localization.project" />
<f:loadBundle var="local" basename="org.mxchange.localization.local" />
<h:outputStylesheet name="/css/custom.css" />
<title>
<h:outputText value="#{initParam['project_title']} - " />
<ui:insert name="document_title">
<h:outputText value="Default document title" />
</ui:insert>
</title>
</h:head>
<h:body>
<pm:page id="master">
<h:panelGroup styleClass="ui-fluid" layout="block">
<pm:header>
<h:panelGroup layout="block">
<h:panelGroup styleClass="page-header" layout="block">
<h1>
<h:outputText value="#{initParam['project_title']} - " />
<ui:insert name="content_header">
<h:outputText value="Default header title" />
</ui:insert>
</h1>
</h:panelGroup>
<h:panelGroup styleClass="page-content-gap" layout="block">
</h:panelGroup>
</h:panelGroup>
</pm:header>
<h:panelGroup styleClass="ui-g" layout="block">
<h:panelGroup styleClass="ui-g-12 ui-md-2" layout="block">
<ui:insert name="menu">
<h:outputText value="Default menu" />
</ui:insert>
<ui:include src="/WEB-INF/templates/widgets/locale_change_widget.tpl" />
</h:panelGroup>
<h:panelGroup styleClass="ui-g-12 ui-md-10 ui-g-nopad" layout="block">
<h:panelGroup styleClass="ui-g-12 ui-g-nopad">
<ui:insert name="content">
<h:outputText value="Default content" />
</ui:insert>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup styleClass="ui-g-12 page-footer" layout="block">
<ui:insert name="footer">
<h:outputText value="Default footer" />
</ui:insert>
</h:panelGroup>
</h:panelGroup>
<h:panelGroup styleClass="error-container" layout="block">
<p:growl showDetail="true" sticky="true">
<p:autoUpdate />
</p:growl>
<p:ajaxExceptionHandler
type="javax.faces.application.ViewExpiredException"
update="exceptionDialog"
onexception="PF('exceptionDialog').show();"
/>
<p:dialog id="exceptionDialog" closable="true" closeOnEscape="true" header="Exception '#{pfExceptionHandler.type}' occured!" widgetVar="exceptionDialog"
height="500px">
<div class="para">
<h:outputText value="#{msg.EXCEPTION_MESSAGE}:" />
<h:outputText value="#{pfExceptionHandler.message}" />
</div>
<div class="para">
<h:outputText value="#{msg.EXCEPTION_STACK_TRACE}:" />
<h:outputText value="#{pfExceptionHandler.formattedStackTrace}" escape="false" />
</div>
<div class="para">
<p:button onclick="window.location.href = document.location.href;"
value="#{msg.RELOAD_PAGE}"
rendered="#{pfExceptionHandler.type == 'javax.faces.application.ViewExpiredException'}" />
</div>
</p:dialog>
</h:panelGroup>
</h:panelGroup>
</pm:page>
</h:body>
</html>
</ui:composition>
Many JSF pages looks like this:
some_guest_page.xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition template="/WEB-INF/templates/guest/guest_base.tpl"
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">
<ui:define name="guest_title">
<h:outputText value="#{msg.PAGE_TITLE_INDEX_FOO}" />
</ui:define>
<ui:define name="content_header">
<h:outputText value="#{msg.CONTENT_TITLE_INDEX_FOO}" />
</ui:define>
<ui:define name="content">
<!-- #TODO Here goes your content. //-->
</ui:define>
</ui:composition>
The mentioned guest_base.tpl is a layer beetween the actual page and my "master" template:
guest_base.tpl:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition
template="/WEB-INF/templates/base.tpl"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<ui:define name="document_title">
<ui:insert name="document_guest_title">
<h:outputText value="Default guest title" />
</ui:insert>
</ui:define>
<ui:define name="menu">
<ui:fragment rendered="#{featureController.isFeatureEnabled('guest_menu')}">
<ui:include src="/WEB-INF/templates/guest/guest_menu.tpl" />
</ui:fragment>
</ui:define>
<ui:define name="footer">
<ui:include src="/WEB-INF/templates/guest/guest_footer.tpl" />
</ui:define>
</ui:composition>
Any ideas on how to fix this is warmly welcome. :-)
UPDATE:
Fixed base.tpl slightly. Now at least the locale is being correctly loaded again. f:view seems to also cover at least h:head, h:body and f:loadBundle which makes sense:
f:view component sets the locale
f:loadBundle loads the with the set locale associated message bundle
But now, still the major problem, no doctype, is still present.
I'm using an old version of Primefaces (3.5) in my project and I'm struggling with a problem for 2 days now. The problem is the following:
I have a template, in which I insert an UI. In this UI, I have a TabView, in which I include an xhtml.
I need to check if some inputText fields, set as required, were left blank after a tab change, and if they were, a message must appear under those fields. For that, I'm using <p:message> but it's not working and I can't find the reason. I inspected the page, and found out that the <p:message> field is not being rendered... and I've tried everything and googled for solutions, but to no avail.
Any ideas on how to solve this? (check the above example with <p:message for="test_name" />)
Thanks!
Template Code:
<!DOCTYPE html>
<html 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>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></meta>
<meta http-equiv="refresh" content="#{session.maxInactiveInterval};url=#{disclaimer.currentURLincludingQueryString}"/>
</f:facet>
<link rel="shortcut icon" type="image/x-icon"
href="/alt-ui/resources/images/favicon.ico" />
<h:outputStylesheet library="css" name="alt.css" />
<title><ui:insert name="head_title">
<h:outputText value="ALT" />
<ui:repeat value="#{breadcrumbBean.breadcrumbList}" var="breadcrumb">
|<h:outputText value="#{breadcrumb.value}" />
</ui:repeat>
</ui:insert>
</title>
</h:head>
<h:body>
<f:view>
<h:outputScript library="js" name="Common.js" />
<h:outputScript library="js" name="ModalDialog.js" />
<div id="main_header">
<p:graphicImage library="images" name="Logo.png" alt="Logo" />
<div id="alt_header">
<h:outputText value="Remote Services" />
</div>
</div>
<h:form id="mainForm" enctype="multipart/form-data">
#{disclaimer.checkConfirm()}
<div id="center">
<p:messages id="main_msg" showDetail="true" autoUpdate="true" severity="error, fatal" />
<ui:insert name="main-content">center</ui:insert>
</div>
<div id="footer">
<div id="footer_content">
<ui:insert name="footer-content"/>
</div>
</div>
<p:growl id="template_growl" showDetail="false" autoUpdate="true" sticky="true" severity="info, warn"/>
</h:form>
</f:view>
</h:body>
</html>
Page XHTML:
<?xml version="1.0" encoding="utf-8"?>
<ui:composition 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:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets" template="/pages/templates/main_template.xhtml">
<ui:define name="head_title">
<h:outputtext value="#{msg['zynx.test.details.title']}" />
</ui:define>
<ui:define name="main-content">
<p:tabview id="test_tabview" styleclass="rustabview" cache="true" binding="#{zynxtestdetails.tabview}" activeindex="#{zynxtestdetails.activeindex}">
<f:attribute name="enablevalidation" value="#{zynxtestdetails.firsttabchange}" />
<p:ajax event="tabchange" listener="#{zynxtestdetdetails.ontabchange}" immediate="true" />
<p:tab id="tabmetadata" title="#{msg['zynx.test.tab.data.heading']}">
<p:panelgrid columns="1" styleclass="rustabpanel">
<ui:include src="tabtestdata.xhtml" />
</p:panelgrid>
</p:tab>
</ui:define>
</ui:composition>
TabTestData.xhtml:
<?xml version="1.0" encoding="UTF-8" ?>
<ui:composition xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">
<p:panelGrid id="dataDefinition" columns="5" columnClasses="alignTop,,,alignTop,alignTop">
<h:outputText styleClass="ui-widget-header2" value="#{msg['zynx.test.tab.data.headline']}" />
<p:spacer />
<p:spacer />
<p:spacer />
<p:spacer />
<p:outputLabel value="#{msg['zynx.test.tab.data.name']}" for="test_name" />
<p:inputText id="test_name" value="#{dynamicTestData.name}" size="50" required="true" disabled="#{zynxTestDetails.TestActive()}" validator="#{zynxTestDetails.validateName}" onchange="setTestChangedForBackAction()" />
<p:message for="test_name" />
</p:panelGrid>
</ui:composition>
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
In My project, I want to implement that when someone access ,need to popup a login Dialogue box first (Hide the main page menu and other element.. just let u see the login box ) .then if you put in right info, hide the loginbox and display layout to u .
Now question is : when hide the box , yeah, you can see the layout and looks nice , but when you click the link in the menu, the center all layout display to none. But when you refresh browser again , you can see it again
I'm sure whether i update wrong id or something else .
Following is the code refer and catch exception .Wait your answer. Very important to me .
Best Regards and Thank .
<!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>SingTel - eshop Operation Maintaince</title>
<link rel="shortcut icon"
href="#{request.contextPath}/images/system/favicon.ico" />
</f:facet>
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/css/default.css" />
<link type="text/css" rel="stylesheet"
href="#{request.contextPath}/css/syntaxhighlighter/syntaxhighlighter.css" />
<style type="text/css">
</style>
<script type="text/javascript">
function handleLoginRequest(xhr, status, args) {
if(args.validationFailed || !args.loggedIn) {
jQuery('#dialog').effect("shake", { times:5 }, 100);
} else {
dlg.hide();
jQuery('#loginLink').fadeOut();
}
}
</script>
</h:head>
<h:body>
<p:outputPanel id="mainPanel" autoUpdate="true">
<p:layout fullPage="true" id="layout" rendered="#{esUserSessionBean.showLogin == true ? false : true}">
<p:layoutUnit id="left" position="west" closable="false"
collapsible="true" style="border:0px" header="MENU">
<h:form id="menuForm">
<p:slideMenu
style="width:272px;height:600px;margin-left:-3px;margin-top:-6px;"
id="tree">
<p:submenu label="Test EJB " icon="ui-icon-play">
<p:menuitem value="Test EJB " action="#{navigationBean.doNav}"
update=":centerContentPanel" icon="ui-icon-arrow-4-diag">
<f:param name="urlParam" value="ui/testEJB/testEJB" />
</p:menuitem>
</p:submenu>
</p:slideMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="center" position="center" style="border:0px;">
<p:outputPanel id="centerContentPanel">
<ui:include src="../#{navigationBean.pageName}.xhtml" />
</p:outputPanel>
</p:layoutUnit>
</p:layout>
</p:outputPanel>
<p:outputPanel id="loginPanel" autoUpdate="true">
<p:dialog id="dialog" header="Login" widgetVar="dlg" closable="false"
visible="#{esUserSessionBean.showLogin}"
modal="true"
>
<h:form id="loginForm">
<h:panelGrid columns="2" cellpadding="5">
<h:outputLabel for="username" value="Username:" />
<p:inputText id="username" value="#{esUserSessionBean.userId}"
required="true" label="username" />
<h:outputLabel for="password" value="Password:" />
<p:password id="password" value="#{esUserSessionBean.password}"
required="true" label="password" feedback="false" />
<f:facet name="footer">
<p:commandButton id="loginButton" value="Login"
actionListener="#{esUserSessionBean.login}"
oncomplete="handleLoginRequest(xhr, status, args) " />
</f:facet>
</h:panelGrid>
</h:form>
</p:dialog>
</p:outputPanel>
</h:body>
</f:view>
</html>
You need to wrap your #loginLink inside an <h:panelGroup rendered=#{not bean.isLogged}"></h:panelGroup>. The bean.isLogged will be a setter of your choice that return true if the user is connected.
With that, when you refresh the page, the link won't be displayed. Altought, I don't find your #loginLink inside your code snippet.
I have primeface p:panel on jsf file. I apply background color with the following style on the template page (anasayfa.xhtml).
<h:head>
<style type="text/css">
.bos{background-color:red;}
</style>
</h:head>
My Jsf Page with viewscoped backing bean:
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
...
<p:panel styleClass="bos">
...
</p:panel>
</ui:define>
</ui:composition>
When I load page background color is seen for very shortly, then becomes transparent. CTRL+F5 has the same effect.
What is wrong here?
Thanks for helps in advance
jsf page:
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/anasayfa.xhtml">
<ui:define name="ortaAlan">
<p:panel id="rezerveleriniz">
<h:outputText value="#{rezervasyonBean.bugun.time}">
<f:convertDateTime pattern="dd/MM/yyyy" />
</h:outputText> : Rezervasyon Saatleri <br/>
<ui:repeat var="r" value="#{rezervasyonBean.kullaniciRezervasyonSaatleri}">
#{r.saatAraligi}<br/>
</ui:repeat>
</p:panel>
<h:form id="aaa">
<p:panel>
<p:panel style="float:left;">
<h:panelGrid columns="1">
<ui:repeat var="rs" value="#{rezervasyonBean.rezervasyonSaatleriListesi}">
**// !!!!!!!!!!!! Problem is here !!!!!!!!**
<p:panel styleClass="#{rezervasyonBean.isRezervasyonOnThisDay(rs) ? 'dolu' : 'bos' }">
#{rs.saatAraligi}
<h:commandButton action="#{rezervasyonBean.sec(rs,'1')}" value="+" update=":rezerveleriniz" disabled="#{rezervasyonBean.isRezervasyonOnThisDay(rs)}" />
</p:panel>
</ui:repeat>
</h:panelGrid>
<h:commandButton action="#{rezervasyonBean.kaydet()}" value="Kaydet" />
</p:panel>
<div style="clear:both;"></div>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</html>
template:
<!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:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>Görev Takip Sistemi</title>
<style type="text/css">
.ui-widget,.ui-widget .ui-widget {
font-size: 12px !important;
font-family:Arial;
}
.bos{
background-color:red;
}
.dolu{
background-color:yellow;
}
#topPanel {z-index:2 !important; }
#topPanel div{overflow:visible;}
.colStyle_panelGridForGorev{
width:225px;
}
.colStyle_panelGridForProfil{
width:100px;
}
</style>
</h:head>
<body>
<p:growl for="growlForAnasayfa" showDetail="true" life="3000" autoUpdate="true"/>
<h:form>
<p:idleMonitor timeout="900000">
<p:ajax event="idle" listener="#{anasayfaBean.indirectLogout}"/>
</p:idleMonitor>
</h:form>
<p:ajaxStatus onstart="statusDialog.show();" onsuccess="statusDialog.hide();" />
<p:dialog modal="true" widgetVar="statusDialog" header="Status"
draggable="false" closable="false">
<p:graphicImage value="/images/statusBar.gif" />
</p:dialog>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="50" id="topPanel" style="border:0px">
<h:form id="formAnaSayfaToolbar">
<p:toolbar>
<p:toolbarGroup align="left">
<p:commandButton type="submit" value="#{anasayfaBean.kullanici.kullaniciAdi} #{anasayfaBean.kullanici.kullaniciSoyadi}"
style="margin-left:200px;" action="/profil.xhtml?faces-redirect=true" ajax="false"/>
<p:commandButton type="submit" value="Gruplarım"
action="/kullanici/gruplarim.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Görevlerim"
action="/gorevListele.xhtml?faces-redirect=true" ajax="false" rendered="#{!anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Kullanıcı İşlemleri"
action="/daireBaskani/kullanici.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:commandButton type="submit" value="Grup İşlemleri"
action="/daireBaskani/grup.xhtml?faces-redirect=true" ajax="false" rendered="#{anasayfaBean.daireBaskani}"/>
<p:menuButton value="Görev İşlemleri" rendered="#{anasayfaBean.daireBaskani}">
<p:menuitem value="Yeni Görev Ekle" url="/daireBaskani/gorevEkle.btk" />
<p:menuitem value="Gorevleri Listele" url="/gorevListele.btk" />
</p:menuButton>
<p:menuButton value="Admin Paneli" rendered="#{anasayfaBean.admin}">
<p:menuitem value="Birim İşlemleri" url="/admin/birim.btk" />
<p:menuitem value="Ünvan İşlemleri" url="/admin/unvan.btk" />
</p:menuButton>
</p:toolbarGroup>
<p:toolbarGroup align="right">
<p:commandButton type="submit" value="Çıkış" icon="ui-icon-close"
action="#{anasayfaBean.logout}" ajax="false" style="margin-right:200px;"/>
</p:toolbarGroup>
</p:toolbar>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="ortaAlan">
<h:outputText value="Yukarıdaki menüden yapmak istediğiniz işlemi seçiniz." />
</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="30" resizable="true" style="border-width:0px;">
<h:form style="text-align:center; font-size:13px;">
<h:outputText value="Bilişim Sistemleri Dairesi © 2012" />
</h:form>
</p:layoutUnit>
<p:layoutUnit position="east" size="200" id="eastPanel" style="border:0px">
</p:layoutUnit>
<p:layoutUnit position="west" size="200" id="westPanel" style="border:0px">
</p:layoutUnit>
</p:layout>
</body>
</html>