4

CRUD 機能内でフォーム エンジンを使用して、可能な限り最高のユーザー エクスペリエンスを提供するための最良の方法を見つけようとしています。

サイト管理ページとして使用するカスタム共有ページを作成しました。その機能の 1 つはサイトのメンバーの管理であるため、サイト管理者は現在のメンバーを検索したり、詳細を表示したり、メンバーを作成、編集、または削除したりできます。管理コンソールですぐに使用できるユーザー管理をモデルとして取り上げました。これは、機能が非常に似ているためです。

管理コンソールでのユーザー管理はフォームエンジンを使用していませんが、ユーザーの作成、編集、プロパティの表示にはフォームエンジンを使用したいと考えています。誰かがフォーム エンジンを利用して同様の機能を実装したかどうか疑問に思っています。同様の機能が共有に既に存在しますが、何も見つかりませんでした。

フォーム エンジン アーキテクチャについて読み、いくつかのパイロットを調査および作成した後、次のアプローチを思いつきました。

アプローチ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

3 つの異なるリージョンで構成される追加のページを作成します。各リージョンはフォーム コンポーネントをバインドしますが、異なる初期化パラメータを使用します。1 つのリージョンは表示モード用、もう 1 つのリージョンは作成モード用、もう 1 つは編集モード用です。何かのようなもの：

  <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 は問題ありませんが、編集と作成を領域として定義しません。Alfresco Share のデフォルト コードを確認すると、(ある程度の経験を経て) view-user という1 つのリージョンが定義されていることがわかります。

これは、このビューに最も多くのロジックが含まれているためです。検索/フィルタリングのように、おそらくユーザーに対する何らかのアクション。create-usersとedit-usersは、ほとんどが単純な特定のタスクを実行するために開くだけのwebscript (フォーム) ダイアログです。

グループ化された情報を定義する場合は、アプローチ 1 を使用します。問題トラッカーとの統合があり、そのトラッカーに関連するページ全体に複数の情報を表示したい場合。

それでも、どのアプローチにも間違いはありません。どちらも問題なく、Alfresco Share のベスト プラクティスの範囲内です。

于 2015-02-04T13:18:19.837 に答える