I am using JSF (Mojara) and Primefaces 3.4 in a sample application.
I am applying a layout on a screen where on a header (north) there is one Image link (on click a dialog box gets opened).
northheader.xhtml:
<h:body>
<h:form id="headerForm">
<p:panelGrid id="headerFormPanelGridID" style="align:left;border:0px>
<p:row>
<p:column width="70">
<p:commandLink onclick="dialogWidgetWar.show();" title="SampleImg">
<p:graphicImage value="../sampleimg.jpg" />
</p:commandLink>
</p:column>
</p:row>
</p:panelGrid>
<p:dialog id="idInfo" modal="true" widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
<h:panelGrid id="sampleId" style="cellpadding" border="0" cellpadding="0" cellspacing="0" width="200">
</h:panelGrid>
</p:dialog>
</h:form>
</h:body>
For layout
<html lang="en"
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>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="100" resizable="false" closable="false" collapsible="false">
<ui:include src="../northheader.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="west" size="200" resizable="false" closable="false" collapsible="false">
<ui:include src="../left.xhtml" />
</p:layoutUnit>
<p:layoutUnit position="center" size="200">
<ui:insert name="pageContent"></ui:insert>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
Layout is being displayed properly, but when I Click on "SampleImg" link in northheader.xhtml, its getting opened but closing the dialog is not working, even if I
add one close button inside the dialog box and onclick="dialogWidgetWar.hide()" is not working. I am not even able to select anything.
Can anybody help me out here, where is the problem?
Add appendToBody="true" attribute inside p:dialog
<p:dialog id="idInfo" modal="true" appendToBody="true"
widgetVar="dialogWidgetWar" header="Sample Layout" border="0" width="400" height="100" resizable="true" >
You're using a p:dialog inside a p:layout. This always led to problems in my past experiences. A solid solution is to place the p:dialog outside of the p:layout. Since you're using ui:define and ui:insert this doesn't seem straight forward, however it's quite simple. Since you can define multiple ui:define elements in one JSF page you can define a "content" and a "dialogs" ui:insert and ui:define.
<p:layout>
<p:layoutUnit ...
<ui:insert name="content"/>
</p:layoutUnit>
</p:layout>
<ui:insert name="dialogs"/>
Try this, this should be work ;
<p:commandLink onclick="PrimeFaces.monitorDownload(hideStatus);" title="SampleImg">
java script ;
<script type="text/javascript">
function showStatus() {
dialogWidgetWar.show();
}
function hideStatus() {
dialogWidgetWar.hide();
}
</script>
Related
I am using Jsf primefaces version 8 and trying to show the calendar field in the xhtml page. But inspite all efforts, the popup calendar field is not displaying at all in the page.
My main.xhtml page contains a p:dialog and this dialog includes another xhtml page, dateEdit.xhtml. Inside the second xhtml, I am trying to have the p:datePicker or p:calendar field. But its not working.
Below is the piece of code from my main.xhtml page:
<p:dialog closable="true" visible="false" modal="true" id="dateDialog" widgetVar="dateDialog" resizable="false" showEffect="fade" hideEffect="fade"
header="Date Edit" width="60%" height="50%" style="max-height:100%; overflow:auto; ">
<ui:include src="dateEdit.xhtml" >
</ui:include>
</p:dialog>
Below is the code snippet from the dateEdit.xhtml :
<!DOCTYPE html>
<html 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"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core" >
<h:head>
<f:facet name="last">
<link type="text/css" rel="stylesheet" href="../jsfStyle.css" media="all"></link>
</f:facet>
</h:head>
<h:body>
<h:form id="formDtId" enctype="multipart/form-data" method="post" >
<p:outputPanel id="editProjectInfo">
<h:panelGrid id="coreGrid" columns="3" style="margin-bottom:10px" cellpadding="7">
<p:outputLabel for="update_Date" value="Demo Date : " />
<p:calendar id="update_Date" value="#{dateManagedBean.demoDate}" mode="popup" navigator="true" pattern="yyyy-MM-dd" style="font-size:8pt;" showOn="button" >
<f:convertDateTime type="date" pattern="yyyy-MM-dd" for="update_Date"></f:convertDateTime>
</p:calendar>
</h:panelGrid>
</p:outputPanel>
</h:form>
</h:body>
</html>
But if I click on the button icon, no calendar is getting displayed. Nothing is happening.
I tried with the below code also, instead of p:calendar, but that also didn't work :
<p:datePicker id="update_Date" value="#{dateManagedBean.demoDate}" pattern="MM-dd-yyyy" showIcon="true" />
Kindly help to resolve this issue. Thanks.
How to fit height datatable to container?
i want datatable at 100% of layoutUnit container and vertical scroll only rows, not header.
With this code, table fit, but vertical scroll all table (rows and header).
<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"
xmlns:of="http://omnifaces.org/functions">
<h:head>
</h:head>
<h:body>
<p:layout id="fullPage" fullPage="true" widgetVar="mainLayout">
<p:layoutUnit position="north" size="300" closable="false"
collapsible="true" gutter="0"
style="padding: 0px; border:0px;border-bottom: 1px solid #EF7C00;border-radius: 0px;">
</p:layoutUnit>
<p:layoutUnit position="center" gutter="0"
style="padding: 5px; border:0px;border-radius: 0px;background: #e9eaed;min-width:900px;"
id="centerID">
<p:layout id="layoutCorpoId" style="padding: 0px; border:0px;"
widgetVar="layoutCorpo">
<p:layoutUnit id="layoutCorpoWest" position="west" gutter="5"
resizable="true" size="30%" collapsible="true" closable="false"
styleClass="layoutCorpoWest panelBox">
<h:form id="validateFormId">
<p:dataTable var="elementVal" value="#{testController.players}"
id="dataTableId" rowKey="#{elementVal.playerId}"
rowIndexVar="idx" scrollable="true" resizableColumns="true" scrollHeight="100%">
<p:column headerText="Name">
<h:outputText value="#{elementVal.playerName}" />
</p:column>
<p:column headerText="Position">
<h:outputText value="#{elementVal.playerPosition}" />
</p:column>
<p:column headerText="Age">
<h:outputText value="#{elementVal.playerAge}" />
</p:column>
</p:dataTable>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layoutCorpoCenter" position="center" gutter="0"
collapsible="true" styleClass="layoutCorpoCenter panelBox">
</p:layoutUnit>
</p:layout>
</p:layoutUnit>
<p:layoutUnit gutter="0" id="bottom" position="south" size="300"
collapsible="true" styleClass="">
</p:layoutUnit>
</p:layout>
</h:body>
</html>
I add an immage that represents this:
after scroll:
pf 5.3
You can use stickyHeader attribute of p:dataTable for that purpose. See showcase example:
<p:dataTable var="car" value="#{dtStickyView.cars}" stickyHeader="true">
...
</p:dataTable>
I have a layout with layoutUnit west and layoutUnit center, west side have a menu that calls another pages that render in the center side, the problem is that all layout is refreshed(west and center side) when another page rendered in center. I have follow code:
<p:layout style="width: 100%; height: 450px" >
<p:layoutUnit position="west" size="230" collapsible="false" >
<h:form>
<p:menu style="font-size: 14px; width: 95%;height: 420px " >
<p:submenu label="MENU">
<p:menuitem value="Students" icon="ui-icon-arrowthick-1-n" url="pantallas/students.xhtml" />
<p:menuitem value="Teachers" icon="ui-icon-refresh" url="pantallas/teacher.xhtml" />
</p:submenu>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit id="layout1" position="center" >
<h:form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
</p:layout>
And student.xhtml like:
<ui:composition template="../administracion.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<ui:define name="content">
<h:head>
<h:outputStylesheet library="css" name="styles2.css"/>
<title>Facelet Title</title>
</h:head>
<h:body>
<p:panel header="Student" style="width: 90%; margin: auto auto">
<h:form id="forma1">
<p:panel style="text-align: center">
<p:inputText placeholder="Students" value="#{datosCT.cct}"/>
<p:commandButton value="buscar" actionListener="#{controlCTAlumnos.traeInfo()}" update="panel1">
<f:ajax listener="#{controlCTAlumnos.mostrarPanel(e)}" render="panel1" />
</p:commandButton>
</p:panel>
</h:form>
</p:panel>
</h:body>
</ui:define>
I saw and tried some many ways to refresh only layoutUnit center but doesn´t work in this case.
can someone help me??
thanks in advance.
You can do the partial update on form component inside your layout unit from your content page.
<p:layoutUnit id="layout1" position="center" >
<h:form id="form>
<ui:insert name="content" ></ui:insert>
</h:form>
</p:layoutUnit>
student.xhtml
<p:commandButton value="buscar" update=":form"/>
I have a main HTML page which includes detail.xhtml and duo.xhtml.
Now duo.xhtml also includes detail.xhtml, which results in duplicate IDs which of course it not working. What can I do to solve this problem? I don't want to manage redundant code.
Main:
<ui:composition ...>
<ui:define name="center">
<ui:insert name="insertDuo">
<ui:include src="/includes/duo.xhtml" />
</ui:insert>
...
<p:dialog header="x" widgetVar="detDialog" id="dlg" modal="true" appendTo="#(body)">
<ui:insert name="insertDetail">
<ui:include src="/includes/detail.xhtml" />
</ui:insert>
Duo:
<ui:composition>
<p:dialog header="y" widgetVar="newDuoDialog" id="newDuoDlg" modal="true" >
<p:layout id="layout">
<p:layoutUnit position="west">
<ui:insert name="insertDetailStmt">
<h:form id="stmtDetailForm">
<ui:include src="/includes/detail.xhtml" />
</h:form>
</ui:insert>
</p:layoutUnit>
Detail:
<p:accordionPanel id="accordion">
Reference to components:
<p:commandButton value="z" update=":accordion:duoDlgForm2:pickList"/>
Thanks to BalusC, I was able to solve the problem. Just use
<f:subview id="fromMain">
<ui:include src="/includes/regelDetail.xhtml" />
</f:subview>
and when referred from main, the element's name is fromMain:accordion
The following code contains two tabs and basic code from showcase example. I tried to put this code into a xhtml and did ui:include within the tabs and also just adding them within tabs as list below. Either way when I click the submit button, do not see any results displayed.
Thanks in advance
<?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">
<h:form>
<p:tabView id="tabs" orientation="left" styleClass=".borderlessUnit" dynamic="true">
<p:tab id="tab0" title="Test Menu 1">
<p:layout id="layout0" style="min-height:600px;">
<p:layoutUnit position="center" resizable="true" styleClass="borderlessUnit">
<h:outputLabel for="name" value="Name 1:" style="font-weight:bold"/>
<p:inputText id="name" value="#{personBean.firstname}" />
<p:commandButton value="Submit" update="display"/>
<h:outputText value="#{personBean.firstname}" id="display" />
</p:layoutUnit>
</p:layout>
</p:tab>
<p:tab id="tab1" title="Test Menu 2">
<p:layout id="layout1" style="min-height:600px;">
<p:layoutUnit position="center" resizable="true" styleClass="borderlessUnit">
<h:outputLabel for="name1" value="Name 2:" style="font-weight:bold"/>
<p:inputText id="name1" value="#{personBean.secondname}" />
<p:commandButton value="Submit1" update="display1"/>
<h:outputText value="#{personBean.secondname}" id="display1" />
</p:layoutUnit>
</p:layout>
</p:tab>
</p:tabView>
</h:form>
</html>
In use manual of PrimeFaces is documented that you should avoid nesting layout and layout units inside forms, and that each layout unit should have its own form, instead. So remove form, and put separated form inside each layoutUnit