Show Menu
TOPICS×

Desarrollo de componentes principales

Información general

Los componentes principales proporcionan componentes básicos robustos y ampliables, y sus aspectos destacados son:
  • Funciones ricas en funciones
    • Opciones de configuración flexibles para admitir muchos casos de uso
    • Capacidades preconfigurables para definir qué funciones están disponibles para los creadores de páginas
  • Entrega continua
    • Mejoras frecuentes en la funcionalidad incremental
    • Disponibilidad del código fuente en GitHub para permitir a la comunidad de desarrolladores dar sus comentarios y contribuir
    • Instalación mediante un paquete de contenido liberado por separado para las actualizaciones de componentes que se realizan de forma independiente de las actualizaciones de AEM
  • Implementación moderna
    • Marca definida en lenguaje de plantilla HTML (HTL)
    • Lógica del modelo de contenido implementada con modelos Sling
  • Marcado de pérdida
    • Notación del modificador de elementos de bloque (BEM) siguiente a partir de la versión 2.0.0
      • La versión anterior sigue las convenciones de nombres de Bootstrap
    • Capacidad para utilizarse en sitios adaptables y móviles
  • Capacidad de serializar como JSON el modelo de contenido para casos de uso CMS sin encabezado
  • Accesible
Los componentes principales requieren AEM 6.3 o posterior y Java 8 y requieren el uso de plantillas editables
Los componentes principales no funcionan con la IU clásica ni con plantillas estáticas.

Información general de la sesión de Gems

Para obtener información básica de los componentes principales, las funciones que ofrecen y cómo se pueden aprovechar en AEM, consulte los componentes principales de AEM en la sesión de Gems de AEM .
Gems on Adobe Experience Manager es una serie de inmersiones técnicas de expertos de Adobe. Esta serie complementa la documentación del producto y todos los demás canales técnicos, permitiendo así que los desarrolladores se pongan en contacto y profundicen en un tema específico.

Tutorial para desarrolladores de WKND

Get started developing AEM Sites with Core Components by following this step-by-step tutorial.

Tipo de archivo del proyecto AEM

El arquetipo de proyecto de AEM crea un proyecto mínimo de Adobe Experience Manager como punto de partida para sus propios proyectos, incluido un ejemplo práctico del componente HTL personalizado con SlingModels para la lógica y la correcta implementación de los componentes principales con el patrón proxy recomendado.

Entregado a través de GitHub

Los componentes principales se desarrollan en GitHub y se entregan a través de él.
CÓDIGO DE GITHUB
Puede encontrar el código de esta página en GitHub
Consulte la página de documentación Uso de componentes principales para obtener información sobre cómo empezar a utilizarlos en el proyecto.
Tener los componentes principales en GitHub permitirá realizar actualizaciones frecuentes y escuchar los comentarios de la comunidad de desarrolladores de AEM. Además, esto debería ayudar a los clientes y socios a seguir patrones similares al crear componentes personalizados.
Para mantenerse al día sobre los últimos cambios en los componentes principales, puede ver el repositorio de componentes principales en GitHub.

Biblioteca de componentes

Consulte la biblioteca de componentes, que muestra la versión actual de los componentes principales y ofrece ejemplos de su uso.

Modo de ejecución de contenido de muestra

Los componentes principales son visibles en el inicio rápido cuando el contenido de muestra está presente, ya que el sitio de referencia We.Retail los utiliza. Sin embargo, al ejecutarse en producción (en
nosamplecontent
modo de ejecución, sin contenido de muestra activado), los componentes principales ya no estarán presentes y el equipo de desarrollo y/o operaciones deberá instalarlos en las instancias de AEM.
En entornos de producción, ejecute siempre el inicio rápido en
nosamplecontent
modo de ejecución. Para utilizar los componentes principales en
nosamplecontent
modo de ejecución, siga las instrucciones de la página de documentación Uso 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
Compatible solo parcialmente con el estándar WCAG 2.0 AA

Lista de componentes

La siguiente tabla enumera los componentes principales disponibles, vinculándolos a su API, e indica qué componentes de base reemplazan.
Componente principal
Descripción
Componente(s) de base reemplazado(s)
Página adaptable 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 para compartir 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 enumera la jerarquía de páginas anidada
/libs/foundation/components/topnav /libs/foundation/components/mobiletopnav
Cambiador de idioma y país que enumera la estructura de idioma 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
-
Agregar un recurso descargable a una página
-
Adición de un fragmento de experiencia a una página
/libs/cq/experience-fragments/editor/components/experiencefragment
Incrustar un recurso externo dentro de una página
-

Próximos componentes

Para obtener una visión general de la próxima hoja de ruta de Core Componente, 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.

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 cuando 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.

Migración a los componentes principales

Cualquier nuevo proyecto debe implementarse con 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 ofrece 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ñar configuraciones para políticas
  • Componentes básicos a componentes principales
  • 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.

Compatibilidad con componentes de base

Dado que los componentes de base han servido de base para tanto desarrollo de proyectos en muchas versiones de AEM, seguirán recibiendo apoyo en el futuro previsible.
However, Adobe's development emphasis has shifted to the Core Components and new features will be added to them, whereas nearly all Foundation Components have been deprecated with AEM 6.5 and only bug fixes will be made to the Foundation Components going forward.
Consulte lo siguiente:
  • Uso de componentes principales: obtenga y ejecute los componentes principales en su propio proyecto.
  • Directrices de componentes: para conocer los patrones de implementación de los componentes principales.