How to integrate a time picker in Richfaces and bind it to a jsf managed bean_问答_开发者

How to integrate a time picker in Richfaces and bind it to a jsf managed bean

开发者 https://www.devze.com 2023-03-21 01:06 出处：网络

Could you please explain me how to integrate a time picker component into my JSF/Richfaces web app, and bind its value to a managed bean?

Could you please explain me how to integrate a time picker component into my JSF/Richfaces web app, and bind its value to a managed bean?

I know the rich:calendar component comes out with both a date and a time pickers, but I need the latter only. In particular I need to provide a time selector to the user, so that he/she c开发者_如何学JAVAan select a FROM time and a TO time, where they are both limited to specific min/max values read from the bean.

I can probably use js/jquery widgets with they're corresponding richfaces components, but I didn't understand how to properly use them and bind them to the bean. Thank you very much.

rich:calendar is for choosing date and its time picker is optional, I think you should write it yourself, just put two rich:inputNumberSpinner for hours and minutes.

<rich:inputNumberSpinner value="#{myBean.hours}" minValue="0" maxValue="23" />
<rich:inputNumberSpinner value="#{myBean.minutes}" minValue="0" maxValue="59" />

In MyBean class define two integer properties, hours and minutes; then add getters and setters for them.

Here is my code for start and end time pickers with client side validation, hope it helps.

timePicker.xhtml :

<!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:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich"
    xmlns:f="http://java.sun.com/jsf/core">

<h:head>
    <title>TimePicker</title>
    <script src="./resources/js/timeValidator.js"></script>
</h:head>
<h:body>
    <rich:panel>
        <h:form id="form1">
            <h:panelGrid border="1" rules="all" columns="2" cellpadding="10">
                <h:panelGrid columns="2">
                    <f:facet name="header">
                        <h:outputText value="Start time" />
                    </f:facet>
                    <h:outputLabel value="HH:" />
                    <rich:inputNumberSpinner id="h1" minValue="0" maxValue="23"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',true)" />
                    <h:outputLabel value="MM:" />
                    <rich:inputNumberSpinner id="m1" minValue="0" maxValue="59"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',true)">
                    </rich:inputNumberSpinner>
                </h:panelGrid>
                <h:panelGrid columns="2">
                    <f:facet name="header">
                        <h:outputText value="End time" />
                    </f:facet>
                    <h:outputLabel value="HH:" />
                    <rich:inputNumberSpinner id="h2" minValue="0" maxValue="23"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',false)" />
                    <h:outputLabel value="MM:" />
                    <rich:inputNumberSpinner id="m2" minValue="0" maxValue="59"
                        onchange="validate('form1:h1','form1:m1','form1:h2','form1:m2',false)" />
                </h:panelGrid>
            </h:panelGrid>
        </h:form>
    </rich:panel>
</h:body>
</html>

and resources/js/timeValidator.js :

function validate(stHourId, stMinId, enHourId, enMinId, stChanged) {
    var stHour = RichFaces.$(stHourId).getValue();
    var stMin = RichFaces.$(stMinId).getValue();
    var enHour = RichFaces.$(enHourId).getValue();
    var enMin = RichFaces.$(enMinId).getValue();
    if (stChanged) {
        if (enHour < stHour) {
            enHour = stHour;
        } else if (enHour == stHour && enMin < stMin) {
            enMin = stMin;
        }
    } else {
        if (enHour < stHour) {
            stHour = enHour;
        } else if (enHour == stHour && enMin < stMin) {
            stMin = enMin;
        }
    }
    RichFaces.$(stHourId).setValue(stHour);
    RichFaces.$(stMinId).setValue(stMin);
    RichFaces.$(enHourId).setValue(enHour);
    RichFaces.$(enMinId).setValue(enMin);
}