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.
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 use fontawesome for a tooltip text, but I don't know how to implement it. It worked with a overlay Panel but I want to use the <p:tooltip> tag.
I use primefaces 4.0 and jsf 2.1
Here is the Code with the tooltip
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<p:graphicImage id="grap" class="fa fa-question-circle fa-2x"/>
<p:tooltip for="grap" value="Some Help" showEffect="fade" />
If I use the following it works
<h:panelGroup id="mail" class="fa fa-question-circle fa-2x" />
<p:overlayPanel for="mail" showEvent="mouseover" hideEvent="mouseout" hideEffect="fade">
<p:panel>
TEXTTEXTTEXT
</p:panel>
</p:overlayPanel>
Maybe this is what you are looking for. It works on Primefaces 6.0 and JSF 2.3.0.
<p:outputLabel id ="idEmptyLabel">
<i class="fa fa-question-circle fa-2x"/>
</p:outputLabel>
<p:tooltip for="idEmptyLabel" value="It works!" />
#Dylan Law's solution will definitely work.
However, if you do not always want to wrap your standard HTML elements such as <i>, <span>, <img> and <div> you can follow this strategy:
Define the following line in a template or a file:
<p:tooltip globalSelector="a,:input,:button,span,img,i,div" />
globalSelector is under the hood a jQuery selector, that defaults to a,:input,:button. Hence, I also added these also to my custom selector.
Now you you can simply write for example:
<i class="fas fa-info-circle" title="This will be the content of the tooltip">
Here you can read more about Global Tooltips:
https://primefaces.github.io/primefaces/8_0/#/components/tooltip?id=global-tooltip
I want to change the style of the rich:simpleTogglePanel to look like as a common link would.
http://livedemo.exadel.com/richfaces-demo/richfaces/simpleTogglePanel.jsf?c=simpleTogglePanel&tab=usage
This page shows exactly what I want to do and what I'm getting right now.
I want to do something that looks exactly like the 'View source' link that stands below every example. The code I'm using is the same as seen in the 'Client Switch Type' example:
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
The switching between showing and hiding the toggle panel content
performs on the client side.
</rich:simpleTogglePanel>
My goal is to create an 'advanced search' link under a search bar.
The panel will contain the advanced search contents. (the extra fields)
I'm using JSF 1.2 and Richfaces.
Am not sure if I exactly understood your question. There are 2 variants in which am seeing your question.
1. Make the contents under the rich:simpleTogglePanel as link which are clickable.
For this you can try out below code.
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
<rich:dataGrid var="links" value="#{yourBean.linksList}" columns="6"
width="877px">
<h:commandLink actionListener="#{yourBean.someAction}">
</h:commandLink>
</rich:simpleTogglePanel>
2. If you want rich:simpleTogglePanel header to be presented as link
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
<f:facet name="header" >
<h:panelGroup>
<h:outputText value="yourLinkName" styleClass="linkClass">
</h:outputText>
</h:panelGroup>
</rich:simpleTogglePanel>
<style type="text/css">
.linkClass{
text-decoration: underline;
}
</style>
If you want a box openning and closing and style it easily, the best way would be to make it with jQuery. As RichFaces already load jQuery you could do it as follow :
Your link
<div id="content" style="display: none">Your content</div>
Of course you can use RichFaces component, but you will have to override many CSS classes or disable RichFaces skin, which will disable styling for every components.
EDIT : You'll have to force RichFaces to load the jQuery library with <a4j:loadScript src="resource://jquery.js"/> if you are not using any ajax component in the view.
If you want to make the bar disappear, you have to override the default CSS and add few more of yours.
Below is the code,
<rich:simpleTogglePanel switchType="client" label="Client Switch Type" height="90px">
<f:facet name="closeMarker">
<h:panelGroup styleClass="open">
<h:outputText styleClass="yourClass" value="yourText"/>
</h:panelGroup>
</f:facet>
</rich:simpleTogglePanel>
<style type="text/css">
.open {
background-color: white;
}
</style>
You will have to override these default CSS to achieve your other affects. rich-stglpanel, rich-stglpanel-header, rich-stglpnl-marker etc.
For details, please refer RichFaces-SimpleTogglePanel guide
First, thanks for the answers!
I asked for a way to change the simpleTogglePanel so it looked like the view source link in the page mentioned, but I found that was the wrong way to go.
I achieved my goal using a h:commandLink:
<h:commandLink value="Advanced Search" action="#{MyBean.toggleHiddenPanel }" />
to change the value of a boolean in my bean and used the rendered attribute to show/hide the fields I needed:
<h:panelGrid id="hiddenPanel" columns="4" >
<h:outputText value="date1:" rendered="#{MyBean.hiddenPanel}" />
<rich:calendar value="#{MyBean.date1}" rendered="#{MyBean.hiddenPanel}"
locale="US" popup="true" datePattern="d/M/yy HH:mm"
cellWidth="24px" cellHeight="22px" style="width:200px" />
<h:outputText value="date2:" rendered="#{MyBean.hiddenPanel}" />
<rich:calendar value="#{MyBean.date2}" locale="US" rendered="#{MyBean.hiddenPanel}"
popup="true" datePattern="d/M/yy HH:mm" cellWidth="24px"
cellHeight="22px" style="width:200px" />
<br />
<h:outputText value="Another field:" rendered="#{MyBean.hiddenPanel}" />
</h:panelGrid>
ps.: I changed the name of the variables because the project is confidential
I'm using the expression #{resource['library:file']} within a facelets page to generate an ajaxified button with an image within an RichFaces (4.2.2.Final) toolbar.
<h:form>
<rich:toolbar height="40px">
<rich:toolbarGroup>
<a4j:commandButton value="my label" image="#{resource['icons:icon32.gif']}"/>
</rich:toolbarGroup>
</rich:toolbar>
</h:form>
generates the following code for the a4j:commandButton where the context path is generated twice.
<input type="image" alt="my label"
src="/com.test.my.context/com.test.my.context/faces/javax.faces.resource/icon32.gif?ln=icons"
value="my label"
onclick="RichFaces.ajax("j_idt73:j_idt76",event,{"incId":"1"} );return false;"
name="j_idt73:j_idt76" id="j_idt73:j_idt76">
If I use <h:graphicImage library="icons" name="icon32.gif"/> within rich:toolbarGroup the generated URL is right.
Furthermore I've include the image by css using background: url(#{resource['library:file']}) which doesn't gives the result I've searched for, but it works!
Is the expression #{resource['library:file']} only allowed within css files?
Where is the problem within my code?
According to JIRA Issue RF-12523 it's fixed in 4.3.1.Final.
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.