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">
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>
PrimeFaces is not rendering. I have configured everything correctly (hope so).
<!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: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"
xmlns:mp="http://primefaces.org/ui/material">
<head>
<title>Welcome Page</title>
</head>
<body>
<h:head>
<h:form>
<h:panelGrid columns="4" cellpadding="5">
<h:outputLabel for="name" value="Name:" style="font-weight:bold" />
<p:inputText id="name" value="#{basicView.text}" />
<p:commandButton value="Submit" update="display"
icon="ui-icon-check" />
<h:outputText id="display" value="#{basicView.text}" />
</h:panelGrid>
</h:form>
</h:head>
</body>
</ui:composition>
public class BasicView {
private String text;
public String getText() {
return text;
}
public void setText(String text) {
this.text = text;
}
}
I have included all the annotations and lib.
Here is the Index.xhtml output
You messed up the head and body tags. Also you need to put your form in the body.
<!DOCTYPE html>
<h: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"
xmlns:mp="http://primefaces.org/ui/material">
<h:head>
<title>Welcome Page</title>
</h:head>
<h:body>
<h:form>
<h:panelGrid columns="4" cellpadding="5">
<h:outputLabel for="name" value="Name:" style="font-weight:bold" />
<p:inputText id="name" value="#{basicView.text}" />
<p:commandButton value="Submit" update="display"
icon="ui-icon-check" />
<h:outputText id="display" value="#{basicView.text}" />
</h:panelGrid>
</h:form>
</h:body>
</h:html>
I am trying to include ".xhtml" in other; and it works perfectly in "Internet Explorer" but not in "Chrome"
My principale view which include two views one of them is menu.xhtml :
<ui:define name="content">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-1" id="menuLeft">
<ui:include src="menu.xhtml" />
</div>
<div class="ui-grid-col-1" id="ber">
<p:panel id="principalePanel" >
<ui:include src="#{navigationBean.page}" />
</p:panel>
</div>
</div>
</div>
</ui:define>
menu.xhtml:; i am supposed to include other view in my My principale view using <b:navLink>
<b:panel id="basic" title="Modules" collapsible="false" look="primary">
<h:form id="formMenuLeft">
<p:accordionPanel id="panelMenuLeft">
<p:tab title="R H" id="tabMenuLeft">
<b:flyOutMenu id="ferd">
<b:navLink value="New Compte" id="navcreat"
update="#([id$=principalePanel])" onclick="ajax:navigationBean.setPage('viewcreat.xhtml')"/>
<b:navLink value="search" id="fedrt" update=":#{p:component('principalePanel')}"onclick="ajax:navigationBean.setPage('viewSearch.xhtml')"/>
</b:flyOutMenu>
</p:tab>
</p:accordionPanel>
</h:form>
</b:panel>
Actually, the example does work on Chrome, at least on OSX. I'll post my version - maybe there's a subtle difference lurking in the dark:
index.xhtml:
<?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:b="http://bootsfaces.net/ui"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
<title>BootsFaces: next-gen JSF Framework</title>
<meta name="author" content="Riccardo Massera"></meta>
</h:head>
<h:body style="padding-top: 60px">
<div class="ui-grid ui-grid-responsive">
<div class="ui-grid-row">
<div class="ui-grid-col-5" id="menuLeft">
<ui:include src="menu.xhtml" />
</div>
<div class="ui-grid-col-5" id="ber">
<p:panel id="principalePanel" title="principale" >
<ui:include src="#{navigationBean.page}" />
</p:panel>
</div>
</div>
</div>
</h:body>
</html>
menu.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:fragment 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:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<b:panel id="basic" title="Modules" collapsible="false" look="primary">
<h:form id="formMenuLeft">
<p:accordionPanel id="panelMenuLeft">
<p:tab title="R H" id="tabMenuLeft">
<b:flyOutMenu id="ferd">
<b:navLink value="New Compte" id="navcreat" update="#([id=principalePanel])"
onclick="ajax:navigationBean.setPage('start.xhtml')" />
<b:navLink value="search" id="fedrt" update=":#{p:component('principalePanel')}"
onclick="ajax:navigationBean.setPage('search.xhtml')" />
</b:flyOutMenu>
</p:tab>
</p:accordionPanel>
</h:form>
</b:panel>
</ui:fragment>
search.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:fragment 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:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<b:panel title="Search" look="success">
</b:panel>
</ui:fragment>
start.xhtml:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<ui:fragment 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:b="http://bootsfaces.net/ui"
xmlns:ui="http://java.sun.com/jsf/facelets">
<b:panel title="Create" look="primary">
</b:panel>
</ui:fragment>
NavigationBean.java:
package net.bootsfaces.demo.ajax;
import java.io.IOException;
import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.context.FacesContext;
#ManagedBean
#SessionScoped
public class NavigationBean implements Serializable {
private static final long serialVersionUID = 1L;
private String page="start.xhtml";
public String getPage() {
return page;
}
public void setPage(String currentPage) {
this.page=currentPage;
}
}
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");