在參加會議時(shí)，我們總是會見到高素質(zhì)的決策者，他們經(jīng)常問同樣的問題：' 您的框架有多可擴(kuò)展性？如果我需要比您開箱即用的功能更多的東西怎么辦？ '。 這個(gè)問題是非常合理的，因?yàn)樗麄冎皇遣幌氡豢ㄔ陂_發(fā)曲線的中間，然后意識到框架只是不允許實(shí)現(xiàn)某些功能，或者，如果您使用開源產(chǎn)品，那么它可能會實(shí)現(xiàn)。需要花費(fèi)很長的時(shí)間才能深入探究框架中記錄較差的部分。

通常會特別注意用戶界面部分：該框架有多少個(gè)組件？ 是否可以集成第三方小部件？ 最后，將它們集成到您的應(yīng)用程序中有多么容易。

即使框架為您提供了許多現(xiàn)成的組件，有時(shí)您可能仍需要具有非常特定的，通常不使用的內(nèi)容，因此未在框架中實(shí)現(xiàn)。

在本文中，我將說明如何將第三方視覺組件集成到CUBA平臺中 。

CUBA平臺中的通用用戶界面

為了讓您簡要了解CUBA平臺提供的現(xiàn)成的視覺組件，請查看以下圖片：

如您所見，有一個(gè)現(xiàn)成的擴(kuò)展組件集，但是所有組件都是非常通用的，廣泛用于企業(yè)應(yīng)用程序。 現(xiàn)在假設(shè)我們需要集成更具體的內(nèi)容。

從CUBA Studio的2.1版開始，此過程已針對Vaadin，JavaScript和GWT組件進(jìn)行了大幅簡化，因?yàn)镾tudio腳手架存根并添加了新組件的所有必需定義。 新組件到平臺的集成分為三個(gè)級別：

由于框架的通用UI是在Vaadin之上構(gòu)建的，因此新組件可以作為本機(jī)Vaadin組件使用。 開發(fā)人員已經(jīng)可以在CUBA應(yīng)用程序中使用此組件，并將其添加到未包裝的CUBA容器中。

新組件已集成到CUBA通用UI中。 在這種情況下，從應(yīng)用程序開發(fā)人員的角度來看，它看起來與可視組件庫中的標(biāo)準(zhǔn)組件相同。 開發(fā)人員可以在屏幕XML描述符中定義組件，也可以通過控制器中的ComponentsFactory創(chuàng)建組件 。

新組件在Studio組件面板上可用，并且可以在所見即所得布局編輯器中使用，如下圖所示。

在本文中，我們將研究Vaadin組件的第一級集成，并創(chuàng)建一個(gè)示例應(yīng)用程序，以了解在現(xiàn)階段如何在您的CUBA應(yīng)用程序中使用它。

整合Vaadin組件

如前所述，CUBA平臺中的通用UI是基于Vaadin框架構(gòu)建的，將其組件集成到CUBA應(yīng)用程序中非常容易：

向第三方Vaadin附加工件添加依賴項(xiàng)。

在您的項(xiàng)目中創(chuàng)建Web-toolkit模塊。 此模塊包含GWT小部件集文件，并允許您創(chuàng)建視覺組件的客戶端部分。 只需將附加控件集添加到項(xiàng)目的控件集即可。

如果組件的外觀不適合應(yīng)用程序主題，請創(chuàng)建主題擴(kuò)展并為新組件定義一些CSS。

讓我們以Stepper組件為例，看看它在CUBA Studio中是如何工作的：

第一步，我們單擊Create web toolkit module ，以集成Vaadin組件，然后單擊Create new UI組件 ：

現(xiàn)在，距CUBA中新的Vaadin組件大約10分鐘的路程：

在“ 組件類型”組框中選擇“ Vaadin附加 組件 ”。

要定義Add-on Maven依賴關(guān)系值，請轉(zhuǎn)到stepper插件頁面 ，按Install綠色按鈕，從出現(xiàn)的文本框中復(fù)制它，然后粘貼到CUBA Studio的Add-on Maven依賴項(xiàng)字段中。

最棘手，最令人困惑的部分是Inherited Widgetset （對于那些初次使用Vaadin的用戶而言） （您可以在此處了解有關(guān)Vaadin WidgetSets的更多信息，但是您并不需要真正了解它就可以繼續(xù)進(jìn)行此操作文章）。 在stepper附加頁面的Related links部分中有一個(gè)Source code鏈接，單擊它。 該鏈接將引導(dǎo)您到該組件的GitHub存儲庫 。 要定義Vaadin組件的小部件集，您需要在源代碼中找到* .gwt.xml文件。 繼續(xù)至addon / src / main / resources文件夾。 在這里，您將看到包含StepperWidgetset.gwt.xml文件的org / vaadin / risto / stepper /小 部件 集 。 這足以構(gòu)造我們的Inherited widgetset值： org.vaadin.risto.stepper.widgetset.StepperWidgetset 。 簡而言之，它是在Java中作為導(dǎo)入類編寫的* .gwt.xml文件的路徑。

現(xiàn)在取消選中“ 集成到通用UI”框，然后說“ 確定” 。

Studio將顯示通知“ Component created ”并重新構(gòu)建項(xiàng)目，因?yàn)樗枰騡radle構(gòu)建腳本添加新的依賴關(guān)系，下載所需的庫并重新編譯widgetset。 因此，我們只需要等待幾分鐘，直到該過程完成。

最后，我們調(diào)整組件以適合我們的應(yīng)用主題。

如果看一下源代碼 ，我們可以看到該組件是SCSS樣式的，因此我們需要將其樣式添加到項(xiàng)目依賴項(xiàng)中。 為此，請轉(zhuǎn)到“ 項(xiàng)目屬性”部分，單擊“ IDE” 。 IDE將顯示build.gradle ，在其中應(yīng)將主題（“ org.vaadin.addons：stepper：2.3.0”）行添加到configure（webModule）任務(wù)的依賴項(xiàng)子句中，如下圖所示。

現(xiàn)在我們可以應(yīng)用所需的樣式。 轉(zhuǎn)到“ 項(xiàng)目屬性”部分，然后單擊“ 創(chuàng)建主題擴(kuò)展名” 。 選擇halo作為默認(rèn)值，然后單擊Create 。 Studio將在應(yīng)用程序的Web模塊中添加themes / halo / halo-ext.scss文件，您可以在其中為新組件指定樣式或修改現(xiàn)有組件的樣式。 它還將在構(gòu)建腳本中進(jìn)行必要的更改，并為您的IDE重新創(chuàng)建項(xiàng)目文件。

在您的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;}} …

而已！ 現(xiàn)在我們已經(jīng)可以在CUBA應(yīng)用程序中使用該組件了！

在您的CUBA應(yīng)用程序中使用3rd Party Vaadin組件

最后，讓我們用步進(jìn)器創(chuàng)建一個(gè)屏幕。 由于我們僅完成了第一級集成，因此它仍然不是通用CUBA UI的一部分，因此無法直接在xml屏幕描述符中使用它，但是已經(jīng)可以通過編程方式創(chuàng)建。

讓我們開始吧：

從我們的網(wǎng)站下載 CUBA Studio，進(jìn)行安裝，啟動CUBA Studio服務(wù)器，然后在瀏覽器中打開Studio。 如果您在此階段遇到任何麻煩，請按照視頻指南 （“快速入門”頁面的第1部分）進(jìn)行操作。

創(chuàng)建一個(gè)名為vaadin-component的項(xiàng)目。 Studio會自動命名項(xiàng)目名稱空間和根包。

請遵循整合Vaadin組件中的步驟

由于步驟3已完成，請轉(zhuǎn)到Studio左側(cè)面板中的屏幕部分，將重點(diǎn)放在Web模塊項(xiàng)上，然后單擊新建 。 Studio會提示您選擇是要從頭創(chuàng)建新屏幕還是擴(kuò)展現(xiàn)有屏幕（例如，用戶編輯器或“文件上傳”對話框）。 我們將從頭開始嘗試新的屏幕。

現(xiàn)在，我們直接進(jìn)入“ 布局”選項(xiàng)卡，在此處可以直觀地設(shè)計(jì)屏幕。 我們需要使用一些容器，該容器將用作步進(jìn)器的占位符。 在組件搜索字段中輸入“ hbox ”，Studio會按名稱過濾UI組件。 將HBox組件拖放到窗體或層次結(jié)構(gòu)中

右鍵單擊位于可視表單布局中的組件表示形式； 或在“ 層次結(jié)構(gòu)”部分中選擇組件，然后切換到“ 屬性”選項(xiàng)卡（在“組件面板”旁邊）。

我們將需要使用屏幕控制器上的Hbox，以便能夠通過控制器訪問CUBA組件，我們需要定義其id 。 只需在ID字段中按右按鈕，Studio就會自動生成一個(gè)ID。

另外，我們希望步進(jìn)器的寬度為250px，因此我們?yōu)槠淙萜髦付ù顺叽纭?

應(yīng)用我們所做的所有更改。

啟動您的IDE，轉(zhuǎn)到屏幕設(shè)計(jì)的控制器選項(xiàng)卡，然后按IDE的Studio將生成的項(xiàng)目文件，并在IDE中打開屏幕控制器。

移至IDE，Studio已經(jīng)在其中安裝了屏幕控制器。 讓我們編碼一下。 您需要添加的所有行均帶有詳細(xì)注釋：

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));} }

要從應(yīng)用程序的主菜單訪問我們的屏幕，請轉(zhuǎn)到Studio右側(cè)面板的Main Menu（主菜單）部分，單擊Edit（編輯），將焦點(diǎn)放在應(yīng)用程序項(xiàng)上，然后按New（新建） 。 默認(rèn)情況下，我們保留了步進(jìn)器屏幕ID，因此，在下拉列表中找到屏幕值，然后按添加 。

現(xiàn)在是啟動應(yīng)用程序并查看其全部工作方式的時(shí)候了。 按“ 播放 ”按鈕，該按鈕位于Studio主菜單的“ 構(gòu)建”項(xiàng)目下方。 Studio會征得您的許可更新數(shù)據(jù)庫，并同意。

當(dāng)應(yīng)用程序啟動并運(yùn)行時(shí)，您將在左下角看到localhost：8080 / app鏈接，單擊它。

CUBA應(yīng)用程序?qū)⒃诘卿浧聊簧吓c您會面，默認(rèn)用戶為admin ，您猜密碼是多少？ 只需按Submit 。 單擊主菜單的“ 應(yīng)用程序”->“屏幕”項(xiàng)，然后開始！

您可以在此處找到工作的步進(jìn)器示例項(xiàng)目的源代碼。

結(jié)論

最初，我將寫一篇文章，介紹Vaadin，GWT和JavaScript組件的所有集成級別，但是正如您所看到的那樣，一篇文章太過復(fù)雜了。 因此，下一次我將介紹JavaScript組件。

另外，我想承認(rèn)該過程的某些部分可以大大簡化甚至完全消除，但這是第一步，可以立即幫助用戶使用很少使用但有時(shí)非常有用的小部件使我們的通用用戶界面飽和。 因此，如果您有關(guān)于如何改進(jìn)它的建議或想法，請?jiān)谖覀兊恼搲吓c我們分享。

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

總結(jié)

以上是生活随笔為你收集整理的您的框架有多可扩展性？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。