Vaadin `Slider`教程

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

Vaadin Slider教程显示了如何使用 Vaadin Slider组件。 Vaadin 滑块示例在标签组件中显示选定的值。

Vaadin

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

Vaadin Slider

Slider是垂直或水平条，允许通过使用鼠标拖动条手柄在定义的范围内选择数值。 在拖动过程中，将显示该值。 Slider的默认方向为水平，默认范围为0..100。

Vaadin Slider示例

以下程序演示了 Vaadin 滑块组件的用法。 从Slider中选择的值显示在标签组件中。

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

MyUI.java

package com.zetcode.vaadinslider;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Title;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.HasValue;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Label;
import com.vaadin.ui.Slider;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
@Theme("mytheme")
@Title("Vaadin Slider")
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout verLayout = new VerticalLayout();
        Label lbl = new Label("");
        Slider slider = new Slider();
        slider.addValueChangeListener((HasValue.ValueChangeEvent<Double> event) -> {
            Double val = event.getValue();
            lbl.setValue(String.valueOf(val));
        });
        verLayout.addComponents(slider, lbl);
        verLayout.setSpacing(true);
        setContent(verLayout);
    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

MyUI是应用入口点。 在这里，我们创建Slider组件。

Label lbl = new Label("");

这是Label组件，它不使用从滑块中选择的值。

Slider slider = new Slider();

在默认的水平方向上会创建一个Slider组件。

slider.addValueChangeListener((HasValue.ValueChangeEvent<Double> event) -> {
    Double val = event.getValue();
    lbl.setValue(String.valueOf(val));
});

使用addValueChangeListener()，我们为值更改添加了一个监听器。 我们用getValue()方法获得Slider的当前值。 检索到的值通过setValue()方法设置为标签。

verLayout.addComponents(slider, lbl);
verLayout.setSpacing(true);

我们使用addComponents()方法将标签和滑块添加到布局管理器中。 组件之间的一些间距通过setSpacing()添加。

mytheme.scss

@import "../valo/valo.scss";
@mixin mytheme {
  @include valo;
  .v-slider { width: 20em }
}

我们增加mytheme.scss文件中Slider的宽度。

图：Vaadin Slider

在本教程中，我们展示了如何使用 Vaadin Slider组件。 您可能也对相关教程感兴趣： Vaadin ComboBox教程， Vaadin Button教程， Vaadin TextArea教程， Vaadin CheckBox教程， Java 教程。