CUBA 框架一直以來定位的目標是業務系統的開發。業務系統的界面通常是給後台員工使用的，看重的是功能實現。多年來，界面外觀和樣式並不是後台管理系統的主要關注點，界面中的控件也更緊湊，唯一的原因就是：在單一屏幕中擺放盡可能多的控件，以提供足夠多的功能。
但是在最近十年裡，人們使用了越來越多的小尺寸觸控屏設備，遊戲規則因此而改變。要有易於觸控點擊的控件，它們之間需要有足夠的間距，防止被誤點擊。應用程序的配色也變得偏於使用雜色和對比色。所以，近些年的現代應用程序在設計上更注重樣式，其中非功能性需求都佔了很大的一部分。
順應趨勢，我們很高興推出新可視化主題 – 氦元素（Helium）！與以前的樣式主題相比，氦元素主題更簡潔、明亮，視覺噪音也更少。另外很重要的一點：能夠以最少的工作量為最終用戶和 CUBA 開發人員提供樣式定製。
功能
首先要提到的是，新主題是動態的，意味着您可以隨時在線更改應用程序樣式！以前，CUBA 使用 SCSS 變量定義顏色，這樣每次修改過後都需要重新編譯。而新主題依賴 CSS 定製屬性 ，即使沒有頁面刷新或重新登錄，這些屬性也可以在運行時立即起效。
預設配色
開箱即用支持兩種預設的配色方案：淺色（light）和深色（dark）。
終端用戶可選擇的主題需要通過下列屬性配置（主題安裝流程請參考後續章節）：
cuba.theme.modes = light|dark
cuba.theme.defaultMode = light
另外，也可以通過在線主題編輯器創建自定義的配色方案（點擊下方的在線示例和編輯器章節名稱了解更多細節）。
預設大小
主題自帶三種內置的控件大小配置：小（small），中（medium）和大（large）。
跟配色方案類似，也可以通過主題屬性修改：
cuba.theme.sizes = small|medium|large
cuba.theme.defaultSize = medium
設置界面
設置界面可以通過主菜單的 Help -> Theme Settings 打開。這裏可以讓最終用戶自定義他們喜歡的配色和控件大小。該界面帶有幾乎所有的主要控件，所以用戶可以預覽他調整之後的界面大概什麼樣。
在線示例和編輯器
關於新主題的另一個重要部分就是其在線交互式編輯器。這裏可以試試調整樣式變量，馬上就能看到調整結果 – 一旦樣式滿足您的需求，只需要點擊下載按鈕並按照提供的說明將其安裝到您的 CUBA 應用程序中即可。
其實，在線編輯器最好的一點是：不只是開發人員可以使用。將這個鏈接發送給您的追求極致的客戶，這樣他們可以根據自己的偏好自定義配色，然後下載併發送結果給開發人員，只需要幾分鐘便可以應用新的樣式。同時，編輯器本身也允許導入顏色變量，這樣可以基於已有的配色做修改。
如需使用自定義配色，需要基於氦元素創建主題擴展。
安裝
該主題是通過 擴展插件 的形式發布。該擴展兼容 7.1.5 以上的 CUBA 應用程序（注意，我們推薦您跟蹤 CUBA 框架的 bugfix 版本並更新您的應用程序至最新版）。可以參考 Studio 的 相關章節 了解如何安裝擴展插件。
擴展安裝完成后，可以通過下面的方式啟用新的主題：
啟動應用程序，打開主菜單下的設置界面：Help -> Settings。在可視化主題選項中選擇 Helium 即可。
如需將氦元素主題設為默認主題，可以在 web-app.properties 中添加：
cuba.web.theme = helium
如果之前自定義設置過 cuba.themeConfig 屬性，別忘了也需要添加氦元素屬性：
cuba.themeConfig = +/com/haulmont/addon/helium/web/helium-theme.properties
如需自定義主題屬性，可以在 web 模塊的主包路徑創建 helium-theme.properties，內容如下：
@include=com/haulmont/addon/helium/web/helium-theme.properties
cuba.theme.modes = light|dark
cuba.theme.defaultMode = light
cuba.theme.sizes = small|medium|large
cuba.theme.defaultSize = medium\
然後在 cuba.themeConfig 屬性中註冊一下該文件：
cuba.themeConfig = +/com/example/project/helium-theme.properties
如需深度定製該主題，包括應用自定義配色，則需要創建主題擴展。按照該說明操作。
路線圖
我們計劃繼續開發氦元素主題並添加新功能，包括：
- 深色模式改進
- 在主題編輯器中提供更有用的模板
- 在淺色和深色模式之間自動切換
- 提供可自定義的 border radius 變量，同樣也基於 CSS 變量。
- 提供 Figma 的 CUBA 套件。Figma 是 UI/UХ 設計師最流行的工具之一，他們可以用來創建界面模型。
結論
我們很樂意看到新主題和在線編輯器能用在您的項目中，希望新主題能讓您的應用煥然一新。如果您有任何問題，可以在我們的論壇創建主題討論。項目源碼可以在 Github 找到： 主題 / 編輯器。期待您的反饋！
本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】
※教你寫出一流的銷售文案?
※廣告預算用在刀口上，台北網頁設計公司幫您達到更多曝光效益
※回頭車貨運收費標準
※別再煩惱如何寫文案,掌握八大原則!
※超省錢租車方案
※產品缺大量曝光嗎?你需要的是一流包裝設計!
※推薦台中搬家公司優質服務,可到府估價