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>
Related
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.
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 would like to hide an element while a button triggered action is being performed:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI block="input" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="growl,input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panelGrid>
</h:form>
I tried with p:blockUI / pe:blockUI and with/without the onstart and oncomplete attributes.
What am I doig wrong ? I use blockUI somewhere else, and it is working fine:
The only difference is that the table is its own trigger.
I followed this tutorial.
Block the input seems to not work, you can wrap the input with a panel and block it.
PrimeFaces Extensions:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<pe:blockUI target="panel" widgetVar="blockUIWidget">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</pe:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input"
onstart="PF('blockUIWidget').block();"
oncomplete="PF('blockUIWidget').unblock();">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>
PrimeFaces:
<h:form id="sendtxform">
<p:panelGrid columns="1" styleClass="ui-noborder">
<p:blockUI block="panel" trigger="command">
LOADING<br />
<p:graphicImage name="images/ajax-loader.gif" />
</p:blockUI>
<p:commandButton id="command" value="ISSUE APP"
actionListener="#{transactionXmlController.getTxDataPredefined}"
ajax="true" update="input">
</p:commandButton>
<p:panel id="panel">
<p:inputTextarea id="input" cols="150" rows="30" autoResize="false"
value="#{transactionXmlEditableModel.xml}" />
</p:panel>
</p:panelGrid>
</h:form>
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>
I'm facing an issue with the Primefaces Chat demo from the Primefaces showcase. The outputPanel component does not display a scroll bar like in the showcase demo. Here is my code and screenshot below:
<h:head>
<script type="text/javascript">
function handleMessage(data) {
var chatContent = $(PrimeFaces.escapeClientId('form:public'));
chatContent.append(data + '<br />');
//keep scroll
chatContent.scrollTop(200); <----------- have tried "chatContent.height()"
}
</script>
</h:head>
<h:body>
<p:growl id="growl" showDetail="true" />
<h:form id="form">
<p:fieldset id="container" legend="UserChat" toggleable="true">
<h:panelGroup rendered="#{chatView.loggedIn}">
<h:panelGrid columns="2" columnClasses="publicColumn,usersColumn" style="width:100%">
<p:outputPanel id="public" layout="block" styleClass="ui-corner-all ui-widget-content chatlogs" />
<p:dataList id="users" var="user" value="#{chatView.users}" styleClass="usersList">
<f:facet name="header">
Users
</f:facet>
<p:commandButton title="Chat" icon="ui-icon-comment" oncomplete="pChat.show()" update=":form:privateChatContainer">
<f:setPropertyActionListener value="#{user}" target="#{chatView.privateUser}" />
</p:commandButton>
#{user}
</p:dataList>
</h:panelGrid>
<p:separator />
<p:inputText value="#{chatView.globalMessage}" styleClass="messageInput" />
<p:spacer width="5" />
<p:commandButton value="Send" actionListener="#{chatView.sendGlobal}" oncomplete="$('.messageInput').val('').focus()"/>
<p:spacer width="5" />
<p:commandButton value="Disconnect" actionListener="#{chatView.disconnect}" global="false" update="container" />
</h:panelGroup>
<h:panelGroup rendered="#{not chatView.loggedIn}" >
Username: <p:inputText value="#{chatView.username}" />
<p:spacer width="5" />
<p:commandButton value="Login" actionListener="#{chatView.login}" update="container"
icon="ui-icon-person" />
</h:panelGroup>
</p:fieldset>
<p:dialog widgetVar="pChat" header="Private Chat" modal="true" showEffect="fade" hideEffect="fade">
<h:panelGrid id="privateChatContainer" columns="2" columnClasses="vtop,vtop">
<p:outputLabel for="pChatInput" value="To: #{chatView.privateUser}" />
<p:inputTextarea id="pChatInput" value="#{chatView.privateMessage}" rows="5" cols="30" />
<p:spacer />
<p:commandButton value="Send" actionListener="#{chatView.sendPrivate}" oncomplete="pChat.hide()" />
</h:panelGrid>
</p:dialog>
</h:form>
<p:socket onMessage="handleMessage" channel="/chat" autoConnect="true" widgetVar="subscriber"/>
</h:body>
Any clues about what i'm doing wrong?
Thanks and best regards!
The issue may be you didn't specify chatlogs css class, you should add it as below:
<style type="text/css">
.chatlogs {
height: 210px !important;
max-height: 210px !important;
overflow-y: scroll !important;
overflow-x: hidden !important;
}
</style>
And if you would like to scroll to bottom, you can try:
chatContent.scrollTop(chatContent[0].scrollHeight);