I use PrimeFaces 7 with JSF 2.3 Mojarra and have the problem that sometimes error messages, which I place below an UI component are not readable, as shown below:
This is my xhtml code snippet, which is wrapped in a <h:body> and <h:form>:
<p:inputNumber id="highestPriceAmountId" value="#{....}"/>
<p:message for="highestPriceAmountId" style="color: red">
<p:autoUpdate/>
</p:message>
My bean snippet:
UIComponent component = getUIComponentById("highestPriceAmountId");
String errorHeader = "blabla";
String errorMessage = "hahaha"
getFacesContext().addMessage(component.getClientId(), new FacesMessage(FacesMessage.SEVERITY_ERROR, errorHeader, errorMessage));
PrimeFaces.current().focus(uiComponentId, component);
Why is the message shown like this?
Related
I am trying to use a parameterized segment in a th:each, but I am running into this exception:
EL1007E: Property or field 'author' cannot be found on null
If I got it correct, it means that the object whose variables I'm trying to access is null, though through breakpoint and debug in my Spring MVC app I know for sure there are two elements in the list.
Here is the Controller:
#GetMapping("/")
public String getHomePage(Model model) {
log.info("Recupero la home-page");
model.addAttribute("reviews", mainService.getAllReviews());
return "home";
}
Here is the th:each:
<div
th:each="review: ${reviews}"
th:assert="({review} != null)"
th:replace="fragments/utilities :: test(author=${review.author},message=${review.review})"
></div>
Here is the fragment:
<div th:fragment="test(author, message)">
<p th:text="${message}" class="mt-2 text-dark"></p>
<h6 th:text="${author}"></h6>
</div>
Here is a screenshot of the Model at runtime right before returning the webpage to the client:
What's going wrong? Why does it say review object is null?
There is an issue with your main Thymeleaf template. You need to account on Thymeleaf Attribute Precedence which indicates that th:replacewill be running first, before th:each and replace the entire <div> element. The working code may look similar to ...
<th:block th:each="review: ${reviews}">
<div th:replace="fragments/utilities :: test(author=${review.author},message=${review.review})"></div>
</th:block>
I would put my JSP file in HTML5 format.
I have a problem with the tag struts radio button;
when I put cssclass"disabled" ( or other like cssClass"red" ) , when I look the source I get twice attribute class="disabled".
But It works nice for the other struts tag.
See example below:
JSP file:
<s:radio cssClass="disabled" name="mirror.swiBlo" list="Y"/>
source:
<input type="radio" name="mirror.swiBlo" id="consultation_mirror_swiBloY" value="Y" class="disabled" class="disabled"/>
If someone has any idea to solve that.
Thanks
Actually it's a bug in struts.
In simple/radiomap.ftl setting of class and style occurs twice.
source code:
<#if parameters.cssClass??>
class="${parameters.cssClass?html}"<#rt/>
</#if>
<#if parameters.cssStyle??>
style="${parameters.cssStyle?html}"<#rt/>
</#if>
<#include "/${parameters.templateDir}/simple/css.ftl" />
And css.ftl handle class and style again.
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"/>
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 feel as though this this is a simple question, but can't find an answer anywhere. We've got an interface we're trying to move to an ASP.NET control. It currently looks like:
<link rel=""stylesheet"" type=""text/css"" href=""/Layout/CaptchaLayout.css"" />
<script type=""text/javascript"" src=""../../Scripts/vcaptcha_control.js""></script>
<div id="captcha_background">
<div id="captcha_loading_area">
<img id="captcha" src="#" alt="" />
</div>
<div id="vcaptcha_entry_container">
<input id="captcha_answer" type="text"/>
<input id="captcha_challenge" type="hidden"/>
<input id="captcha_publickey" type="hidden"/>
<input id="captcha_host" type="hidden"/>
</div>
<div id="captcha_logo_container"></div>
</div>
However all the examples I see of ASP.NET controls that allow for basical functionality - i.e.
public class MyControl : Panel
{
public MyControl()
{
}
protected override void OnInit(EventArgs e)
{
ScriptManager.RegisterScript( ... Google script, CSS, etc. ... );
TextBox txt = new TextBox();
txt.ID = "text1";
this.Controls.Add(txt);
CustomValidator vld = new CustomValidator();
vld.ControlToValidate = "text1";
vld.ID = "validator1";
this.Controls.Add(vld);
}
}
Don't allow for the detailed layout that we need. Any suggestions on how I can combine layout and functionality and still have a single ASP control we can drop in to pages? The ultimate goal is for users of the control to just drop in:
<captcha:CaptchaControl ID="CaptchaControl1"
runat="server"
Server="http://localhost:51947/"
/>
and see the working control.
Sorry for the basic nature of this one, any help is greatly appreciated.
Although you may want to look into user controls, the following page has an example of doing this using a web control. http://msdn.microsoft.com/en-us/library/3257x3ea.aspx The Render() method does the output of the actual HTML for the control.
There are a couple of ways to do it. You can make a custom control, or a user control. I think you will find it easier to do a user control. It lets you lay out parts of your control as you would a regular page. Here is some example documentation: http://msdn.microsoft.com/en-us/library/26db8ysc(VS.85).aspx
By contrast a custom control typically does all of the rendering in code (as your example you show). It is harder to make your first control in this way.