Integración de componentes del espacio de trabajo de AEM Forms en aplicaciones web

Puede utilizar componentes del espacio de trabajo de AEM Forms en su propia aplicación web. La siguiente implementación de ejemplo utiliza componentes de un paquete de desarrollo de espacio de trabajo de AEM Forms instalado en una instancia de CRX™ para crear una aplicación web. Personalice la siguiente solución para adaptarla a sus necesidades específicas. La implementación de muestra reutiliza UserInfo FilterListy TaskListcomponentes dentro de un portal web.

  1. Inicie sesión en el entorno del CRXDE Lite en https://[server]:[port]/lc/crx/de/. Asegúrese de tener instalado un paquete de desarrollo de espacio de trabajo de AEM Forms.

  2. Cree una ruta /apps/sampleApplication/wscomponents.

  3. Copiar css, imágenes, js/libs, js/Runtime y js/registry.js

    • de /libs/ws
    • hasta /apps/sampleApplication/wscomponents.
  4. Cree un archivo demoain.js en la carpeta /apps/sampleApplication/wscomponents/js. Copie el código de /libs/ws/js/main.js en demomain.js.

  5. En demomain.js, elimine el código para inicializar el router y agregue el siguiente código:

    require(['initializer','runtime/util/usersession'], 
        function(initializer, UserSession) { 
            UserSession.initialize( 
                function() { 
                    // Render all the global components
                    initializer.initGlobal();  
                }); 
        });
    
  6. Cree un nodo en /content por nombre sampleApplication y escriba nt:unstructured. En las propiedades de este nodo, agregue sling:resourceType el tipo String y value sampleApplication. En la Lista de Control de acceso de este nodo, agregue una entrada para PERM_WORKSPACE_USER permitir privilegios jcr:read. Además, en la Lista de Control de acceso de /apps/sampleApplication agregue una entrada para PERM_WORKSPACE_USER permitir privilegios jcr:read.

  7. En /apps/sampleApplication/wscomponents/js/registry.js las rutas de actualización de /lc/libs/ws/ a /lc/apps/sampleApplication/wscomponents/ para los valores de plantilla.

  8. En el archivo JSP de página de inicio de portal en /apps/sampleApplication/GET.jsp, agregue el siguiente código para incluir los componentes necesarios dentro del portal.

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

    También incluya los archivos CSS necesarios para los componentes del espacio de trabajo de AEM Forms.

    NOTE

    Cada componente se agrega a la etiqueta de componente (con componente de clase) durante el procesamiento. Asegúrese de que la página de inicio contenga estas etiquetas. Consulte el html.jsp archivo del espacio de trabajo de AEM Forms para obtener más información sobre estas etiquetas de control base.

  9. Para personalizar los componentes, puede ampliar las vistas existentes para el componente requerido de la siguiente manera:

    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. Modifique la CSS del portal para configurar el diseño, la posición y el estilo de los componentes necesarios en el portal. Por ejemplo, desea mantener el color de fondo como negro para que este portal pueda realizar una vista correcta del componente userInfo. Para ello, cambie el color de fondo de la /apps/sampleApplication/wscomponents/css/style.css siguiente manera:

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

En esta página