Show Menu
TEMAS×

Extensión de corchetes AEM

Información general

La extensión de corchetes AEM proporciona un flujo de trabajo suave para editar los componentes y las bibliotecas de cliente de AEM, y aprovecha la potencia del editor de código de corchetes , que proporciona acceso desde el editor de código a los archivos y capas de Photoshop. La sencilla sincronización que proporciona la extensión (no se requiere Maven ni File Vault) aumenta la eficacia del desarrollador y también ayuda a los desarrolladores de front-end con conocimientos limitados de AEM a participar en los proyectos. Esta extensión también ofrece cierta compatibilidad con el lenguaje de plantilla HTML (HTL) , que elimina la complejidad de JSP para facilitar y aumentar la seguridad del desarrollo de componentes.

Características

Las principales funciones de la extensión de los soportes AEM son:
  • Sincronización automatizada de los archivos modificados con la instancia de desarrollo de AEM.
  • Sincronización bidireccional manual de archivos y carpetas.
  • Sincronización completa del paquete de contenido del proyecto.
  • Finalización del código HTL para expresiones y sentencias de data-sly-* bloque.
Además, los corchetes incluyen muchas funciones útiles para los desarrolladores de fuentes AEM:
  • Compatibilidad con archivos de Photoshop para extraer información de un archivo PSD, como capas, medidas, colores, fuentes, textos, etc.
  • Sugerencias de código del PSD para reutilizar fácilmente esta información extraída en el código.
  • Compatibilidad con preprocesadores CSS, como LESS y SCSS.
  • Y cientos de extensiones adicionales que cubren necesidades más específicas.

Instalación

Corchetes

La extensión de los corchetes AEM admite los corchetes de la versión 1.0 o superior.
Descargue la versión más reciente de los corchetes de corchetes.io .

La extensión

Para instalar la extensión, siga estos pasos:
  1. Abra Corchetes. En el menú Archivo , seleccione Extension Manager...
  2. Introduzca AEM en la barra de búsqueda y busque Extensión de corchetes AEM .
  3. Haga clic en Instalar .
  4. Cierre el cuadro de diálogo y Extension Manager una vez finalizada la instalación.

Introducción

El proyecto Content-Package

Una vez instalada la extensión, puede empezar a desarrollar los componentes de AEM abriendo una carpeta de paquetes de contenido desde el sistema de archivos con paréntesis.
El proyecto debe contener al menos:
  1. una jcr_root carpeta (p. ej. myproject/jcr_root )
  2. un filter.xml archivo (p. ej. myproject/META-INF/vault/filter.xml ); para obtener más información sobre la estructura del filter.xml archivo, consulte la definición Filtro de espacio de trabajo.
En el menú Archivo de corchetes, elija Abrir carpeta... y elija la jcr_root carpeta o la carpeta del proyecto principal.
Si no tiene un proyecto propio con un paquete de contenido, puede probar el Ejemplo aem-sightly-sample-todomvc HTL TodoMVC. En GitHub, haga clic en Descargar ZIP , extraiga los archivos localmente y, como se ha indicado anteriormente, abra la jcr_root carpeta entre corchetes. A continuación, siga los pasos que se describen a continuación para configurar la configuración del proyecto y, finalmente, cargue todo el paquete en su instancia de desarrollo de AEM realizando un paquete de exportación de contenido como se indica en la sección Sincronización de contenido completo y paquete.
Después de estos pasos, debe poder acceder a la /content/todo.html URL en la instancia de desarrollo de AEM y puede empezar a realizar modificaciones en el código entre corchetes y ver cómo, tras realizar una actualización en el navegador web, los cambios se sincronizaron inmediatamente con el servidor AEM.

Configuración del proyecto

Para sincronizar el contenido con y desde una instancia de desarrollo de AEM, debe definir la configuración del proyecto. Para ello, vaya al menú de AEM y elija Ajustes del proyecto...
La Configuración del proyecto permite definir:
  1. La dirección URL del servidor (p. ej. http://localhost:4502 )
  2. Si desea tolerar servidores que no tengan un certificado HTTPS válido (mantenga la opción sin marcar, a menos que sea necesario)
  3. Nombre de usuario utilizado para sincronizar contenido (p. ej. admin )
  4. La contraseña del usuario (p. ej. admin )

Sincronización de contenido

La extensión de corchetes AEM proporciona los siguientes tipos de sincronización de contenido para archivos y carpetas permitidos por las reglas de filtrado definidas en filter.xml :

Sincronización Automática De Archivos Cambiados

Esto solo sincronizará los cambios de los corchetes a la instancia de AEM, pero nunca al revés.

Sincronización bidireccional manual

En el Explorador de proyectos, abra el menú contextual haciendo clic con el botón derecho en cualquier archivo o carpeta, y se puede acceder a las opciones de Exportar al servidor o Importar desde el servidor .
Si la entrada seleccionada está fuera de la jcr_root carpeta, se desactivan las entradas del menú contextual Exportar a servidor e Importar desde servidor .

Sincronización de paquetes de contenido completo

En el menú AEM , las opciones Exportar paquete de contenido o Importar paquete de contenido permiten sincronizar todo el proyecto con el servidor.

Estado de sincronización

La Extensión de corchetes AEM incluye un icono de notificación en la barra de herramientas de la derecha de la ventana Corchetes, que indica el estado de la última sincronización:
  • verde: todos los archivos se sincronizaron correctamente
  • azul: una operación de sincronización está en curso
  • amarillo: algunos archivos no se sincronizaron
  • rojo: no se sincronizó ninguno de los archivos
Al hacer clic en el icono de notificación, se abrirá el cuadro de diálogo de informe Estado de sincronización, que enumera todos los estados de cada archivo sincronizado.
Solo se sincronizará el contenido marcado como incluido por las reglas de filtrado desde filter.xml , independientemente del método de sincronización utilizado.
Además, .vltignore los archivos son compatibles para excluir el contenido de la sincronización con el repositorio y desde éste.

Edición de código HTML

La extensión de corchetes AEM también incluye algunas funciones de finalización automática para facilitar la escritura de atributos y expresiones HTML.

Finalización automática de atributos

  1. En un atributo HTML, escriba sly . El atributo se rellena automáticamente en data-sly- .
  2. Seleccione el atributo HTL en la lista desplegable.

Finalización automática de expresiones

Dentro de una expresión ${} , los nombres de variables comunes se completan automáticamente.

Más información

La extensión de los corchetes de AEM es un proyecto de código abierto, alojado en GitHub por la organización de Adobe Marketing Cloud , bajo la licencia de Apache, versión 2.0:
El editor de código de soportes también es un proyecto de código abierto, alojado en GitHub por la organización Adobe Systems Incorporated :
¡Siéntase libre de contribuir!