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.
Related
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.
I will create a list with checkbox. Anything like gmail mail box. I use h:selectManyCheckbox , f:selectItem in HTML table tag. But jsf tags, itselft create a table and destruct my form. How can id say to jsf tags that just create input tag not anymore?
the following is a peace of my code:
<tbody>
<h:selectManyCheckbox value="#{MemberControl.selectedUser}">
<c:forEach items="#{MemberSearchControl.members}" var="member" varStatus="status">
<tr>
<td><f:selectItem itemValue="#{member.id}"></f:selectItem> </td>
<td><span>#{member.lastName}</span></td>
<td><span>#{member.firstName}</span></td>
<td><span>#{member.shareCount}</span></td>
<td><span>#{member.phone}</span></td>
</tr>
</c:forEach>
</h:selectManyCheckbox>
</tbody>
And in the following you can see the result:
Do you have any solution for move checkbox in its correct place? (I use pure jsf not primefaces or any more)
Thanks.
This behavior is as documented. Your attempt to fix this makes absolutely no sense. The <c:forEach><f:selectItem> should just be a <f:selectItems> and you should be using a custom renderer for the job. Tomahawk has already done it before for you, its <t:selectManyCheckbox> with layout="spread" attribute set, along with <t:checkbox> components declared at the desired places, allows you to control the markup fully:
<!-- This piece renders _nothing_. -->
<t:selectManyCheckbox id="foo" value="#{bean.selectedItems}" layout="spread">
<f:selectItems value="#{bean.availableItems}" />
</t:selectManyCheckbox>
<!-- You can markup those the way you want. They solely render <input>. -->
<t:checkbox for="foo" index="0" />
<t:checkbox for="foo" index="1" />
<t:checkbox for="foo" index="2" />
<t:checkbox for="foo" index="3" />
...
An alternative is to just fix your CSS styles. It look too much like that you overgeneralized table, tr, td, etc styles to be applied on all of those elements instead of only those by a specific style class such as table.datatable for <h:dataTable styleClass="datatable">.
I use rich editor(Seam, jsf) and here is my code:
<rich:editor value="#{bean.variableName}" height="280" width="400" theme="advanced" id="editor">
<f:param name="theme_advanced_buttons1" value="save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect"/>
<f:param name="theme_advanced_buttons2" value="cut,pasteword,copy,paste,pastetext,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor,hr,removeformat,visualaid,"/>
<f:param name="theme_advanced_toolbar_location" value="top"/>
<f:param name="theme_advanced_toolbar_align" value="left"/>
<f:param name="theme_advanced_statusbar_location" value="bottom"/>
<f:param name="theme_advanced_resizing" value="true"/>
<f:param name="language" value="#{locale.language}"/>
when I insert image from external url there is no problem,
but when I insert image from the same the host where the application is, the image url is converted(shortens)
from
<img src="https://myhost/path/my_image.png" />
to
<img src="../../my_image.png" />
I tried to find it out with options of rich:editor(http://livedemo.exadel.com/richfaces-demo/richfaces/editor.jsf?tab=info&cid=979762)
but it seems like there is no an appropriate option, also I found issue in stackoverflow Disable TinyMCE absolute to relative URL Conversions, but there is in js, unlike in my case, I tried to find where rich:editor takes the tinymce from, to edit there js file(if like so exists), but I couldn't find it. Help me please with these url conversion problem, thanks!
I want to use a tag in my JSF page, but i also want to have dynamic href content. I know there is a h:commandLink in JSF but i don`t want use it for my purposes. I have t:dataTable elemet which iterates via results and shows them on my page. Here is the situation:
<t:dataList id="dataTable" value="#{manBean.fullResult}" var="element" first="0" rows="10">
<div class="photos">
<img src="myimages/IN THIS TOO.../image.jpg"
</div>
...
</t:dataList>
I have tried code like this:
<img src="myimages/#element[0]/image.jpg"
. #element[0] is an element of result list from dataTable and contains values like: 0,1,2,3... etc.
this ends witch error that i could not use #{...} in a template. What should i do? Anybody knows a good solution for this?
If you're using JSF on JSP, use <h:outputLink> and <h:graphicImage> instead of <a> and <img>.
<h:outputLink value="myimages/#{element}/image.jpg">
<h:graphicImage value="myimages/#{element}/image.jpg" />
</h:outputLink>
If you're using JSF on Facelets, you can just use EL in template text.
<a href="myimages/#{element}/image.jpg">
<img src="myimages/#{element}/image.jpg" />
</a>