如何自定义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 的显示方式。