I am using a JSF template that is split into 4 parts - Header, Menubar, Content and Footer. Header contains application name, version, user name, last login, etc. details retrieved from the DB. Menu section contains a dynamic menu populated from the DB w.r.t. the user role and access. Based on the menu item, I need only the content part to be refreshed without reloading/refreshing the header, menu bar and footer. So if the menu contains a URL to SomePage.xhtml, when the menu item is clicked, SomePage.xhtml should get loaded in the content. I have checked a lot of links and solutions on the net but was not able to get this to work. Can someone please me here?
All the backing bean references in below code are to retrieve data from the DB.
BaseTemplate.xhtml
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<h:outputStylesheet name="css/override.css" />
<h:outputStylesheet name="css/style.css" />
</h:head>
<h:body>
<f:loadBundle basename="messages" var="msg" />
<f:event type="preRenderView" listener="#{homePageBean.init}" />
<h:panelGroup id="header" layout="block">
<ui:insert name="header">
<ui:include src="/pages/header.xhtml" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="menu" layout="block">
<ui:insert name="menu">
<ui:include src="/pages/menu.xhtml" />
</ui:insert>
</h:panelGroup>
<h:panelGroup id="content">
<ui:insert name="content" />
</h:panelGroup>
<h:panelGroup id="footer" layout="block">
<ui:insert name="footer">
<ui:include src="/pages/footer.xhtml" />
</ui:insert>
</h:panelGroup>
</h:body>
</html>
header.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<h:form id="frmHeader">
<table class="hdrMainTbl">
<tr>
<td width="10%">
<h:graphicImage value="images/logo.png" width="180 px"
height="40 px" />
</td>
<td width="65%">
<table class="hdrAppNmTbl">
<tr>
<td align="center">
<h:outputText styleClass="appNameText"
value="#{homePageBean.appName}" /> <br/>
<h:outputText styleClass="appVersionText"
value="#{msg['appVersion']} #{homePageBean.appVersion}" />
</td>
</tr>
</table>
</td>
<td width="20%">
<table class="hdrUserDtlsTbl">
<tr>
<td align="right"><h:outputText styleClass="baseFontStyle"
value="#{msg['welcome']}" /></td>
<td><h:outputText styleClass="baseFontStyle"
value="#{homePageBean.userName}" /></td>
</tr>
<tr>
<td align="right"><h:outputText styleClass="baseFontStyle"
value="#{msg['lastLogin']}" /></td>
<td><h:outputText styleClass="baseFontStyle"
value="#{homePageBean.lastLogin}" /></td>
</tr>
</table>
</td>
<td width="5%">
<h:commandLink action="#{homePageBean.logoutUser}">
<h:graphicImage id="logoutImg" value="images/logout.png" width="40 px"
height="40 px" title="Logout" alt="Logout" />
</h:commandLink>
</td>
</tr>
</table>
</h:form>
</ui:composition>
</body>
</html>
menu.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<h:form>
<p:menubar model="#{homePageBean.menubar}" />
</h:form>
</ui:composition>
</body>
</html>
footer.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition>
<table class="footerTbl">
<tr>
<td align="center">
<h:outputText value="#{msg['copyright']}" />
<h:outputLink target="_blank" value="http://www.google.com/">
<h:outputText value="#{msg['website']}" />
</h:outputLink>
</td>
</tr>
</table>
</ui:composition>
</body>
</html>
SomePage.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<body>
<ui:composition template="BaseTemplate.xhtml">
<ui:define name="content">
<h:form>
This is in Content section populated when one of the menu item is clicked.
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
There is two tricks here :
1) Check your menu model bean scope:
If your menu is related to user, then I guess it should be #SessionScoped
You can also create the menu each time on-the-fly (within getMenuModel() instead of bean constructor). Less efficient but working at least.
2) If you want the menu to be refreshed, you must set an id attribute to your menubar component
<p:menubar id="menuBar1" model="#{menuBean.model}" />
then use the update feature of Primefaces, for example when the user clicks a specific menu item (Java side : see in your menubar Bean).
item.setUpdate("menuBar1");
Related
I am trying to do polling in PrimeFaces. Why polling listner does not get call when it called under <ui:composition template="/pages/layout.xhtml"> and it works when it call directly.
Here is the example
I tried polling with <ui:composition template="/pages/layout.xhtml"> and without it. Without <ui:composition template="/pages/layout.xhtml"> polling workiing but with <ui:composition template="/pages/layout.xhtml"> polling not working.
layout.xhtml
<!DOCTYPE html>
<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">
<f:view contentType="text/html" locale="en" encoding="UTF-8">
<h:head>
<title><ui:insert name="pageTitle">SampleApp</ui:insert></title>
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</f:facet>
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/styles.css"
rel="stylesheet" type="text/css" />
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/ReportStyle.css"
rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<h:form id="form" prependId="false" enctype="multipart/form-data">
<p:layout id="layout" fullPage="true">
<p:layoutUnit position="north" size="50" resizable="false"
closable="false" collapsible="false"
style="overflow-x:hidden;overflow-y:hidden">
<table>
<tr valign="top">
<td width='100%'><h:outputText
style="font-weight: bold;font-size: 12px;" immediate="true "
value="SampleApp" /></td>
<td><h:outputLink style="font-weight: bold;"
immediate="true"
value="${facesContext.externalContext.requestContextPath}/pages/about.xhtml">About</h:outputLink>
<h:outputLink style="font-weight: bold;padding-left:10px"
immediate="true"
value="${facesContext.externalContext.requestContextPath}/pages/contactus.xhtml">Contact</h:outputLink>
</td>
</tr>
<tr>
<td><h:outputText style="font-weight: bold;font-size: 10px;"
immediate="true " value="Welcome, #{loginBean.emailid} " /></td>
</tr>
</table>
</p:layoutUnit>
<p:layoutUnit position="west" resizable="false" closable="false" collapsible="false" size="200">
<p:menu style="width:95%">
<p:submenu label="Reports">
<p:menuitem value="Dashboard" onclick="selectComponentLink(this)" url="/pages/Report/Dashboard.xhtml" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<p:growl id="growl" life="2000" />
<ui:insert name="centerContent" />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</f:view>
</html>
Dashboard.xhtml - Polling does not work
<?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">
<ui:composition template="/pages/layout.xhtml">
<ui:define name="pageTitle">
<h:outputText value="Suites" />
</ui:define>
<ui:define name="centerContent">
<div class="bodycopy parbase">
<div style="clear: both"></div>
<div class="content-body">
<h:form id="test">
<h:panelGrid id="reportId1">
<h:outputText id="txt_count" value="#{executionBean.number}" />
<p:poll interval="3" listener="#{executionBean.increment}"
update="txt_count" />
</h:panelGrid>
</h:form>
</div>
<div style="clear: both"></div>
</div>
</ui:define>
</ui:composition>
</html>
Dashboard2.xhtml - Polling works fine
<?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" locale="en" encoding="UTF-8">
<h:head>
<title><ui:insert name="pageTitle">SampleApp</ui:insert></title>
<f:facet name="first">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
</f:facet>
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/styles.css"
rel="stylesheet" type="text/css" />
<link
href="${facesContext.externalContext.requestContextPath}/resources/css/ReportStyle.css"
rel="stylesheet" type="text/css" />
</h:head>
<h:body>
<h:form id="DashboardForm">
<h:outputText id="txt_count" value="#{executionBean.number}" />
<p:poll interval="3" listener="#{executionBean.increment}"
update="txt_count" />
</h:form>
</h:body>
</f:view>
</html>
ExecutionBean.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
#ManagedBean(name="executionBean")
#SessionScoped
public class ExecutionBean {
private int number;
public int getNumber() {
return number;
}
public void increment() {
System.out.println("number:" + number);
number++;
}
}
Actual Result: When I run polling in Dashboard2.xhtml it is working as not defind
And,
When I run polling in Dashboard.xhtml polling does not work as it is defind in
In your "does not work" example, your ui:composition defines a h:form which ends up inside of the <h:form id="form" prependId="false" enctype="multipart/form-data"> of layout.xhtml, whilst in your second example you have only one <h:form id="DashboardForm"> - nested forms are not allowed!
Hey trying to disable/enable inputText based on a change event when a selectBooleanCheckbox is selected/unselected. Currently though, regardless of what whether or not the checkbox is selected, the inputText will always be disabled. Do I need to instead attach a listener to the checkbox? It seems in this case the inputText is never getting re-rendered.
HTML:
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}" ajax="true" event="change" update="hour"/>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
Tested on PrimFaces 6.0,6.1 and 6.2
<!DOCTYPE html>
<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:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:fn="http://java.sun.com/jsp/jstl/functions">
<h:head>
<title>PrimeFaces Test</title>
</h:head>
<h:body>
<h:form>
<div>
<p:outputLabel for="#next" value="Additional Time: " />
<p:selectBooleanCheckbox value="#{dialogView.additionalTime}">
<p:ajax update="hour"></p:ajax>
</p:selectBooleanCheckbox>
</div>
<div>
<p:outputLabel for="hour" value="Hour:" />
<p:inputText id="hour" value="#{dialogView.hour}" disabled="#{!dialogView.additionalTime}" label="Hour" />
</div>
</h:form>
</h:body>
</html>
So I have used a ui:composition for the header to be included in all three pages. When I try to click the button to pop out the primefaces dialog, it only opens on the home page and nothing happens on the two other pages.
Here is my header:
<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">
<header id="header" class="hoc clear">
<!-- ################################################################################################ -->
<nav id="mainav" class="fl_left">
<ul class="clear">
<li class="#{funksionsBean.getIndex()}">Faqja Kryesore</li>
<li class="#{funksionsBean.getDestinations()}">Destinacionet Turistike</li>
<li class="#{funksionsBean.getContact()}">Na kontaktoni</li>
</ul>
</nav>
<div id="logo" class="fl_right">
<h:form id="accountForm">
<h:panelGrid columns="2" style="background: transparent"
rendered="#{!clientBean.logged}">
<p:commandButton value="HYR" styleClass="login"
onclick="PF('logInDialog').show();" />
<p:commandButton value="REGJISTROHU" styleClass="login" />
</h:panelGrid>
<h:panelGrid columns="3" style="background: transparent"
rendered="#{clientBean.logged}">
<h:outputLabel
value="PERSHENDETJE, #{clientBean.client.getClient_name()}"
styleClass="pershendetje"></h:outputLabel>
<p:commandButton value="Llogaria" styleClass="login"
action="llogaria.xhtml?faces-redirect=true" />
<p:commandButton value="DIL" styleClass="login"
action="#{clientBean.LogOut}" />
</h:panelGrid>
<p:dialog header="Ju lutem fusni te dhenat" widgetVar="logInDialog"
minHeight="40">
<h:panelGrid id="inputPanel" columns="2" cellpadding="10"
styleClass="logInPannel">
<h:outputLabel value="Email:" />
<h:inputText value="#{clientBean.email}" />
<h:outputLabel value="Password:" />
<h:inputSecret value="#{clientBean.password}"></h:inputSecret>
</h:panelGrid>
<h:commandButton action="#{clientBean.LogIn}" value="Hyr"></h:commandButton>
</p:dialog>
</h:form>
</div>
</header>
Here is index.xhtml (the home page in witch the dialog works):
<html lang="" 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>
<title>ABG</title>
<link href="../resources/css/layout.css" rel="stylesheet"
type="text/css" media="all"></link>
<h:outputStylesheet library="css" name="user.css" />
</h:head>
<h:body id="top">
<div class="bgded overlay"
style="background-image: url('../resources/images/sight-3.jpg');">
<div class="wrapper row1">
<ui:include src="components/header.xhtml" />
</div>
<section id="pageintro" class="hoc clear">
<div>
<h2 class="heading">Albanian Best Guide</h2>
<p>Zgjidhni te eksploroni Shqiperine me syte tane</p>
<p:button value="Kerko Guida" styleClass="kerko">
</p:button>
</div>
</section>
</div>
<div></div>
<div class="wrapper row4 bgded overlay">
<ui:include src="components/footer.xhtml" />
</div>
<!-- JAVASCRIPTS -->
<script src="resources/js/jquery.min.js"></script>
<script src="resources/js/jquery.backtotop.js"></script>
<script src="resources/js/jquery.mobilemenu.js"></script>
and here it's one of the pages that does not show the dialog 'logInDialog' when I click the button 'Hyr'. I guess the page reloads:
<html lang="" 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>
<title>ABG | Contact</title>
<link href="../resources/css/layout.css" rel="stylesheet"
type="text/css" media="all"></link>
<h:outputStylesheet library="css" name="user.css" />
</h:head>
<h:body id="top">
<div class="bgded overlay"
style="background-image: url('../resources/images/sight-3.jpg');">
<div class="bgded overlay"
style="background-image: url('../resources/images/sight-3.jpg');">
<div class="wrapper row1">
<ui:include src="components/header.xhtml" />
</div>
</div>
<!-- JAVASCRIPTS -->
<script src="../resources/js/jquery.min.js"></script>
<script src="../resources/js/jquery.backtotop.js"></script>
<script src="../resources/js/jquery.mobilemenu.js"></script>
</div>
Please help because I have no idea what I am doing wrong.
I want to use primefaces gmap, and my xhtml file is something like this:
<ui:fragment 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">
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript" ></script>
<p:dataGrid id="list" var="l" value="#{bean.list}" columns="1" style="width:100%">
<h:form>
<f:view contentType="text/html">
<p:gmap center="41.381542,2.122893" zoom="15" type="HYBRID" style="width:100%;height:400px"/>
</f:view>
</h:form>
<p:fieldset collapsed="true" toggleable="true" toggleSpeed="500" legend="#{l.username}"
style="text-align:left">
<h:panelGrid columns="2" style="width:100%">
.
.
.
.
</h:panelGrid>
</p:fieldset>
</p:dataGrid>
but the map does not show, what is the problem? how can I solve it?
Instead of ui:fragment I use
<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"
xmlns:ui="http://java.sun.com/jsf/facelets">
I want to ask that sometimes what happen that if I use PrimeFaces Rich Text Editor then instead of showing Rich Text Editor, it shows normal inputTextArea. I want to know what can be the reasons that Rich Text Editor is not shown. Why it shows normal text Area instead of Rich Text Area? My Javascript is also enabled. Please tell me the reasons.
Thanks
Edit:
Here is my code
<?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.prime.com.tr/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<ui:composition template="./WEB-INF/templates/layout.xhtml">
<ui:define name="title">Add City Images</ui:define>
<ui:define name="content">
<h:form id="cityDetailForm" prependId="false" >
<p:growl id="messages" showDetail="true" life="2000"> </p:growl>
<p:panel id="panel1"
style="border-color: #000000;width: 954px;position: absolute;left: 150px;height: 450px;-moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(../PIE/PIE.htc)">
<strong Class="MainHeader">
<p:spacer width="10"/> City Detail
</strong>
<h:panelGrid columns="5"
border=""
width="20%"
style="position: absolute; top: 50px;"
columnClasses="asteriskColumns, nameColumns" >
<h:outputText value="*" />
<h:outputText value="Map: " />
<p:fileUpload id="cityMap"
description="Image"
update="city messages"
allowTypes="*.jpg;*.png;*.gif;*.jpeg;"
auto="true"
fileUploadListener="#{cityDetail.imageUpload}" >
</p:fileUpload>
<p:graphicImage id="city"
value="#{cityDetail.imagePath}"
width="80"
height="50"
cache="false">
<f:event type="preRenderComponent" listener="#{cityDetail.putImage}" />
</p:graphicImage>
<h:commandLink value="remove"
title="Remove Picture"
style="color: #0d5b7f;text-decoration: underline"
onclick="if (! confirm('Are you sure, you want to remove picture?') ) { return false;}; return true; ">
<f:ajax event="click"
render="city"
listener="#{cityDetail.removeImage}"/>
</h:commandLink>
.....
</h:panelGrid>
<h:panelGrid columns="1"
border=""
width="60%"
style="position: absolute; top: 40px;left: 350px;height: 410px ">
<p:editor value="#{cityDetail.CKeditorValue}" widgetVar="editor" width="600"/>
</h:panelGrid>
<h:commandButton id="preview"
value="Preview"
action="#{cityDetail.preview}"
style="position: absolute; top: 470px; left: 400px"
styleClass="ButtonStyle" />
<h:commandButton id="save"
value="Save"
actionListener="#{cityDetail.sendImagesToDatabase}"
action="#{cityDetail.save}"
style="position: absolute; top: 470px; left: 475px;"
styleClass="ButtonStyle">
</h:commandButton>
<h:commandButton id="cancel"
value="Cancel"
action="#{cityDetail.cancel}"
style="position: absolute; top: 470px; left: 550px;"
styleClass="ButtonStyle" />
<link type="text/css" rel="stylesheet" href="css/jquery.modaldialog1.css"/>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.modaldialog.js"></script>
<h:commandButton id="YesAfterSaveBtn" onclick="$(dialogmask).hide();$(dialog).hide()" action="#{cityDetail.goBack}" style="background-color: #e6eff6;border: #e6eff6"></h:commandButton>
<h:outputText value="#{cityDetail.errorScript}" escape="false"/>
</p:panel>
</h:form>
</ui:define>
</ui:composition>
</h:body>
You can see that i am using Prime Faces editor, but it is showing me inputTextArea. Although i didn't try the solution but this is what i asked for.
thanks
Try the following
set <f:view contentType="text/html"/>
as mentioned in the following thread of primefaces forum p:editor like h:inputTextArea