Extensión de AEM Brackets aem-brackets-extension
Información general overview
La extensión AEM Brackets proporciona un flujo de trabajo fluido para editar los componentes AEM y las bibliotecas de cliente, y aprovecha el poder del Brackets editor de código, 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 AEM limitados a participar en proyectos. Esta extensión también proporciona cierta compatibilidad con el Idioma de plantilla del HTML (HTL), lo que elimina la complejidad de JSP para que el desarrollo de componentes sea más fácil y seguro.
Características features
Las principales características de la extensión AEM Brackets son:
- Sincronización automatizada de archivos modificados con la instancia de desarrollo de AEM.
- Sincronización bidireccional manual de archivos y carpetas.
- Sincronización completa de paquetes de contenido del proyecto.
- Finalización de código HTL para expresiones y
data-sly-*
block .
Además, Brackets incorpora muchas funciones útiles para los desarrolladores de fuentes AEM:
- Compatibilidad con archivos de Photoshop para extraer información de un archivo de 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 installation
Brackets brackets
La extensión AEM Brackets es compatible con Brackets versión 1.0 o buenas.
Descargue la versión más reciente de Brackets desde soportes.io.
La extensión the-extension
Para instalar la extensión, siga estos pasos:
-
Abrir Brackets. En el menú Archivo, seleccione Extension Manager…
-
Entrar AEM en la barra de búsqueda y busque Extensión de AEM Brackets.
-
Haga clic en Instalar.
-
Cierre el cuadro de diálogo y el Extension Manager una vez completada la instalación.
Introducción getting-started
El proyecto de paquete de contenido the-content-package-project
Una vez instalada la extensión, puede empezar a desarrollar componentes de AEM abriendo una carpeta de paquetes de contenido desde el sistema de archivos con Brackets.
El proyecto debe contener al menos:
-
a
jcr_root
carpeta (p. ej.myproject/jcr_root
) -
a
filter.xml
(p. ej.myproject/META-INF/vault/filter.xml
); para obtener más información sobre la estructura de la variablefilter.xml
consulte el Definición del filtro del espacio de trabajo.
Entre corchetes Archivo , elija Abrir carpeta… y seleccione jcr_root
o la carpeta del proyecto principal.
jcr_root
en Brackets. A continuación, siga los pasos a continuación para configurar la variable Configuración del proyecto y, finalmente, cargue todo el paquete en la instancia de desarrollo de AEM haciendo una Exportar paquete de contenido tal y como se indica más abajo en la sección Sincronización de paquetes de contenido completo ./content/todo.html
URL en la instancia de desarrollo de AEM y puede empezar a realizar modificaciones en el código en Brackets y ver cómo, después de realizar una actualización en el explorador web, los cambios se sincronizaron inmediatamente con el servidor de AEM.Configuración del proyecto project-settings
Para sincronizar el contenido con y desde una instancia de desarrollo de AEM, debe definir la configuración del proyecto. Para ello, vaya a la AEM menú y selección Configuración del proyecto…
La Configuración del proyecto permite definir:
- La URL del servidor (p. ej.
http://localhost:4502
) - tolerar servidores que no tengan un certificado HTTPS válido (mantener sin marcar, a menos que sea necesario)
- El nombre de usuario utilizado para sincronizar contenido (por ejemplo,
admin
) - La contraseña del usuario (p. ej.
admin
)
Sincronización de contenido synchronizing-content
La extensión AEM Brackets 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 Los Archivos Cambiados automated-synchronization-of-changed-files
Esto solo sincroniza los cambios de Brackets a la instancia de AEM, pero nunca al revés.
Sincronización bidireccional manual manual-bidirectional-synchronization
En el Explorador de proyectos, abra el menú contextual haciendo clic con el botón derecho en cualquier archivo o carpeta y en la Exportar a servidor o Importar desde el servidor se puede acceder a las opciones de .
jcr_root
carpeta, Exportar a servidor y Importar desde el servidor las entradas del menú contextual están desactivadas.Sincronización de paquetes de contenido completo full-content-package-synchronization
En el AEM , el Exportar paquete de contenido o Importar paquete de contenido permiten sincronizar todo el proyecto con el servidor.
Estado de sincronización synchronization-status
La extensión AEM Brackets incluye un icono de notificación en la barra de herramientas de la derecha de la ventana Brackets, que indica el estado de la última sincronización:
- verde: todos los archivos se han sincronizado correctamente
- azul: una operación de sincronización está en curso
- amarillo: algunos archivos no estaban sincronizados
- rojo: ninguno de los archivos se sincronizó
Al hacer clic en el icono de notificación, se abrirá el cuadro de diálogo del informe Estado de sincronización que enumera todos los estados de cada archivo sincronizado.
filter.xml
se sincronizarán, independientemente del método de sincronización utilizado..vltignore
los archivos son compatibles para excluir el contenido de la sincronización con el repositorio y desde él.Edición de código HTL editing-htl-code
La extensión AEM Brackets 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 attribute-auto-completion
- En un atributo de HTML, escriba
sly
. El atributo se completa automáticamente endata-sly-
. - Seleccione el atributo HTL en la lista desplegable.
Finalización automática de expresiones expression-auto-completion
Dentro de una expresión ${}
, los nombres de variables comunes se completan automáticamente.
Más información more-information
La extensión AEM Brackets es un proyecto de código abierto alojado en GitHub por el Adobe Marketing Cloud organización, en 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 Brackets también es un proyecto de código abierto, alojado en GitHub por el Adobe Systems Incorporated organización:
- Repositorio de códigos: https://github.com/adobe/brackets
¡Siéntase libre de contribuir!