Personalización de componentes principales
Los Componentes principales implementan varios patrones que facilitan la personalización, desde un estilo sencillo hasta la reutilización avanzada de funcionalidades.
CONSEJOArquitectura flexible
Los componentes principales se diseñaron desde el principio para que fueran flexibles y ampliables. Un vistazo a una descripción general de su arquitectura revelará dónde se pueden realizar las personalizaciones.
- El cuadro de diálogo de diseño define qué pueden hacer o no los autores en el cuadro de diálogo de edición.
- El cuadro de diálogo de edición muestra a los autores solo las opciones que pueden utilizar.
- El modelo Sling comprueba y prepara el contenido para la vista (plantilla).
- El resultado del modelo Sling se puede serializar en JSON para casos de uso SPA.
- HTL procesa el HTML del lado del servidor para un procesamiento tradicional del lado del servidor.
- La salida HTML es semántica, accesible, optimizada para motores de búsqueda y fácil de diseñar.
Y todos los componentes principales implementan el Sistema de estilos.
Tipo de archivo del proyecto AEM
El archivo del proyecto de AEM procesa un proyecto mínimo de Adobe Experience Manager como punto de partida para sus propios proyectos, incluido un ejemplo del componente HTL personalizado con modelos Sling para la lógica y la correcta implementación de los componentes principales con el patrón de proxy recomendado.
Patrones de personalización
Personalización de cuadros de diálogo
Puede que quiera personalizar las opciones de configuración disponibles en un cuadro de diálogo de componentes principales, ya sea el Cuadro de diálogo de diseño o el cuadro de diálogo de edición.
Cada cuadro de diálogo tiene una estructura de nodos coherente. Se recomienda que esta estructura se duplique en un componente heredado para que la Combinación de recursos Sling y Ocultar condiciones se puedan usar para ocultar, reemplazar o reordenar secciones del cuadro de diálogo original. La estructura que se va a replicar se define como cualquier elemento hasta el nivel de nodo de elemento de pestaña.
Para ser totalmente compatible con los cambios realizados en un cuadro de diálogo en su versión actual, es muy importante que las estructuras por debajo del nivel del elemento de pestaña no se toquen (oculten, agreguen, sustituyan, reordenen, etc.). En lugar de eso, se debe ocultar un elemento de pestaña del elemento principal mediante la propiedad sling:hideResource (consulte Propiedades de la combinación de recursos Sling) y se deben agregar nuevos elementos de pestaña que contengan los campos de configuración personalizados. sling:orderBefore se puede utilizar para reordenar los elementos de la pestaña si es necesario.
El siguiente cuadro de diálogo muestra la estructura de diálogo recomendada, así como cómo ocultar y reemplazar una pestaña heredada, tal como se describe anteriormente:
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="https://sling.apache.org/jcr/sling/1.0"
xmlns:jcr="https://www.jcp.org/jcr/1.0"
xmlns:nt="https://www.jcp.org/jcr/nt/1.0"
xmlns:granite="https://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured">
<content jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<tabs jcr:primaryType="nt:unstructured">
<items jcr:primaryType="nt:unstructured">
<originalTab
jcr:primaryType="nt:unstructured"
sling:hideResource="true"/>
<myTab
jcr:primaryType="nt:unstructured"
jcr:title="My Tab"
sling:resourceType="granite/ui/components/coral/foundation/container">
<!-- myTab content -->
</myTab>
</items>
</tabs>
</items>
</content>
</jcr:root>