Las aplicaciones de una sola página (SPA) pueden ofrecer experiencias atractivas para los usuarios de sitios web. Los desarrolladores quieren poder crear sitios mediante marcos de SPA y los autores quieren editar contenido sin problemas dentro de AEM para un sitio creado con dichos marcos.
El SPA Editor ofrece una solución completa para admitir SPA dentro de AEM. Esta página proporciona información general sobre cómo se estructura SPA soporte en AEM, cómo funciona el Editor de SPA y cómo el marco de SPA y la AEM se mantienen sincronizados.
Los sitios creados con marcos de SPA comunes, como React y Angular, cargan su contenido a través de JSON dinámico y no proporcionan la estructura de HTML necesaria para que el Editor de páginas de AEM pueda colocar controles de edición.
Para permitir la edición de SPA dentro de AEM, se necesita una asignación entre la salida JSON del SPA y el modelo de contenido en el repositorio AEM para guardar los cambios en el contenido.
SPA compatibilidad con en AEM introduce una capa de JS fina que interactúa con el código JS de SPA cuando se carga en el Editor de páginas con el que se pueden enviar eventos y se puede activar la ubicación de los controles de edición para permitir la edición en contexto. Esta función se basa en el concepto de extremo de la API de servicios de contenido, ya que el contenido de la SPA debe cargarse a través de los servicios de contenido.
Para obtener más información sobre SPA en AEM, consulte los siguientes documentos:
El componente de página de una SPA no proporciona los elementos HTML de sus componentes secundarios a través del archivo JSP o HTL. Esta operación se delega en el marco SPA. La representación de componentes o modelos secundarios se obtiene como una estructura de datos JSON del JCR. A continuación, los componentes SPA se añaden a la página según esa estructura. Este comportamiento diferencia la composición inicial del cuerpo del componente de página de las contrapartes que no son SPA.
La resolución y la administración del modelo de página se delegan a un PageModel
biblioteca. El SPA debe utilizar la biblioteca del modelo de página para que el Editor de SPA pueda inicializarlo y crearlo. La biblioteca Modelo de página que se proporciona indirectamente al componente Página AEM a través del aem-react-editable-components
npm. El modelo de página es un intérprete entre AEM y la SPA y, por lo tanto, siempre debe estar presente. Cuando se crea la página, se crea una biblioteca adicional cq.authoring.pagemodel.messaging
debe añadirse para habilitar la comunicación con el editor de páginas.
Si el componente de página SPA hereda del componente principal de página, hay dos opciones para realizar la variable cq.authoring.pagemodel.messaging
categoría biblioteca de cliente disponible:
customfooterlibs.html
.Para cada recurso del modelo exportado, el SPA asignará un componente real que realizará la renderización. El modelo, representado como JSON, se representa mediante las asignaciones de componentes dentro de un contenedor.
La inclusión de la variable cq.authoring.pagemodel.messaging
debe limitarse al contexto del Editor de SPA.
Cuando la variable cq.authoring.pagemodel.messaging
se añade a la página, enviará un mensaje al Editor de páginas para establecer el tipo de datos de comunicación JSON. Cuando el tipo de datos de comunicación se establece en JSON, las solicitudes de GET se comunican con los puntos finales del modelo Sling de un componente. Una vez que se produce una actualización en el editor de páginas, la representación JSON del componente actualizado se envía a la biblioteca del modelo de página. A continuación, la biblioteca del modelo de página informa al SPA de las actualizaciones.
Puede comprender el flujo de la interacción entre el SPA y el AEM pensando en el Editor de SPA como un mediador entre ambos.
Teniendo en cuenta los elementos clave del Editor de SPA, el flujo de trabajo de alto nivel de edición de un SPA dentro de AEM aparece para el autor de la siguiente manera.
Tenga en cuenta:
Esta es una descripción más detallada de la interacción cliente-servidor al editar un SPA.
El SPA se inicializa y solicita el modelo de página al Exportador del modelo de Sling.
El Exportador del modelo de Sling solicita los recursos que componen la página desde el repositorio.
El repositorio devuelve los recursos.
El Exportador del modelo de Sling devuelve el modelo de la página.
El SPA crea una instancia de sus componentes basada en el modelo de página.
6 bis El contenido informa al editor de que está listo para la creación.
6b El editor de páginas solicita las configuraciones de creación de componentes.
6c El editor de páginas recibe las configuraciones de componentes.
Cuando el autor edita un componente, el editor de páginas publica una solicitud de modificación en el servlet de POST predeterminado.
El recurso se actualiza en el repositorio.
El recurso actualizado se proporciona al servlet del POST.
El servlet de POST predeterminado informa al editor de páginas de que el recurso se ha actualizado.
El editor de páginas solicita el nuevo modelo de página.
Los recursos que componen la página se solicitan al repositorio.
El repositorio proporciona los recursos que componen la página al exportador del modelo de Sling.
El modelo de página actualizado se devuelve al editor.
El editor de páginas actualiza la referencia del modelo de página del SPA.
La SPA actualiza sus componentes en función de la nueva referencia del modelo de página.
Se actualizan las configuraciones de componentes de los editores de páginas.
17 bis El SPA indica al editor de páginas que el contenido está listo.
17b El editor de páginas proporciona a la SPA configuraciones de componentes.
17c El SPA proporciona configuraciones de componentes actualizadas.
Esta es una descripción más detallada que se centra en la experiencia de creación.
El SPA busca el modelo de página.
2 bis El modelo de página proporciona al editor los datos necesarios para la creación.
2b Cuando se le notifica, el organizador de componentes actualiza la estructura de contenido de la página.
El orquestador de componentes consulta la asignación entre un tipo de recurso AEM y un componente SPA.
El organizador de componentes crea una instancia dinámica del componente SPA en función del modelo de página y la asignación de componentes.
El editor de páginas actualiza el modelo de página.
6 bis El modelo de página proporciona datos de creación actualizados al editor de páginas.
6b El modelo de página envía cambios al organizador de componentes.
El orquestador de componentes recupera la asignación de componentes.
El organizador de componentes actualiza el contenido de la página.
Cuando el SPA termina de actualizar el contenido de la página, el editor de páginas carga el entorno de creación.
Para permitir que el autor utilice el editor de páginas para editar el contenido de una SPA, la aplicación de SPA debe implementarse para interactuar con el SDK SPA Editor de AEM. Consulte la Introducción a SPA en AEM con React documento para el mínimo que necesita saber para que el suyo funcione.
El SDK SPA Editor admite las siguientes versiones mínimas:
Las versiones anteriores de estos marcos pueden funcionar con el SDK AEM Editor SPA, pero no son compatibles.
Se pueden implementar marcos de SPA adicionales para trabajar con el SDK de AEM SPA Editor. Consulte la Modelo SPA documento de los requisitos que debe cumplir un marco de trabajo para crear una capa específica del marco compuesta por módulos, componentes y servicios que funcionen con el AEM SPA Editor.
Se pueden definir y utilizar selectores personalizados adicionales como parte de un SPA desarrollado para el SDK de SPA de AEM. Sin embargo, esta compatibilidad requiere que model
sea el primer selector y la extensión sea .json
según lo requiera el exportador JSON.
Si desea utilizar el editor in situ de un componente de texto creado en SPA se requiere una configuración adicional.
<div>
y el selector que se ha utilizado es data-rte-editelement
.editElementQuery
en el componente de texto de AEM correspondiente cq:InplaceEditingConfig
que apunten a ese selector, por ejemplo data-rte-editelement
. Esto permite al editor saber qué elemento de HTML ajusta el texto del HTML.Para obtener información adicional sobre la variable editElementQuery
y la configuración del editor de texto enriquecido, consulte Configure el Editor de texto enriquecido.
El SDK AEM SPA Editor es totalmente compatible con Adobe y, como nueva función, se sigue ampliando y mejorando. El Editor de SPA aún no admite las siguientes funciones de AEM: