如何自定義Bonita User XP

如何自定義Bonita User XP

 

如何自定義Bonita User XP 是Bonita社區論壇中最常被提到的問題。本文將指導您如何實現自定義User XP。

 

首先須要認識的是,Bonita User XP應用了Google Web Tookit(GWT)技術，由此得以在用戶UI方面可以獲得Ajax的很好支持.當靜態資源，如HTML和CSS文件被加載後，頁面組件也將呈現用來容許用戶瀏覽的用例。頁面組件的插入位置是經過HTML結構來定義的.這就意味着當HTML被修改,組件的位置也會相應改變.

 

默認的HTML結構

 

BonitaConsole.html提供了用戶界面的主要結構。 當它被瀏覽器加載時,一些Ajax請求會生成,同時必需的頁面組件將會加載. 指定組件的插入位置經過HMTL中指定ID的元素被定義。

以一個ID爲「SystemLabelBrowserContainer」的DIV爲例,它將會成爲一些系統標籤的容器(收件箱,星號標記,個人用例等)。而另外一個ID爲」AdminContainer」的DIV將會被放置在管理員菜單插入的地方。

 

如下是一些用來插入的容器ID:

 

l  user_id

l  SystemLabelBrowserContainer

l  CategoryBrowserContainer

l  UserLabelBrowserContainer

l  MoreLabelAndCategoryBrowserContainer

l  ProcessBrowserContainer

l  StatisticsViewerContainer

l  AdminContainer

l  you_are_here

l MessageContainer

BonitaConsole.css用來定義界面的外表樣式。

 

一些簡單教程：

 

改變頁面組件佈局樣式調整的關鍵是調整HTML和CSS。如下是一些修改的例子。您能夠從社區網站上下載相應的HTML和CSS：下載連接 。

 

鏡像

 

在鏡像的例子中，全部的組件都被移動，用來爲User XP建立一種鏡像的視覺，顏色也相應調整。

 

您也能夠刪除HTML容器，這樣相應的頁面組件將沒法創建，也不會被添加到頁面中。

 

只實現管理員功能

 

這個例子講述了若是您只是對用戶管理部分的User XP感興趣，能夠清除掉沒必要要的元素接口。同時值得注意的是左上角的導航連接，已經由縱向改成橫向。

 

 

只實現收件箱

 

以一樣的方式，這個例子顯示的是User XP中只包含用戶的收件箱。左上角包含一個紅色的開始圖標，允許用戶啓動一個新的用例。

 

 

練習

 

如今，您已經熟悉如何對User XP進行自定義，能夠嘗試一下了。

 

如下是須要遵循的步驟：

 

1.  從Bonita Studio 導出User XP

2.  解壓war文件

3.  修改BonitaConsole.html文件

4.  修改BonitaConsole.css文件

5.  壓縮war文件

6.   在您的服務器上部署

 

歡迎在Bonita社區中( http://www.bonitabpm.org ) 分享您的成果。

 

 

如您所看到的，您能夠經過簡單的修改HTML和CSS來改變Bonita UserXP的顯示方式。