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
Related
I am new to JSF, I having the difficulty to implement the partial refresh/rendering in my JSF 2.2, I'm using .xhtml page, I've searched through Internet for solutions but won't work. Was my practice wrong?
Here is my code:
<h:form>
<div class="container">
<div class="section">
<!-- Icon Section -->
<h:panelGroup id="result" styleClass="row">
<ui:repeat var="project" value="#{homeBean.displayProjectList}">
<div class="col s12 m6 l4">
<div class="card">
<div class="card-image">
<img src="resources/materialize/background1.jpg" />
<span class="card-title">#{project.title}</span>
</div>
<div class="card-content">
<p>#{project.summary}</p>
</div>
<div class="card-action">
More
</div>
</div>
</div>
</ui:repeat>
</h:panelGroup>
<div class="row center">
<h:commandButton styleClass="btn-large yellow lighten-2 black-text" value="SHOW MORE" actionListener="#{homeBean.showMore()}" >
<f:ajax render="result" />
</h:commandButton>
</div>
</div>
</div>
</h:form>
When the command button is pressed, I wish to refresh only the section covered in panelGroup id="result", it did update but I wish to refresh the section only instead of the entire page.
Greatly appreciate for your time and effort.
This looks good to me, should work. Are you sure the entire page is getting refreshed?
The <f:ajax> should do the trick.
I found the answer, for my case I am using JSF 2.2 by importing javax.faces-2.2.7.jar, I should set the following outputScript declaration in head tag
<h:outputScript library="javax.faces" name="jsf.js" target="head" />
and now works like charm.
Refer to :
Programatically adding Ajax Behaviour - “Mojarra is not defined”
remove the actionListener from h:commanButton and put listener in f:ajax and try
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 am developing an Application with Primefaces 3 and the p:selectOneMenu just doesn't work.
The first option is always selected and when I press the drop-down button to the right nothing happens. h:selectOneMenu works just fine, but I want the style of the primefaces component.
<h:form>
<!-- Country-->
<div class="control-group">
<label class="control-label">Country</label>
<div class="controls">
<p:selectOneMenu value="#{userService.sessionBean.currentUser.country}">
<f:selectItem itemLabel="Austria" itemValue="Austria" />
<f:selectItem itemLabel="Germany" itemValue="Germany" />
<f:selectItem itemLabel="Italy" itemValue="Italy" />
</p:selectOneMenu>
</div>
</div>
<div class="form-actions">
<p:commandButton type="submit" id="submitButton" action="#{userService.update()}" value="Update your Profile" styleClass="btn btn-primary btn-large" ajax="false">
<f:param name="update" value="true" />
</p:commandButton>
</div>
</h:form>
I even copied the showcase example from the primefaces homepage but it still does not work. I tested this also at a friends computer and with firefox and chrome on Ubuntu and Mac OS X.
Is this a problem with my Primefaces Version (3.5)?
I commented on this issue over a year ago, but just ran into the same issue and found this post again when looking for a solution.
The fix in my case was that the page had an import of an older version of jQuery (1.11.2) that was clashing with the jQuery that PrimeFaces uses and imports to the page.
I removed my jQuery import and the p:selectOneMenu now drops down and works as expected.
I have created a JSF 2 page which uses Facelets to define the structure of the page.
<div class="page">
<div class="content">
<ui:insert name="content">
</ui:insert>
</div>
<div class="footer">
<ui:include src="footer.xhtml" />
</div>
</div>
This is footer.xhtml
<h:commandButton value="Link Page 1" action="page1.xhtml" />
<h:commandButton value="Link Page 2" action="page2.xhtml" />
As you can see, in the footer.xhtml I have some buttons which I use to move between pages.
Unfortunately navigation does not work when buttons are placed into the footer.xhtml page. On the other hand if they are placed in the main div (content) they work correctly.
Is there a way to let them work in the footer too ?
P.s. My environment Java 1.6 on JBoss application server 7
Thanks
Linda
For pure navigation you should use h:button instead of h:commandButton. The latter indeed needs a surrounding form as stated by Kris.
If you change your buttons as follows, they should work regardless where you place them on the page:
<h:button value="Link Page 1" outcome="page1" />
<h:button value="Link Page 2" outcome="page2" />
The .xhtml suffix is appended by JSF.
Your commandButton/commandLink elements wont' work if you don't put them into a form element <h:form></h:form>.
Remember to add the proper namespace to your <ui:composition> element 'xmlns:h="http://java.sun.com/jsf/html'