如何自定义Bonita User XP

 

如何自定义 Bonita User XP 是 Bonita 社区论坛中 最常 被提到 的问题 。 本文将指导 您 如何实现自定义 User XP 。

 

首先 需要认识的 是 ,Bonita User X P 应用了 Google Web Tookit(GWT) 技术 ，由此得 以在用户 UI 方面能够得到 Ajax 的很好支持 . 当 静态资源，如 HTML 和 CSS 文件被加载 后 ， 页面 组件 也 将 呈现 用来允许用户浏览的用例。 页面 组件的插入位置是通过 HTM L 结构 来定义的 . 这就意味着 当 HTML 被修改 , 组件的位置也会相应改变 .

 

默 认 的 HTML 结 构

 

BonitaConsole.html 提供了用户界面的主要结构 。 当 它被浏览器加载 时 , 一些 Ajax 请求会生成 , 同时必需的 页面 组件将会加载 . 指定 组件的插入位置通过 HMTL 中指定 ID 的元素被定义 。

以一个 I D 为 “ 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 的显示方式。

评论

2 楼 Jenniew 2012-04-18  

获益匪浅！
我正在做有关Bonita 的项目，想请教有关User Experience的问题，方便把你的邮箱发送消息给我吗？先谢谢了！

1 楼 Jenniew 2012-04-18