3.5.17.4.1. 使用第三方 Vaadin 组件

这是在应用程序项目中使用 [http://vaadin.com/addon/stepper](http://vaadin.com/addon/stepper) 中提供的 Stepper 组件的示例。该组件允许使用键盘、鼠标滚动或组件右侧的上/下按钮逐步更改文本框的值。

在 CUBA Studio 中创建一个新项目,并将其命名为 addon-demo

只能在具有 web-toolkit 模块的应用程序项目中集成 Vaadin 扩展。使用 CUBA Studio 可以很方便的创建这个模块:在主菜单,点击 CUBA > Advanced > Manage modules > Create ‘web-toolkit’ Module

然后添加 vaadin 扩展需要的依赖:

  1. build.gradle中,在 web 模块配置中添加包含组件的扩展包的依赖:

    1. configure(webModule) {
    2. ...
    3. dependencies {
    4. ...
    5. compile("org.vaadin.addons:stepper:2.4.0")
    6. }
  2. web-toolkit 模块的 AppWidgetSet.gwt.xml 文件中,说明项目的部件继承自扩展的部件:

    1. <module>
    2. <inherits name="com.haulmont.cuba.web.widgets.WidgetSet" />
    3. <inherits name="org.vaadin.risto.stepper.StepperWidgetset" />
    4. <set-property name="user.agent" value="safari" />
    5. </module>

    可以通过定义 user.agent 属性来加速部件编译。在此示例中,部件仅针对基于 WebKit 的浏览器(Chrome、Safari 等)进行编译。

现在,来自 Vaadin 扩展的组件被包含到项目中。我们看看如何在项目界面中使用它。

  • 创建包含下面两个字段的新实体 Customer

    • String 类型的 name

    • Integer 类型的 score

  • 为新实体生成标准界面。确保 Module 字段设置为 Module: 'app-web_main'(这个字段只有在项目添加了 gui 模块之后才会显示)。直接使用 Vaadin 组件的界面必须放在 web 模块中。

    实际上,界面也可以放在 gui 模块中,但是这就需要使用 Vaadin 组件的代码移动到单独的companion

  • 接下来,我们将 stepper 组件添加到界面上。

    customer-edit.xml 界面的 form 组件的 score 字段替换成一个 hBox,这个 hBox 将用来作为 Vaadin 组件的容器。

    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.demo.web.customer">
    6. <data>
    7. <instance id="customerDc"
    8. class="com.company.demo.entity.Customer"
    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="customerDc">
    17. <column width="250px">
    18. <textField id="nameField" property="name"/>
    19. <!-- A box that will be used as a container for a Vaadin component -->
    20. <hbox id="scoreBox"
    21. caption="msg://com.company.demo.entity/Customer.score"
    22. height="100%"
    23. width="100%"/>
    24. </column>
    25. </form>
    26. <hbox id="editActions" spacing="true">
    27. <button action="windowCommitAndClose"/>
    28. <button action="windowClose"/>
    29. </hbox>
    30. </layout>
    31. </window>

    将以下代码添加到 CustomerEdit.java 控制器:

    1. package com.company.demo.web.customer;
    2. import com.company.demo.entity.Customer;
    3. import com.haulmont.cuba.gui.components.HBoxLayout;
    4. import com.haulmont.cuba.gui.screen.*;
    5. import com.vaadin.ui.Layout;
    6. import org.vaadin.risto.stepper.IntStepper;
    7. import javax.inject.Inject;
    8. @UiController("demo_Customer.edit")
    9. @UiDescriptor("customer-edit.xml")
    10. @EditedEntityContainer("customerDc")
    11. @LoadDataBeforeShow
    12. public class CustomerEdit extends StandardEditor<Customer> {
    13. @Inject
    14. private HBoxLayout scoreBox;
    15. private IntStepper stepper = new IntStepper();
    16. @Subscribe
    17. protected void onInit(InitEvent event) {
    18. scoreBox.unwrap(Layout.class)
    19. .addComponent(stepper);
    20. stepper.setSizeFull();
    21. stepper.addValueChangeListener(valueChangeEvent ->
    22. getEditedEntity().setScore(valueChangeEvent.getValue()));
    23. }
    24. @Subscribe
    25. protected void onInitEntity(InitEntityEvent<Customer> event) {
    26. event.getEntity().setScore(0);
    27. }
    28. @Subscribe
    29. protected void onBeforeShow(BeforeShowEvent event) {
    30. stepper.setValue(getEditedEntity().getScore());
    31. }
    32. }

    onInit() 方法会初始化一个 stepper 组件的实例,可以用 unwrap 方法取到 Vaadin 容器的链接,然后将新组件添加进去。

    数据绑定是通过编程的方式在 onBeforeShow() 方法中为 Customer 实例的 stepper 组件设置当前值来实现的。此外,对应的实体属性是在用户改变值时,通过值变化的监听器来更新的。

  • 要调整组件样式,请在项目中创建主题扩展。使用 CUBA Studio 可以很方便扩展主题,点击 CUBA > Advanced > Manage themes > Create theme extension。在弹出窗口选择 hover 主题。另一个方式时使用 CUBA CLIextend-theme 命令。之后,打开位于 web 模块中的 themes/hover/com.company.demo/hover-ext.scss 文件并添加以下代码:

    1. /* Define your theme modifications inside next mixin */
    2. @mixin com_company_demo-hover-ext {
    3. /* Basic styles for stepper inner text box */
    4. .stepper input[type="text"] {
    5. @include box-defaults;
    6. @include valo-textfield-style;
    7. &:focus {
    8. @include valo-textfield-focus-style;
    9. }
    10. }
    11. }
  • 启动应用程序服务。将生成如下所示的编辑界面:

customer edit result