commandButton for removing images from p:galleria - jsf

I am using Primefaces 5.0.2 with Glassfish 4 (Mojarra 2.2.0).
I've been trying to add a command button to delete/remove the selected image in a p:galleria component. I tried adding a button within the galleria component like this:
<p:galleria id="images" value="#{someBean.images}" var="image">
<p:graphicImage value="#{image}"/>
<p:commandButton icon="ui-icon-trash" title="Delete #{image}" style="position:absolute; top:0; right:0; z-index:10;"
actionListener="#{someBean.deleteImage(image)}"
update="growl images" />
</p:galleria>
I can display the image path fine within the button, but passing the image parameter in the EL Expression #{someBean.deleteImage(image)} does not work as expected.
The issue I have is that when deleteImage is called the image parameter (String) is always empty instead of containing the image name. However, title="Delete #{image}" displays fine, so I suspect image isn't resolved correctly within the actionListener or action attributes.
If I enter a literal string in the xhtml, e.g. #{someBean.deleteImage('deleteme')} it is passed correctly. Passing null also gives an empty string.
someBean.images is a List<String> (image paths).
I am at a loss :/ could anyone point me in the right direction? Is this a bug or am I doing something wrong?
I have also thought about adding a button outside the galleria component, but I am unclear as to how to determine the selected image without having to modify the p:galleria component.
There is also an unanswered question about this (1yr old) How to get the selected image from <p:galleria
Update:
Appending "test" to image using ui:param or c:set will actually give me the string "test" within the deleteImage method, but the h:outputText component correctly renders the value of image with "test" appended. This suggests to me that they are rendered at different times - and the commandButton is rendered at a time when image is null?
<p:galleria id="images" value="#{someBean.images}" var="image">
<p:graphicImage value="#{image}"/>
<ui:param name="img" value="#{image}test"/>
<h:outputText value="#{img}"/>
<p:commandButton icon="ui-icon-trash" title="Delete #{image}" style="position:absolute; top:0; right:0; z-index:10;"
actionListener="#{someBean.deleteImage(img)}"/>
</p:galleria>
Update 2
This could be related to a similar issue in Primefaces Extensions - maybe it is a bug after all. http://forum.primefaces.org/viewtopic.php?f=14&t=39992
I also started a thread in the PF forum: http://forum.primefaces.org/viewtopic.php?f=3&t=40055

<p:galleria id="photoGalleria"
panelHeight="400"
panelWidth="450"
widgetVar="photoGalleriaWidgetVar"
style="width: 100%;"
autoPlay="false"
value="#{partEditBean.selectedPart.partPictures}" var="img">
<p:panelGrid columns="1" styleClass="wf" style="text-align: center;">
<p:commandButton id="delete_pic_button"
update="#form"
value="#{msg['part_view.delete']}" process="#this"
actionListener="#{partImageEditBean.deleteListener}">
<f:param name="pic_id" value="#{img.picId}"/>
</p:commandButton>
</p:panelGrid>
<p:graphicImage styleClass="wf galleriaOver" value="#{img.picUrlPath}"
title="#{partEditBean.selectedPart.partTreeNode.partPathName}"
onclick="window.open('#{img.picUrlPath}','_blank');"/>
</p:galleria>
FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("pic_id")

Related

<p:overlayPanel> shows blank white after updating via command link/button

I am looking for solution that p:overlayPanel content should update it self while clicking commendButton or commendLink. But its showing blank white p:overlayPanel when i click the button. The updating with the p:overlayPanel id in that button or link. I have tried many ways nothing worked out. Is my code wrong?
Please suggest some solution.
Here is my code :
<ui:repeat id="profiles" value="#{items.lstProfiles}" var="profile">
<p:commandLink id="profileLink" value="show" update="moviePanel"
actionListener="#{dashBoardController.showProfileOverlay}"/>
<p:overlayPanel id="moviePanel" for="profileLink" hideEffect="fade"
dynamic="true" style="width:300px; height: 150px;">
<h:panelGrid columns="2">
<h:outputText value="Name : "/>
<h:outputText value="#{dashBoardController.selectedProfile.name}"/>
</h:panelGrid>
</p:overlayPanel>
</ui:repeat>
Usually dynamic="true" should do the job but some times it fails.So to update the contents inside the Overlay.
There are many ways to do this by tweaking Jquery.
Simplest one I can think of is:
Since ui:repeat generates dynamic ID for p:overlayPanels you can update by providing unique css class name from every iteration.
In Primefaces you can select a component using css class also using: #(.myclass).
And so you can update that component also:- update="#(.mystyle)"
Example:
<h:form>
<ui:repeat var="patient" value="#{dataCenter.patientList}">
<p:commandLink value="#{patient.firstName}" id="patientNameLnk" update="#(.overlay-class-#{patient.patientId})"/><br/>
<p:overlayPanel for="patientNameLnk">
<h:panelGroup styleClass="overlay-class-#{patient.patientId}">
#{patient.firstName}
#{patient.lastName}
#{patient.dob}
</h:panelGroup>
</p:overlayPanel>
</ui:repeat>
</h:form>
In the above example css class name for every h:panelGroup will be generated as overlay-class-<PATIENT_ID> so every h:panelGroup will have unique class name(if patientId is unique).
Note: Note that I'm updating h:panelGroup inside p:overlayPanel because if you update p:overlayPanel then it might start flickering(it happened to me while executing above example).

Show some contents inside p:lightBox

How to show some content inside light-box of primefaces as I have to show some information about the image as no. of likes,no. of comments,and also have to provide option to post comments so on and so forth?
On xhtml page I have written this:
<p:lightBox styleClass="imagebox">
<c:forEach var="event1" items="#{event.files}" varStatus="cnt">
<h:outputLink value="#{listOfFilesForEventBean.getImage854By480ProfileUrl(event1)}" title="#{event1.location.locationName}">
<h:graphicImage value="#{listOfFilesForEventBean.getImageIconProfileUrl(event1)}"/>
</h:outputLink>
</c:forEach>
</p:lightBox>
Where files is list of image profiles that I am iterating.
And I want along with the image which is displayed on lightbox some information about the image should be displayed.
I had similar problem. If somebody is still looking for the answer here is my solution.
I did not find easy way to have some additional controls inside p:lightBox item.
Guess it assigns own JavaScript handlers to all its children and that makes a problem.
Also I had the problems with using commandButton inside ui:repeat. So I'm using my own implementation of p:lightBox and p:remoteCommand to call other actions(like post comments, delete image etc). Something like that:
<p:remoteCommand name="deleteImage" update="imagesGrid"
actionListener="#{imageBean.deleteImage}" />
<h:panelGroup id="imagesGrid">
<ui:repeat var="item" value="#{imageBean.list}">
<div class="docThumbContainer">
<div class="docPlaceholder"></div>
<div class="docThumbImage">
<h:outputLink value="/images?id=#{item.imageId}">
<h:graphicImage value="data:image/jpg;base64,#{item.thumbnail}"
alt="" />
</h:outputLink>
</div>
<div class="docThumbButtons">
<p:commandButton type="button" value="Delete"
onclick="deleteImage([{name:'imageId', value:#{item.imageId}}]);" />
</div>
</div>
</ui:repeat>
</h:panelGroup>
ImageBean:
public void deleteImage(ActionEvent event) {
ImageManager manager = getManager();
manager.deleteImage(StringUtil.parseInt(getUrlParameter("imageId"), -1));
}
Of course it is simplified replacement for p:lightBox. To show the full image in the overlay with prev/next buttons you need additional work. E.g. using p:dialog etc

Render rich:extendedDataTable

I need a rich:popup that shows a rich:extendedDataTable, and when the user presses a button, the popup should be shown, and the extendedDataTable must be re-rendered, here is the code:
<rich:popupPanel id="popupId" show="false" modal="true">
<h:form>
<rich:extendedDataTable
value="#{bean.list}"
var="item" rows="5" id="table">
<rich:column>
<h:outputLabel value="#{item}" />
</rich:column>
</rich:extendedDataTable>
<a4j:commandButton value="x" immediate="true"
oncomplete="#{rich:component('popupId')}.hide(); return false;"/>
</h:form>
</rich:popupPanel>
<h:form>
<a4j:commandButton value="show"
oncomplete="#{rich:component('popupId')}.show(); return false;"
render="table" immediate="true" />
</h:form>
The first time I press the show it works fine, but when I close the panel with the X button and press again the show button, the extendedDataTable appears empty (It's rendered but appear empty, see image below).
The problem is fixed if I add an empty extendedDataTable before the popup, like this:
<rich:extendedDataTable />
<rich:popupPanel>
...
With rich:dataTable the problem doesn't exits, but I need a extendedDataTable.
And aditional extrange behaviour is when I resize the browser, the data appears.
Platform
RichFaces: 4.2.2.Final
Spring: 3.1.1.RELEASE
Cheers
Use onclick instead of oncomplete. ExtendedDataTable doesn't render properly inside invisible elements (it's a bug) so the popupPanel has to be made visible before the rerendering.
I had kinda the same issue.
I solved it in a not 100% richface correct way:
<a4j:commandButton
value="show"
action="#{actionForm.setShowEditor('true')}"
oncomplete="javascript:location.reload(true)"/>
<a4j:region layout="block" rendered="#{actionForm.showEditor}" id="panelArea">
<rich:popupPanel id="#{popupID}" modal="true" show="true" domElementAttachment="parent">
....
tabel
buttons
....
</rich:popupPanel>
</a4j:region>
The popup is always shown (show="true") inside the a4j:region.
But the a4j:region is only shown if variable to show the popup = true.
The full page refresh was in my case needed because otherwise my ckeditor had some initialisation errors. It should also work if you only rerender the a4j:region after you set the "#{actionForm.setShowEditor('true')}.

Disable button and show loading image while processing JSF

I have this module in my webapp where i need to update come catalogs.
The idea is to disable the h:commandButton and show a h:graphicImage, both actions are supposed to happen right after the button was clicked.
Finally, when the update process has ended it should do the other way, hide the h:graphicImage, enable the h:commandButton but this time also show a label h:outputText that says either 'Update Success' or 'Update Failure'.
The problem in my code is that the image and the label appear right after the process is finished and I can't find the way to do what I described above.
Where or what am I missing?,
Cheers.
<a4j:commandButton id="btnActualiza" value="Actualizar catálogos"
render="messageCatalogos actualizacionCorrecta
#this imgProcesando"
onclick="this.disabled=true;"
oncomplete="this.disabled=false"
actionListener="#{administrationBean.doImgProcesandoVisible}"
action="#{administrationBean.doActualizaCatalogos}"/>
<a4j:outputPanel id="imgProcesando">
<h:graphicImage rendered="#{administrationBean.imgProcesandoRendered}"
url="img/imgLoading.gif"/>
</a4j:outputPanel>
<h:panelGroup/>
<h:panelGroup/>
<a4j:outputPanel id="actualizacionCorrecta" style="font-size: 14px; color: #D17100">
<h:outputText rendered="#{administrationBean.actualizacionCorrectaLabelRendered}"
value="Actualización correcta !"/>
<h:outputText rendered="#{administrationBean.actualizacionFalloLabelRendered}"
value="Fallo la actualización !"/>
</a4j:outputPanel>
UPDATE
My dev environment:
Mojarra 2.1.6
RichFaces 4.1.0.Final
Tomcat 7.0.14(test) / Tomcat 7.0.22(prod)
You need to show and hide the image by JS instead.
<h:graphicImage id="loading" url="img/imgLoading.gif" style="display:none" />
with
<a4j:commandButton ...
onbegin="this.disabled=true; $('#formId\\:loading').show()"
oncomplete="this.disabled=false; $('#formId\\:loading').hide()"
/>

Primefaces lightBox problem

I have created a page with primefaces where I use the Lightbox component.
I use it in a dynamic matter as I create tumbnails on the fly with a servlet call.
The first page shows up nice and the lightbox works as expected but when I load a new set of pictures for the next page the pictures are shown but when you click on it, it just shows the original picture in a new page, when I then return with the previous button and click on a a thumbnail it works as expected.
This is the jsf code:
<h:outputLabel id="curpage" value="#{pictureBean.currentPage}" />
<h:commandButton value="next" action="#{pictureBean.nextPage}" id="next">
<f:ajax render="lightBox curpage" />
</h:commandButton>
<br/>
<p:lightBox height="500px" id="lightBox">
<ui:repeat value="#{pictureBean.pictures}" var="pic">
<h:outputLink value="#{pic.url}" title="#{pic.description}">
<h:graphicImage value="#{pic.urlThumb}" style="width:100px;height:75px;"/>
</h:outputLink>
</ui:repeat>
</p:lightBox>
I fixed it myself :-) I was forgotten to add the tags between form tags.

Resources