Desarrollo de componentes principales

When to Use the Core Components?

Como los componentes principales son completamente nuevos y ofrecen varios beneficios, se recomienda utilizarlos en los nuevos proyectos de AEM. En los proyectos existentes, la migración debería ser parte de un esfuerzo de proyecto aún mayor; por ejemplo, para realizar un cambio en la marca o la refactorización total.

Por lo tanto, Adobe formula las siguientes recomendaciones:

  • Nuevos proyectos Los nuevos proyectos siempre deben intentar utilizar los componentes principales. Si los componentes principales no se pueden utilizar directamente o ampliar para satisfacer los requisitos del proyecto, cree un componente personalizado siguiendo la arquitectura de componentes establecida en los componentes principales. Salvo en los casos en que no sea posible, evite utilizar los componentes debase.
  • La recomendación de proyectos existentes se mantiene usando los componentes debase, a menos que se planifique una refactorización de sitios o componentes.
    Dado que la mayoría de los proyectos existentes los utilizan muy ampliamente, seguirán contando con el apoyo de los componentes básicos.
  • Nuevos componentes personalizadosSe evalúa si un componente principal existente puede personalizarse.
    Si no es así, se recomienda crear un nuevo componente personalizado siguiendo las directrices decomponentes.
  • Componentes personalizados existentes Si los componentes funcionan correctamente, manténgalos tal como están.

    Si no es así, consulte "Nuevos componentes personalizados" más arriba.

Cómo lograr el éxito con los componentes principales

Los componentes principales son potentes, flexibles y fáciles de usar y personalizar. Si sigue algunas directrices clave, se asegurará de que el proyecto con los componentes principales sea un éxito.

Migración a los componentes principales

Cualquier nuevo proyecto debe implementarse con los componentes principales. Sin embargo, los proyectos existentes normalmente tendrán una amplia implementación de los componentes de base.

Un esfuerzo mayor en un proyecto existente (por ejemplo, un rediseño de marca o una refactorización general) a menudo oferta la posibilidad de migrar a los componentes principales. Para facilitar esta migración, el Adobe ha proporcionado una serie de instrumentos de migración para fomentar la adopción de los componentes principales y la tecnología de AEM más reciente.

Las AEM herramientas de modernización permiten la conversión sencilla de:

  • Plantillas estáticas a plantillas editables.
  • Diseño de las configuraciones para políticas.
  • Componentes básicos a principales.
  • De IU clásica a IU táctil.

Para obtener más información sobre el uso de estas herramientas, consulte su documentación.

Nota

Las herramientas de moderación de AEM son un esfuerzo comunitario y no están respaldadas ni garantizadas por el Adobe.

Compatibilidad con componentes principales

Los componentes principales son parte integral de AEM y se admiten tal cual bajo los mismos términos y condiciones en los que se admitirían si fueran parte del inicio rápido.

Al igual que otras funciones de producto AEM, la regla general es: Los componentes se anuncian primero como obsoletos y los primeros se eliminan para la siguiente versión de AEM. Esto proporciona a los clientes al menos un ciclo de lanzamiento para pasar a la nueva versión del componente, antes de dejar de ofrecer soporte.

La versión de cada componente señala claramente las versiones de AEM que admite. Cuando una versión de AEM deja de ser compatible, también lo deja de ser el componente principal de esa versión de AEM.

Para obtener más información sobre la compatibilidad con las personalizaciones de componentes, consulte la página Personalización de componentes principales.

Capacidades técnicas

La siguiente tabla ofrece una visión general de las diferencias entre los componentes principales y los componentes básicos.

Para obtener más información sobre sus capacidades de creación y las opciones para preconfigurarlas, consulte la página de creación sobre ellas.

Capacidad Componente principal Componente de base
Implementación lógica JPOs de Java con anotaciones de modelos Sling Código JSP
Definición de marca Sintaxis del lenguaje de plantilla HTML (HTL) Código JSP
Saneamiento XSS Automatizado por HTL Principalmente manual
Nombres de clases CSS Convenciones de nombres estandarizadas basadas en la notación del modificador de elementos de bloque (BEM) (a partir de la versión 2.0.0) Esquemas personalizados
Definición de cuadro de diálogo Coral 3 Coral 2 + IU clásica
Salida JSON Modelos Sling Exporter con serialización Jackson Servlet Sling predeterminado
Versiones Para el modelo y el HTL Ninguna
Pruebas Pruebas de unidad + Pruebas de integración Pruebas de integración
Entrega Vía GitHub público Vía Quickstart
Licencia Licencia de Apache Adobe propietario
Contribución Mediante solicitud de extracción No es posible
Accesibilidad Compatible con el estándar WCAG 2.0 AA Compatible solo parcialmente con el estándar WCAG 2.0 AA

Lista de componentes

La siguiente tabla lista los componentes principales disponibles, vinculándolos a su API, e indica qué componentes de base reemplazan.

Componente principal Descripción Componente(s) base(s) sustituido(s)
Página Página adaptable que trabaja con el editor de plantillas /libs/foundation/components/page /libs/wcm/foundation/components/page
Ruta de navegación Navegación por la jerarquía de páginas /libs/foundation/components/breadcrumb
Título Título H1-H6 /libs/foundation/components/title /libs/wcm/foundation/components/title
Texto Texto enriquecido /libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
Imagen Carga inteligente y diferida del tamaño de representación óptimo /libs/foundation/components/image /libs/foundation/components/adaptiveimage /libs/foundation/components/logo /libs/foundation/components/mobileimage /libs/foundation/components/mobilelogo /libs/wcm/foundation/components/image
Lista Lista de páginas /libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
Compartir en redes sociales Widget de uso compartido de Facebook y Pinterest -
Contenedor del formulario Sistema de párrafos de formularios interactivos /libs/foundation/components/form/start /libs/foundation/components/form/end
Texto de formulario Campo de entrada de texto /libs/foundation/components/form/text /libs/foundation/components/form/password
Opciones de formulario Campo de entrada de varias opciones /libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
Formulario oculto Campo de entrada oculto /libs/foundation/components/form/hidden
Botón de formulario Botón Enviar o personalizado /libs/foundation/components/form/submit
Navegación Un componente de navegación del sitio que lista la jerarquía de páginas anidada /libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
Navegación por idiomas Un mezclador de idiomas y países que lista la estructura de idiomas global -
Búsqueda rápida Componente de búsqueda que muestra los resultados como sugerencias in situ en un menú desplegable /libs/foundation/components/search
Teaser Permite al autor del contenido crear fácilmente un teaser para añadir contenido mediante una imagen, un título o texto enriquecido y vincularlo a contenido u otras acciones -
Pestañas Permite al autor del contenido organizar el contenido de la página en varias fichas -
Carrusel Permite al autor del contenido organizar el contenido en un carrusel de diapositivas rotatorio /libs/foundation/components/carousel
Fragmento de contenido Permite la visualización de un fragmento de contenido -
Lista de fragmentos de contenido Permite mostrar una lista de fragmentos de contenido -
Separador Separa el contenido de una página -
Acordeón Organizar paneles de contenido en un acordeón contraíble -
Contenedor Organización de componentes dentro de un contenedor -
Botón Creación de un botón en una página -
Descargar Añadir un recurso descargable en una página -
Fragmento de experiencias Añadir un fragmento de experiencia en una página /libs/cq/experience-fragments/editor/components/experiencefragment
Incrustar Incrustar un recurso externo dentro de una página -
Barra de progreso Proporcionar una representación visual del progreso hacia un objetivo -
Visualizador de PDF Presenta un documento PDF en una página -

Próximos componentes

Para obtener una visión general de la próxima hoja de ruta del componente principal, consulte la wiki del proyecto en GitHub.

Actualización de los componentes principales

Una ventaja de los componentes con versiones es que permite separar la migración a una nueva versión de AEM de la migración a las nuevas versiones de componentes. Además, si hay nuevas versiones de componentes disponibles, permite la migración individual de cada componente a la nueva versión.

Las migraciones a una nueva versión de AEM no afectarán al funcionamiento de los componentes principales, siempre que sus versiones también admitan la nueva versión de AEM a la que se está migrando. Las personalizaciones realizadas en los componentes principales tampoco deben verse afectadas, siempre que no utilicen API que hayan sido obsoletas o eliminadas.

Las migraciones a nuevas versiones de los componentes principales tampoco afectarán al funcionamiento del componente, pero es posible que se introduzcan nuevas funciones a los autores de páginas, lo que puede requerir cierta configuración por parte de un editor de plantillas, en caso de que no se desee el comportamiento predeterminado. Sin embargo, es posible que sea necesario adaptar las personalizaciones para obtener más información, consulte la página Personalización de componentes principales.

En esta página