在網頁應用程式中整合AEM Forms工作區元件 integrating-aem-forms-workspace-components-in-web-applications

Last update: Tue Nov 07 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

您可以使用AEM Forms工作區元件在您自己的網頁應用程式中。以下實作範例使用安裝在CRX™執行個體上的AEM Forms工作區開發套件中的元件來建立網頁應用程式。自訂以下解決方案以符合您的特定需求。實作重複使用的範例 UserInfo， FilterList、和 TaskList網站入口網站內的元件。

登入CRXDE Lite環境： https://'[server]:[port]'/lc/crx/de/. 確保您已安裝AEM Forms workspace dev套件。
建立路徑 /apps/sampleApplication/wscomponents.
複製css、影像、js/libs、js/runtime和js/registry.js
- 從 /libs/ws
- 至 /apps/sampleApplication/wscomponents.
在/apps/sampleApplication/wscomponents/js資料夾中建立demomain.js檔案。將程式碼從/libs/ws/js/main.js複製到demomain.js中。

在demomain.js中，移除程式碼以初始化路由器，並新增下列程式碼：

code language-javascript
`require(['initializer','runtime/util/usersession'], function(initializer, UserSession) { UserSession.initialize( function() { // Render all the global components initializer.initGlobal(); }); });`

在/content下依名稱建立節點 sampleApplication 和型別 nt:unstructured. 在此節點的屬性中新增 sling:resourceType 字串和值的型別 sampleApplication. 在此節點的存取控制清單中新增專案 PERM_WORKSPACE_USER 允許jcr：read許可權。此外，在存取控制清單中 /apps/sampleApplication 新增專案 PERM_WORKSPACE_USER 允許jcr：read許可權。
在 /apps/sampleApplication/wscomponents/js/registry.js 更新路徑來源 /lc/libs/ws/ 至 /lc/apps/sampleApplication/wscomponents/ 範本值。

在您的入口網站首頁JSP檔案位於 /apps/sampleApplication/GET.jsp，新增下列程式碼，在入口網站中包含必要元件。

code language-jsp

code language-jsp
`<script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js"></script> <div class="UserInfoView gcomponent" data-name="userinfo"></div> <div class="filterListView gcomponent" data-name="filterlist"></div> <div class="taskListView gcomponent" data-name="tasklist"></div>`

<script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js"></script>
<div class="UserInfoView gcomponent" data-name="userinfo"></div>
<div class="filterListView gcomponent" data-name="filterlist"></div>
<div class="taskListView gcomponent" data-name="tasklist"></div>

也包含AEM Forms工作區元件所需的CSS檔案。

note note
NOTE
呈現時，每個元件都會新增至元件標籤（具有類別元件）。確定您的首頁包含這些標籤。請參閱 `html.jsp` AEM Forms工作區的檔案，以進一步瞭解這些基本控制項標籤。

若要自訂元件，您可以依照以下方式擴充所需元件的現有檢視：

code language-javascript

code language-javascript
`define([ 'jquery', 'underscore', 'backbone', 'runtime/views/userinfo'], function($, _, Backbone, UserInfo){ var demoUserInfo = UserInfo.extend({ //override the functions to customize the functionality render: function() { UserInfo.prototype.render.call(this); // call the render function of the super class … //other tasks … } }); return demoUserInfo; });`

define([
    'jquery',
    'underscore',
    'backbone',
    'runtime/views/userinfo'],
    function($, _, Backbone, UserInfo){
        var demoUserInfo = UserInfo.extend({
            //override the functions to customize the functionality
            render: function() {
                UserInfo.prototype.render.call(this); // call the render function of the super class
                …
                //other tasks
                …
            }
        });
        return demoUserInfo;
});

修改入口網站CSS以設定入口網站上所需元件的版面、定位和樣式。例如，您想要讓此入口網站的背景顏色保持為黑色，以便順利檢視userInfo元件。您可以變更中的背景顏色來完成此操作 /apps/sampleApplication/wscomponents/css/style.css 如下所示：

code language-css
`body { font-family: "Myriad pro", Arial; background: #000; //This was origianlly #CCC position: relative; margin: 0 auto; }`

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2