<h:column>
<f:facet name="header">
<h:outputLabel value="#{label.asOfDate}" style="font-weight:bold" />
<h:outputLabel value="*"
style="font-weight:bold; color:red; font-size:150%" />
</f:facet>
<p:calendar id="date" required="true" navigator="true"
mindate="#{utils.minDate}" pattern="#{label.dateFormat}"
maxdate="#{utils.maxDate}" value="#{policy.asOfDt}"
requiredMessage="#{label.asOfDateRequired}" showOn="button">
<f:validator validatorId="CustomDateValidator" />
</p:calendar>
</h:column>
I want date textfield should in masked format (11/11/2011) with calendar button. Can we apply mask operation with calendar?
You can use somehting like this:
`
<script type="text/javascript" language="JavaScript">
var $ = jQuery;
$(document).ready(function() {
$("input[id*='Date']").mask('99/99/9999');
});
</script>
<p:calendar id="documentDate" />
`
Since Primefaces 5.0, you can use the calendar's attribute mask:
mask="99/99/9999"
apply datePattern attribute
datePattern="MM/dd/yyyy"
As to this post, it is not possible. The question there is answered by the PF lead developer (so trust him ;-). He suggests to write a composite component in combination with jquery (http://digitalbush.com/projects/masked-input-plugin/).
INMO , If you must use additional jquery plugin to achieve this task , you better use jquery for both : calendar and mask (a really little additional code is needed to bind bean value to the input responsible for the calendar)
take a look at this solutions
Mask the date format when using jQuery UI datepicker
and
Small jsfiddle example
and another one
Using jQueryUI Datepicker And Input Masking Together
You might address this problem by setting the input field to readonly to force users to select a date.
Here is the property to add to your input field to force this :
readonlyInput="true"
Related
I've having problems trying to customize the footer on a calendar using the f:facet tag. The content in the tag is being ignored, being the default footer shown instead.
I can customise the footer using rich:calendar attributes like showApplyButton, but I think it is not possible to remove the selected date that appears on the left of Clean button ('Netejar' in the image) without adding the Apply button, which is something my customer doesn't want.
We are using RichFaces 4.3.5.Final.
Code:
<rich:calendar
value="#{YourBeanHere.yourDateHere}"
locale="es_ES">
<f:facet name="footer">
<h:panelGrid columns="3" width="100%" columnClasses="fake, width100 talign">
<h:outputText value="{selectedDateControl}" style="font-weight:bold;" />
<h:outputText value="{timeControl}" style="font-weight:bold;" />
<h:outputText value="{todayControl}" style="font-weight:bold;" />
</h:panelGrid>
</f:facet>
</rich:calendar>
Calendar sample as it is shown with the code above:
Thanks in advance for your help.
The calendar footer is not customizable (not every component is set up to use the facets). You have to put the grid under the table and hide the footer (.rf-cal-ftr) if you need to.
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,
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 created a custom JSF tag:
<ui:composition>
<h:panelGroup>
<rich:dataScroller id="#{id}" for="#{table}" execute="#{table}"
page="#{scrollerPage}" render="#{table}-sc1" maxPages="5"
fastControls="hide" oncomplete="#{onCompl}" scrollListener="#{scrollListenerBean[scrollListenerMethod]}" />
<h:inputText value="#{scrollerPage}" id="#{table}-sc1" size="2">
<f:convertNumber integerOnly="true" />
</h:inputText>
<h:outputText styleClass="outputText"
value=" of #{scrollPagesCount} " />
<h:commandButton value="GO! " />
</h:panelGroup>
</ui:composition>
To pass the listener method, I used the solution suggested in a quite old blog:
<my:dataScroller id="idDS1" table="table1"
scrollerPage="#{bean.navigationHelper.scrollerPage}"
scrollPagesCount="#{bean.navigationHelper.scrollPagesCount}"
onCompl="initForm();"
scrollListenerBean="#{bean}"
scrollListenerMethod="aMethod" />
My questions are: is this the best way to do this? How can I make the method optional?
Thanks a lot for any Help! bye!
My questions are: is this the best way to do this?
That's the only way anyway, provided that you can only use standard JSF/EL facilities and you cannot create a custom taghandler.
You could however create a custom taghandler to convert the value expression to a method expression. The OmniFaces JSF utility library has a <o:methodParam> for exactly this purpose. See also the <o:methodParam> demo page.
You could then end up like:
<my:dataScroller ... scrollListener="#{bean.aMethod}" />
and
<o:methodParam name="scrollListenerMethod" value="#{scrollListener}" />
<rich:dataScroller ... scrollListener="#{scrollListenerMethod}" />
See also:
Dynamic ui include and commandButton
How can I make the method optional?
Theoretically, you could use JSTL tags to build the view conditionally. Something like:
<h:someComponent>
<c:if test="#{not empty fooAttribute}">
<f:attribute name="foo" value="#{fooAttriubte}" />
</c:if>
</h:someComponent>
But that's in the particular case of a special method expression listener attribute unfortunately not possible. There's no such thing as <rich:scrollListener> or something which allows you binding a RichFaces specific scrollListener as a separate tag to the <rich:dataScroller>. Best what you could do without creating custom taghandlers is duplicating the whole <rich:dataScroller> in two <c:if>s (or a <c:choose>); one with and other without scrollListener. This is too clumsy. You'd really better create a custom <my:richScrollListener> taghandler for this which you could then place in a <c:if>.
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.