DocumentaciónAEM 6.5Guía del usuario

AEM Extensión de corchetes de aem-brackets-extension

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Temas:

Creado para:

  • Desarrollador

Información general overview

AEM AEM La extensión de brackets proporciona un flujo de trabajo fluido para editar componentes y bibliotecas de cliente, y usa la potencia del editor de código Brackets, que proporciona acceso desde el editor de código a archivos y capas de Photoshop. AEM La fácil 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 a participar en proyectos. Esta extensión también proporciona cierta compatibilidad con el Lenguaje de HTML de plantillas (HTL), que elimina la complejidad de JSP para facilitar el desarrollo de componentes y hacerlos más seguros.

chlimage_1-53

Características features

AEM Las principales características de la extensión de corchetes de la son:

  • AEM Sincronización automatizada de los archivos modificados en la instancia de desarrollo de la.
  • Sincronización bidireccional manual de archivos y carpetas.
  • Sincronización completa del paquete de contenido del proyecto.
  • Finalización de código HTL para expresiones e instrucciones de bloque data-sly-*.

AEM Además, Brackets incluye muchas funciones útiles para los desarrolladores de front-end de:

  • Compatibilidad con archivos Photoshop para extraer información de un archivo de PSD, como capas, medidas, colores, fuentes, textos, etc.
  • Sugerencias para el 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

Corchetes brackets

AEM La extensión de corchetes de la serie admite corchetes de la versión 1.0 o posterior.

Descargue la versión más reciente de Brackets de brackets.io.

La extensión de the-extension

Para instalar la extensión, siga estos pasos:

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

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

    chlimage_1-54

  3. Haga clic en Instalar.

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

Introducción getting-started

El proyecto del paquete de contenido the-content-package-project

AEM Una vez instalada la extensión, puede empezar a desarrollar componentes de la abriendo una carpeta de paquete de contenido desde el sistema de archivos con corchetes.

El proyecto debe contener al menos:

  1. una carpeta jcr_root (por ejemplo, myproject/jcr_root)

  2. un archivo de filter.xml (por ejemplo, myproject/META-INF/vault/filter.xml); para obtener más detalles acerca de la estructura del archivo de filter.xml, vea la definición del filtro de Workspace.

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

NOTE
Si no dispone de su propio proyecto con un paquete de contenido, puede probar el Ejemplo de HTL TodoMVC. En GitHub, haga clic en Descargar ZIP, extraiga los archivos localmente y, como se indica más arriba, abra la carpeta jcr_root entre corchetes. AEM A continuación, siga los pasos a continuación para configurar Configuración del proyecto y, finalmente, cargue todo el paquete en su instancia de desarrollo de haciendo un Paquete de contenido de exportación según se indica más adelante en la sección Sincronización completa del paquete de contenido.
AEM AEM Después de estos pasos, debería poder obtener acceso a la dirección URL /content/todo.html en su instancia de desarrollo de y puede empezar a realizar modificaciones en el código entre corchetes y ver cómo, después de realizar una actualización en el explorador web, los cambios se sincronizaron inmediatamente con el servidor de la.

Configuración de proyecto project-settings

AEM Para sincronizar el contenido con y desde una instancia de desarrollo de, debe definir la Configuración del proyecto. AEM Para ello, vaya al menú ​ ​y elija Configuración del proyecto…

chlimage_1-55

La Configuración del proyecto permite definir lo siguiente:

  1. La dirección URL del servidor (por ejemplo, http://localhost:4502)
  2. Si se toleran los servidores que no tienen un certificado HTTPS válido (manténgalo sin marcar, a menos que sea necesario)
  3. Nombre de usuario utilizado para sincronizar contenido (por ejemplo, admin)
  4. Contraseña del usuario (por ejemplo, admin)

Sincronización de contenido synchronizing-content

AEM La extensión 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 Automática De Archivos Cambiados automated-synchronization-of-changed-files

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

Sincronización bidireccional manual manual-bidirectional-synchronization

En el Explorador del proyecto, abra el menú contextual haciendo clic con el botón secundario en cualquier archivo o carpeta, y se puede acceder a las opciones Exportar al servidor o Importar desde el servidor.

chlimage_1-56

NOTE
Si la entrada seleccionada está fuera de la carpeta jcr_root, las entradas de menú contextual Exportar al servidor e Importar del servidor están deshabilitadas.

Sincronización completa del paquete de contenido full-content-package-synchronization

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

chlimage_1-57

Estado de sincronización synchronization-status

AEM La extensión de corchetes de la barra de herramientas de la parte derecha de la ventana Corchetes, que muestra un icono de notificación que indica el estado de la última sincronización, incluye la siguiente información:

  • verde: todos los archivos se han sincronizado correctamente
  • azul: hay una operación de sincronización en curso
  • amarillo: algunos archivos no se sincronizaron
  • rojo: no se sincronizó ningún archivo

Al hacer clic en el icono de notificación, se abre el cuadro de diálogo Informe de estado de sincronización que muestra todos los estados de cada archivo sincronizado.

chlimage_1-58

NOTE
Solo se sincronizará el contenido marcado como incluido por las reglas de filtrado de filter.xml, independientemente del método de sincronización utilizado.
Además, se admiten .vltignore archivos para excluir contenido de la sincronización con el repositorio y desde él.

Edición de código HTL editing-htl-code

AEM La extensión Brackets también incluye algunas características de finalización automática para facilitar la escritura de atributos y expresiones HTL.

Atributo de finalización automática attribute-auto-completion

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

Expresión: finalización automática expression-auto-completion

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

Más información more-information

AEM La extensión Brackets es un proyecto de código abierto, alojado en GitHub por la organización Adobe Marketing Cloud, con licencia Apache, versión 2.0:

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

¡Siéntase libre de contribuir!

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2