Show Menu
SUJETS×

Extension AEM Brackets

Présentation

L’extension AEM Brackets offre un workflow fluide pour modifier les composants AEM et les bibliothèques clientes. Elle tire parti de la puissance de l’éditeur de code Brackets qui donne accès aux fichiers et calques Photoshop depuis l’éditeur de code. La synchronisation simplifiée (aucun Maven ou File Vault requis) grâce à l’extension améliore le rendement des développeurs et permet également aux développeurs de front-end ayant des connaissances AEM limitées de participer à des projets. This extension also provides some support for the HTML Template Language (HTL) , which takes away the complexity of JSP to make component development easier and more secure.

Fonctionnalités

Les principales fonctionnalités de l’extension AEM Brackets sont les suivantes :
  • Synchronisation automatisée des fichiers modifiés vers l’instance de développement AEM.
  • Synchronisation bidirectionnelle manuelle des fichiers et des dossiers.
  • Synchronisation complète du contenu-package du projet.
  • HTL code completion for expressions and data-sly-* block statements.
En outre, Brackets propose de nombreuses fonctionnalités utiles pour les développeurs de front-end AEM :
  • Prise en charge des fichiers Photoshop pour extraire les informations d’un fichier PSD, comme des calques, des mesures, des couleurs, des polices, du texte, etc.
  • Conseils relatifs au code du fichier PSD pour réutiliser facilement cette information extraite dans le code.
  • Prise en charge du préprocesseur CSS, comme LESS et SCSS.
  • Et des centaines d’extensions supplémentaires qui répondent à des besoins plus précis.

Installation

Brackets

L’extension AEM Brackets prend en charge les versions 1.0 ou ultérieures.
Download the latest Brackets version from brackets.io .

L’extension

Pour installer l’extension, procédez comme suit :
  1. Ouvrez Brackets. Dans le menu Fichier , sélectionnez Extension Manager...
  2. Entrez AEM dans la barre de recherche et recherchez l’ extension AEM Brackets .
  3. Cliquez sur Installer .
  4. Fermez la boîte de dialogue et Extension Manager, une fois l’installation terminée.

Prise en main

Le projet de modules de contenu

Une fois l’extension installée, vous pouvez commencer à développer des composants AEM en ouvrant un dossier de modules de contenu à partir de votre système de fichiers avec Brackets.
Le projet doit contenir au moins :
  1. un jcr_root dossier (ex. myproject/jcr_root )
  2. a filter.xml file (e.g. myproject/META-INF/vault/filter.xml ); for more details about the structure of the filter.xml file please see the Workspace Filter definition .
Dans le menu Fichier de Brackets, choisissez Ouvrir le dossier... et choisissez le dossier jcr_root ou le dossier du projet parent.
If you don't have of your own a project with a content-package, you can try the HTL TodoMVC Example . On GitHub, click Download ZIP , extract the files locally, and as instructed above, open the jcr_root folder in Brackets. Then follow the steps below to setup the Project Settings , and finally upload the whole package to your AEM development instance by doing an Export Content Package as instructed further down in the Full Content-Package Synchronization section.
After these steps, you should be able to access the /content/todo.html URL on your AEM development instance and you can start doing modifications to the code in Brackets and see how, after doing a refresh in the web browser, the changes were immediately synchronized to the AEM server.

Paramètres du projet

Pour synchroniser le contenu avec une instance de développement AEM dans les deux sens, vous devez définir les paramètres du projet. This can be done by going to the AEM menu and choosing Project Settings…
Les paramètres du projet permettent de définir :
  1. The server URL (e.g. http://localhost:4502 )
  2. Tolérer les serveurs qui ne possèdent pas de certificat HTTPS valide (ne cochez pas, sauf si nécessaire)
  3. Le nom d’utilisateur qui a servi à synchroniser le contenu (par exemple admin )
  4. The user's password (e.g. admin )

Synchronisation du contenu

The AEM Brackets Extension provides following types of content synchronization for files and folders that are allowed by the filtering rules defined in filter.xml :

Synchronisation automatisée des fichiers modifiés

Ne synchronise que les changements de Brackets vers l’instance d’AEM, mais jamais l’inverse.

Synchronisation bidirectionnelle manuelle

In the Project Explorer, open the contextual menu by right-clicking on any file or folder, and the Export to Server or Import from Server options can be accessed.
If the selected entry is outside of the jcr_root folder, the Export to Server and Import from Server contextual menu entries are disabled.

Synchronisation complète des modules de contenu

In the AEM menu, the Export Content Package or Import Content Package options allow to synchronize the whole project with the server.

État de la synchronisation

L’extension AEM Brackets comporte une icône de notification dans la barre d’outils à droite de la fenêtre Brackets, qui indique l’état de la dernière synchronisation :
  • vert - tous les fichiers ont été synchronisés avec succès
  • bleu - une opération de synchronisation est en cours
  • jaune - certains fichiers n’ont pas été synchronisés
  • rouge - aucun des fichiers n’a été synchronisé
En cliquant sur l’icône de notification, vous ouvrez la boîte de dialogue du rapport d’état de la synchronisation qui répertorie tous les états de chaque fichier synchronisé.
Seul le contenu marqué comme inclus par les règles de filtrage de filter.xml est synchronisé, quelle que soit la méthode de synchronisation appliquée.
Additionally, .vltignore files are supported for excluding content from synchronizing to and from the repository.

Modification du code HTL

L’extension AEM Brackets propose également une fonction de remplissage automatique pour faciliter l’écriture d’attributs et d’expressions HTL.

Remplissage automatique des attributs

  1. Dans un attribut HTML, tapez sly . L’attribut est automatiquement rempli sur data-sly- .
  2. Sélectionnez l’attribut HTL dans la liste déroulante.

Remplissage automatique des expressions

Within an expression ${} , common variable names are auto-completed.

Informations supplémentaires

L’extension AEM Brackets est un projet open source, hébergé sur GitHub par l’entreprise Adobe Marketing Cloud , sous licence Apache, version 2.0 :
The Brackets code editor is also an open-source project, hosted on GitHub by the Adobe Systems Incorporated organization:
N’hésitez pas à apporter votre contribution !