Integración de componentes de AEM Forms Workspace en aplicaciones web integrating-aem-forms-workspace-components-in-web-applications

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Puede utilizar los componentes de AEM Forms Workspace en su propia aplicación web. La siguiente implementación de ejemplo utiliza componentes de un paquete dev de AEM Forms Workspace instalado en una instancia CRX™ para crear una aplicación web. Personalice la siguiente solución para adaptarla a sus necesidades específicas. La implementación de ejemplo reutiliza los componentes UserInfo, FilterList y TaskList en un portal web.

Inicie sesión en el entorno de CRXDE Lite en https://'[server]:[port]'/lc/crx/de/. Asegúrese de tener instalado el paquete dev de AEM Forms Workspace.
Cree una ruta /apps/sampleApplication/wscomponents.
Copie css, imágenes, js/libs, js/runtime y js/registry.js
- de /libs/ws
- a /apps/sampleApplication/wscomponents.
Cree un archivo demomain.js en la carpeta /apps/sampleApplication/wscomponents/js. Copie el código de /libs/ws/js/main.js en demomain.js.

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

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

Cree un nodo en /content con el nombre sampleApplication y el tipo nt:unstructured. En las propiedades de este nodo, agregue sling:resourceType de tipo Cadena y valor sampleApplication. En la Lista de control de acceso de este nodo, agregue una entrada para PERM_WORKSPACE_USER para permitir privilegios jcr:read. Además, en la Lista de control de acceso de /apps/sampleApplication, agregar una entrada para PERM_WORKSPACE_USER para permitir privilegios jcr:read.
En /apps/sampleApplication/wscomponents/js/registry.js, actualice las rutas de /lc/libs/ws/ a /lc/apps/sampleApplication/wscomponents/ para los valores de plantilla.

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

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>

Incluya también los archivos CSS necesarios para los componentes de AEM Forms Workspace.

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

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

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;
});

Modifique el portal CSS para configurar el diseño, la posición y el estilo de los componentes necesarios en el portal. Por ejemplo, imagine que desea utilizar el color negro como color de fondo en el portal para ver bien el componente userInfo. Para ello, cambie el color de fondo en /apps/sampleApplication/wscomponents/css/style.css de la siguiente forma:

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