I'm using Primefaces 6.0, jsf 2.2 and tomcat 9. I have a dialog box within a ui:composition which does not show up but it happens to show up when i place it in the template file.
Below is the code for the template:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view contentType="text/html">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico"/>
<title>Title</title>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="true" closable="true" collapsible="true">
App Name
</p:layoutUnit>
<p:layoutUnit position="west" size="250" collapsible="true">
<p:menu toggleable="true">
<p:submenu label="Setups">
<p:menuitem value="Department" url="/dept" icon="ui-icon-disk" />
<p:menuitem value="Company Clients" url="/companies" icon="ui-icon-contact" />
<p:menuitem value="Products" url="/products" icon="ui-icon-heart" />
<p:menuitem value="Doctors" url="/doctors" icon="ui-icon-person" />
<p:menuitem value="Suppliers" url="/suppliers" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="Kenko">
<p:menuitem value="Patient Data" url="/patientdata" icon="ui-icon-disk" />
<p:menuitem value="Point Of Sale" url="/pos" icon="ui-icon-arrowrefresh-1-w" />
<p:menuitem value="Company Medicals" url="/companymedicals" />
<p:menuitem value="Reports" url="/reports" icon="ui-icon-home" />
<p:menuitem value="Consultation" url="/consultation" icon="ui-icon-close" />
<p:menuitem value="Settings" url="/settings" />
</p:submenu>
<p:submenu label="User Management">
<p:menuitem value="List Of Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Add Users" url="/users" icon="ui-icon-star" />
<p:menuitem value="Modify Permissions" url="/users" icon="ui-icon-star" />
</p:submenu>
</p:menu>
</p:layoutUnit>
<p:layoutUnit position="center">
<ui:insert name="content">WELCOME</ui:insert>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Footer
</p:layoutUnit>
</p:layout>
</h:body>
</f:view>
and below is also the code for the facelet:
<ui:composition template="/WEB-INF/views/template/layout.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<ui:define name="content">
<p:commandButton value="Add New User" icon="ui-icon-extlink" onclick="PF('addUserModal').show();" />
<p:dataTable var="user" value="#{usersList}">
<p:column headerText="Full Name">
#{user.get("fullName")}
</p:column>
<p:column headerText="User Name">
#{user.get("username")}
</p:column>
<p:column headerText="E-Mail">
#{user.get("email")}
</p:column>
<p:column headerText="Privileges">
#{user.get("privilege")}
</p:column>
<p:column headerText="Department">
#{user.get("department")}
</p:column>
<p:column headerText="Phone Number">
#{user.get("phoneNumber")}
</p:column>
</p:dataTable>
</ui:define>
<p:dialog header="Add New User" id="addUserModal" widgetVar="addUserModal" height="300">
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
<h:inputText value="fullName" />
</p:dialog>
I keep getting the error: TypeError: PF(...) is undefined and I've done a lot search but none seems to help me with my problem.
I really need someone to help me with this.
Related
I wanted to use OneMenu inside a carousel to set a properties in managedBean, but its not working.
i test the OneMenu without Carousel and it work good , so i think that the problem is inside the carousel .
Any ideas as to what is going on here? plz help .
this is my xhtm page:
<!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://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
template="/template/template.xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<ui:define name="pageContent">
<h:form id="form1">
<br />
<br />
<br />
<p:carousel value="#{homeBean.doInstances()}" headerText="Bootstrap VM " var="vm" itemStyle="text-align:center" responsive="true">
<p:panelGrid columns="2" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<f:facet name="header"><p:graphicImage name="images/instance.jpg" /></f:facet>
<p:panelGrid columns="2" style="margin: 0 auto;">
<h:outputText value="name" />
<h:outputText value="#{vm.name}" />
<h:outputLabel value="ip" />
<h:outputLabel value="#{vm.url}" />
<p:outputLabel value="Configuration" />
<p:selectOneMenu id="recepie3" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.selectItems}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapSelectedVm(vm.url)}" />
</p:panelGrid>
</p:panelGrid>
<f:facet name="footer" style="margin: 0 auto;">
<p:panelGrid columns="3" columnClasses="label,value" layout="grid" style="margin: 0 auto;" styleClass="ui-panelgrid-blank">
<h:outputLabel>Bootstrap All VMs :</h:outputLabel>
<p:selectOneMenu id="recepie2" value="#{bootstrapBean.recipeSelected}">
<f:selectItem itemLabel="Select One Recipie " itemValue="" />
<f:selectItems value="#{bootstrapBean.recipies}" />
</p:selectOneMenu>
<p:commandButton value="Bootstrap" ajax="false" validateClient="true" actionListener="#{bootstrapBean.bootstrapAllVMs()}" />
</p:panelGrid>
</f:facet>
</p:carousel>
</h:form>
</ui:define>
</ui:composition>
Tag library initialized incorrectly, please correct it and its work.
I have a PrimeFaces dataTable with buttons at the footer for creating, editing and deleting records from the table.
A click on the Create and Edit button displays a modal dialog to carry out each task. During a create or Edit, the dialog is not dismissed but rather an Ajax update is done so that as many record as possible can be inserted or edit can be repeatedly done. But the issue now is, after any Ajax Update datepickers gets disabled and TextArea counters disappears. Code sample is available below:
<ui:define name="metadata">
<f:metadata>
<f:event listener="#{departmentController.retrieveDeptList}"
type="preRenderView"/>
</f:metadata>
</ui:define>
<ui:define name="title">
<h:outputText value="#{bundle.ListDepartmentTitle}" />
</ui:define>
<ui:define name="mainContent">
<!--main content start-->
<section id="main-content">
<section class="wrapper">
<h3><i class="fa fa-angle-right"></i> #{bundle.ListDepartmentMainTableTitle}</h3>
<div class="row">
<div class="col-md-12">
<div class="content-panel">
<h:form id="DepartmentListForm">
<h:panelGroup id="results" styleClass="table-responsive">
<p:spacer width="10"/>
<h:outputText id="informationMessage"
value="#{departmentController.infoMessage}"
rendered="#{departmentController.infoMessage ne null}"
styleClass="informationMessage"/>
<p:dataTable id="datalist"
value="#{departmentController.items}"
var="item"
tableStyleClass="table"
selectionMode="single"
selection="#{departmentController.newDept}"
paginator="true"
scrollable="true"
scrollHeight="250"
rowKey="#{item.deptId}"
rows="10"
rowsPerPageTemplate="10,20,30,40,50"
emptyMessage="No department results found" >
<p:ajax event="rowSelect"
listener="#{departmentController.onRowSelect}"
update="createButton editButton deleteButton viewMemButton"/>
<p:ajax event="rowUnselect"
listener="#{departmentController.onRowUnselect}"
update="createButton editButton deleteButton viewMemButton"/>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle['ListDepartmentTitle_deptName']}"/>
</f:facet>
<h:outputText value="#{item.deptName}"/>
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="#{bundle['ListDepartmentTitle_dateEstablished']}"/>
</f:facet>
<h:outputText value="#{item.dateEstablished}">
<f:convertDateTime pattern="dd.MMM.yyyy" />
</h:outputText>
</p:column>
<f:facet name="footer">
<p:commandButton id="createButton"
icon="ui-icon-plus"
value="#{bundle['Create']}"
actionListener="#{departmentController.prepareCreate}"
oncomplete="PF('DepartmentCreateDialog').show()"/>
<p:spacer width="10"/>
<p:commandButton id="editButton"
process="#form"
icon="ui-icon-pencil"
value="#{bundle.Edit}"
update=":DepartmentEditForm"
oncomplete="PF('DepartmentEditDialog').show()"
disabled="#{departmentController.selectedDept eq null}" />
<p:spacer width="10"/>
<p:commandButton id="deleteButton"
icon="ui-icon-trash"
process="#form"
value="#{bundle.Delete}"
action="#{parishOfficesController.destroy}"
update=":growl, :DepartmentListForm:results"
disabled="#{departmentController.selectedDept eq null}">
<p:confirm header="Confirmation"
message="Are you sure you want to delete?"
icon="ui-icon-alert" />
</p:commandButton>
<p:confirmDialog global="true"
showEffect="fade"
styleClass="text-center"
hideEffect="fade">
<p:commandButton value="Yes" type="button"
styleClass="ui-confirmdialog-yes"
icon="ui-icon-check" />
<p:commandButton value="No" type="button"
styleClass="ui-confirmdialog-no"
icon="ui-icon-close" />
</p:confirmDialog>
<p:spacer width="30"/>
<p:commandButton id="viewMemButton"
value="#{bundle.ViewMembers}"
icon="ui-icon-extlink"
actionListener="#{dfView.chooseDepartment}"
disabled="#{departmentController.selectedDept eq null}" >
<p:ajax event="dialogReturn"
listener="#{dfView.onDeptMemberChosen}"
update=":growl" />
</p:commandButton>
</f:facet>
</p:dataTable>
</h:panelGroup>
<h:messages id="messages" styleClass="errorMessage"/>
</h:form>
<ui:include src="addDept.xhtml"/>
<ui:include src="editDept.xhtml"/>
</div>
</div>
</div>
</section>
</section><!-- /MAIN CONTENT -->
</ui:define>
//---------------------------------------------------------------------------
<p:dialog id="DepartmentEditDlg"
widgetVar="DepartmentEditDialog"
modal="true"
resizable="false"
appendTo="#(body)"
closable="false"
width="400"
height="300"
header="#{bundle['EditDepartmentTitle']}">
<h:form id="DepartmentEditForm" prependId="false">
<h:panelGroup id="editDisplay">
<p:messages id="editMsg" globalOnly="true" closable="true">
<p:effect type="pulsate" event="load" delay="500" />
</p:messages>
<br/>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle.EditDepartmentLabel_deptName}"
for="editDeptName" />
<h:inputText id="editDeptName"
value="#{departmentController.newDept.deptName}"
title="#{bundle.EditParishOfficesTitle_deptName}"
required="true"
styleClass="form-control"
requiredMessage="#{bundle.EditDepartmentRequiredMessage_deptName}"/>
<h:message id="DeptEditMsg"
styleClass="errorMessage"
for="editDeptName"
showDetail="true"/>
</div>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle.EditDepartmentLabel_dateEstablished}"
for="editDateEstablished" />
<b:datepicker id="editDateEstablished"
showButtonPanel="true"
change-month="true"
placeholder="Select a Date"
change-year="true"
value="#{departmentController.newDept.dateEstablished}"/>
</div>
<!--
<div>
<h:outputLabel styleClass="labelText"
value="#{bundle.EditDepartmentLabel_dateEstablished}"
for="editDateEstablished" />
</div>
<div>
<p:calendar id="editDateEstablished"
readonlyInput="true"
navigator="true"
mode="popup"
showButtonPanel="true"
pattern="dd.MMM.yyyy"
value="#{departmentController.newDept.dateEstablished}"
title="#{bundle.EditDepartmentTitle_dateEstablished}"
showOn="button"/>
</div>
-->
<br/>
<div class="modal-footer">
<p:commandButton actionListener="#{departmentController.update}"
value="#{bundle.Save}"
update="editDisplay,
:growl, :DepartmentListForm:results,
:DepartmentListForm:messages" />
<p:spacer width="10"/>
<p:commandButton value="#{bundle.Cancel}"
process=":DepartmentListForm"
action="#{departmentController.cancel}"
ajax="false"
onclick="DepartmentEditDialog.hide()"
update=":DepartmentListForm:results"
immediate="true" />
</div>
</h:panelGroup>
</h:form>
</p:dialog>
//--------------------------------------------------------------------------
<p:dialog id="DepartmentCreateDlg"
widgetVar="DepartmentCreateDialog"
modal="true"
resizable="false"
appendTo="#(body)"
closable="false"
width="400"
height="300"
header="#{bundle['CreateDepartmentTitle']}">
<h:form id="DepartmentCreateForm" prependId="false">
<h:panelGroup id="display">
<p:messages id="createMsg" globalOnly="true" closable="true">
<p:effect type="pulsate" event="load" delay="500" />
</p:messages>
<br/>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle['CreateDepartmentLabel_deptName']}"
for="deptName" />
<h:inputText id="deptName"
styleClass="form-control"
value="#{departmentController.newDept.deptName}"
title="#{bundle['CreateDepartmentTitle_deptName']}"
required="true"
requiredMessage="#{bundle['CreateDepartmentRequiredMessage_deptName']}"/>
<h:message id="deptNameMsg"
styleClass="errorMessage"
for="deptName"
showDetail="true"/>
</div>
<div class="form-group">
<h:outputLabel styleClass="labelText"
value="#{bundle['CreateDepartmentLabel_dateEstablished']}"
for="dateEstablished" />
<b:datepicker id="dateEstablished"
showButtonPanel="true"
change-month="true"
placeholder="Select a Date"
change-year="true"
value="#{departmentController.newDept.dateEstablished}"/>
</div>
<!--
<div>
<h:outputLabel styleClass="labelText"
value="#{bundle['CreateDepartmentLabel_dateEstablished']}"
for="dateEstablished" />
</div>
<div>
<p:calendar id="dateEstablished"
readonlyInput="true"
navigator="true"
mode="popup"
showButtonPanel="true"
showOn="button"
pattern="dd.MMM.yyyy"
value="#{departmentController.newDept.dateEstablished}"
title="#{bundle['CreateDepartmentTitle_dateEstablished']}" />
</div>
-->
<br/>
<div class="modal-footer">
<p:commandButton actionListener="#{departmentController.create}"
value="#{bundle.Save}"
update=":DepartmentListForm:results,
:growl,
display,
:DepartmentListForm:messages" />
<p:spacer width="10"/>
<p:commandButton value="#{bundle.Cancel}"
process=":DepartmentListForm"
action="#{departmentController.cancel}"
onclick="DepartmentCreateDialog.hide()"
ajax="false"
update=":DepartmentListForm:results"
immediate="true" />
</div>
</h:panelGroup>
</h:form>
</p:dialog>
i m working on a project. project main page has a layout with 2 layoutunits and each layoutunit have forms. when i run project page is loading correctly but one of layoutunit collapsible property does not work. when i click on it layoutunit is closing then opening again.
i m using primefaces 5.3 and i m not a elit user.
<p:layout fullPage="true" widgetVar="layoutWdgt">
<p:layoutUnit style=" font-size: 14px!important" position="west" collapsible="true" header="#{kullanici.adsoyadkullanici}" >
<h:form id="anamenu">
<p:panelMenu style="width: 250px; height: 600px!important">
<p:submenu label="Genel" icon="fa fa-cog">
<p:menuitem value="Ana Gösterge Tablosu 1" actionListener="#{turnPage.changePage(101)}" update="mainform:panel1" />
<p:menuitem value="Ana Gösterge Tablosu 2" actionListener="#{turnPage.changePage(102)}" update="mainform:panel1" />
</p:submenu>
<p:submenu label="Demografik Göstergeler" icon="fa fa-area-chart">
<p:menuitem value="Nüfus Piramidi" actionListener="#{turnPage.changePage(201)}" update="mainform:panel1" />
<p:menuitem value="Genel Demografik Göstergeler" actionListener="#{turnPage.changePage(202)}" update="mainform:panel1"/>
<p:menuitem value="Kırsal ve Kentsel Nüfus" actionListener="#{turnPage.changePage(203)}" update="mainform:panel1"/>
<p:menuitem value="0-14 Yaş Nüfus Oranları" actionListener="#{turnPage.changePage(204)}" update="mainform:panel1"/>
<p:menuitem value="65 Yaş Üstü Nüfus Oranları" actionListener="#{turnPage.changePage(205)}" update="mainform:panel1" />
<p:menuitem value="Toplam Yaş Bağımlılık Oranları" actionListener="#{turnPage.changePage(206)}" update="mainform:panel1" />
</p:submenu>
</p:panelMenu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutcenter" style="font-size: 14px" position="center" collapsible="true" >
<h:form id="mainform">
<p:outputPanel id="panel1">
<ui:include src="#{turnPage.pathpage}" />
</p:outputPanel>
</h:form>
</p:layoutUnit>
</p:layout>
</h:body>
What I want is to display a lightbox right after the page is loaded. I mean, when the user receives the page, the lightbox automatically shows and stays on untill it is closed. How can I do this?
<?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: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">
<ui:composition template="/WEB-INF/include/template.xhtml">
<ui:define name="title">
<h:outputText value="#{jorBundle.AppName}"></h:outputText>
</ui:define>
<ui:define name="body">
<p:lightBox width="20%" height="80%" >
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
<p:panel header="#{jorBundle.Welcome}">
<p><h:outputText value="#{jorBundle.WelcomeMessage}"></h:outputText></p>
</p:panel>
<p:panel header="Gráfico Divisões UPB" menuTitle="menu" collapsed="true" >
<p><h:outputText value="Gráfico"></h:outputText></p>
</p:panel>
</ui:define>
</ui:composition>
</html>
Thanks in advance.
You could use the primefaces javascript, which requires an ID on the lightbox.
Component:
<p:lightBox width="20%" height="80%" id='myLightBox'>
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
PF('myLightBox').show();
});
</script>
A simple solution is to set the visible attribute to true:
<p:lightBox width="20%" height="80%" visible="true">
<h:outputLink value="#" title="Marcel Vieira" >
<h:outputText value="some description here"/>
</h:outputLink>
<f:facet name="inline">
<h:panelGrid columns="2">
<p:graphicImage value="/resources/images/ich.jpg" />
<h:outputText style="color:#FFFFFF" value="some text in here...." />
</h:panelGrid>
</f:facet>
</p:lightBox>
I've discovered I can play a commandbutton in the options facet (right side of menubar), however I can't seem to add a submenu in the same way. I want an actual menu dropdown aligned to the right, not a button.
Any ideas?
<html lang="en" 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">
<h:head title="Primefaces Test">
<style>
.ui-layout-north {
z-index: 20 !important;
overflow: visible !important;
}
.ui-layout-north .ui-layout-unit-content {
overflow: visible !important;
}
</style>
</h:head>
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<f:facet name="options">
<p:commandButton value="logout" />
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</f:facet>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
</html>
-- Shane
I solve it using something like this:
style="position: absolute; right: 6px;"
Just try it.
I ended up just forgetting the whole "options" facet and used css float instead, I hope this helps someone:
<h:body>
<h:form>
<p:layout fullPage="true">
<p:layoutUnit position="north">
<p:menubar>
<p:submenu label="Mail">
<p:menuitem value="Gmail" url="http://www.google.com" />
<p:menuitem value="Hotmail" url="http://www.hotmail.com" />
<p:menuitem value="Yahoo Mail" url="http://mail.yahoo.com" />
</p:submenu>
<p:submenu label="Videos">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
<p:submenu label="Videos2" style="float:right">
<p:menuitem value="Youtube" url="http://www.youtube.com" />
<p:menuitem value="Break" url="http://www.break.com" />
</p:submenu>
</p:menubar>
</p:layoutUnit>
<p:layoutUnit position="center">
<h:outputText value="Hello, world." />
</p:layoutUnit>
</p:layout>
</h:form>
</h:body>
--Shane
If you are using bootstrap the you can just use the built in flexbox classes
NOTE: This is a primeng (angular) example and will align ALL items right.
<p-menubar [model]="items" styleClass="d-flex justify-content-end"></p-menubar>