來的多可選

在參加會議時，我們總是會遇到高素質的決策者，他們經常問同樣的問題：' 您的框架有多可擴展性？如果我需要的比您開箱即用的功能還多呢？ '。 這個問題非常合理，因為他們只是不想被卡在開發曲線的中間，然后意識到框架只是不允許實現某些功能，或者，如果您使用開源產品，它可能需要花費很長的時間才能深入探究框架中記錄較差的部分。

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

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

在本文中，我將說明如何將第三方視覺組件集成到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會征得您的許可更新數據庫，并同意。

當應用程序啟動并運行時，您將在左下方看到localhost：8080 / app鏈接，單擊它。

CUBA應用程序將在登錄屏幕上顯示您的身份，默認用戶為admin ，您猜密碼是多少？ 只需按Submit 。 單擊主菜單的“ 應用程序”->“屏幕”項，然后開始！

您可以在此處找到工作的步進器示例項目的源代碼。

結論

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

另外，我想承認該過程的某些部分可以大大簡化甚至完全消除，但這是第一步，可以立即幫助用戶使用很少使用但有時非常有用的小部件使我們的通用用戶界面飽和。 因此，如果您有關于如何改進它的建議或想法，請在我們的論壇上與我們分享。

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

來的多可選

總結

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

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