Extensión de AEM corchetes

Información general

La extensión de AEM corchetes proporciona un flujo de trabajo suave para editar AEM componentes y bibliotecas de clientes, y aprovecha la potencia del editor de código Bracks, que proporciona acceso desde el editor de código a los archivos y capas de Photoshop. La fácil sincronización que ofrece 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 AEM limitados a participar en los proyectos. Esta extensión también proporciona cierta compatibilidad con el Lenguaje de plantilla HTML (HTL), que elimina la complejidad de JSP para que el desarrollo de componentes sea más fácil y seguro.

Características

Las principales características de la extensión de AEM Bracks 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 data-sly-* sentencias de bloque.

Además, los corchetes incluyen muchas funciones útiles para 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 AEM corchetes es compatible con los corchetes versión 1.0 o buena.

Descargue la versión más reciente de los corchetes desde soportes.io.

La extensión

Para instalar la extensión, siga estos pasos:

1. Abra Corchetes. En el menú Archivo, seleccione Extension Manager…

2. Escriba AEM en la barra de búsqueda y busque Extensión de AEM Bracks.

   

3. Haga clic en Instalar.

4. Cierre el cuadro de diálogo y el Extension Manager una vez completada la instalación.

Introducción

El proyecto Content-Package

Una vez instalada la extensión, puede crear inicios para el desarrollo de componentes de AEM abriendo una carpeta de paquetes de contenido desde el sistema de archivos con los corchetes.

El proyecto debe contener al menos:

1. una carpeta jcr_root (p. ej. myproject/jcr_root)

2. un archivo filter.xml (p. ej. myproject/META-INF/vault/filter.xml); para obtener más información sobre la estructura del archivo filter.xml, consulte la definición del filtro de espacio de trabajo.

En el menú Archivo entre corchetes, elija Abrir carpeta… y elija la carpeta jcr_root o la carpeta del proyecto principal.

Configuración del proyecto

Para sincronizar el contenido con y desde una instancia de desarrollo de AEM, debe definir la configuración del proyecto. Esto se puede realizar si se dirige al menú AEM y elige Configuración 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 AEM corchetes 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 automatizada de archivos cambiados

Esto sólo 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 Exportar al servidor o Importar desde el servidor.

Sincronización de paquete 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 de 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 lista todo el estado de cada archivo sincronizado.

Edición del código HTML

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

Finalización automática de atributos

1. En un atributo HTML, escriba sly. El atributo se completa 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 AEM corchetes es un proyecto de código abierto, alojado en GitHub por la organización Adobe Marketing Cloud, bajo la licencia de Apache, versión 2.0:

• Repositorio de códigos: https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Licencia de Apache, versión 2.0: https://www.apache.org/licenses/LICENSE-2.0.html

El editor de código de corchetes también es un proyecto de código abierto, alojado en GitHub por la organización Adobe Systems Incorporated:

• Repositorio de códigos: https://github.com/adobe/brackets

¡Siéntase libre de contribuir!