Как интегрировать средство выбора времени в Richfaces и связать его с управляемым компонентом jsf - PullRequest
Новая
       7

Как интегрировать средство выбора времени в Richfaces и связать его с управляемым компонентом jsf

1 голос
/ 15 июля 2011

Не могли бы вы объяснить, как интегрировать компонент выбора времени в мое JSF / Richfaces веб-приложение и связать его значение с управляемым компонентом?

Я знаю, что компонент rich: calendar выпускается с указателями даты и времени, но мне нужен только последний. В частности, я должен предоставить пользователю селектор времени, чтобы он / она мог выбирать время ОТ и время ТО, где они оба ограничены определенными минимальными / максимальными значениями, считанными из бина.

Я, вероятно, могу использовать виджеты js / jquery с соответствующими им компонентами richfaces, но я не понимал, как правильно их использовать и привязывать к бину. Большое спасибо.

Ответы [ 2 ]

2 голосов
/ 21 июля 2011

Вот мой код для средств выбора времени начала и окончания с проверкой на стороне клиента, надеюсь, это поможет.

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>

и 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);
}
2 голосов
/ 15 июля 2011

rich: календарь предназначен для выбора даты, а его средство выбора времени необязательно, я думаю, что вы должны написать его самостоятельно, просто укажите два rich: inputNumberSpinner для часов и минут.целочисленные свойства, часы и минуты;затем добавьте геттеры и сеттеры для них.

...