Show some contents inside p:lightBox - jsf

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

Related

<h:commandButton> Create a new CDI #ViewScoped on Click, instead of using existing one

In a JSF 2.2 application, a user visit the link test.xhtml?id=324 , The page must have the paramater id. The page is backed by a CDI #ViewScoped Bean called TestBean.
The fields get initiliazed using a #postconstruct method
#PostConstruct
public void initialize() {…}
and this method that, load data based on id, if id is not present or correct, then direct the user to another page
<f:metadata>
<f:viewAction action="#{testBean.redirectNoParameters}"></f:viewAction>
</f:metadata>
public String redirectNoParameters() {
//method load data based on id, if id is not present or correct, then direct the user to another page
test = testDao.find(id);
In this page there is a comment section
<h:form role="form" prependId="false" >
<h:selectOneMenu value="#{testBean.sortComment}" valueChangeListener="#{testBean.orderComments}">
<f:ajax event="change" execute="#this" render="comment-listing" />
<f:selectItem itemLabel="Recent" itemValue="1"></f:selectItem>
<f:selectItem itemLabel="Oldest" itemValue="2"></f:selectItem>
<f:selectItem itemLabel="Popular" itemValue="3"></f:selectItem>
</h:selectOneMenu>
</h:form>
<div jsf:id="comment-listing">
<div >
<h:form role="form" prependId="false">
<ui:repeat var="comment" value="#{testBean.comments}" >
<div >
<div >
<div>
<h:commandButton value="#{comment.votes.size()}" action="#{testBean.upVote(comment)}" >
<f:ajax execute="#this" render="comment-listing" immediate="true"/>
</h:commandButton>
</div>
</div>
<div >
<h4 >
<h:link outcome="channel">
<f:param name="handle" value="#{comment.commentor.handle}"></f:param>
#{comment.commentor.handle}
</h:link>
on <span class="c-date">#{comment.creationDate}</span>
</h4>
#{comment.comment}
</div>
</div>
</ui:repeat>
</h:form>
</div>
</div>
As You can see for each comment there is a <h:commandButton> for a user to upvote the comment (like in youtube, stackoverflow…) . When the method is clicked it works as inteded. The method testBean.upVote(comment), is called and the ui is updated.
THEN I use the first form above to Re-order comments, say for example the change is from popular -> Recent. Also the method does its job and the ui is updated.
Till now all is working great.
However, When I click the upvote btn/method (of a different comment) AGAIN. The contsructor get called, so is #postconstruct, and the redirectNoParameters().
I have tried removing all ajax tag to see if it is an ajax problem. And The problem still occurs. So it’s not an ajax issue.
I have tried remove the parameter comment from the method "#{testBean.upVote(comment)}" to see if that’s what producing the problem. And The problem still occurs.
I have tried using <c:forEach instead of <ui:repeat . Still no hope.
What’s produce the problem? Why is this happening instead of just calling the method of the command button ?? Thanks.

Using JSF for <a href="myPicture.png" .../>

I have the following code:
<div id="links" class="links">
<ui:repeat var="storageAttachment"
value="#{gallerySlideshowController.selectedStorageAttachmentList}"
varStatus="status">
<a
href="https://farm9.static.flickr.com/8839/27742500683_1da5eca775_b.jpg"
title="Banana"> <p:graphicImage
title="#{storageAttachment.name}" cache="true"
value="#{galleryPictureThumbnailRequestController.pictureThumbnail}"
rendered="#{galleryPictureThumbnailRequestController.pictureThumbnail != null}">
<f:param name="id" value="#{storageAttachment.uniqueId}" />
</p:graphicImage>
</a>
</ui:repeat>
How can I replace the link in <a
href="https://farm9.static.flickr.com/8839/27742500683_1da5eca775_b.jpg" to my picture path?
I have stored the path on my local PC for every storageAttachment item. For example:
Object1: storageAttachment.path = C:/mypicture.png
So I need something like:
href="#{storageAttachment.path}"
-> But this is also not correct because I got http://C:/mypicture.png
How can I do this?
Thank you for every help.
Your PictureThumnailRequestcontroller.pictureThumbnail is StreamedContend, there are no href methods or getHref or anything like that but, you can get the image's InpuStream via pictureThumbnail.getStream(). I suppose what your trying to achieve is to render the image but bigger?
So maybe try a simple Servlet to render the image
Use Omnifaces to render with better ease.

Disabling items in JavaServer Faces

I’m new in JavaServer Faces.
I have a simply form:
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">#{msgs.leavereply}</h3>
<h1>#{!forumsBean.activeWithProject}</h1>
<h:form>
<h:inputTextarea value="#{forumpostsBean.text}" style="resize:none"/>
<h:commandButton value="#{msgs.add}" action="#{forumpostsBean.addForumpost}"/>
</h:form>
</div>
By clicking command button all it’s fine, executes method forumpostsBean.addForumpost.
But when I modify code to this:
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">#{msgs.leavereply}</h3>
<h1>#{!forumsBean.activeWithProject}</h1>
<h:form>
<h:inputTextarea value="#{forumpostsBean.text}" style="resize:none" disabled="#{not forumsBean.active}"/>
<h:commandButton value="#{msgs.add}" action="#{forumpostsBean.addForumpost}" disabled="#{not forumsBean.active}"/>
</h:form>
</div>
When items not disabled, current page only have refreshed, but method forumpostsBean.addForumpost don’t executes.
In both variants, <h1>#{!forumsBean.activeWithProject}</h1> shows correct value.
You have 2 beans? one called forumpostsBean and another just forumsBean? I can't see if you've got them both but maybe its the main error? as the comment above says, maybe your logic is out of place.
You may want to use rendered="" on the button rather that just disabling it so its not part of the dom at all upon page load and then use an ajax call when you type data in your input field to do partial ajax render the div again and show it. good for testing.

Confusion JSF Updating Value of Input text in Backing bean

Today, i was solving a small problem in JSF. Actually, i have an InputText on my xhtml page with readyOnly attribute set to true.Requirement was on click of a boolean checkbox, i should make the input text editable, means readyOnly false. The code somewhat seemed like this.
<div class="div-form-col" >
<h:outputLabel value="#{msgs.violationAmount} " for="violationAmt" />
<h:inputText value="#{outpassMBean.violationWebDTO.violationAmount}" id="violationAmt" readonly="true"/>
</div>
<div class="div-form-row">
<div class="div-form-col">
<h:outputLabel value="#{msgs.violationExemptionApplicable} " for="violationExempted" />
<h:selectBooleanCheckbox value="#{outpassMBean.violationWebDTO.violationExemptionApplicable}" id="violationExempted" onchange="makeViolationAmountEditable(this);">
</h:selectBooleanCheckbox>
</div>
</div>
The script of that method was given as below :-
function makeViolationAmountEditable(id){
alert("Ben");
document.getElementById('violationAmt' ).readOnly=false;
alert("Done");
}
Now my first problem was, if i am editing the value in the text field, how i can update the value of violationAmt in backing bean. What can be the best possible way? As i am using PrimeFaces, i came across concept remoteCommand. So here is what i added.
<p:remoteCommand name="makeViolationAmountEditableOnServer" action="#{outpassMBean.makeViolationAmountEditable}" update="amountPanelApplicant"/>
The method at the backing bean level was something like this
public void makeViolationAmountEditable(){
//Set updated value
setUpdatedViolationAmount(violationWebDTO.getViolationAmount());
//Some other code.
}
Problem was that, whenever this code was running, the violation amount in violationWebDTO was the old one, not the one which i was entering after making the input field editable. Though i saw in firebug the updated value was part of request but in the backing bean, however still old value was getting referred. I don't understand why?
My senior told me, you are updating value of readOnly on client side not server side, and updated my code something like this.
<p:outputPanel id="amountPanelApplicant">
<p:outputPanel rendered="#{outpassMBean.violationWebDTO.violationForCmb eq 2 and outpassMBean.violationWebDTO.isViolationExists}">
<p:outputPanel styleClass="div-form twoCol">
<div class="div-form-row">
<div class="div-form-col" >
<h:outputLabel value="#{msgs.violationAmount} " for="violationAmt" />
<h:inputText value="#{outpassMBean.violationWebDTO.violationAmount}" id="violationAmt" readonly="#{outpassMBean.violationAmtEditable}">
</h:inputText>
</div>
<div class="div-form-col">
<h:outputLabel value="#{msgs.outPayTot} " for="totalViolationAmount" />
<h:outputLabel styleClass="readOnly" value="#{outpassMBean.violationWebDTO.totalViolationAmount}" id="totalViolationAmount" />
</div>
</div>
</p:outputPanel>
<p:outputPanel styleClass="div-form twoCol" rendered="#{outpassMBean.outpassApplication.applicationSubType.id eq 2 }" >
<div class="div-form-row">
<div class="div-form-col">
<h:outputLabel value="#{msgs.violationExemptionApplicable} " for="violationExempted" />
<h:selectBooleanCheckbox value="#{outpassMBean.violationWebDTO.violationExemptionApplicable}" id="violationExempted" onchange="makeViolationAmountEditableOnServer();">
</h:selectBooleanCheckbox>
<p:remoteCommand name="makeViolationAmountEditableOnServer" action="#{outpassMBean.makeViolationAmountEditable}" update="amountPanelApplicant"/>
</div>
</div>
</p:outputPanel>
</p:outputPanel>
public void makeViolationAmountEditable(){
if(logger.isDebugEnabled()){
logger.debug("Inside makeViolationAmountEditable...");
}
//setting violation amount editable flag
setViolationAmtEditable(false);
//Preserving original and total amount.
setOriginalViolationAmt(violationWebDTO.getViolationAmount());
setOriginalTotalViolationAmount(violationWebDTO.getTotalViolationAmount());
}
In the above updated code, no javascript called. The readyOnly value is set to true and false from the backing bean itself. After this update, basically the new edited value was updated in the violationWebDTO.
Can someone explain? Why not in the first snapshot? It's not a complete code but i tried to explain the confusion. Any pointers would be helpful.
This is JSF's safeguard against tampered/hacked requests wherein the enduser uses client side languages/tools like HTML or JS to manipulate the HTML DOM tree and/or HTTP request parameters in such way that the outcome of JSF's disabled, readonly or even rendered attribute is altered.
Imagine what would happen if the JSF developer checked an user's role in such a boolean attribute against the admin role like so disabled="#{not user.hasRole('ADMIN')}" and a hacker manipulated it in such way that it isn't disabled anymore for non-admin users. That's exactly why you can only change the mentioned attributes (and the required attribute and all converters, validators, event listeners, etc) on the server side.
This can however be solved in a simpler manner without the need for an additional property, without the <p:remoteCommand> and the additional bean method.
<h:inputText id="violationAmount" ... readonly="#{makeViolationAmountEditable.value}" />
...
<h:selectBooleanCheckbox binding="#{makeViolationAmountEditable}">
<f:ajax render="violationAmount" />
</h:selectBooleanCheckbox>
See also:
Why JSF saves the state of UI components on server?
How does the 'binding' attribute work in JSF? When and how should it be used?.

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