4

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

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

管理控制台中的用户管理不使用表单引擎，但我想将其用于用户创建、编辑和查看其属性。我想知道是否有人通过利用表单引擎实现了类似的功能，以及共享中已经存在类似的功能，但我一无所获。

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

方法一

为了提供更好的用户体验，我想保留原始管理控制台的用户管理流程，该流程通过执行返回 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 中。

方法二

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

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

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

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

4

1 回答 1

0

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

你的 2 很好，但我不会将 Edit 和 Create 定义为区域。检查 Alfresco Share 默认代码，您会看到（经过一些经验）他们定义了 1 个区域view-user。

这样做是因为这个视图中的逻辑最多。比如搜索/过滤，也许还有对用户的一些操作。create-users和edit-users主要是 webscript(form) 对话框，它们只是打开以执行简单的特定任务。

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

您的任何方法仍然没有错，它们都很好，并且在 Alfresco Share 的最佳实践中。

于 2015-02-04T13:18:19.837 回答