如何定制个性设置页面?

在2014-08-05 17:59上被李小翔修改

评论 (0) · 附件 (0) · 记录 · 信息

BroFramework 提供了个性设置功能，并且包含了设置列表每页显示数、首选语种等设置；BroBPM 中进一步扩展该设置，允许设置常用流程、外出授权等功能。

这些个性设置的数据最终以键值对的形式存储在 bropen.framework.core.security.UserProfile 中，并且可以通过 session 获得其值：

import bropen.framework.Constants

Map profiles = session.getAttribute( Constants.SS_USER_PROFILES )
println profiles?.foobar

那么，应用或者插件中如何定制个性设置的页面、通过统一的UI接口来存取自己的个性设置键值呢？

BroFramework 的 bropen/framework/core/security/User/editProfile.gsp 视图中，会遍历所有 _editProfile_xxxx.gsp 视图，并将其作为子表单包含在内。其后缀规则为：

如果是插件中的自定义界面，则后缀为驼峰形式的插件名称，如 _editProfile_broFramework.gsp、_editProfile_broBpm.gsp
如果时应用的自定义界面，则后缀固定为 app，即 _editProfile_app.gsp

自定义的视图文件必须保存在 views/bropen/framework/core/security/User/ 中。

以 _editProfile_broFramework 为例：

通过判断参数 tabs，将视图分为两个部分
- 一个是页签头，用于生成 jQuery UI 的 tab 组件的页签
- 一个是页签的内容部分，包含一个 div
其中
- 页签头中 a 标签的 href 属性和页签内容 div 标签的 id 必须一致，并且唯一
- 小技巧：页签头中 li 标签和 div 标签都设置了一个唯一的 css class 属性，以便在应用中可以通过样式表的方式来隐藏某个个性设置，如：
  .tabs-fwk-page {
  display: none;
  }
页签内容中的个性设置表单字段 select 或者 input 等表单元素的名称前缀固定为 "profiles."
- 表单提交后会自动保存到 code 为后缀的 UserProfile 中
- 如果为空，则会自动删除对应的 UserProfile
变量 Map profiles 中保存了当前用户的所有个性设置，可以通过它获得当前值，并给表单元素赋值，如：
profiles.foobar

<%@ page import="bropen.framework.Constants" %>
<g:if test="${tabs}">
   <%-- 页签头 --%>

   <li class="tabs-fwk-page"><a href="#tabs-fwk-page"><g:message code='bropen.framework.core.security.UserProfile.editProfile.page' /></a></li>

</g:if><g:else>
   <%-- 页签内容 --%>

   <div id="tabs-fwk-page" class="tabs-fwk-page">
       <table>
           <tr>
               <th><label><g:message code='bropen.framework.core.security.UserProfile.editProfile.page.username' />:</label></th>
               <td width="70%"><sec:username/></td>
           </tr>
           <tr>
               <th><label for='${Constants.UP_PAGE_MAX}'><g:message code='bropen.framework.core.security.UserProfile.editProfile.page.UP_PAGE_MAX' />:</label></th>
               <td><g:select name="profiles.${Constants.UP_PAGE_MAX}" from="${[5,10,15,20,50,100,200]}"
                      value="${profiles[Constants.UP_PAGE_MAX]?:setting('bropen.framework.pagination.default')}" /></td>
           </tr>

           <g:if test="${GrailsUtils.getConfig('bropen.toolkit.i18n.supported').size() > 1}">
           <tr>
               <th><label for='${Constants.UP_LOCALE}'><g:message code='bropen.framework.core.security.UserProfile.editProfile.page.UP_LOCALE' />:</label></th>
               <td>
                   <g:select class="up-locale" name="profiles.${Constants.UP_LOCALE}"
                       from="${GrailsUtils.getConfig('bropen.toolkit.i18n.supported')}" value="${profiles[Constants.UP_LOCALE]}" />
                   <script>$j(".up-locale option:first").val('')</script>
               </td>
           </tr>
           </g:if>
       </table>
   </div>
</g:else>

在举一个应用的例子 _editProfile_app.gsp：

<g:if test="${tabs}">
   <%-- 页签头 --%>
   <li><a href="#tabs-address">常用地址信息</a></li>

   
   <style>.tabs-bpm-part { display: none }</style>

</g:if><g:else>
   <%-- 页签内容 --%>

   <div id="tabs-address">
       <table>
           <tr>
               <th><label for="address.company">单位名称:</label></th>
               <td width="70%"><g:textField name="profiles.address.company" value="${profiles['address.company']}" style="width:96%"/></td>
           </tr>
           <tr>
               <th><label for="address.address">地址:</label></th>
               <td><g:textField name="profiles.address.street" value="${profiles['address.street']}" style="width:96%"/></td>
           </tr>
           <tr>
               <th><label for="address.postcode">邮编:</label></th>
               <td><g:textField name="profiles.address.postcode" value="${profiles['address.postcode']}" style="width:96%"/></td>
           </tr>
       </table>
   </div>

</g:else>

标签： BroFramework

在2014-08-05 12:46上被李小翔创建

如何定制个性设置页面?

快速链接