来的多可选

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

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

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

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

CUBA平台中的通用用户界面

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

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

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

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

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

整合Vaadin组件

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

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

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

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

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

1. 在“ 组件类型”组框中选择“ Vaadin附加 组件 ”。
2. 要定义Add-on Maven依赖项值，请转到stepper插件页面 ，按Install绿色按钮，从出现的文本框中复制它，然后粘贴到CUBA Studio的Add-on Maven依赖项字段中。
   
3. 最棘手和最令人困惑的部分是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文件的路径。
   
4. 现在取消选中“ 集成到通用UI”框，然后说“ 确定” 。
5. Studio将显示通知“ Component created ”并重建项目，因为它需要向gradle构建脚本中添加新的依赖项，下载所需的库并重新编译widgetset。 因此，我们只需要等待几分钟，直到该过程完成。
6. 最后，我们调整组件以适合我们的应用主题。

如果看一下源代码 ，我们可以看到该组件是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屏幕描述符中使用它，但是已经可以通过编程方式创建。

让我们开始吧：

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

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

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

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

1. 启动您的IDE，转到屏幕设计的控制器选项卡，然后按IDE的Studio将生成的项目文件，并在IDE中打开屏幕控制器。
   
2. 移至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));}
}

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

当应用程序启动并运行时，您将在左下方看到localhost：8080 / app链接，单击它。

CUBA应用程序将在登录屏幕上显示您的身份，默认用户为admin ，您猜密码是多少？ 只需按Submit 。 单击主菜单的“ 应用程序”->“屏幕”项，然后开始！

您可以在此处找到工作的步进器示例项目的源代码。

结论

最初，我将写一篇文章，介绍Vaadin，GWT和JavaScript组件的所有集成级别，但是正如您所看到的那样，一篇文章太过复杂了。 因此，下一次我将介绍JavaScript组件。

另外，我想承认该过程的某些部分可以大大简化甚至完全消除，但这是第一步，可以立即帮助用户使用很少使用但有时非常有用的小部件使我们的通用用户界面饱和。 因此，如果您有关于如何改进它的建议或想法，请在我们的论坛上与我们分享。

翻译自: https://www.javacodegeeks.com/2016/07/how-extensible-is-your-framework.html

来的多可选