在参加会议时，我们总是会见到高素质的决策者，他们经常问同样的问题：' 您的框架有多可扩展性？如果我需要比您开箱即用的功能更多的东西怎么办？ '。这个问题是非常合理的，因为他们只是不想被卡在开发曲线的中间，然后意识到框架只是不允许实现某些功能，或者，如果您使用开源产品，那么它可能会实现。需要花费很长的时间才能深入探究框架中记录较差的部分。

通常会特别注意用户界面部分：该框架有多少个组件？是否可以集成第三方小部件？最后，将它们集成到您的应用程序中有多么容易。

即使框架为您提供了许多现成的组件，有时您可能仍需要具有非常特定的，通常不使用的内容，因此未在框架中实现。

在本文中，我将说明如何将第三方视觉组件集成到CUBA平台中。

CUBA平台中的通用用户界面

为了让您简要了解CUBA平台提供的现成的视觉组件，请查看以下图片：

如您所见，有一个现成的扩展组件集，但是所有组件都是非常通用的，广泛用于企业应用程序。现在假设我们需要集成更具体的内容。

从CUBA Studio的2.1版开始，此过程已针对Vaadin，JavaScript和GWT组件进行了大幅简化，因为Studio脚手架存根并添加了新组件的所有必需定义。新组件到平台的集成分为三个级别：

由于框架的通用UI是在Vaadin之上构建的，因此新组件可以作为本机Vaadin组件使用。开发人员已经可以在CUBA应用程序中使用此组件，并将其添加到未包装的CUBA容器中。
新组件已集成到CUBA通用UI中。在这种情况下，从应用程序开发人员的角度来看，它看起来与可视组件库中的标准组件相同。开发人员可以在屏幕XML描述符中定义组件，也可以通过控制器中的ComponentsFactory创建组件。
新组件在Studio组件面板上可用，并且可以在所见即所得布局编辑器中使用，如下图所示。

在本文中，我们将研究Vaadin组件的第一级集成，并创建一个示例应用程序，以了解在现阶段如何在您的CUBA应用程序中使用它。

整合Vaadin组件

如前所述，CUBA平台中的通用UI是基于Vaadin框架构建的，将其组件集成到CUBA应用程序中非常容易：

向第三方Vaadin附加工件添加依赖项。
在您的项目中创建Web-toolkit模块。此模块包含GWT小部件集文件，并允许您创建视觉组件的客户端部分。只需将附加控件集添加到项目的控件集即可。
如果组件的外观不适合应用程序主题，请创建主题扩展并为新组件定义一些CSS。

让我们以Stepper组件为例，看看它在CUBA Studio中是如何工作的：

第一步，我们单击Create web toolkit module ，以集成Vaadin组件，然后单击Create new UI组件 ：

现在，距CUBA中新的Vaadin组件大约10分钟的路程：

在“ 组件类型”组框中选择“ Vaadin附加 组件 ”。
要定义Add-on Maven依赖关系值，请转到stepper插件页面，按Install绿色按钮，从出现的文本框中复制它，然后粘贴到CUBA Studio的Add-on Maven依赖项字段中。
最棘手，最令人困惑的部分是Inherited Widgetset （对于那些初次使用Vaadin的用户而言） （您可以在此处了解有关Vaadin WidgetSets的更多信息，但是您并不需要真正了解它就可以继续进行此操作文章）。在stepper附加页面的Related links部分中有一个Source code链接，单击它。该链接将引导您到该组件的GitHub存储库。要定义Vaadin组件的小部件集，您需要在源代码中找到* .gwt.xml文件。继续至addon / src / main / resources文件夹。在这里，您将看到包含StepperWidgetset.gwt.xml文件的org / vaadin / risto / stepper /小部件集。这足以构造我们的Inherited widgetset值： org.vaadin.risto.stepper.widgetset.StepperWidgetset 。简而言之，它是在Java中作为导入类编写的* .gwt.xml文件的路径。
现在取消选中“ 集成到通用UI”框，然后说“ 确定” 。
Studio将显示通知“ Component created ”并重新构建项目，因为它需要向gradle构建脚本添加新的依赖关系，下载所需的库并重新编译widgetset。因此，我们只需要等待几分钟，直到该过程完成。
最后，我们调整组件以适合我们的应用主题。

如果看一下源代码，我们可以看到该组件是SCSS样式的，因此我们需要将其样式添加到项目依赖项中。为此，请转到“ 项目属性”部分，单击“ IDE” 。 IDE将显示build.gradle ，在其中应将主题（“ org.vaadin.addons：stepper：2.3.0”）行添加到configure（webModule）任务的依赖项子句中，如下图所示。

现在我们可以应用所需的样式。转到“ 项目属性”部分，然后单击“ 创建主题扩展名” 。选择halo作为默认值，然后单击Create 。 Studio将在应用程序的Web模块中添加themes / halo / halo-ext.scss文件，您可以在其中为新组件指定样式或修改现有组件的样式。它还将在构建脚本中进行必要的更改，并为您的IDE重新创建项目文件。

在您的IDE中打开halo-ext.scss文件，并粘贴以下CSS，如下图所示：

…
@import "../VAADIN/addons/stepper/stepper";
…@include stepper;/* Basic styles for stepper inner textbox */.stepper input[type="text"] {@include box-defaults;@include valo-textfield-style;&:focus {@include valo-textfield-focus-style;}}
…

而已！ 现在我们已经可以在CUBA应用程序中使用该组件了！

在您的CUBA应用程序中使用3rd Party Vaadin组件

最后，让我们用步进器创建一个屏幕。由于我们仅完成了第一级集成，因此它仍然不是通用CUBA UI的一部分，因此无法直接在xml屏幕描述符中使用它，但是已经可以通过编程方式创建。

让我们开始吧：

从我们的网站下载 CUBA Studio，进行安装，启动CUBA Studio服务器，然后在浏览器中打开Studio。如果您在此阶段遇到任何麻烦，请按照视频指南（“快速入门”页面的第1部分）进行操作。
创建一个名为vaadin-component的项目。 Studio会自动命名项目名称空间和根包。
请遵循整合Vaadin组件中的步骤
由于步骤3已完成，请转到Studio左侧面板中的屏幕部分，将重点放在Web模块项上，然后单击新建。 Studio会提示您选择是要从头创建新屏幕还是扩展现有屏幕（例如，用户编辑器或“文件上传”对话框）。我们将从头开始尝试新的屏幕。
现在，我们直接进入“ 布局”选项卡，在此处可以直观地设计屏幕。我们需要使用一些容器，该容器将用作步进器的占位符。在组件搜索字段中输入“ hbox ”，Studio会按名称过滤UI组件。将HBox组件拖放到窗体或层次结构中
右键单击位于可视表单布局中的组件表示形式；或在“ 层次结构”部分中选择组件，然后切换到“ 属性”选项卡（在“组件面板”旁边）。

我们将需要使用屏幕控制器上的Hbox，以便能够通过控制器访问CUBA组件，我们需要定义其id 。只需在ID字段中按右按钮，Studio就会自动生成一个ID。

另外，我们希望步进器的宽度为250px，因此我们为其容器指定此尺寸。

应用我们所做的所有更改。

启动您的IDE，转到屏幕设计的控制器选项卡，然后按IDE的Studio将生成的项目文件，并在IDE中打开屏幕控制器。
移至IDE，Studio已经在其中安装了屏幕控制器。让我们编码一下。您需要添加的所有行均带有详细注释：

package com.company.vaadincomponent.web.screens;import com.haulmont.cuba.gui.vaadincomponent.AbstractWindow;
import com.haulmont.cuba.gui.vaadincomponent.HBoxLayout;
import com.vaadin.ui.Layout;
import org.vaadin.risto.stepper.DateStepper;import javax.inject.Inject;
import java.util.Map;public class Screen extends AbstractWindow {/* Getting access to the hbox component, using CUBA mechanism for UI components injection */@Injectprivate HBoxLayout hbox;/* Create stepper to be placed into the prepared hbox container */private DateStepper stepper = new DateStepper();/* Overriding init method, which will be called by the framework after creation of all components and before showing the screen */@Overridepublic void init(Map<String, Object> params) {super.init(params);/* Unwrapping hbox to get access to the native Vaadin layout to place stepper */Layout box = hbox.unwrap(Layout.class);/* Placing stepper component into the unwrapped hbox container */box.addComponent(stepper);/* Defining stepper size to fit 100% of the parent hbox component width */stepper.setWidth("100%");/* Adding listener to show notification when stepper value is changed */stepper.addValueChangeListener(event -> showNotification("Value has been changed to " + stepper.getValue(), NotificationType.HUMANIZED));}
}

要从应用程序的主菜单访问我们的屏幕，请转到Studio右侧面板的Main Menu（主菜单）部分，单击Edit（编辑），将焦点放在应用程序项上，然后按New（新建） 。默认情况下，我们保留了步进器屏幕ID，因此，在下拉列表中找到屏幕值，然后按添加。
现在是启动应用程序并查看其全部工作方式的时候了。按“ 播放 ”按钮，该按钮位于Studio主菜单的“ 构建”项目下方。 Studio会征得您的许可更新数据库，并同意。