将AEM Forms工作区组件集成到Web应用程序

您可以在自己的Web应用程序中使用AEM Forms工作区组件。 以下示例实现使用安装在CRX™实例上的AEM Forms工作区开发包中的组件创建Web应用程序。 自定义以下解决方案以满足您的特定需求。 示例实现在Web门户中重用UserInfoFilterListTaskList组件。

  1. 登录https://'[server]:[port]'/lc/crx/de/的CRXDE Lite环境。 确保您安装了AEM FormsWorkpace Dev软件包。

  2. 创建路径/apps/sampleApplication/wscomponents

  3. 复制css、图像、js/libs、js/runtime和js/registry.js

    • /libs/ws
    • /apps/sampleApplication/wscomponents.
  4. 在/apps/sampleApplication/wscomponents/js文件夹中创建demomain.js文件。 将代码从/libs/ws/js/main.js复制到demomain.js。

  5. 在demomain.js中,删除用于初始化路由器的代码并添加以下代码:

    require(['initializer','runtime/util/usersession'],
        function(initializer, UserSession) {
            UserSession.initialize(
                function() {
                    // Render all the global components
                    initializer.initGlobal();
                });
        });
    
  6. 在/content下按名称sampleApplication创建一个节点,然后键入nt:unstructured。 在此节点的属性中,添加“字符串”类型的sling:resourceType和值sampleApplication。 在此节点的访问控制列表中,为PERM_WORKSPACE_USER添加一个允许jcr:read权限的条目。 此外,在/apps/sampleApplication的访问控制列表中,为PERM_WORKSPACE_USER添加允许jcr:read权限的条目。

  7. /apps/sampleApplication/wscomponents/js/registry.js中,将模板值从/lc/libs/ws/更新到/lc/apps/sampleApplication/wscomponents/的路径。

  8. 在位于/apps/sampleApplication/GET.jsp的门户主页JSP文件中,添加以下代码,将所需的组件包含在门户中。

    <script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain?lang=zh-Hans" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js?lang=zh-Hans"></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文件。

    注意

    呈现时,每个组件都会添加到组件标签(具有类组件)。 确保您的主页包含这些标记。 请参阅AEM Forms工作区的html.jsp文件,进一步了解这些基本控件标签。

  9. 要自定义组件,您可以按如下方式扩展所需组件的现有视图:

    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;
    });
    
  10. 修改门户CSS,在门户上配置所需组件的布局、位置和样式。 例如,您希望将此门户的背景颜色保持为黑色,以便视图userInfo组件。 可通过在/apps/sampleApplication/wscomponents/css/style.css中更改背景颜色来实现此目的,如下所示:

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

On this page

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now