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. Cette extension fournit également une prise en charge de la fonction Langage de modèle de HTML (HTL), ce qui élimine la complexité de JSP pour faciliter et sécuriser le développement de composants.
Les principales fonctionnalités de l’extension AEM Brackets sont les suivantes :
data-sly-*
Instructions block .En outre, Brackets propose de nombreuses fonctionnalités utiles pour les développeurs de front-end AEM :
L’extension AEM Brackets prend en charge les versions 1.0 ou ultérieures.
Téléchargez la dernière version de Brackets à partir de parenthèses.io.
Pour installer l’extension, procédez comme suit :
Ouvrez Brackets. Dans le menu Fichier, sélectionnez Extension Manager…
Entrez AEM dans la barre de recherche et recherchez l’extension AEM Brackets.
Cliquez sur Installer.
Fermez la boîte de dialogue et Extension Manager, une fois l’installation terminée.
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 :
a jcr_root
(par exemple, myproject/jcr_root
)
a filter.xml
(par exemple, myproject/META-INF/vault/filter.xml
); pour plus d’informations sur la structure de la variable filter.xml
veuillez consulter le fichier Définition du filtre Workspace.
Dans le menu Fichier de Brackets, choisissez Ouvrir le dossier… et choisissez le dossier jcr_root
ou le dossier du projet parent.
Si vous n’avez pas de votre propre projet avec un module de contenu, vous pouvez essayer la méthode Exemple HTL TodoMVC. Sur GitHub, cliquez sur Télécharger le fichier ZIP, extrayez les fichiers localement, puis, comme indiqué ci-dessus, ouvrez le jcr_root
dans Brackets. Suivez ensuite les étapes ci-dessous pour configurer la variable Paramètres du projet, puis enfin téléchargez l’ensemble du module vers votre instance de développement AEM en effectuant une Exporter le package de contenu en suivant les instructions de la section Synchronisation complète des modules de contenu .
Après ces étapes, vous devriez pouvoir accéder à la variable /content/todo.html
URL sur votre instance de développement AEM et vous pouvez commencer à apporter des modifications au code dans Brackets et voir comment, après une actualisation dans le navigateur web, les modifications ont été immédiatement synchronisées avec le serveur AEM.
Pour synchroniser le contenu avec une instance de développement AEM dans les deux sens, vous devez définir les paramètres du projet. Pour ce faire, accédez à la AEM menu et choix Paramètres du projet…
Les paramètres du projet permettent de définir :
http://localhost:4502
)admin
)admin
)L’extension AEM Brackets fournit les types suivants de synchronisation de contenu pour les fichiers et les dossiers autorisés par les règles de filtrage définies dans filter.xml
:
Ne synchronise que les changements de Brackets vers l’instance d’AEM, mais jamais l’inverse.
Dans l’explorateur de projets, ouvrez le menu contextuel en cliquant avec le bouton droit de la souris sur un fichier ou un dossier, puis sélectionnez Exporter vers le serveur ou Importation depuis le serveur sont accessibles.
Si l’entrée sélectionnée se trouve en dehors de la variable jcr_root
, Exporter vers le serveur et Importation depuis le serveur les entrées de menu contextuel sont désactivées.
Dans le AEM , Exporter le package de contenu ou Importation d’un module de contenu Les options permettent de synchroniser l’ensemble du projet avec le serveur.
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 :
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.
En outre, .vltignore
Les fichiers sont pris en charge pour exclure le contenu de la synchronisation vers et depuis le référentiel.
L’extension AEM Brackets propose également une fonction de remplissage automatique pour faciliter l’écriture d’attributs et d’expressions HTL.
sly
. L’attribut est automatiquement rempli sur data-sly-
.Dans une expression ${}
, les noms de variable courants sont renseignés automatiquement.
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 :
L’éditeur de code Brackets est également un projet open source, hébergé sur GitHub par la fonction Adobe Systems Incorporated organisation :
N’hésitez pas à apporter votre contribution !