Question

Vaadin小部件简单而且棒极了！但它们的配置也很差。我需要我的DateField小部件来打开焦点事件的日历。我没有在官方Vaadin documentation中找到该功能。我找到了一些第三方小部件here，但它是为Vaadin 7.7编译的，我使用了最新的Vaadin（8.0.6）。它还具有Joda-time 2.1依赖性，这在我的项目中是非常不受欢迎的。那么，是否有任何简单的方法来调整stock vaadin DateField小部件以在字段焦点上打开它的日历，或者我是否需要为此编写自己的组件？任何帮助表示赞赏。

Answer 1

正如我在评论中所说，据我所知，目前该框架没有提供以编程方式打开日历弹出窗口的隐式方法。其他一些组件也是如此，例如网格编辑器或组合项列表。

我能想到的一个快速解决方法是添加一个javascript extension来注册所有日期字段的焦点侦听器，并在聚焦日期字段时单击该按钮。请在下面找到一个样本。

P.S。如果您只需要将其应用于某些日期字段，则可以添加ID并将其传递给JS，您可以在其中执行document.getElementById('myDateFieldId')而非document.getElementsByClassName("v-datefield")之类的操作。

1）包含组件的布局

public class MyDateFieldComponent extends HorizontalLayout {
    public MyDateFieldComponent() {
        // basic setup
        DateField fromDateField = new DateField("From", LocalDate.of(2011, Month.FEBRUARY, 6));
        DateField toDateField = new DateField("To", LocalDate.of(2018, Month.FEBRUARY, 6));
        setSpacing(true);
        addComponents(fromDateField, toDateField);

        // add the extension
        addExtension(new CalendarFocusPopupOpenerExtension());
    }
}

2）扩展 - java /服务器端

import com.vaadin.annotations.JavaScript;
import com.vaadin.server.AbstractJavaScriptExtension;

@JavaScript("calendar-focus-popup-opener-extension.js")
public class CalendarFocusPopupOpenerExtension extends AbstractJavaScriptExtension {
    public CalendarFocusPopupOpenerExtension() {
        // call the bind function defined in the associated JS
        callFunction("bind");
    }
}

3）分机 - js /客户端

window.com_example_calendar_CalendarFocusPopupOpenerExtension = function () {
    this.bind = function () {
        if (document.readyState === "complete") {
            // if executed when document already loaded, just bind
            console.log("Doc already loaded, binding");
            bindToAllDateFields();
        } else {
            // otherwise, bind when finished loading
            console.log("Doc nod loaded, binding later");
            window.onload = function () {
                console.log("Doc finally loaded, binding");
                bindToAllDateFields();
            }
        }
    };

    function bindToAllDateFields() {
        // get all the date fields to assign focus handlers to
        var dateFields = document.getElementsByClassName("v-datefield");
        for (var i = 0; i < dateFields.length; i++) {
            addFocusListeners(dateFields[i]);
        }
    }

    function addFocusListeners(dateField) {
        // when focusing the date field, click the button
        dateField.onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };

        // or when focusing the date field input, click the button
        dateField.getElementsByTagName("input")[0].onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };
    }
};

4）结果

稍后更新

第二种方法可能是为您的字段分配一些ID，然后定期检查以查看所有ID都可见，并且一旦它们出现，就绑定焦点监听器。

1）包含组件的布局

public class MyDateFieldComponent extends HorizontalLayout {
    public MyDateFieldComponent() {
        // basic setup
        DateField fromDateField = new DateField("From", LocalDate.of(2011, Month.FEBRUARY, 6));
        fromDateField.setId("fromDateField"); // use id to bind
        fromDateField.setVisible(false); // initially hide it

        DateField toDateField = new DateField("To", LocalDate.of(2018, Month.FEBRUARY, 6));
        toDateField.setId("toDateField"); // use id to bind
        toDateField.setVisible(false); // initially hide it

        // simulate a delay until the fields are available
        Button showFieldsButton = new Button("Show fields", e -> {
            fromDateField.setVisible(true);
            toDateField.setVisible(true);
        });

        setSpacing(true);
        addComponents(showFieldsButton, fromDateField, toDateField);

        // add the extension
        addExtension(new CalendarFocusPopupOpenerExtension(fromDateField.getId(), toDateField.getId()));
    }
}

2）扩展 - java /服务器端

@JavaScript("calendar-focus-popup-opener-extension.js")
public class CalendarFocusPopupOpenerExtension extends AbstractJavaScriptExtension {
    public CalendarFocusPopupOpenerExtension(String... idsToBindTo) {
        // send the arguments as an array of strings
        JsonArray arguments = Json.createArray();
        for (int i = 0; i < idsToBindTo.length; i++) {
            arguments.set(i, idsToBindTo[i]);
        }

        // call the bind defined in the associated JS
        callFunction("bind", arguments);
    }
}

3）分机 - js /客户端

window.com_example_calendar_CalendarFocusPopupOpenerExtension = function () {
    var timer;

    this.bind = function (idsToBindTo) {
        // check every second to see if the fields are available. interval can be tweaked as required
        timer = setInterval(function () {
            bindWhenFieldsAreAvailable(idsToBindTo);
        }, 1000);
    };

    function bindWhenFieldsAreAvailable(idsToBindTo) {
        console.log("Looking for the following date field ids: [" + idsToBindTo + "]");
        var dateFields = [];
        for (var i = 0; i < idsToBindTo.length; i++) {
            var dateFieldId = idsToBindTo[i];
            var dateField = document.getElementById(dateFieldId);
            if (!dateField) {
                // field not present, wait
                console.log("Date field with id [" + dateFieldId + "] not found, sleeping");
                return;
            } else {
                // field present, add it to the list
                console.log("Date field with id [" + dateFieldId + "] found, adding to binding list");
                dateFields.push(dateField);
            }
        }

        // all fields present and accounted for, bind the listeners!
        clearInterval(timer);
        console.log("All fields available, binding focus listeners");
        bindTo(dateFields);
    }

    function bindTo(dateFields) {
        // assign focus handlers to all date fields
        for (var i = 0; i < dateFields.length; i++) {
            addFocusListeners(dateFields[i]);
        }
    }

    function addFocusListeners(dateField) {
        // when focusing the date field, click the button
        dateField.onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };

        // or when focusing the date field input, click the button
        dateField.getElementsByTagName("input")[0].onfocus = function () {
            dateField.getElementsByTagName("button")[0].click();
        };
    }
};

4）结果

Vaadin：在datefield的场焦点上打开日历

1 个答案:

稍后更新