I am using <p:datatable> in UI to display the records using jsf. I am trying to add rows to the data table on click of Add button. On click of Add button, I am updating the list in the backing bean which in turn updates the datatable in UI with an extra row added. Now the issue is, the more I add rows to the data table, the more it becomes slow. Any solution for the same will be really appreciated.
Below is my sample code -
<?xml version="1.0" encoding="UTF-8"?>
<ui:composition template="#{dir}/template.xhtml" 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">
<p:dataTable id="employeeTable" var="emp" value="#{bbean.employeeList}"
scrollable="true" scrollHeight="260" rowIndexVar="row">
<ui:include src="column1.xhtml" />
<ui:include src="column2.xhtml" />
<ui:include src="column3.xhtml" />
<ui:include src="column4.xhtml" />
<ui:include src="column5.xhtml" />
<ui:include src="column6.xhtml" />
<ui:include src="column7.xhtml" />
<ui:include src="column8.xhtml" />
<ui:include src="column9.xhtml" />
<ui:include src="column10.xhtml" />
<ui:include src="column11.xhtml" />
<ui:include src="column12.xhtml" />
<ui:include src="column13.xhtml" />
<ui:include src="column14.xhtml" />
<ui:include src="column15.xhtml" />
</p:dataTable>
<p:commandButton id="addButton" value="Add" process="#this"
actionListener="#{bbean.addEmployee}" oncomplete="DCVS.fn.focusOnTable('employeeTable')" />
</ui:composition>
Related
I am using JSF 2.0 with PrimeFaces 5.0, I have three tabs in my application, the first tab is the master and the remaining two tabs are details which are based on the row selection from master. The problem is that when I set dynamic="true" and cache="false" then all the tabs are refreshing.I want to keep the cache for the master and just only refresh the details(other two tabs)
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
template="/WEB-INF/template/master.xhtml">
<ui:define name="title">
#{loc.Clients_Title_Name_Index}
</ui:define>
<ui:define name="head">
<ui:define name="content">
<h:form id="stepsForm">
<p:steps
activeIndex="#{retClientsBean.activeTabIndex}" styleClass="custom" >
<p:menuitem value="Ret Clients"/>
<p:menuitem value="Ret Accounts"/>
<p:menuitem value="Ret Contracts"/>
</p:steps>
</h:form>
<h:form>
<p:remoteCommand name="updateListForm"
update="tabs:RetAccountsForm tabs:RetContractsForm"></p:remoteCommand>
</h:form>
<p:tabView id="tabs" dynamic="true" cache="false">
<p:ajax event="tabChange" update=":stepsForm"
listener="#{retClientsBean.onTabChange}" />
<p:tab id="ClientsListTab"
title="Ret Clients">
<ui:include src="ClientsList.xhtml"/>
<ui:include src="EditClientsDialog.xhtml"/>
<ui:include src="CreateClientsDialog.xhtml"/>
</p:tab>
<p:tab id="RetAccountsTab" title="Ret Accounts">
<ui:include src="/Admin/RetAccounts/List.xhtml" />
<ui:include src="/Admin/RetSituationsAccount/RetSituationsAccountList.xhtml"/>
<ui:include src="/Admin/RetLimitsAccounts/RetLimitsAccountsList.xhtml"/>
<ui:include src="/Admin/RetCards/RetCardsList.xhtml"/>
</p:tab>
<p:tab id="RetContractsTab"
title="Ret Contracts">
<ui:include src="/Admin/RetContracts/List.xhtml" />
<ui:include src="/Admin/RetInstallmentsContract/RetInstallmentsContractList.xhtml" />
</p:tab>
</p:tabView>
</ui:define>
</ui:composition>
Click here to see the application View
<ui:composition>
<ui:decorate template="/view-fragments/section/frag_section.xhtml" >
<ui:param name="AttrId" value="SOME_VALUE" />
<ui:param name="AttrMinimized" value="false" />
<ui:define name="AttrContentTitle">
Some Title
</ui:define>
<ui:param name="AttrCollapsable" value="false" />
<ui:define name="AttrContentBody">
<h:form id="form_some_form" class="form-horizontal">
<p:tabView id="tabView" widgetVar="tabView" dynamic="true" rendered="true" cache="true">
<p:tab id="tab1" title="title1">
</p:tab>
<ui:include src="/view-fragments/project/frag_tab2.xhtml" />
<ui:include src="/view-fragments/project/frag_tab3.xhtml" />
<ui:include src="/view-fragments/project/frag_tab4.xhtml" />
<ui:include src="/view-fragments/project/frag_tab5.xhtml" />
<ui:include src="/view-fragments/project/frag_tab6.xhtml" />
</p:tabView>
</h:form>
</ui:define>
</ui:decorate>
</ui:composition>
This doesn't load tab2, tab3...etc. content to the tabView. but the content is shown if I take it off the p:tabView. Can anyone help? Thank you.
i am using a template for my views, as i have 10 views and all need the same code apart from the values.
The values that are just outputing infomration like text etc i have done fine, however what i am wondering is how do i go about adding values that pull data from another section of the application into the template
currently i have :
<p:spinner id="ajaxspinner0-19"value="#{markingBean.markToEdit.markSectionOne}"
stepFactor = "1" min="0" max="19"
disabled = "#{formBean.number != 1}" >
<p:ajax update="ajaxspinnervalue " process="#this" />
</p:spinner>
this code is not in the template at all jsut in the view and works well, the value would be displayed in the spinner as say 71
what i am wondering is how can i have this in the template where it will work on load up just like this but also give the chance so for page one i would have value="#{markingBean.markToEdit.markSectionOne}" and for page two value="# {markingBean.markToEdit.markSectionTwo}" etc etc
the important thing here is that when the page loads up it acts exactly the same way as the top example and will display the correct value
Thanks Guys !
EDIT:
This is the view currently
<ui:fragment > <!-- rendered="{request.isUserInRole('')}"> IMPLEMENT ONCE WE HAVE A LOG ON SYSTEM-->
<p:growl id="growl" />
<p:progressBar widgetVar="pbAjax" ajax="true" value="7" labelTemplate="{value}%" styleClass="animated"/>
<h3>Project Marking - Section One</h3>
<h4>Context, Aims and Objectives</h4>
<f:event listener="#{tooltipBean.setupForPageA}" type="preRenderView" />
<ui:include src="/WEB-INF/templates/commonForm.xhtml"/>
</ui:fragment>
If you put this p:spinner part in a ui:composition like so:
spinner.xhtml
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:u="http://java.sun.com/jsf/composite/ui"
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">
<p:spinner id="#{spinnerId}"value="#{selectedValue}"
stepFactor = "1" min="0" max="19"
disabled = "#{disabled}" >
<p:ajax update="#{update}" process="#this" />
</p:spinner>
</ui:composition>
View
Then you could include it in your view with ui:param
<ui:include src="path/to/your/spinner.xhtml">
<ui:param name="selectedValue" value="#{markingBean.markToEdit.markSectionOne}" />
<ui:param name="disabled" value="#{formBean.number != 1}" />
<ui:param name="update" value="ajaxspinnervalue" />
<ui:param name="spinnerId" value="ajaxspinner1" />
</ui:include>
<ui:include src="path/to/your/spinner.xhtml">
<ui:param name="selectedValue" value="#{markingBean.markToEdit.markSectionTwo}" />
<ui:param name="disabled" value="#{formBean.number != 1}" />
<ui:param name="update" value="ajaxspinnervalue" />
<ui:param name="spinnerId" value="ajaxspinner2" />
</ui:include>
I hope I understood you right.
I have implemented a composite component in JSF using primefaces.
<ui:component ...>
<cc:interface>
<cc:facet name="header"/> ...
<cc:interface>
<cc:implementation>
<p:dataTable>
<f:facet name="header">
<c:choose>
<c:when test="#{empty cc.attrs.metadata.headerText}">
<cc:insertFacet name="header" required="true"/>
</c:when>
<c:otherwise>
#{cc.attrs.headerText}
</c:otherwise>
</c:choose>
</f:facet> ...
</dataTable>
</cc:implementation>
When I use it in a normal page it works fine as expected rendering the datatable.
<ui:composition>
<nav:dataTable/>
<f:facet name="header">
<h:outputText value="headerText" />
</f:facet>
</ui:composition>
But when I use it inside a dialog which uses the above composite component, it throws
component.xhtml #28,54
Unable to find facet named 'header' in parent
composite component with id 'j_idt129'
I am making a ajax call to invoke this dialog on click of a link. The dialog comes in different shape and throwing this error in console. Has anyone faced it ? Any help is really appreciable.
cc:insertFacet inserts the whole f:facet tag, so you shouldn't wrap it into another f:facet tag within the composite implementation. As you are writing a custom p:dataTable I think it's easier to overwrite the already existing header facelet as an interface declaration and conditionally render it using JSTL utilities:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:composite="http://java.sun.com/jsf/composite"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:c="http://java.sun.com/jsp/jstl/core">
<h:body>
<composite:interface>
<composite:facet name="header" />
<composite:attribute name="title" />
</composite:interface>
<composite:implementation>
<p:dataTable>
<!-- If the facet is given at parent, insert it.
Otherwise, provide the title given by the attribute -->
<c:choose>
<c:when test="#{not empty cc.facets.header}">
<composite:insertFacet name="header" />
</c:when>
<c:otherwise>
<f:facet name="header">
#{cc.attrs.title}
</f:facet>
</c:otherwise>
</c:choose>
<p:column headerText="column" />
</p:dataTable>
</composite:implementation>
</h:body>
</html>
Using it as:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:comp="http://java.sun.com/jsf/composite/comp">
<f:view>
<h:head />
<h:body>
<h:form>
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
<comp:myTable title="Custom header" />
<p:commandButton type="button" onclick="dialog.show()"
value="show in dialog" />
<p:dialog widgetVar="dialog">
<comp:myTable title="header">
<f:facet name="header">
<h:outputText value="text" />
</f:facet>
</comp:myTable>
</p:dialog>
</h:form>
</h:body>
</f:view>
</html>
In the code below, after logging in, ui:include is OK (changing), outputText is OK (changing), and ui:insert is not changing.
template.xhtml:
<html xmlns="http://www.w3.org/1999/xhtml" (...) >
<h:head></h:head>
<h:body>
<p:panel header="LoginForm" >
<ui:insert name="#{userBean.loggedIn?'logoutForm':'loginForm'}" />
<ui:include src="#{userBean.loggedIn?'incA.xhtml':'incB.xhtml'}" />
<h:outputText value="#{userBean.loggedIn?'print logoutForm':'print loginForm'}" />
</p:panel>
</h:body>
</html>
index.xhtml:
<ui:composition template="template.xhtml"
xmlns="http://www.w3.org/1999/xhtml" (...) >
<ui:define name="loginForm">
<h:form >
<p:inputText id="usernameInput" value="#{credentialsBean.username}" />
<p:password id="passwordInput" value="#{credentialsBean.password}" />
<p:commandButton value="Log in" action="#{loginBean.actionLogin}" ajax="false" type="submit" />
</h:form>
</ui:define>
<ui:define name="logoutForm" >
<h:form >
<p:commandButton value="Logout" type="submit" action="#{loginBean.actionLogout}" ajax="false" />
</h:form>
</ui:define>
</ui:composition>
Is it normal behavior?
ui:insert's name property is evaluated in the build JSF tree phase. Use ui:include instead ui:insert to be happy.