forms - 如何在 Alfresco Share 中使用表单引擎实现 CRUD 页面

Question

我正在尝试找出在 CRUD 功能中使用表单引擎的最佳方法，从而提供尽可能最佳的用户体验。

我创建了一个自定义共享页面，它将用作站点管理页面。其功能之一是管理站点成员，因此它将允许站点管理员搜索当前成员以及查看详细信息、创建、编辑或删除成员。我将管理控制台中开箱即用的用户管理作为模型，因为功能非常相似。

管理控制台中的用户管理不使用表单引擎，但我想使用它来创建用户、编辑和查看其属性。我想知道是否有人通过利用表单引擎实现了类似的功能，并且共享中已经存在类似的功能，但我什么也没找到。

在花了一些时间阅读有关表单引擎架构、调查和创建一些试点之后，我想出了以下方法:

方法 1

为了提供更好的用户体验，我想保留原始管理控制台的用户管理流程，通过执行返回 JSON 响应的 AJAX 请求来动态加载页面所需的内容。我认为我能做到这一点的唯一方法是对表单组件执行异步请求，然后将返回的 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" />&nbsp;
   </div>
         </form>
   </div>

然后该 HTML 响应可以包含在包装 div 中。

方法 2

创建一个由三个不同区域组成的附加页面。每个区域将绑定(bind)表单组件，但具有不同的初始化参数:一个区域用于查看模式，另一个区域用于创建模式，另一个区域用于编辑模式。像这样的东西:

  <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>

对此附加页面的请求将从搜索页面执行，为每个场景(查看、创建或更新用户)提供适当的参数。例如，可以使用模板实例定义中的自定义求值器来显示或隐藏区域。

我想听听具有表单引擎经验的开发人员的意见，实现此类解决方案的更好方法是什么。虽然我无法找到任何关于由表单引擎组成的类似功能的资源(扩展、博客文章、教程...)，但我相信任何人以前都必须做类似的事情是合理的。

Answer 1

方法 1 相当不错，但我最好的是方法 2a :)。

你的 2 很好，但我不会将编辑和创建定义为区域。检查 Alfresco Share 默认代码，您会发现(经过一定的经验)他们定义了 1 个区域查看用户。

这样做是因为这个 View 中有最多的逻辑。比如搜索/过滤，也许还有对用户的一些操作。创建用户和编辑用户大多是网页脚本(表单)对话框，打开它们只是为了执行简单的特定任务。

如果您要定义分组信息，我会使用方法 1。就像您已与问题跟踪器集成，并且您希望在与跟踪器相关的整个页面上显示多个信息。

您的方法仍然没有错误，它们都很好并且符合 Alfresco Share 的最佳实践。