AEM espacio de trabajo de formulario ofrece funciones para modificar la semántica de presentación y la funcionalidad de su interfaz. A continuación se describen los tipos de personalizaciones para cambiar el estilo, el diseño, el formato, la marca y la funcionalidad básica.
El espacio de trabajo de AEM Forms admite una amplia variedad de personalizaciones para actualizar el diseño de la interfaz de usuario, su apariencia, funcionalidad y mucho más. Las personalizaciones implican actualizar una o varias de las siguientes opciones:
Puede cambiar la apariencia, el diseño y otras semánticas de presentación del espacio de trabajo de AEM Forms. Cambie el espacio de trabajo personalizando los archivos CSS, HTML y JavaScript™. Todos los archivos predeterminados se proporcionan en la instalación predeterminada.
Los pasos más aplicables se tratan en Pasos genéricos para la personalización del espacio de trabajo de AEM Forms. Para obtener ejemplos específicos de dichas personalizaciones, incluidos los pasos detallados, consulte los artículos relacionados al final de este artículo.
Antes de personalizar el espacio de trabajo, familiarícese con la hoja de estilo predeterminada que se proporciona con AEM Forms en /libs/ws/css/style.css.
Para personalizar el espacio de trabajo, se recomienda familiarizarse con la hoja de estilo existente, style.css, ubicada en la carpeta /libs/ws/css. A continuación se describen algunos componentes destacados.
Elemento CSS |
Componente de interfaz de usuario modificado |
---|---|
#encabezado |
Encabezado del espacio de trabajo de AEM Forms |
.categoryList |
Lista de categoría |
.categoryList.header |
Encabezado de lista de categoría |
.categorías, .filtros |
Espacio debajo de la lista de categoría |
.categoría, .filter |
Categoría |
.categoría:pasar el ratón por encima, .categoría.seleccionada, .filter:pasar el ratón, .filter.selected |
Categoría seleccionada y pasar el ratón sobre el estilo de categoría |
categoryListBar.tool, categoryListBar.content |
Página de proceso de inicio (lista de Categoría cerrada) |
filterListBar.tool, filterListBar.content |
Página Tareas pendientes (lista de filtro cerrada) |
processNameListBar.tool, processNameListBar.content |
Página de seguimiento (lista de nombre de proceso cerrada) |
.startPointList, .tasklist |
La lista de punto de partida o la lista de tarea |
.startPointList.header, .tasklist.header |
El encabezado de una lista de punto de inicio o una lista de tarea |
.startpoint.selected, .tarea.selected |
El punto de inicio o la tarea seleccionados |
.startpoint.selected.description, .tarea.selected.description |
Descripción del punto de inicio o la tarea seleccionados |
#taskarea |
La Tarea |
#header.dropdown |
Lista desplegable de usuarios en el encabezado |
.sortDrop dd ul |
Lista desplegable Ordenar tarea |
El aspecto del espacio de trabajo de AEM Forms toma su aspecto de una CSS. Al personalizar la CSS, puede cambiar la semántica de presentación del espacio de trabajo, como las fuentes, los colores, la marca y el diseño.
Los pasos de nivel superior para la personalización de CSS son:
html.jsp
.Para ver los pasos exactos para realizar estas personalizaciones, consulte Pasos genéricos para la personalización del espacio de trabajo de AEM Forms. El archivo CSS enviado con el espacio de trabajo de AEM Forms se encuentra en /libs/ws/css/. Para personalizaciones relacionadas con CSS, utilice el Paquete de envío. Para ver ejemplos específicos de personalizaciones relacionadas con CSS, consulte los temas de ayuda relacionados al final de este artículo.
Puede personalizar el espacio de trabajo de AEM Forms para agregar avatares de usuarios o para agregar el logotipo de su organización. Para estas personalizaciones, utilice Paquete de envío.
Los pasos de nivel superior para personalizar las imágenes son:
html.jsp
.Para empezar a personalizar las imágenes en el espacio de trabajo de AEM Forms, siga los pasos genéricos para la personalización del espacio de trabajo de AEM Forms. Para ver ejemplos específicos de personalizaciones relacionadas con imágenes, consulte los temas de ayuda relacionados al final de este artículo.
Las plantillas HTML ayudan a definir el aspecto y el diseño de la interfaz de usuario del espacio de trabajo. Al actualizar las plantillas HTML predeterminadas, puede personalizar la interfaz de usuario predeterminada del diseño.
Los pasos de nivel superior para las personalizaciones de la plantilla HTML son:
Para ver ejemplos específicos de dichas personalizaciones, consulte los temas de ayuda que se proporcionan al final de este artículo. Elija entre el Paquete de envío o el Paquete de desarrollo, según la plantilla que se va a personalizar.
Para modificar la funcionalidad del espacio de trabajo de AEM Forms, cambie el código fuente JavaScript. Las modificaciones en la funcionalidad principal se etiquetan como cambios semánticos. Los modelos, la vista y las plantillas se modifican como parte del código fuente del espacio de trabajo de AEM Forms.
Los pasos de nivel superior para realizar cambios semánticos con el fin de modificar la funcionalidad del espacio de trabajo de AEM Forms son:
Para obtener más información conceptual sobre los componentes que forman parte del código fuente, consulte la Descripción de los componentes reutilizables. Para estas personalizaciones, utilice el paquete Dev.
Como el espacio de trabajo de AEM Forms es un software basado en componentes, se puede personalizar y reutilizar fácilmente. Puede integrar fácilmente los componentes del espacio de trabajo con sus aplicaciones Web.
Para obtener más información conceptual, consulte la Descripción de los componentes reutilizables y para obtener instrucciones sobre cómo utilizar los componentes, consulte Integración de los componentes del espacio de trabajo de AEM Forms en aplicaciones Web.
El paquete contiene el código fuente del espacio de trabajo de AEM Forms. El paquete está disponible en [*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip
.
Está pensado principalmente para personalizaciones, ya que proporciona la capacidad de generar:
client-pkg:
client-html:
ensamblado: contiene zip.xml utilizado por la secuencia de comandos para crear el SDK de espacio de trabajo de AEM Forms.
src/main/webapp -
css: contiene hojas de estilo para el espacio de trabajo de AEM Forms.
imágenes: contiene imágenes utilizadas en el espacio de trabajo de AEM Forms.
js:
libs: contiene todas las bibliotecas de terceros utilizadas en el espacio de trabajo de AEM Forms.
licencias: contiene licencias para archivos HTML y JS, así como código para anteponer estas licencias a los respectivos archivos de origen.
minificador: se utiliza para la combinación, minimización y simplificación del código personalizado de javascript.
resourceJs_optimizer: se utiliza para la combinación, minimización y simplificación del código fuente de javascript.
resource_generator: se utiliza para generar register.js y modelcontrollerpath.js.
tiempo de ejecución:
main.js
router.js
libs/ws: pdf.html y pluginPing.pdf se utilizan para cargar PDF forms en el espacio de trabajo de AEM Forms y WSNextAdapter.swf se utiliza para cargar formularios SWF y guías en el espacio de trabajo de AEM Forms.
configuraciones regionales:
html.jsp
GET.jsp
El paquete CRX se puede implementar en el repositorio de CRX™. Está disponible en [*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip
.
Este paquete se puede crear utilizando los tres perfiles que se describen a continuación.
Perfil | Descripción | Uso |
---|---|---|
Perfil de envío | Este perfil crea un paquete CRX del tamaño más pequeño posible mediante la minimización. Este paquete es el más eficiente. Todos los archivos JavaScript™ se combinan y minimizan en un solo archivo JS. | Utilice este perfil cuando no se requieran más cambios semánticos en los archivos JS. |
Perfil de depuración | Este perfil crea un paquete CRX moderadamente eficiente. El tamaño del paquete es ligeramente superior al del paquete creado mediante el perfil de envío. Este paquete tiene la mayoría de los archivos JavaScript combinados en un solo archivo JS. | Utilice este perfil para la depuración. |
Perfil Dev | Este perfil crea un paquete CRX del mayor tamaño posible. Todos los archivos JavaScript están disponibles por separado, como en el paquete SDK. | Utilice este perfil al incorporar cambios semánticos. |
css: contiene style.css, ie.css y jquery-ui.css.
imágenes: contiene todas las imágenes.
js:
libs:
tiempo de ejecución:
main.js (combinado, minimizado y desacreditado).
registry.js
libs:
Configuración regional: contiene .content.xml.
configuraciones regionales:
Índice: contiene .content.xml
perfil: contiene offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml
css: contiene style.css, ie.css y jqueri-ui.css.
imágenes: contiene todas las imágenes.
js:
libs:
tiempo de ejecución:
main.js (combinado).
registry.js
libs:
Configuración regional: contiene .content.xml.
configuraciones regionales:
Índice: contiene .content.xml
perfil: contiene offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml
mvn clean -P Instalación de Dev en client-pkg
css: contiene style.css, ie.css y jqueri-ui.css.
imágenes: contiene todas las imágenes.
js:
libs: contiene todas las bibliotecas utilizadas en el espacio de trabajo de AEM Forms.
requerir - Contiene required.js
jqueryui: contiene jquery.ui.datepicker.ja.js
tiempo de ejecución:
main.js
registry.js
router.js
libs:
Configuración regional: contiene .content.xml.
configuraciones regionales:
Índice: contiene .content.xml
perfil: contiene offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml