InputDateAjax
|
t:inputDate and ajax4jsf
Sometime ago we meet the problem in EmForge - Tomahawk's JSF tag t:inputDate, used for entering data does not worked together with ajax4jsf library, used in EmForge for AJAX-implementation. Together with us - and about in same time some other people meet same problem (see myfaces mail-list thread
). During discussion, Wesley Hales recommended to use Jenia Calendar Component.
We tryed - and seems it works perfectly. Here I just want to describe some issues, related to using jenia (because, I do not found any documentation about jenia), and how to use it together with facelets.
Adding Jenia into WEB-Project.
To use jenia you need simple download jenia jar from http://www.jenia.org and put it into WEB-INF/lib. Also, jenia servlet need to be added into your web.xml:
<servlet>
<servlet-name>Jenia internal servlet</servlet-name>
<servlet-class>org.jenia.faces.util.Servlet</servlet-class>
<load-on-startup>2</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Jenia internal servlet</servlet-name>
<url-pattern>/jenia4faces/*</url-pattern>
</servlet-mapping>
Use Jenia Components
To use Jenia Calendar Component I simple changed t:inputDate
<t:inputDate id="date"
type="date"
popupCalendar="true"
value="#{value}"
disabled="#{disabled}"
rendered="#{rendered}"/>
<inputText id="date"
value="#{value}"
disabled="#{disabled}"
rendered="#{rendered != false}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</inputText>
<j4jp:popupCalendar id="date_popup"
for="date"
format="dd/MM/yyyy"
rendered="#{!disabled and rendered != false}">
<graphicImage url="img/calendar.gif"
title="Click here to select date"/>
</j4jp:popupCalendar>
Jenia and Faceses.
 |
Since using Jenia produced more code for component, used for entering date we decided to move it in separate custom-tag. Since we are using facelets in EmForge, and since Jenia supports facelets (required taglibs included into Jenia jar) - it is quite easy to do:
First, we moved definition of the component into separate file includes/inputDate.xhtml:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<panelGroup xmlns="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:t="http://myfaces.apache.org/tomahawk"
xmlns:j4jp="http://www.jenia.org/jsf/popup"
id="#{id}">
<inputText id="#{id}_input"
value="#{value}"
disabled="#{disabled}"
rendered="#{rendered != false}">
<f:convertDateTime pattern="dd/MM/yyyy"/>
</inputText>
<j4jp:popupCalendar id="#{id}_popup"
for="#{id}_input"
format="dd/MM/yyyy"
rendered="#{!disabled and rendered != false}">
<graphicImage url="img/calendar.gif"
title="Click here to select date"/>
</j4jp:popupCalendar>
</panelGroup>
Second, we placed facelets tag into our taglib WEB-INF/emforge.taglib.xml:
<tag>
<tag-name>inputDate</tag-name>
<source>../includes/inputDate.xhtml</source>
</tag>
And now, we can simple use it in the code:
<emforge:inputDate id="date"
value="#{value}"
disabled="#{disabled}"
rendered="#{rendered}"/>
Easy, yes?
| Last Modified by akakunin 1 year ago |
