3.5.17.3.3. 使用 JavaScript 库

在此示例中，我们将使用 jQuery UI 库中的 Slider 组件。拥有两个拖拽手柄的滑动条，用于定义取值范围。

在 CUBA Studio 中创建一个新项目，并将其命名为 jscomponent。

为了使用 Slider 组件，需要创建以下文件：

  • SliderServerComponent - 与 JavaScript 集成的 Vaadin 组件。

  • SliderState - Vaadin 组件的状态类。

  • slider-connector.js - Vaadin 组件的 JavaScript 连接器。

集成至通用 UI 的过程跟集成 Vaadin 组件到通用 UI 中描述的一致，这里就不再重复了。

下面在 web 模块的 toolkit/ui/slider 子目录创建需要的文件，并做相应修改。

  • SlideState 状态类定义在服务器和客户端之间传输的数据。在这个例子中，它是最小值、最大值和选定值。

    1. package com.company.jscomponent.web.toolkit.ui.slider;
    3. import com.vaadin.shared.ui.JavaScriptComponentState;
    5. public class SliderState extends JavaScriptComponentState {
    6.     public double[] values;
    7.     public double minValue;
    8.     public double maxValue;
    9. }

  • Vaadin 服务端组件 SliderServerComponent。

    1. package com.company.jscomponent.web.toolkit.ui.slider;
    3. import com.haulmont.cuba.web.widgets.WebJarResource;
    4. import com.vaadin.annotations.JavaScript;
    5. import com.vaadin.ui.AbstractJavaScriptComponent;
    6. import elemental.json.JsonArray;
    8. @WebJarResource({"jquery:jquery.min.js", "jquery-ui:jquery-ui.min.js", "jquery-ui:jquery-ui.css"})
    9. @JavaScript({"slider-connector.js"})
    10. public class SliderServerComponent extends AbstractJavaScriptComponent {
    12.     public interface ValueChangeListener {
    13.         void valueChanged(double[] newValue);
    14.     }
    16.     private ValueChangeListener listener;
    18.     public SliderServerComponent() {
    19.         addFunction("valueChanged", arguments -> {
    20.             JsonArray array = arguments.getArray(0);
    21.             double[] values = new double[2];
    22.             values[0] = array.getNumber(0);
    23.             values[1] = array.getNumber(1);
    25.             getState(false).values = values;
    27.             listener.valueChanged(values);
    28.         });
    29.     }
    31.     public void setValue(double[] value) {
    32.         getState().values = value;
    33.     }
    35.     public double[] getValue() {
    36.         return getState().values;
    37.     }
    39.     public double getMinValue() {
    40.         return getState().minValue;
    41.     }
    43.     public void setMinValue(double minValue) {
    44.         getState().minValue = minValue;
    45.     }
    47.     public double getMaxValue() {
    48.         return getState().maxValue;
    49.     }
    51.     public void setMaxValue(double maxValue) {
    52.         getState().maxValue = maxValue;
    53.     }
    55.     @Override
    56.     protected SliderState getState() {
    57.         return (SliderState) super.getState();
    58.     }
    60.     @Override
    61.     public SliderState getState(boolean markAsDirty) {
    62.         return (SliderState) super.getState(markAsDirty);
    63.     }
    65.     public ValueChangeListener getListener() {
    66.         return listener;
    67.     }
    69.     public void setListener(ValueChangeListener listener) {
    70.         this.listener = listener;
    71.     }
    72. }

    服务端组件定义了 getter 方法和 setter 方法来处理滑块状态，也定义了一个值更改监听器接口。该类继承自 AbstractJavaScriptComponent。

    在类构造器中的调用 addFunction() 方法为客户端的 valueChanged() 方法的 RPC 调用定义了一个处理程序。

    @JavaScript 和 @StyleSheet 注解指向的文件，必须在网页上加载。在这个的示例中，这些是 jquery-ui 库的 JavaScript 文件、位于WebJar 资源的 jquery-ui 的样式表以及 Vaadin 服务组件 Java 包里面的连接器。

  • JavaScript 连接器 slider-connector.js.

    1. com_company_jscomponent_web_toolkit_ui_slider_SliderServerComponent = function() {
    2.     var connector = this;
    3.     var element = connector.getElement();
    4.     $(element).html("<div/>");
    5.     $(element).css("padding", "5px 0px");
    7.     var slider = $("div", element).slider({
    8.         range: true,
    9.         slide: function(event, ui) {
    10.             connector.valueChanged(ui.values);
    11.         }
    12.     });
    14.     connector.onStateChange = function() {
    15.         var state = connector.getState();
    16.         slider.slider("values", state.values);
    17.         slider.slider("option", "min", state.minValue);
    18.         slider.slider("option", "max", state.maxValue);
    19.         $(element).width(state.width);
    20.     }
    21. }

    连接器是一个在加载网页时初始化 JavaScript 组件的函数。该函数名称必须与服务端组件类名对应，其中包名中的点用下划线代替。

    Vaadin 为连接器函数添加了几种有用的方法。this.getElement() 返回组件的 HTML DOM 元素，this.getState() 返回一个状态对象。

    这里的连接器执行以下操作：

    • 初始化 jQuery UI 库的 slider 组件。当滑块的位置发生任何变化时，将调用 slide() 函数，该函数又调用连接器的 valueChanged() 方法。valuedChanged() 是在服务端 SliderServerComponent 类中定义的方法。

    • 定义 onStateChange() 函数。在服务端更改状态对象时调用它。

为了演示组件的工作原理，我们创建有三个属性的 Product 实体：

  • String 类型的 name

  • Double 类型的 minDiscount

  • Double 类型的 maxDiscount

为实体生成标准界面。确保 Module 字段的值为 Module: 'app-web_main'（只有在项目添加了 gui 模块之后才会显示这个字段）。

slider 组件将设置产品的最小和最大折扣值。

打开 product-edit.xml 文件。通过将 editable="false" 属性添加到相应的元素，使 minDiscount 和 maxDiscount 字段不可编辑。然后添加一个 box，将作为 Vaadin 组件的容器使用。

这时，编辑界面的 XML 描述应如下所示：

  1. <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  2. <window xmlns="http://schemas.haulmont.com/cuba/screen/window.xsd"
  3.         caption="msg://editorCaption"
  4.         focusComponent="form"
  5.         messagesPack="com.company.jscomponent.web.product">
  6.     <data>
  7.         <instance id="productDc"
  8.                   class="com.company.jscomponent.entity.Product"
  9.                   view="_local">
  10.             <loader/>
  11.         </instance>
  12.     </data>
  13.     <dialogMode height="600"
  14.                 width="800"/>
  15.     <layout expand="editActions" spacing="true">
  16.         <form id="form" dataContainer="productDc">
  17.             <column width="250px">
  18.                 <textField id="nameField" property="name"/>
  19.                 <textField id="minDiscountField" property="minDiscount" editable="false"/>
  20.                 <textField id="maxDiscountField" property="maxDiscount" editable="false"/>
  21.                 <hbox id="sliderBox" width="100%"/>
  22.             </column>
  23.         </form>
  24.         <hbox id="editActions" spacing="true">
  25.             <button action="windowCommitAndClose"/>
  26.             <button action="windowClose"/>
  27.         </hbox>
  28.     </layout>
  29. </window>

打开 ProductEit.java 文件。用以下代码替换其内容：

  1. package com.company.jscomponent.web.product;
  3. import com.company.jscomponent.entity.Product;
  4. import com.company.jscomponent.web.toolkit.ui.slider.SliderServerComponent;
  5. import com.haulmont.cuba.gui.components.HBoxLayout;
  6. import com.haulmont.cuba.gui.screen.*;
  7. import com.vaadin.ui.Layout;
  9. import javax.inject.Inject;
  11. @UiController("jscomponent_Product.edit")
  12. @UiDescriptor("product-edit.xml")
  13. @EditedEntityContainer("productDc")
  14. @LoadDataBeforeShow
  15. public class ProductEdit extends StandardEditor<Product> {
  17.     @Inject
  18.     private HBoxLayout sliderBox;
  20.     @Subscribe
  21.     protected void onInitEntity(InitEntityEvent<Product> event) {
  22.         event.getEntity().setMinDiscount(15.0);
  23.         event.getEntity().setMaxDiscount(70.0);
  24.     }
  26.     @Subscribe
  27.     protected void onBeforeShow(BeforeShowEvent event) {
  28.         SliderServerComponent slider = new SliderServerComponent();
  29.         slider.setValue(new double[]{
  30.                 getEditedEntity().getMinDiscount(),
  31.                 getEditedEntity().getMaxDiscount()
  32.         });
  33.         slider.setMinValue(0);
  34.         slider.setMaxValue(100);
  35.         slider.setWidth("250px");
  36.         slider.setListener(newValue -> {
  37.             getEditedEntity().setMinDiscount(newValue[0]);
  38.             getEditedEntity().setMaxDiscount(newValue[1]);
  39.         });
  41.         sliderBox.unwrap(Layout.class).addComponent(slider);
  42.     }
  43. }

onInitEntity() 方法为新产品的折扣设置初始值。

onBeforeShow() 方法初始化 slider 组件，设置 slider 的当前值、最小值和最大值，并定义值更改监听器。当滑块移动时，可编辑实体的相应字段将被设置成新值。

启动应用程序服务并打开产品编辑界面。更改滑块位置时会改变文本框的值。

product edit