Integración de componentes de AEM Forms Workspace en aplicaciones web
Creado para:
- User
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
.
- de
-
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:
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 tipont:unstructured
. En las propiedades de este nodo, agreguesling:resourceType
de tipo Cadena y valorsampleApplication
. En la Lista de control de acceso de este nodo, agregue una entrada paraPERM_WORKSPACE_USER
para permitir privilegios jcr:read. Además, en la Lista de control de acceso de/apps/sampleApplication
, agregar una entrada paraPERM_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.<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.
NOTECada 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 archivohtml.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:
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:body { font-family: "Myriad pro", Arial; background: #000; //This was origianlly #CCC position: relative; margin: 0 auto; }