I need to render a simple link in a page that open a pdf file in a new browser window.
I wrote the following tag:
<h:commandLink target="_blank"
action="showPDF"
title="Show attached PDF"
actionListener="#{bean.doShowPDF}"
value="Show PDF">
<f:attribute name="path" value="#{bean.pdfPath}" />
</h:commandLink>
The target attribute seems to be ignored. The destination page appear over the current.
I tried with h:outputLink:
<h:outputLink target="_blank"
title="Show attached PDF"
value="/visAttached.jspx">
<f:param name="path" value="#{bean.pdfPath}" />
Show PDF
</h:outputLink>
but with the same result. The generated html , in both cases, has not the target attribute.
Where's my fault?
There is a better strategy in JSF to show a file in a new browser window?
Try the ice: versions of them: ice:outputLink, or ice:commandLink. The component showcase shows a working example (layout panels/collapsible panels has a lot of links, check the source):
<ice:outputLink target="_blank" styleClass="navPnlClpsblLnks"
value="http://icefaces.org/main/home/index.jsp">
<ice:outputText id="icefacesOrgLink" value="ICEfaces.org"/>
</ice:outputLink>
Related
I must print some component from html page. I used from Prime Faces, but I have some problem.
Internet Explorer 11 add some text to printed images ("Submit Query").
Problem occur in h:commandButton which have empty value.
How I may resolve this problem??
You can achieve by using css background-image with image in order to present a background image.
<h:commandButton value=" " style="background-image: url(your-image.png)" />
If you do not want to have the appearance of a button, you can nest <h:graphicImage> inside
<h:commandLink> and instead.
<h:commandLink ...>
<h:graphicImage value="your-image.png" />
</h:commandLink>
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
I want to show the icons without buttons but it doesn't work. I get the following message: no Mime-Type was Found.
The two icons are default icons from Primefaces.
I use JSF 2.1 and primefaces 3.5
<h:graphicImage rendered="#{!task.IS_SEEN}" name="ui-icon-mail-closed"/>
<h:graphicImage rendered="#{task.IS_SEEN}" name="ui-icon-mail-closed"/>
If I use buttons it would work or can I set that the button can not be pressed
<p:commandButton rendered="#{!task.IS_SEEN}" icon="ui-icon-mail-closed" />
<p:commandButton rendered="#{task.IS_SEEN}" icon="ui-icon-mail-open" />
If you want just a clickable image that trigger an action in the backing bean I suggest wrapping a graphic image in a h:commandLink.
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<h:graphicImage value="your-image-here"/>
</h:commandLink>
If you want easy to use, nice, vectorial icons I suggest you to check Font Awesome http://fontawesome.io/icons/ as well.
To use Font Awesome just include the following line in your <h:head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></link>
Then you can easily put the icons inside commandLinks in this simple way:
<h:commandLink rendered="#{!task.IS_SEEN}" value="" action="#{YourBean.myAction}">
<i class="fa fa-envelope"></i>
</h:commandLink>
Also you need specify css class ui-icon like this:
<h:panelGroup styleClass="ui-icon ui-icon-mail-closed" />
those are in fact CSS classes that point to a sprite file, so technically they are not icons.
try using:
<h:panelGroup styleClass="ui-icon-mail-closed" rendered="#{!task.IS_SEEN}" />
and if there's a need style it accordingly with padding.
Here is my code. When I click the link Comment, a inputTextarea and commandButton suppose to appear
<h:outputLink id="link" value="javascript:void(0)">
<h:outputText value="Comment"/>
<p:effect type="fade" event="click" for="reply">
<f:param name="mode" value="'show'"/>
</p:effect>
</h:outputLink>
<h:panelGrid id="reply" style="display:none;">
<h:inputTextarea id="keyword" rows="2" />
</h:panelGrid>
</h:outputLink>
When I click on the link, nothing seem to happen, nothing appear. Any idea. I run this on Glassfish. The showcase from primeface.org is running under Tomcat.
There are two problems:
First, according to the PrimeFaces User Guide the appear effect is not supported.
Following is the list of effects supported by PrimeFaces.
blind
clip
drop
explode
fold
puff
slide
scale
bounce
highlight
pulsate
shake
size
transfer
So change the p:effect to:
<p:effect type="blind" event="click" for="reply">
<f:param name="mode" value="'show'" />
</p:effect>
Second, the generated source of the link tells the following:
<a href="javascript:void(0)">Comment<script type="text/javascript">
YAHOO.util.Event.addListener('j_idt6:j_idt7', 'click', function(e) {
jQuery(PrimeFaces.escapeClientId('j_idt6:reply')).effect('blind',{mode:'show'},1000);
});</script></a>
The client ID j_idt6:j_idt7 doesn't appear anywhere in the source. It has to be the link itself. So adding an id to the h:outputLink should fix it. Look like a bug in PrimeFaces.
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.