I have been asked to write a JSF component that handles results paging. The component takes in a bean that implements an interface. At runtime, the getter methods are called but never the setters. Here is the code
<cc:interface>
<cc:attribute name="pagableResultsBean" />
</cc:interface>
<!-- Question: We can't have a form inside of a form. Do we ecapsulate form operations here or
should the client handle them? -->
<cc:implementation>
<c:set var="pagableResultsBean" value="#{cc.attrs.pagableResultsBean}" />
<div
style="background-color: #F0F3FA; border: 1px solid #ABABAB; height: 25px; margin: 0px; padding: 2px 8px; position: relative; vertical-align: middle;">
<h:panelGroup>
<div style="float: left; width: auto;">
Showing Results <h:outputLabel value="#{pagableResultsBean.showingRecordMin}" /> - <h:outputLabel value="#{pagableResultsBean.showingRecordMax}" /> of
#{pagableResultsBean.totalRecordsNum} Results per Page:
<h:selectOneMenu value="#{pagableResultsBean.resultsPerPage}" onchange="$j(document).find('.pageBarSubmitBtn').click();">
<f:selectItems value="#{pagableResultsBean.resultsPerPageItems}" />
</h:selectOneMenu>
</div>
<div style="float: right; width: auto;">
Showing Page #{pagableResultsBean.currentPageNum} of #{pagableResultsBean.totalPagesNum} Jump
to Page
<h:selectOneMenu id="_pagesMenu" value="#{pagableResultsBean.currentPageNum}" onchange="$j(document).find('.pageBarSubmitBtn').click();">
<f:selectItems value="#{pagableResultsBean.resultsPerPageItems}" />
</h:selectOneMenu>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToFirstPage()}">
<h:graphicImage value="/images/arrow-first.gif" />
</h:commandLink>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToPreviousPage()}">
<h:graphicImage value="/images/arrow-previous.gif" />
</h:commandLink>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToNextPage()}">
<h:graphicImage value="/images/arrow-next.gif" />
</h:commandLink>
<h:commandLink style="position: relative; top: 3px;" action="#{pagableResultsBean.goToLastPage()}">
<h:graphicImage value="/images/arrow-last.gif" />
</h:commandLink>
</div>
<h:commandButton style="visibility: hidden;" styleClass="jsfHidden pageBarSubmitBtn"/>
</h:panelGroup>
</div>
</cc:implementation>
This is the interface that the backing bean implements:
public interface PagableResults {
public int getShowingRecordMin();
public int getShowingRecordMax();
public ResultsPerPage getResultsPerPage();
public void setResultsPerPage(ResultsPerPage rpp);
public int getCurrentPageNum();
public void setCurrentPageNum(int pageNum);
public int getTotalPagesNum();
public int getTotalRecordsNum();
public List<SelectItem> getResultsPerPageItems();
public List<SelectItem> getResultsPagesItems();
public void goToFirstPage();
public void goToLastPage();
public void goToPreviousPage();
public void goToNextPage();
}
And here is the snippet where the control is used
<h:form>
<ndar:pagingBar pagableResultsBean="#{pageBean}" />
</h:form>
Can anyone see any reason why only the getters get called and not the setters?
As you seem to use c:set from the JSP JSTL Core Tag Library, this might not work well with the JSF and especially the JSF Composite Component system.
Have you tried to replace all instances of pagableResultsBean with cc.attrs.pagableResultsBean as this would eliminate one possible reason of the error?
Also, put a Debugger on the set-method you think is not getting called - and verify whether it is really not called or just the html result looks like.
Update 2014-12-31
Also make sure to have a h:messages tag to the jsf to make sure JSF tells you of a possible conversion-error.
Related
This question already has answers here:
Display dynamic image from database or remote source with p:graphicImage and StreamedContent
(4 answers)
Backing beans (#ManagedBean) or CDI Beans (#Named)?
(5 answers)
Closed 2 years ago.
I'm relatively new to JSF and Primefaces.
I'm trying to build a document viewer that would display tiff, jpeg and pdf.
My UI has a left and a right layout.
Left layout contains a vertical grid of thumbnails of the docs.
User clicks on a thumbnail, and the right layout displays the doc (either via a p:graphicImage or via a p:documentViewer, depending on the thumbnail clicked).
For tiffs, I'm converting the image into PNG and then displaying (both, for the thumbnail and the main display).
For multi-page tiff files, I show only the first page as the left side thumbnail...and for the main display, I give Next and Previous buttons to navigate through the pages. The UI is something like this:
The problem:
When I click on the thumbnails, the backing method gets invoked twice as expected (the second call returning the StreamedContent with the actual data).
However, when I click the Prev and Next buttons, the same backing method is getting called only once -- just for phaseid=RENDER_RESPONSE.
(eventually, this causes the bean method to return only an empty StreamedContent and not one carrying the actual image data...so I don't get to see the other pages of the tiff)
The form:
<h:form id="mainform">
<p:layout fullPage="true" style="width:100%;height:100%">
<p:layoutUnit position="west" style="width:15%;overflow:scroll;" resizable="true">
<p:panelGrid header="Thumbnails" columns="1" class="thumbcell" >
<p:repeat value="#{viewerController.docIds}" var="docId">
<p:panelGrid style="padding:0px !important;" columns="1" rendered="#{docId.contains('img')}" >
<p:commandLink update=":mainform:renderpanel" action="#{viewerController.setSelectedDocId(docId)}">
<p:graphicImage value="#{viewerController.imageDocumentStream}" style="height: 100px; width: 90px; border: none !important; padding:0px;background: lightgrey;"
alt="#{viewerController.getDocumentName(docId)}">
<f:param name="id" value="#{docId}" />
</p:graphicImage>
</p:commandLink>
<p:outputLabel value="#{viewerController.getDocumentName(docId)}"/>
</p:panelGrid>
<p:panelGrid style="padding:0px !important;" columns="1" rendered="#{docId.contains('tif')}">
<p:commandLink update=":mainform:renderpanel" action="#{viewerController.setSelectedDocId(docId)}">
<p:graphicImage value="#{viewerController.tifDocumentStream}" style="height: 100px; width: 90px; border: none !important; padding:0px;background: lightgrey;"
alt="#{viewerController.getDocumentName(docId)}">
<f:param name="id" value="#{docId}" />
<f:param name="forThumbnail" value="true" />
</p:graphicImage>
</p:commandLink>
<p:outputLabel value="#{viewerController.getDocumentName(docId)}"/>
</p:panelGrid>
<p:panelGrid style="padding:0px !important;" columns="1" rendered="#{docId.contains('pdf')}">
<p:commandLink update=":mainform:renderpanel" action="#{viewerController.setSelectedDocId(docId)}">
<p:graphicImage value="#{viewerController.pdfFirstPageDocumentStream}" style="height: 100px; width: 90px; border: none !important; padding:0px;background: lightgrey;"
alt="#{viewerController.getDocumentName(docId)}">
<f:param name="id" value="#{docId}" />
</p:graphicImage>
</p:commandLink>
<p:outputLabel value="#{viewerController.getDocumentName(docId)}"/>
</p:panelGrid>
</p:repeat>
</p:panelGrid>
</p:layoutUnit>
<p:layoutUnit position="center" style="width:85%;">
<p:panel id="renderpanel">
<p:panelGrid style="padding:0px !important;" columns="1" rendered="#{viewerController.currentDocId.contains('tif')}">
<p:outputLabel value="#{viewerController.getDocumentName(viewerController.currentDocId)}"/>
<p:panelGrid style="padding:0px !important;" columns="3" id="tifPanelGrid">
<p:commandButton update=":mainform:renderpanel" action="#{viewerController.navigateTif('prev', viewerController.currentDocId)}"
id="prevButton" value="Prev" title="Previous page" disabled="#{viewerController.prevButtonDisable}"/>
<p:graphicImage rendered="#{viewerController.render}" id="tifPanel" value="#{viewerController.tifDocumentStream}" style="height: 600px; width: 800px; border: none !important; padding:0px;background: lightgrey;"
alt="#{viewerController.getDocumentName(viewerController.currentDocId)}">
<f:param name="id" value="#{viewerController.currentDocId}" />
<f:param name="forThumbnail" value="false" />
</p:graphicImage>
<p:commandButton update=":mainform:renderpanel" action="#{viewerController.navigateTif('next', viewerController.currentDocId)}"
id="nextButton" value="Next" title="Next page" disabled="#{viewerController.nextButtonDisable}"/>
</p:panelGrid>
</p:panelGrid>
<p:panelGrid style="padding:0px !important;" columns="1" rendered="#{viewerController.currentDocId.contains('img')}">
<p:outputLabel value="#{viewerController.getDocumentName(viewerController.currentDocId)}"/>
<p:graphicImage value="#{viewerController.imageDocumentStream}" style="height: 600px; width: 800px; border: none !important; padding:0px;background: lightgrey;"
alt="#{viewerController.getDocumentName(viewerController.currentDocId)}">
<f:param name="id" value="#{viewerController.currentDocId}" />
</p:graphicImage>
</p:panelGrid>
<p:panelGrid style="padding:0px !important;" columns="1" rendered="#{viewerController.currentDocId.contains('pdf')}">
<p:outputLabel value="#{viewerController.getDocumentName(viewerController.currentDocId)}"/>
<pe:documentViewer height="600" width="800" value="#{viewerController.pdfDocumentStream}" >
<f:param name="id" value="#{viewerController.currentDocId}" />
</pe:documentViewer>
</p:panelGrid>
</p:panel>
</p:layoutUnit>
</p:layout>
</h:form>
The controller class is annotated with these two:
javax.annotation.ManagedBean
javax.enterprise.context.SessionScoped
The backing method in the controller class, that is not getting invoked twice:
public StreamedContent getTifDocumentStream() throws IOException {
FacesContext context = FacesContext.getCurrentInstance();
if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE ) {
return new DefaultStreamedContent();
} else {
String id = context.getExternalContext().getRequestParameterMap().get("id");
String forThumbnail = context.getExternalContext().getRequestParameterMap().get("forThumbnail");
Doc doc = tifDocMap.get(id);
InputStream is = this.convertTiffToPng(doc, forThumbnail);
return new DefaultStreamedContent(is);
}
}
I'm on this combination: SpringBoot + JoinFaces + PF 6.2
Can any body please advise what I'm doing wrong?
An alternate way I'm considering, to achieve the purpose:
May be, turn the pages of the tiff to individual PNGs beforehand, and then use galleria ...but it would be nice if I could get galleria to work with StreamedContent of each page dynamically.
I am currently developing an app with Primefaces and recently started using a Tree component. It exactly provide the functionality that I need but I have some problems while using it inside of a dialog. When there are many records I had to surround this tree with <p:outputPanel> in order to have scroll. Everything was fine until I added filtering to that tree component. Because of surrounded panel this filter input text appears right above the tree, inside of this panel and when I scroll this down, this filter input is left above on top.
Is there a possibility that I add manually a filter input above the whole panel and connect it to the tree like it is done for example in DataTable components of PrimeFaces? Tried that way yet it is not working. Below is .xhtml of my dialog. Any help would be appreciated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui" xmlns:f="http://xmlns.jcp.org/jsf/core">
<p:dialog id="manageKnownDeviceDlg" header="#{msg['ip.usb.manageKnownDlg.Title']}" height="700"
showEffect="explode" resizable="true" modal="true" appendTo="#(body)"
width="700" widgetVar="manageKnownDeviceDlg" style="text-align: right;">
<h:form id="manageKnownDialogForm" >
<p:outputPanel style="width: 100%; max-height: 600px; min-height: 600px;height: 88%;overflow: auto;display: block; border: solid 1px;">
<p:tree id="manageKnownDevicesTree" var="knownDevice" value="#{baseModel.usbDeviceDictTreeRoot}"
widgetVar="usbDeviceDictTree"
selectionMode="checkbox" selection="#{baseModel.usbDeviceDictSelected}"
filterBy="#{knownDevice}" filterMatchMode="contains" emptyMessage="#{msg['global.noData']}"
style="text-align: left; width: 98%;">
<p:treeNode>
<h:outputText value="#{knownDevice.toString()}"/>
</p:treeNode>
</p:tree>
</p:outputPanel>
<br/>
<h:panelGrid columns="1" style="position: absolute; right: 5px;">
<h:panelGrid columns="5" style="margin-top: 10px;">
<p:commandButton value="#{msg['ip.usb.manageKnownDlg.Disable']}" update="manageKnownDevicesTree"
actionListener="#{knownDevicesDlgController.unselectKnownDeviceClasses}" styleClass="vs-button"
process="manageKnownDeviceDlg"/>
<p:commandButton value="#{msg['ip.usb.manageKnownDlg.YesToAll']}" update="manageKnownDevicesTree"
actionListener="#{knownDevicesDlgController.selectAllDevices}" styleClass="vs-button"
process="manageKnownDeviceDlg"/>
<p:commandButton value="#{msg['ip.usb.manageKnownDlg.NoToAll']}" update="manageKnownDevicesTree"
actionListener="#{knownDevicesDlgController.unselectAllDevices}" styleClass="vs-button"
process="manageKnownDeviceDlg"/>
<p:commandButton value="#{msg['global.ok']}" update="usbForm:usbDeviceTable,manageKnownDialogForm"
onclick="PF('manageKnownDeviceDlg').hide();" process="manageKnownDeviceDlg" styleClass="vs-button"
actionListener="#{knownDevicesDlgController.addKnownDevice}" style="text-align: right"/>
<p:commandButton value="#{msg['global.cancel']}" update="manageKnownDeviceDlg" styleClass="vs-button"
onclick="PF('manageKnownDeviceDlg').hide();"/>
</h:panelGrid>
</h:panelGrid>
</h:form>
</p:dialog>
</ui:composition>
Setting a max-height on the ui-tree-container solves the problem. Using this in the showcase
.ui-tree-container {
max-height: 70px;
}
Results in
You might want to add an explicit class to the tree and use that in the selector so it does not apply to all trees.
I'm trying to offer some content dynamically, that is without dedicated pages, with the help of buttons. The aforementioned content is correctly loaded, but it's not working.
The layout is like this:
<p:outputPanel style="width: 100%; height: 100%; overflow: auto;" id="contentPanel">
<c:choose>
<c:when test="#{empty requestComposition}">
<ui:insert name="body">Content</ui:insert>
</c:when>
<c:otherwise>
<ui:include src="#{requestComposition}" />
</c:otherwise>
</c:choose>
</p:outputPanel>
The button to load content is like this (inside another outputPanel):
<p:commandButton value="Load Dynamic" update=":contentPanel" actionListener="#{applicationController.processActionButton('/dynamic')}" />
The action listener is like this:
public void processActionButton(String target){
if(target == null || target.isEmpty()){
return;
}
FacesContext context = FacesContext.getCurrentInstance();
HttpServletRequest req = (HttpServletRequest)context.getExternalContext().getRequest();
req.setAttribute("requestComposition", "/WEB-INF/templates" + target + ".xhtml");
}
The dynamic.xhtml is like this:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:fn="http://xmlns.jcp.org/jsp/jstl/functions"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:p="http://primefaces.org/ui"
xmlns:pe="http://primefaces.org/ui/extensions">
<p:outputPanel style="width: 100%; padding-top: 20px;">
<p:outputPanel style="width: 60%; margin: 0 auto;">
<p:outputPanel style="text-align: center; color: gold; font-weight: bold;">Dynamic</p:outputPanel>
<p:messages id="messages" />
<h:form>
<p:panelGrid columns="2" style="width: 100%;">
<p:outputLabel value="Item" for="idItem" />
<p:outputPanel style="display: block; padding-right: 10px;" layout="inline">
<p:inputText value="#{bean.item}" id="idItem" style="width: 100%;" required="true" />
</p:outputPanel>
</p:panelGrid>
<p:outputPanel style="text-align: center;">
<p:commandButton value="Process" style="margin: 5px;" update=":growl" onclick="PrimeFaces.widgets.widget_#{fn:replace(component.clientId, ':', '_')}.disable()" oncomplete="PrimeFaces.widgets.widget_#{fn:replace(component.clientId, ':', '_')}.enable()" actionListener="#{applicationController.dummyAction}" />
<p:commandButton value="Dummy" style="margin: 5px;" update=":growl" actionListener="#{applicationController.dummyAction}" process="#this" />
</p:outputPanel>
</h:form>
</p:outputPanel>
</p:outputPanel>
</ui:composition>
When any of the buttons is clicked the form apparently submits, but the action listener is not executed.
When dynamic.xhtml is loaded as page content the form submits, but the action listener is triggered only for the second button (labelled Dummy), because of process #this, in which case the form is no longer submitted. I can workaround the form not submitting with process#this by adding onchange to input elements, but I failed to understand why is not working when it is loaded dynamically.
Thank you
I have to apologize to BalusC, since the answer he suggested was actually correct. I was tricked by the #PostConstruct which performed an unnecessary initialization for me, but the key is to use a #ViewScoped bean. That however raises another question, since it is stated in the documentation that by default there will be maximum 20 such objects stored in the server, which can be configured to a different value, but if I understood correctly that would mean that the 21st connection to the server will result in reusing the first one, so the new connection will access data not meant for it, or in discarding it and creating a new one, which means the first will lose its data?
I have the following code in a xhtml page using PrimeFaces:
<h:panelGroup id="dropZoneId" layout="block"
style="height:500px;width:1210px;text-align:center;">
<h:outputLabel value="Drop here" style= "color: azure;" />
</h:panelGroup>
I would like to have the <h:outputLabel> "drop here" in the middle of the <h:panelGroup> but so far I can only put it at the center at the top of the <h:panelGroup> with no css.
Can someone please help ? Thank you
Maybe this will suffice:
<h:panelGroup id="dropZoneId" layout="block" style="height: 500px; text-align: center">
<h:outputText value="Drop here" style="color: azure; position: absolute; top: 240px" />
</h:panelGroup>
.myLabel {
float: center;
}
Official Resource #Primefaces: https://forum.primefaces.org/viewtopic.php?t=14611
I have a simple JSF application with a form, one of the controls being a selectOneListbox:
<h:selectOneListbox style="width: 231px; height: 27px;position:absolute;left:400px;top:325px;" value="#{PatientsSearch.selectedDoctor}">
<f:selectItems value="#{PatientsSearch.doctors}" var="d" itemLabel="#{d.name}" itemValue="#{d.name}" />
</h:selectOneListbox>
When I run the application, I can see the list being populated (i.e. PatientsSearch.doctors is correctly retrieved), so I can choose one item from the selectOneListbox. After I choose the desired item, nothing works any more on that form. All the other buttons seem to be idle, they don't react to clicks any more. If however nothing is selected from the selectOneListbox, all buttons works as expected (i.e. they trigger their callbacks in the managed beans).
I debugged the application and noticed that indeed, after selecting an item in the list, the callbacks of the other buttons on the form don't get triggered when clicking them.
Also in the debugger I never see setSelectedDoctor() being called (see the snippet above) as I expected.
I'm using Mojarra 2.0.1 implementation of JSF.
What am I missing here ?
Update: This is the entire form:
<h:form style="width: 876px; background-color: #FED981; padding-left: 60px; padding-top: 30px; margin-left: 80px; margin-top: 40px; color: #804000; font-style: normal; font-family: Verdana, Arial, Sans-Serif">
<h:outputLabel style="position:absolute;left:200px;top:100px;" value="New appointment:"></h:outputLabel>
<br>
<br>
<h:inputText style="width: 259px;position:absolute;left:200px;top:120px;" binding="#{PatientsSearch.inputText1}" valueChangeListener="#{PatientsSearch.lookForName}" immediate="true" id="inputText1" />
<h:commandButton value ="Search patients by name:" style="width: 173px;position:absolute;left:465px;top:120px;" action="#{PatientsSearch.getPatientsByName}">
<f:param name="day" value="#{request.getParameter('day')}" />
<f:param name="month" value="#{request.getParameter('month')}" />
<f:param name="year" value="#{request.getParameter('year')}" />
</h:commandButton>
<br>
<h:panelGroup id="pn_DETAILS_GRP" style="overflow:auto;position:absolute;top:155px;left:200px;width:300px;height:150px;solid black">
<h:dataTable id="tb_USER_DETAILS" border="1" var="patient" value="#{PatientsSearch.patients}" style="width:300px;height:150px" rowClasses="oddRow, evenRow">
<h:column id="name">
<f:facet name="header">
<h:outputText value="Name" style="font-size:10pt"/>
</f:facet>
<h:outputText value="#{patient.name}" style="font-size:8pt"/>
</h:column>
<h:column id="phone">
<f:facet name="header">
<h:outputText value="Phone" style="font-size:10pt"/>
</f:facet>
<h:outputText value="#{patient.phoneMobile}" style="font-size:8pt"/>
</h:column>
<h:column>
<h:inputHidden id="patientId" value="#{patient.id}" />
</h:column>
</h:dataTable>
</h:panelGroup>
<h:inputHidden id="testId" />
<br><br><br>
<h:outputLabel value="Choose doctor:" style="width: 200px;position:absolute;left:200px;top:325px;"></h:outputLabel>
<h:selectOneListbox style="width: 231px; height: 27px;position:absolute;left:400px;top:325px;" value="#{PatientsSearch.selectedDoctor}" size="1">
<f:selectItems value="#{PatientsSearch.doctors}" var="d"
itemLabel="#{d.name}" itemValue="#{d.name}" />
</h:selectOneListbox>
<br><br><br>
<h:commandButton value="Schedule" style="position:absolute;left:200px;top:430px;" action="#{PatientsSearch.scheduleAppointment}">
<f:param name="day" value="#{request.getParameter('day')}" />
<f:param name="month" value="#{request.getParameter('month')}" />
<f:param name="year" value="#{request.getParameter('year')}" />
</h:commandButton>
</h:form>
As per comments, the problem is that the type for #{d.name} is not the same as #{PatientsSearch.selectedDoctor}. In such situation there is two solutions :
Keep everything you have the same, change the #{PatientsSearch.selectedDoctor} getter/setter to a String type.
Create a list of SelectItem in the backing bean and change the #{PatientsSearch.selectedDoctor} getter/setter to a String type. You will also be able to remove itemValue and itemLabel since the backing bean already provide ready Object for list components.
Change the itemValue attribute from the f:selectItems and create a custom converter
I prefer the second since it separate better the view. It should be changed like this :
<h:selectOneListbox style="width: 231px; height: 27px;position:absolute;left:400px;top:325px;" value="#{PatientsSearch.selectedDoctor}" size="1">
<f:selectItems value="#{PatientsSearch.doctors}" var="d" itemLabel="#{d.name}" />
<f:converter convertId="doctorConverter" />
</h:selectOneListbox>
Now for the converter, you can start it like this :
#FacesConverter(value="doctorConverter")
public class DoctorConverter implements Converter {
#Override
public Object getAsObject(FacesContext context, UIComponent component, String value) {
// Your code, select doctor from value ID for example.
}
#Override
public String getAsString(FacesContext context, UIComponent component, Object value) {
// Your code, return doctor ID from value.
}
}