Show Menu
TOPICS×

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 proporciona 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 de base.
  • La recomendación de proyectos
    existentes se mantiene usando los componentes de base, 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 de componentes.
  • 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, Adobe ha proporcionado una serie de herramientas de migración para fomentar la adopción de los componentes principales y la tecnología AEM más reciente.
Las herramientas de modernización de AEM facilitan la conversión 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 .
Las herramientas de moderación de AEM son un esfuerzo de la comunidad y Adobe no las admite ni garantiza.

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 productos de AEM, la regla general es: Los componentes se anuncian primero como obsoletos y los primeros se eliminan en 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 2 + IU clásica
Salida JSON
Servlet Sling predeterminado
Versiones
Ninguna
Pruebas
Pruebas de unidad + Pruebas de integración
Pruebas de integración
Entrega
Vía Quickstart
Licencia
Adobe, propiedad privada
Contribución
Mediante solicitud de extracción
No es posible
Accesibilidad
Compatible con el estándar # WCAG 2.0 AA(https://docs.adobe.com/content/help/en/experience-manager-cloud-service/sites/authoring/fundamentals/accessible-content.html)
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 adaptable que trabaja con el editor de plantillas
/libs/foundation/components/page /libs/wcm/foundation/components/page
Navegación por la jerarquía de páginas
/libs/foundation/components/breadcrumb
Título H1-H6
/libs/foundation/components/title /libs/wcm/foundation/components/title
Texto enriquecido
/libs/foundation/components/text /libs/foundation/components/table /libs/wcm/foundation/components/text
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 de páginas
/libs/foundation/components/list /libs/foundation/components/mobilelist /libs/wcm/foundation/components/list
Widget de uso compartido de Facebook y Pinterest
-
Sistema de párrafos de formularios interactivos
/libs/foundation/components/form/start /libs/foundation/components/form/end
Campo de entrada de texto
/libs/foundation/components/form/text /libs/foundation/components/form/password
Campo de entrada de varias opciones
/libs/foundation/components/form/checkbox /libs/foundation/components/form/radio /libs/foundation/components/form/dropdown
Campo de entrada oculto
/libs/foundation/components/form/hidden
Botón Enviar o personalizado
/libs/foundation/components/form/submit
Un componente de navegación del sitio que lista la jerarquía de páginas anidada
/libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
Un mezclador de idiomas y países que lista la estructura de idiomas global
-
Componente de búsqueda que muestra los resultados como sugerencias in situ en un menú desplegable
/libs/foundation/components/search
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
-
Permite al autor del contenido organizar el contenido de la página en varias fichas
-
Permite al autor del contenido organizar el contenido en un carrusel de diapositivas rotatorio
/libs/foundation/components/carousel
Permite la visualización de un fragmento de contenido
-
Permite mostrar una lista de fragmentos de contenido
-
Separa el contenido de una página
-
Organizar paneles de contenido en un acordeón contraíble
-
Organización de componentes dentro de un contenedor
-
Creación de un botón en una página
-
Añadir un recurso descargable en una página
-
Añadir un fragmento de experiencia en una página
/libs/cq/experience-fragments/editor/components/experiencefragment
Incrustar un recurso externo dentro de una página
-
Proporcionar una representación visual del progreso hacia un objetivo
-
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.