上周，我發(fā)布了一個(gè)博客，重點(diǎn)介紹了我的演示文稿，該演示文稿展示了我們?cè)贐RMS和BPMS平臺(tái)內(nèi)完成的工作，Drools和jBPM項(xiàng)目的產(chǎn)品化版本所產(chǎn)生的豐富客戶(hù)端平臺(tái)。 該演示文稿是所有屏幕截圖和視頻，您可以在此處找到博客和幻燈片共享的鏈接： “ Red Hat JBoss BRMS和BPMS Workbench和Rich Client Technology”。

演講強(qiáng)調(diào)了我們UI工作的廣泛范圍； 展示了我們?cè)贐RMS和BPMS平臺(tái)內(nèi)所做的工作以及UI技術(shù)提供的靈活性和適應(yīng)性。 它為GWT ， Errai和UberFire的強(qiáng)大動(dòng)力提供了很好的證明，這三種技術(shù)推動(dòng)了所有這些。 我們等不及GWT 2.7的升級(jí)了 ！

如上一個(gè)博客所述，UberFire網(wǎng)站只是一個(gè)占位符，還沒(méi)有發(fā)布。 該計(jì)劃是第一個(gè)發(fā)布我們的0.5版本的計(jì)劃，但是對(duì)于我們的BRMS和BPMS平臺(tái)而言，則更多。 然后，我們將其移至GWT 2.7并朝著適用于更廣泛消費(fèi)的UF 1.0努力。 在1.0中，我們將添加示例和文檔，并致力于使最終用戶(hù)更容易理解和使用它們。 當(dāng)然，沒(méi)有什么可以阻止冒險(xiǎn)嘗試0.5的，它的代碼很健壯，并且已經(jīng)在BRMS和BPMS中生成了產(chǎn)品– Freenode #uberfire我們一直在提供幫助。

該演示文稿本身建立在早期視頻的基礎(chǔ)上，該視頻展示了我們的新Apps框架： Drools和jBPM KIE A??pps Framework

上面的視頻已經(jīng)演示了我們的多語(yǔ)言功能，構(gòu)建AngularJS組件并在UF環(huán)境中使用它們。 它還顯示了我們受JSFiddle啟發(fā)的全新RAD環(huán)境。

我現(xiàn)在想與大家分享我們?cè)诙嗾Z(yǔ)言開(kāi)發(fā)另一端所做的工作-這次是從AngularJS中使用GWT和UF。 重要的是，我們?cè)试S采用AngularJS優(yōu)先方法，該方法應(yīng)與AngularJS人們熟悉的工具鏈配合使用。 首先是AngularJS，我的意思是AngularJS是最外面的容器。 上面的視頻中UF已經(jīng)在運(yùn)行，并且是外部容器，可以在其中使用各個(gè)AngularJS組件。

在詳細(xì)說(shuō)明我們完成的工作之前，首先要涵蓋屏幕和透視圖的概念，這是我們提供多語(yǔ)言互操作性的兩個(gè)主要組件-還有其他組件，但這足以理解接下來(lái)的視頻和示例。 屏幕是我們最簡(jiǎn)單的組件，它是DIV加上可選的生命周期回調(diào)。 透視圖也是DIV，但它包含1..n屏幕，具有不同的可能布局管理器和布局持久性。

屏幕

• CDI發(fā)現(xiàn)或以編程方式注冊(cè)。
• 頁(yè)面上的DIV。
• 生命周期回調(diào)。
  • OnStart，OnClose，OnFocus，OnLostFocus，OnMayClose，OnReveal。
• 通過(guò)Errai總線解耦。
  • 組件不會(huì)相互調(diào)用，所有通信都由總線處理。
• 編輯器擴(kuò)展屏幕，與資源類(lèi)型相關(guān)聯(lián)，并提供其他生命周期
  • onSave，isDirty。

透視

• CDI發(fā)現(xiàn)或以編程方式注冊(cè)。
• 1..n屏幕的組成，但它本身是DIV。
• 支持屏幕的可插入窗口管理。
  • 北，東，西南（NESW）。
    • 拖放對(duì)接功能。
  • 引導(dǎo)網(wǎng)格視圖。
    • 分開(kāi)的設(shè)計(jì)時(shí)間和運(yùn)行時(shí)間。
  • 模板（ErraiUI或AngularJS）。
    • 透視圖內(nèi)容和布局的絕對(duì)控制。
• 如果用戶(hù)重新設(shè)計(jì)，則支持透視圖布局的持久性。
  • 僅適用于NESW和Bootstrap Grid視圖。

一幅圖片價(jià)值一千個(gè)單詞，因此這是一個(gè)透視圖生成器的屏幕截圖。 在這里，它使用Bootstrap Grid View布局管理器。 每個(gè)網(wǎng)格單元中都有一個(gè)屏幕。 保存透視圖，然后從應(yīng)用程序中使用它。 如果使用NESW布局管理器，則沒(méi)有單獨(dú)的設(shè)計(jì)時(shí)間，并且所有拖動(dòng)都就地完成，并且每次更改后，持久性都會(huì)在后臺(tái)發(fā)生。 盡管下面的屏幕快照中未顯示它，但我們也支持屏幕的列表（下拉列表）和選項(xiàng)卡堆棧。

現(xiàn)在回到AngularJS第一種方法的含義。 確定了6個(gè)不同點(diǎn)以證明這是可能的。

UF屏幕和透視圖應(yīng)作為AngularJS指令無(wú)縫提供。

預(yù)編譯UFJS的Bower包裝。 UFJS是UF的預(yù)編譯客戶(hù)端專(zhuān)用版本。

UFJS可以獨(dú)立運(yùn)行，例如file：//。 UFJS可以選擇與UF戰(zhàn)爭(zhēng)后端一起使用，從而允許UFJS保存狀態(tài)所需的觀點(diǎn)和其他可選位置的持久性，并可以訪問(wèn)我們提供的所有服務(wù)，例如身份管理。

在開(kāi)發(fā)過(guò)程中支持實(shí)時(shí)刷新。

嵌套控制器。

持久性和路由。

使用諸如Yeoman ， Grunt和Karma之類(lèi)的工具 。

Eder產(chǎn)生了許多示例，您可以自己運(yùn)行。 這些證明所有問(wèn)題都已解決。 您可以在這里找到代碼，以及自述文件以開(kāi)始使用。 我們沒(méi)有提供第7點(diǎn)的視頻，因?yàn)槲艺J(rèn)為第1點(diǎn)到第6點(diǎn)的視頻表明這不是問(wèn)題。

Eder還針對(duì)每個(gè)用例創(chuàng)建了幾個(gè)運(yùn)行示例的簡(jiǎn)短視頻，并將它們放入YouTube播放列表。 他添加了文本和標(biāo)注以使發(fā)生的事情更清楚： AngularJS + UF PlayList

概述，解釋每個(gè)視頻的演示內(nèi)容（33秒）。

AngularJS App + UFJS，僅客戶(hù)端，使用Bower分發(fā)。 （2分30秒）。

• 通過(guò)Bower安裝并使用UFJS
• 創(chuàng)建一個(gè)本機(jī)AngularJS應(yīng)用
• 將此應(yīng)用程序與UFJS集成
  • 顯示超濾屏幕指令
  • 顯示用友觀點(diǎn)指令

AngularJS應(yīng)用程序+ UFJS客戶(hù)端和UF服務(wù)器。

• 1之2（3分58秒）。
  • 下載UF戰(zhàn)爭(zhēng)
  • 在EAP上安裝并運(yùn)行
  • 在Apache上下載并運(yùn)行我們的Angular演示
  • 顯示AngularJS路線+ UF集成
• 2之2（4分06秒）。
  • 使用UF創(chuàng)建動(dòng)態(tài)屏幕和透視圖
  • 將AngularJS模板封裝在UF屏幕中
  • 顯示嵌套在父控制器中的AngularJS應(yīng)用（在UF屏幕內(nèi)）。
    • 展示了多層控制器嵌套。

帶有AngularJS組件的KIE UF Workbench RAD環(huán)境。

Uberfire編輯器可以無(wú)縫地用作Eclipse編輯器。

為了完整起見(jiàn)，原始視頻顯示了JSFiddle啟發(fā)的RAD環(huán)境，該環(huán)境演示了UF首個(gè)多語(yǔ)言環(huán)境。 參見(jiàn)上面的第4點(diǎn)。

最后，為了展示并且因?yàn)槲覀兛梢?#xff0c;我們添加了一個(gè)獎(jiǎng)勵(lì)視頻，演示了在Eclipse中無(wú)縫運(yùn)行的UF編輯器組件。 這證明了我們的組件模型的強(qiáng)大功能-旨在使我們的組件在任何環(huán)境下都可以獨(dú)立工作。 我們使用Errai攔截所有RPC調(diào)用并將它們橋接到Eclipse。 因?yàn)槲覀兊木庉嬚呤褂玫奶摂M文件系統(tǒng)像其他服務(wù)一樣被解耦和抽象了，所以我們可以使其適應(yīng)Eclipse File io。 對(duì)于最終用戶(hù)，結(jié)果是一個(gè)無(wú)縫的編輯器，顯示為本地。 這允許開(kāi)發(fā)可以在Web上和Eclipse甚至IntelliJ中運(yùn)行的組件。 我們將稍后再公開(kāi)此示例。

以下是從視頻中截取的一些屏幕截圖：

最后，對(duì)所有那些說(shuō)不可能完成的人！

翻譯自: https://www.javacodegeeks.com/2014/11/red-hat-jboss-brms-and-bpms-rich-client-framework-demonstrating-polyglot-integration-with-gwterraiuberfire-and-angularjs.html

總結(jié)

以上是生活随笔為你收集整理的红帽JBoss BRMS和BPMS富客户端框架展示了与GWT / Errai / UberFire和AngularJS的多语言集成...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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