Vaadin `DateField`教程

原文： http://zetcode.com/vaadin/datefield/

在 Vaadin DateField教程中，我们学习 Vaadin DateField组件的基础。在 Vaadin DateField示例中，所选日期将转换为回教日期，并显示在Label组件中。

Vaadin

Vaadin 是一种流行的 Java Web 开发框架，用于构建单页 Web 应用。

Vaadin `DateField`

DateField是日期输入组件，它将实际的日期选择器显示为弹出窗口。

Vaadin `DateField`示例

以下程序演示了 Vaadin DateField组件的用法。所选日期将转换为回教日期，并显示在Label组件中。

NetBeans IDE 可用于轻松创建 Vaadin Web 应用。我们需要安装 NetBeans Vaadin 插件，然后创建一个新的 Vaadin Web 应用项目。

MyUI.java

package com.zetcode.main;

import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.HasValue;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.DateField;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.zetcode.service.DateConvert;
import java.time.LocalDate;
import java.time.chrono.HijrahDate;

@Theme("mytheme")
public class MyUI extends UI {

    @Override
    protected void init(VaadinRequest vaadinRequest) {

        VerticalLayout layout = new VerticalLayout();

        DateField field = new DateField();
        Label lbl = new Label();

        field.addValueChangeListener((HasValue.ValueChangeEvent<LocalDate> event) -> {

            LocalDate date = (LocalDate) event.getValue();

            HijrahDate hjdate = DateConvert.toIslamic(date);
            lbl.setValue(hjdate.toString() + "!");
        });

        layout.addComponents(field, lbl);
        layout.setMargin(true);
        layout.setSpacing(true);

        setContent(layout);
    }

    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

这是MyUI类。

VerticalLayout layout = new VerticalLayout();

在我们的示例中，我们在VerticalLayout列中显示两个组件。

DateField field = new DateField();

创建一个DateField组件。

Label lbl = new Label("");

Label组件将支付从日期字段中选择的值。

field.addValueChangeListener((HasValue.ValueChangeEvent<LocalDate> event) -> {

    LocalDate date = (LocalDate) event.getValue();

    HijrahDate hjdate = DateConvert.toIslamic(date);
    lbl.setValue(hjdate.toString() + "!");
});

使用addValueChangeListener()，我们为DateField中的值更改添加了一个监听器。我们用getValue()方法获得DateField当前选择的项目。使用DateConvert.toIslamic()将检索到的值转换为回教日期，并使用setValue()方法将其设置为标签。

layout.addComponents(field, lbl);

通过addComponents()方法将这两个组件添加到VerticalLayout。

layout.setMargin(true);

我们在VerticalLayout周围留了一些余量。

DateConvert.java

package com.zetcode.service;

import java.time.LocalDate;
import java.time.chrono.HijrahChronology;
import java.time.chrono.HijrahDate;

public class DateConvert {

    public static HijrahDate toIslamic(LocalDate date) {

        HijrahDate hjdate = HijrahChronology.INSTANCE.date(date);

        return hjdate;
    }
}

在DateConvert类中，我们使用HijrahChronology计算伊斯兰日期。

Vaadin DateField