1 使用WebJars

1.1 引入WebJar依賴

以集成DateRangePicker前端組件為例 （http://www.daterangepicker.com/）

在 https://www.webjars.org/ 網站搜索’bootstrap-daterangepicker’，找到對應的WebJar，并查看響應的Gradle依賴

在項目的build.gradle文件中加入上述依賴

創建組件類，并引入相關js和css依賴

編寫前后端通信方法以及xx-connector.js方法

2. 使用或集成Vaadin Add-on

2.1 CUBA 7

2.1.1 引入Add-on依賴

如果沒有web-toolkit模塊，首先創建該模塊

以Vaadin插件DateTimeRangePicker為例，在build.gradle中，在 web 模塊配置中添加包含組件的擴展包的依賴：

configure(webModule) {...dependencies {...compile("org.vaadin.addons:vaadin-bootstrap-datetimerangepicker:2.0")}

在web-toolkit模塊的AppWidgetSet.gwt.xml文件中，說明項目的部件繼承自擴展的部件：

<module><inherits name="com.haulmont.cuba.web.widgets.WidgetSet" /><inherits name="org.vaadin.addons.datetimerangepicker.WidgetSet" />

2.2 CUBA 6

對于CUBA 6版本，以vaadin stepper組件為例進行說明。

2.2.1 引入Add-on依賴

其中Inherited widgetset內容根據依賴jar包的MANIFEST.MF中的Vaadin-Widgetset填寫

2.2.2 CSS依賴處理

將依賴包中的scss文件直接拷貝到cuba工程中，并加入依賴即可。

總結

以上是生活随笔為你收集整理的CUBA Platform系列：自定义可视化组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。