I was wondering if I could get some help with implementing a tool-tip for every single star in the ratings, using Primefaces. As of now, I have the tool-tip applying to the entire rating block, so all 5 stars have the same tool-tip in essence. Would anyone know of an elegant way to apply a different tool-tip to each star? Some of the people I work with have suggested using onHover() like states to do it if all else fails (in a rather brute forceish kind of way), but if possible, I'd like to do it with more elegance.
Here is the current code, which has a single tool-tip that pops up when any of the stars are hovered over.
<h:outputLabel for="developerScore">Developer Score:</h:outputLabel>
<p:rating value="#{scoreCard.developerScore}" stars="#{uiSettingsBean.ratingMax}" cancel="false" readonly="#{otherReadOnly}" id="developerScore">
<p:tooltip for="developerScore" showEffect="fade" hideEffect="fade" >
<h:outputText value="Developer Score Rubric"/><br />
<h:outputText value="1 Star: Abysmal"/><br />
<h:outputText value="2 Star: Needs Improvement"/><br />
<h:outputText value="3 Star: Doing Good"/><br />
<h:outputText value="4 Star: Above Average"/><br />
<h:outputText value="5 Star: Exceptional"/>
</p:tooltip>
</p:rating>
Anywho, any help is appreciated and thank you for your time.
I too had similar requirement and I landed to this SO and I was surprised to see that there is no accepted answer even after 3 years!
Primefaces(version 6.0) still does not have this feature. I hope it will be added in the next releases.
After doing a good bit of search, I Finally ended up creating a custom composite component.
Here is the solution/workaround that I have. It is elegant or not, I leave it to you :).
By the way, this works in JSF 2.2. For older version of JSF, you may have to add few more files for composite components to work.(taglibs etc).
First, we have to create our own composite component for rating (Don't worry, its just two files). It is nothing but the p:rating and p:tooltip combined together. Following are the two files:
ratingComposite.xhtml
ratingComposite.js
Add both the files to JSF resources folder of your project.
(Note: customizedprimefaces is your resource library name)
<YourWarFile>\resources\customizedprimefaces\ratingComposite.xhtml
<YourWarFile>\resources\js\ratingComposite.js
(If you are not familiar with composite components and their paths then I suggest to study it first, it is made easy in JSF 2.2.)
And start using it in your page.
myPage.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"*
xmlns:cp="http://java.sun.com/jsf/composite/customizedprimefaces"
>
...
<cp:ratingComposite id="ratingId" widgetVar="ratingIdWgt"
stars="4"
value="#{bean.rating}"
tooltipValue="Ugly | Bad | OK | Good"
/>
(Note the xmlns include: xmlns:cp="http://java.sun.com/jsf/composite/customizedprimefaces")
This is same as the p:rating component with only difference is tooltipValue attribute that accepts a pipe separated tool tip messages in the order corresponding to the stars in rating.
Here is the rough explanation of what is going on in javascript file:
Split the p:tooltip elements value by pipe(|) and save in an
array(tooltipTxt), that holds pipe separated tooltips for each
<cp:ratingComposite/> in page. The array is indexed by the rating component id.
Bind a custom hoverIn and hoverOut event handler for each star in
your rating component.
On hoverIn, get the message from array(tooltipTxt) (at index corresponding to the currently hovered star) and replace with the <p:tooltip>
message.
Display the <p:tooltip> message at the position of the currently hovered star.
On hoverOut, Just hide the <p:tooltip> message.
ratingComposite.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="id" />
<composite:attribute name="value" />
<composite:attribute name="readonly" />
<composite:attribute name="widgetVar" />
<composite:attribute name="stars" type="java.lang.Integer" />
<composite:attribute name="tooltipValue"
shortDescription="A pipe(ie.:|) seperated list of tooltip messages. \nEach message in list corresponds to a star in the rating componant." />
<!-- Add other attributes of p:rating component here. -->
</composite:interface>
<composite:implementation>
<h:outputScript name="js/ratingComposite.js" target="head" />
<script type="text/javascript">
<!--
$(document).ready(function(){
rating.init('#{cc.namingContainer.clientId}:_#{cc.attrs.id}', '#{cc.namingContainer.clientId}:_#{cc.attrs.id}-ttId');
});
//-->
</script>
<p:rating id="_#{cc.attrs.id}" widgetVar="#{cc.attrs.widgetVar}"
readonly="#{cc.attrs.readonly}"
value="#{cc.attrs.value}" stars="#{cc.attrs.stars}" />
<p:tooltip id="_#{cc.attrs.id}-ttId" for="_#{cc.attrs.id}" trackMouse="true"
value="#{cc.attrs.tooltipValue}" />
</composite:implementation>
</html>
ratingComposite.js
rating = {
tooltipTxt:{},
init:function(ratingId, tooltipId){
var ratingIdjq = PrimeFaces.escapeClientId(ratingId);
var tooltipIdjq = PrimeFaces.escapeClientId(tooltipId);
var _self = this;
this.tooltipTxt[tooltipId] = $(tooltipIdjq).find(".ui-tooltip-text").html(),
$(ratingIdjq).find(".ui-rating-star").each(function(){
$(this).hover(function(event){return _self.hoverIn(event,tooltipId)},
function(event){$(tooltipIdjq).hide();} //This is on Hoverout
);
});
},
hoverIn:function(event, tooltipId){
var tooltipIdjq = PrimeFaces.escapeClientId(tooltipId);
var ratingArray = this.tooltipTxt[tooltipId].split("|");
var tooptipDiv = $(tooltipIdjq);
tooptipDiv.show();
this.setCoordinate(tooptipDiv, event.pageX, event.pageY);
var currEleIndx = $(event.currentTarget).parent().find(".ui-rating-star").index(event.currentTarget);
var currTooltip = ratingArray[currEleIndx].trim();
tooptipDiv.find(".ui-tooltip-text").html(currTooltip);
},
setCoordinate:function(tooptipDiv, x, y){
var pos = {"left":x, "top":y};
tooptipDiv.offset(pos);
}
}
I hope this helps.
use <h:outputText value="1 Star:Abysmal:" title="1 Star: Abysmal"/>
Related
I have the following XForms code:
<?xml-stylesheet href="./xsltforms.xsl" type="text/xsl"?>
<?xsltforms-options debug="yes"?>
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:ev="http://www.w3.org/2001/xml-events">
<head>
<title>XForms Submit Example</title>
<xf:model id="MyModel">
<xf:instance src="./Model.xml"/>
<xf:bind id="FirstName" nodeset="/MyData/FirstName"/>
<xf:submission id="save" method="put" action="./myData.xml" replace="none" />
<xf:submission id="loadDoc" action="./myData.xml" replace="instance" method="get" />
</xf:model>
</head>
<body>
<xf:input ref="FirstName" incremental="true">
<xf:label>Please enter your first name: </xf:label>
</xf:input>
<br/>
<br/>
Output First Name: <xf:output ref="FirstName" />
<br/>
<br/>
<xf:submit submission="save">
<xf:label>Save</xf:label>
</xf:submit>
<br/>
<br/>
<xf:submit submission="loadDoc">
<xf:label>Load</xf:label>
</xf:submit>
</body>
</html>
This form contains one textbox field and two buttons save and load, and also 1 dependency to the file Model.xml which is:
<?xml version="1.0" encoding="UTF-8"?>
<MyData>
<FirstName>John</FirstName>
<Data2>Two</Data2>
<Data3>Three</Data3>
</MyData>
The problem is: When I entering some data to text box, pressing save button, the model should be saved to myData.xml. This file exists on disk and it is not read only
In fact nothing happens, and file's data will not be updated (by the way Load button works fine).
What is the reason of this behaviour and how to fix this and save entered data to external file?
Did you already try adding "file://" in the action attribute?
-Alain
Here is my code,
css/index.jsp:
<%#include file="/WEB-INF/common/css/common.jsp" %>
<style type="text/css">
body{background: #ffffff url('<c:url value='/resources/images/logo/logo_small.png'/>') no-repeat scroll center center}
</style>
index.jsp page calls the above css/index.jsp page:
<c:set var="my_css">
<c:if test="${branch == 'sitemap'}">
<c:if test="${page == 'index'}">
<%#include file="/WEB-INF/common/css/sitemap_common.jsp" %>
<%#include file="/WEB-INF/common/css/index.jsp" %>
</c:if>
</c:if>
</c:set>
<c:set var="css" value='${fn:replace(fn:replace(fn:replace(my_css,"<style type=\\\"text/css\\\">", ""),"</style>", ""),"\'", "99999")}'/>
<compress:css enabled="true">
<c:out value='${css}'/>
</compress:css>
In my project there are 100's of jsp pages that return css code. Why i'm doing this is to place my css as a link tag in head section.
In my code ' is replaced with 99999, but when i change 99999 to & #.. ; return & amp;#..; how to replace?
If there is a better option to convert my jsp to make it as a css link in html head section, please post here. You please post your suggestions too.
now i need to modify for better performance
Modify the the css with some tool or maybe even with some simple java program before you upload it to the server.
Then:
you do not need to spend time with this problem
the performance is much better (you do not need any replace stuff while runtime for every request)
I have a table, using display tag, in my application, that is using spring web flow. I would like to have a check box in each row, a button that allows me to select/uselect all and a button to execute a function. After clicking the button, the action will perform some database actions and the page should be render, so we can see these changes.
I don´t know which could be the best option, submitting the whole table
<form method="POST" (more params)>
<display:table id="row">
....
</display:table>
</form>
Or only the checkbox column. I this case I wouldn´t know how to implement it.
I have tryed two different approaches:
1. Using a simple input text, checkbox type. This is not possible, because when I submit the form, I need to set a path to another page.jsp (I am working with flows). Besides, I wouldn´t know how to send these values to java backend.
Using spring tags.
In this case, the problem comes whith the class conversationAction
I found some examples, but allways using MVC and controller cases.
How could I implement this issue??
EDIT
I have found a kind of solution, but I faced a new problem...
flow.xml
var name="model1" class="com.project.Model1"/>
var name="model2" class="com.project.Model2"/>
view-state id="overview" model="formAggregation">
...
</view-state>
page.jsp
form:form modelAttribute="formAggregation.model1" id="overviewForm">
...
/form:form>
...
form:form method="POST" modelAttribute="formAggregation.model2">
display:table id="row" name="displayTagValueList" requestURI="overview?_eventId=tableAction">
display:column title="">
form:checkbox path="conversationIds" value="${row.threadId}"/>
/display:column>
/display:table>
input type="submit" name="_eventId_oneFunction" value="Send>>"/>
/form:form>
FormAggregation.java
#Component("formAggregation")
public class FormAggregation {
private Model1 model1;
private Model2 model2;
//Getters and setters
I need this aggregator, because I need both models. I have tested it one by one and it is working as wished. Any idea about that??
Thanks!!
I couldn´t find a solution to add two model in a view-state. So I made a workaround, adding the fields I needed to the model I was using, com.project.Model1. So the result is:
page.jsp
<form:form method="POST" id="tableForm" modelAttribute="model1">
<display:table id="row">
<display:column title="">
<form:checkbox path="chosenIds" value="${row.id}"/>
</display:column>
<display:footer>
<div class="tableFooter" >
<input type="submit" name="_eventId_workIds" value="Send"/>
</div>
</display:footer>
</display:table>
</form:form>
flow.xml
<var name="model1" class="com.project.Model1"/>
...
<transition on="workIds" to="overview" validate="false">
<evaluate expression="actionBean.workIds(model1.chosenIds)" />
</transition>
java class
public void workIds(List<Long> ids) {
Hope it helps
I'm trying to use the PasswordRecovery of ASP.NET.
Everything works fine, however I am using Email template. Within this email I'm trying to insert an image as follows:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img alt="blabla" src="/Images/blabla-logo.png" align="middle"/><br/><br/>
bla bla:<%Password%><br /><br />
</body>
</html>
As I said, the email is being sent fine but the image is not inserted. I tried: src="~/Images/blabla-logo.png", but with no success.
Idea anyone?
Thanks a lot,
Assaf.
For email you should not give relative path like "/Images/blabla-logo.png" the only works for the internal website pages, instead of this you should give the complete path like
http://youserver/youapp/Images/blabla-logo.png
I will suggest you not to include image using the path instead of this try embedding the image in your email. You can achieve this by converting your images to base64 string and set the base64 string as the source of the image.
You can use OnSendingMail event to modify your email message. Let's assume your template look like this:
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<img alt="blabla" src="{0}" align="middle"/><br/><br/>
bla bla:<%Password%><br /><br />
</body>
</html>
You PasswordRecovery markup should look like this:
<asp:PasswordRecovery ID="prPasswordRecovery" runat="server" OnSendingMail="prPasswordRecovery_SendingMail">
<MailDefinition BodyFileName="~/passwordRecoveryEmailTemplate.txt" IsBodyHtml="true" Priority="High" Subject="bla bla"/>
</asp:PasswordRecovery>
Last thing to do is to write prPasswordRecovery_SendingMail method in code behind:
protected void prPasswordRecovery_SendingMail(object sender, MailMessageEventArgs e)
{
e.Message.Body = String.Format(e.Message.Body, ResolveClientUrl("~/Images/blabla-logo.png"));
}
That should do it.
try adding a tilde "~", an id and runat="server". The tilde only gets changed to the root path when runat="server" is applied. Otherwise, the serverside code has no knowledge of the control and doesn't parse it and apply the path insertion
<img alt="blabla" src="~/Images/blabla-logo.png"
align="middle" id="img" runat="server"/>
Have you tried using AlternateView?
One example is here.
I have a standard aspx page with which I need to add another standard HTML form into and have it submit to another location (external site), however whenever I press the submit button the page seems to do a post back rather than using the sub-forms action url.
A mock up of what the form relationships is below. Note in the real deployment the form will be part of a content area of a master page layout, so the form needs to submit independantly from the master page form.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<form id="subscribe_form" method="post" action="https://someothersite.com" name="em_subscribe_form" >
<input type="text" id="field1" name="field1" />
<input id="submitsubform" type="submit" value="Submit" />
</form>
</div>
</form>
</body>
</html>
It's an interesting problem. Ideally you only want the 1 form tag on the page as other users have mentioned. Potentially you could post the data via javascript without having 2 form tags.
Example taken from here, modified for your needs. Not 100% sure if this will work for you but I think this is how you'll have to approach it.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script type="text/javascript">
function postdata()
{
var fieldValue = document.getElementById("field1").value;
postwith("http://someothersite.com",{field1:fieldValue});
}
function postwith (to,p) {
var myForm = document.createElement("form");
myForm.method="post" ;
myForm.action = to ;
for (var k in p) {
var myInput = document.createElement("input") ;
myInput.setAttribute("name", k) ;
myInput.setAttribute("value", p[k]);
myForm.appendChild(myInput) ;
}
document.body.appendChild(myForm) ;
myForm.submit() ;
document.body.removeChild(myForm) ;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<input type="text" id="field1" name="field1" />
<asp:Button ID="btnSubmitSubscribe" runat="server" Text="Submit" OnClientClick="postdata(); return false;" />
</div>
</div>
</form>
</body>
</html>
If javascript is not a viable option - you can use .Net's HttpWebRequest object to create the post call in code behind. Would look something like this in the code behind (assuming your text field is an asp textbox:
private void OnSubscribeClick(object sender, System.EventArgs e)
{
string field1 = Field1.Text;
ASCIIEncoding encoding=new ASCIIEncoding();
string postData="field1="+field1 ;
byte[] data = encoding.GetBytes(postData);
// Prepare web request...
HttpWebRequest myRequest =
(HttpWebRequest)WebRequest.Create("http://someotherwebsite/");
myRequest.Method = "POST";
myRequest.ContentType="application/x-www-form-urlencoded";
myRequest.ContentLength = data.Length;
Stream newStream=myRequest.GetRequestStream();
// Send the data.
newStream.Write(data,0,data.Length);
newStream.Close();
}
If you add an ASP.NET button to the form, and set its PostBackUrl property to the external site, then all the form data will be posted to that URL.
There is a very nice tricky solution for this problem.
You can insert a </form> tag before your <form> to close the asp.net form which causes the problem. Do not forget to add a <form> tag after your html form. It may cause the editor to give you an exception, but do not worry, it will work.
Nested forms are not possible in HTML according to the W3C. You can achieve your intended result using JavaScript or with jQuery as explained by Peter on a blog called My Thoughts.
In my experience, Appetere Web Solutions has the best solution. Simple and elegant...and it's not a hack. Use the PostBackUrl.
I just tried it and everything works as expected. I didn't want to use Javascript because I didn't want to include it in my Master Page for every page that uses it.
I had the same situation as Ross - except that my input types were all of the "hidden" varitey.
Cowgod's answer got me thinking about nested forms within my .aspx page. I ended up "un-nesting" my 2nd form OUT of the main .aspx form ( ) and placed it (along with my js script tags) just under the body tag - but before the main .aspx form tag.
Suddenly, everything was submitting as it was supposed to. Is this a hack?
ASP.NET allows you to have multiple forms on one page, but only one can be runat=server. However I don't think you can nest forms at all.
You might have to make a new master page, one without a form tag on it so the form will work on that one page only. This is not a good solution, unless you can place the form outside the master pages' form, and use javascript to submit the second form, but that's hardly better. There really is no good solution for what you are trying to achieve, and if so I'd like to hear it. I don't think you can do a POST call from a code-behind, can you? I'm sure there's some way. But that's probably the only solution: from code.