I am intending to put an image next to an InputText like a "*" which changes to a green (another image) when something valid is typed in the InputText. How will I be able to put an image along with the InputText?
If a "*" is all you want to add , just add something like
<h:panelGroup styleClass="#{myBean.valid?'geen':'red'}">*</h:panelGroup>
next to your input...
You can also make it interactively using ajax:
<h:form>
<h:inputText value="#{userBean.name}">
<a4j:ajax event="keyup" render="out1,out2" />
</h:inputText>
<!-- For a textual * -->
<h:outputText value="*" styleClass="#{userBean.valid?'green':'red'}" id="out1" />
<!-- For an image -->
<h:graphicImage value="#{userBean.valid?'/img/valid.png':'/img/notvalid.png}" id="out2"/>
</h:form>
Sorry for using RichFaces tag a4j:ajax, I suppose there is an equivalent tag in Primefaces.
Regards,
Related
I have the maven dependency for omnifaces for version 1.11 (as my target is JDK 1.6). Richfaces 4.5.6 final, myfaces 2.2.8. And, against a viewscoped bean I have got this xhtml:
<ui:define name="content">
<f:loadBundle basename="au.com.erb.facility.ui.facility"
var="property" />
<o:highlight styleClass="error" />
<h:panelGrid columns="2">
<rich:validator event="change">
<o:outputLabel value="#{property.absClientNumber}" for="input1" />
<h:inputText id="input1"
value="#{facilityBean.facilityForEdit.alternateKey.absClientNumber}"
label="ABS Client Number" />
<o:outputLabel value="#{property.facilityid}" />
<h:inputText
value="#{facilityBean.facilityForEdit.alternateKey.facilityId}"
label="Facility Id" />
<h:outputLabel value="#{property.rfsAccountGroup}" />
<h:inputText value="#{facilityBean.facilityForEdit.rfsAccountGroup}"
label="RFS Account Group" />
<h:outputLabel value="#{property.rfsAcctCustomerNumber}" />
<h:inputText
value="#{facilityBean.facilityForEdit.rfsAcctCustomerNumber}"
label="RFS Account Customer Number" />
<h:outputLabel value="#{property.rfsAcctLedger}" />
<h:inputText value="#{facilityBean.facilityForEdit.rfsAcctLedger}"
label="RFS Account Ledger" />
</rich:validator>
</h:panelGrid>
</ui:define>
<!-- Buttons that performs actions on a selected record -->
<!-- or navigate to a relevant screen -->
<ui:define name="buttons">
<h:commandButton id="submitButton" value="#{property.submitLabel}"
action="#{facilityBean.save}" styleClass="wideButton"
onclick="#{rich:component('progressWaitModalPanel')}.show()" />
<h:commandButton id="closeButton" value="#{property.closeLabel}"
action="#{facilityBean.close}" styleClass="wideButton"
immediate="true" />
<rich:popupPanel id="progressWaitModalPanel" modal="true">
<f:facet name="header">
<h:outputText value="Processing your request ...." />
</f:facet>
<h:panelGrid columns="1"
style="width: 100%; border-width: 0px; text-align: center;">
<h:outputText value="Please wait..." styleClass="dataValueStyle" />
</h:panelGrid>
</rich:popupPanel>
</ui:define>
The result is nothing. No higlight. No clue what's going on. Have I missed any installation step? I have the css and xmlnamespace in place. Anything else?
I tried to add required="true" as it was shown in the example, but that did not work either. Not sure whether it is due to richfaces bean validation issue.
The <o:highlight> works server side, based on a.o. UIInput#isValid() in JSF component tree. The <rich:validator> works client side and doesn't manipulate JSF component tree.
This indeed doesn't go well together.
I briefly looked into the HTML/JS code of the <rich:validator> showcase and it appears that they don't add a marker style class to the input elements when it's invalid (e.g. PrimeFaces does), so it's going to be hard to write a workaround when continuing the <rich:validator> approach.
You've basically following options:
Maunally write an oncomplete script which finds the validation error messages and then finds the associated inputs and then set the desired marker style class on it.
Report an issue to RichFaces guys and ask them to add a marker style class to invalid inputs via <rich:validator>, so you could style them individually.
Drop <rich:validator> and replace it by server side validation via <f:ajax>.
I would like to create input-field-attached-tooltip-button (I don't quite know what to call it). Something like this:
When you hoover over the question mark icon you see the help text.
Justification: The little icon makes it blatantly obvious that there's help attached to the field. You can see that help is indeed available without even moving the mouse pointer to the field. Gives the user this warm fuzzy feeling.
I cannot figure out how to do this in PrimeFaces.
I do not know which framework has produced the example above but I'm pretty sure it is not PrimeFaces.
I'm well aware of <p:tooltip> but I don't think it can do this.
So here's what I've come up with in PrimeFaces:
(my screencapture does not show the mouse pointer)
I pretty much took BalusC's suggestions and created a JSF custom component. Here's what my custom component look like:
<?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:p="http://primefaces.org/ui"
xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="helptext"/>
<composite:attribute name="show" />
</composite:interface>
<composite:implementation>
<p:button id="help" style="width: 15px; height: 15px" icon="ui-icon-help" rendered="#{cc.attrs.show}"/>
<p:overlayPanel for="help" showEvent="mouseover" hideEvent="mouseout" hideEffect="fade" >
<p:panel>
#{cc.attrs.helptext}
</p:panel>
</p:overlayPanel>
</composite:implementation>
</html>
and the xhtml that has produced the above screenshot looks like this:
<h:form>
<p:panelGrid columns="3" styleClass="noBorders">
<p:outputLabel for="mydate" value="Date" />
<p:calendar id="mydate" pattern="yyyy/MM/dd" />
<customC:fieldhelp helptext="Help text for date field." show="true" />
<p:outputLabel for="myboolean" value="Send now ?" />
<p:selectBooleanCheckbox id="myboolean" />
<customC:fieldhelp helptext="Help text for boolean field." show="false"/>
<p:outputLabel for="mypwd" value="Your password" />
<p:password id="mypwd" size="30" />
<customC:fieldhelp helptext="Help text for password field." show="true"/>
</p:panelGrid>
</h:form>
Seems to work fine. As you can see I had to reduce the size of the icon otherwise it would be way too big.
Some notes:
The composite doesn't wrap both the help icon and the field. It only
wraps the help icon. This has the downside that you'll need a three
column layout and that the help icon is not displayed right next to
the field. Instead it is displayed in its own column. Not exactly what I wanted.
The help text is conveyed in an attribute. This has the downside that
it cannot contain any HTML markup regardless of the fact that the
destination, the <p:panel>, would happily accept HTML markup.
You can leave out the help icon using the show attribute, however -
because of the three column layout - the <customC:fieldhelp> always
need to exist for each field. This is very clumsy but is again a result
of my lack of knowledge. :-(
I'm sure it can be improved upon if one knew a little more JSF/PrimeFaces than myself.
EDIT
If you want the icon right next to the input field (rather than in a column of its own) then you'll need the <h:panelGroup> tag. You can wrap a group of elements in this tag and <p:panelGrid> (or its sibling : <h:panelGrid>) will then count it as a single element, i.e. occupies one cell only. Something like this:
<h:form>
<p:panelGrid columns="2" styleClass="noBorders">
<p:outputLabel for="mydate" value="Date" />
<h:panelGroup>
<p:calendar id="mydate" pattern="yyyy/MM/dd" />
<customC:fieldhelp helptext="Help text for date field." show="true" />
</h:panelGroup>
<p:outputLabel for="myboolean" value="Send now ?" />
<h:panelGroup>
<p:selectBooleanCheckbox id="myboolean" />
<customC:fieldhelp helptext="Help text for boolean field." show="false"/>
</h:panelGroup>
<p:outputLabel for="mypwd" value="Your password" />
<h:panelGroup>
<p:password id="mypwd" size="30" />
<customC:fieldhelp helptext="Help text for password field." show="true"/>
</h:panelGroup>
</p:panelGrid>
</h:form>
In addition I had to do some CSS tweaking with vertical-align: middle to get the icon vertically aligned with the rest.
i want to customize selectItems
to display an image conditionally beside each checkbox
so first i tried to display the image for all checkboxes
but it gets displayed only once, here's what i tried:
<h:selectManyCheckbox value="#{myBean.checkboxesArry}" layout="pageDirection">
<f:selectItems value="#{myBean.mapOfCheckBoxes}" var="entry">
<label>
<ice:graphicImage url="/resources/images/myImage.bmp"/>
<b>#{entry.value}</b>
</label>
</f:selectItems>
</h:selectManyCheckbox>
please advise how to accomplish that ?
You cannot nest UI compnents in <f:selectItems> that way. I however see that you're using ICEfaces, you should then be able to use <ice:selectManyCheckbox layout="spread"> in combination with <ice:checkbox> instead.
<ice:selectManyCheckbox id="foo" value="#{myBean.checkboxesArry}" layout="spread">
<f:selectItems value="#{myBean.mapOfCheckBoxes}" />
</ice:selectManyCheckbox>
<c:forEach items="#{myBean.mapOfCheckBoxes}" var="entry" varStatus="loop">
<ice:checkbox for="foo" index="#{loop.index}" />
<ice:graphicImage url="/resources/images/myImage.bmp" />
<b>#{entry.value}</b>
</c:forEach>
(untested as I don't use ICEfaces, but the above construct works for Tomahawk, from which ICEfaces has basically copied the implementation; you can also use <ui:repeat> but it only supports Map since JSF 2.1)
See also:
Radio buttons in different parts of the page
First of all, i'm using Jsf 1.2...
I have a problem with submitting some values in a form to validation.
Specifically this code segement:
<h:panelGrid columns="4" id="StatusPanel">
<h:outputText value="#{msg.Phone_number_to_send_SMS_to}" />
<h:inputText id="phoneNumber" value="#{general.smsPhoneNumber}" required="true"
requiredMessage="Please enter a valid phone number." />
<a4j:commandLink value="#{msg.Submit_Button}"
reRender="pinCodeDeliveryMsgText, pinCodeDeliveryMsg, pinCodeDeliveryFailedMsg, pinCodeDeliveryMainPanel, LastPinCodeMsg, SendingSMSMSG"
action="#{general.submit}" />
<h:message for="phoneNumber" fatalClass="mandatoryFieldMissing" errorClass="mandatoryFieldMissing" tooltip="true" />
</h:panelGrid>
Which looks like this in the html page:
Whenever I press the submit link, the page doesn't really go through validation, it seems to go with the last successull values instead. The result being that, if the phone number field is left empty, it does nothing and doesn't even render the <h:message> tag.
Actually, I have a workaround fix that looks like this:
<h:commandLink value="#{msg.Submit_Button}">
<a4j:support event="onclick" reRender="pinCodeDeliveryMsgText, pinCodeDeliveryMsg, pinCodeDeliveryFailedMsg, pinCodeDeliveryMainPanel, LastPinCodeMsg, SendingSMSMSG"
action="#{general.submit}"/>
</h:commandLink>
But i'm really curious to know what's the difference between a4j:commandLink and h:commandLink that makes one woirk and the other not.
TnX
Have you tried to set the process attribute of a4j:commandLink to the id of the inputText? Looks like you are just triggering rerendering of some components, so no model update is performed at all.
My problem is that RichFaces reRender does not work 'under' the current element in the element tree; only upper elements get rerendered.
Is there any way to access lower elements with AJAX?
Any help would be appreciated!
Daniel
EDIT I edited this question to a more general one. See revisions if interested in the original question.
reRender works with providing an the id of the target object you want to reRender (inside the same naming container - form most often)
the id should be a unique string, according to html spec
reRender allows dynamic value - i.e. reRender="#{myBean.currentItemsToRerender}
Based on that I think you should be able to achieve what you want (although it's not entirely clear)
Update:
UIComponent.findComponent(..) has a well-defined algorithm for resolving ids. So for absolute referencing your reRendered id should start with : and then continue through the hierarchy of the naming containers.
Here is an example where changePanel111() changes the content of a lower element:
<h:form id="form" prependId="true">
<rich:panel id="PANEL1">
<h:outputText id="PANEL1TEXT" value="#{ajaxTestBean.panel1}"/>
<rich:panel id="PANEL11">
<h:outputText id="PANEL11TEXT" value="#{ajaxTestBean.panel11}"/>
<rich:panel id="PANEL111">
<h:outputText id="PANEL111TEXT" value="#{ajaxTestBean.panel111}"/>
</rich:panel>
</rich:panel>
<rich:panel id="PANEL12">
<h:outputText id="PANEL12TEXT" value="#{ajaxTestBean.panel12}"/>
<br/>
<a4j:commandLink value="CHANGE PANEL12" action="#{ajaxTestBean.changePanel12}">
<a4j:support reRender="PANEL12" event="onclick"/>
</a4j:commandLink>
<br/>
<a4j:commandLink value="CHANGE PANEL111" action="#{ajaxTestBean.changePanel111}">
<a4j:support reRender="form:PANEL111" event="onclick"/>
</a4j:commandLink>
</rich:panel>
</rich:panel>
</h:form>
Notice how the lower element needs to be identified as form:PANEL111.
Hope this helps!
reRender can point to any component outside the form as well. For example this works:
<h:form>
<a4j:commandButton reRender="panel"/>
</h:form>
<h:panelGrid id="panel">
...
</h:panelGrid>
For my MyFaces+Richfaces App, <rich:panel> tag was not working as described in the selected answer. When I changed it to <a4j:outputPanel ajaxRendered="true" />, it started working as given here "<a4j:commandLink> Not Rerendering"
Configuration: MyFaces 2.1.10(Facelets used for templating) and Richfaces 4.2.3.
Hope this will help.