我试图找出在CRUD功能中使用表单引擎的最佳方法,尽可能提供最佳的用户体验。
我已经创建了一个自定义共享页面,它将用作站点管理页面。其功能之一是管理站点成员,因此它将允许站点管理员搜索当前成员以及查看详细信息、创建、编辑或删除成员。我把管理控制台中的开箱即用用户管理作为模型,因为它的功能非常相似。
管理控制台中的用户管理不使用表单引擎,但我希望将其用于用户创建、编辑和查看其属性。我想知道是否有人利用表单引擎实现了类似的功能,而且在共享中已经存在类似的功能,但我什么也没有发现。
在阅读了一些关于表单引擎体系结构的文章之后,我想出了以下方法:
方法1
为了提供更好的用户体验,我希望保留原始管理控制台的用户管理流程,该管理控制台通过执行返回JSON响应的AJAX请求动态加载页面所需的内容。我认为我可以这样做的唯一方法是对forms组件执行异步请求,然后将返回的HTML内容添加到当前页面中。例如,对/share/service/components/form?itemKind=node&itemId=workspace%3A%2F%2FSpacesStore%2F3152987c-4cc9-49c4-b934-4ad293e73884&mode=create&htmlid=to_be_replaced_with_current_htmlid的请求将返回一个包含用户数据的表单:
<style type="text/css" media="screen">
@import url("/share/res/yui/calendar/assets/calendar_aa6d35544845f9e37c2e63f30c3fc.css");
@import url("/share/res/components/object-finder/object-finder_6ace14eb15aeb2f5fc580252b2e234a.css");
@import url("/share/res/components/form/form_b0441863b8c8626acf9439fcf5430e3.css");
</style>
<script type="text/javascript" src="/share/res/components/form/form_759f5c75621bd2fdc25f232733606013.js"></script>
<script type="text/javascript" src="/share/res/components/form/date_c5fc1a135563584dfe4fa2ebfda6d7c7.js"></script>
<script type="text/javascript" src="/share/res/components/form/date-picker_867acd42dd913caf3fdf3b5fb915b6b.js"></script>
<script type="text/javascript" src="/share/res/components/form/period_6687cd14ce6f0519843823e177d338.js"></script>
<script type="text/javascript" src="/share/res/components/object-finder/object-finder_7613d05fefd03476b1aa73321a9de750.js"></script>
<script type="text/javascript" src="/share/res/components/form/rich-text_832156d1b3b4b7b336b9fcfd13a7e98.js"></script>
<script type="text/javascript" src="/share/res/components/form/content_9080c79dc38a9d8a6ce5405a1fc53f.js"></script>
<script type="text/javascript" src="/share/res/components/form/workflow/transitions_c015c3dc53be0a35a52e8d10f45cbd.js"></script>
<script type="text/javascript" src="/share/res/components/form/workflow/activiti-transitions_5da4db124822ea4a3062f14ab3402594.js"></script>
<script type="text/javascript" src="/share/res/components/form/jmx/operations_7cbe27c4e529dd693674fe2a8ff1bd.js"></script>
<script type="text/javascript">//<![CDATA[
//]]></script>
...
...
...
<div class="form-field">
<label for="whatever_prop_cm_firstName">First Name:<span class="mandatory-indicator">*</span></label>
<input id="whatever_prop_cm_firstName" name="prop_cm_firstName" tabindex="0"
type="text"
value="Administrator"
title="The person's first name"
/>
</div>
</div>
</div>
<div id="whatever-form-buttons" class="form-buttons">
<input id="whatever-form-submit" type="submit" value="Submit" />
</div>
</form>
</div>然后,该HTML响应可以包含在包装器div中,例如。
方法2
创建一个由三个不同区域组成的附加页面。每个区域将绑定窗体组件,但具有不同的初始化参数:一个区域用于视图模式,另一个区域用于创建模式,另一个区域用于编辑模式。类似于:
<component>
<region-id>view-user</region-id>
<url>/components/form</url>
<properties>
<itemKind>node</itemKind>
<itemId>{nodeRef}</itemId>
<mode>view</mode>
<submitType>json</submitType>
<showCaption>true</showCaption>
<showCancelButton>true</showCancelButton>
</properties>
</component>
<component>
<region-id>edit-user</region-id>
<url>/components/form</url>
<properties>
<itemKind>node</itemKind>
<itemId>{nodeRef}</itemId>
<mode>edit</mode>
<submitType>json</submitType>
<showCaption>true</showCaption>
<showCancelButton>true</showCancelButton>
</properties>
</component>
<component>
<region-id>create-user</region-id>
<url>/components/form</url>
<properties>
<itemKind>node</itemKind>
<itemId>{nodeRef}</itemId>
<mode>create</mode>
<submitType>json</submitType>
<showCaption>true</showCaption>
<showCancelButton>true</showCancelButton>
</properties>
</component>对这个附加页面的请求将从搜索页面执行,为每个场景提供适当的参数(查看、创建或更新用户)。可以使用模板实例定义中的自定义计算器来显示或隐藏区域。
我想从熟悉表单引擎的开发人员那里了解如何更好地实现这样的解决方案。虽然我找不到任何资源(扩展,博客帖子,教程.)关于由表单引擎组成的类似功能,我相信任何人以前都必须做类似的事情是合理的。
发布于 2015-02-04 13:18:19
方法1很好,但我最好的方法是2a :)。
您的2很好,但是我不会将编辑和创建定义为区域。检查Al新鲜code共享默认代码,您将看到(经过一些经验)它们定义了一个区域,即视图-用户。
之所以这样做,是因为这个视图具有最丰富的逻辑。比如搜索/过滤,或者对用户采取一些行动。创建用户和编辑用户主要是webscript(表单)对话框,它只是打开以完成一个简单的特定任务。
在定义分组信息的情况下,我会使用方法1。就像你已经集成了一个问题跟踪器,并且你想在与跟踪器相关的整个页面上显示多个信息。
尽管如此,您的任何一种方法都没有错误,它们都很好,而且在Alfresco共享的最佳实践中也是如此。
https://stackoverflow.com/questions/14276474
复制相似问题