Extension AEM Brackets

du commerce électronique

L’extension AEM Brackets fournit un processus fluide pour modifier AEM composants et les bibliothèques clientes, et utilise la puissance de Brackets l’éditeur de code, qui permet d’accéder aux calques et fichiers Photoshop à partir de 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 prend également en charge le langage de modèle HTML (HTL) qui élimine la complexité des JSP pour faciliter et sécuriser le développement de composants.

Fonctions

Les principales fonctionnalités de l’extension AEM Brackets sont les suivantes :

• La synchronisation automatisée des fichiers modifiés avec l’instance de développement AEM
• La synchronisation bidirectionnelle manuelle des fichiers et des dossiers
• La synchronisation complète des packages de contenu du projet
• Le remplissage du code HTL pour les expressions et les instructions de bloc data-sly-*

En outre, Brackets s’accompagne de nombreuses fonctionnalités utiles pour les développeurs de polices AEM :

• Prise en charge des fichiers Photoshop pour extraire des informations d’un fichier de PSD, comme des calques, des mesures, des couleurs, des polices, du texte, etc.
• Conseils sur le code du PSD, pour réutiliser facilement ces informations extraites dans le code.
• Prise en charge de préprocesseurs CSS, comme LESS et SCSS.
• Et des centaines d’extensions supplémentaires qui répondent à des besoins plus spécifiques.

Installation

Brackets

L’extension AEM Brackets prend en charge Brackets version 1.0 ou ultérieure.

Téléchargez la dernière version de Brackets sur Brackets.io.

L’extension

Pour installer l’extension, procédez comme suit :

1. Ouvrez Brackets. Dans le menu Fichier, sélectionnez Extension Manager…

2. Entrée AEM dans la barre de recherche et recherchez Extension AEM Brackets.

   

3. Cliquez sur Installer.

4. Fermez la boîte de dialogue et l’Extension Manager une fois l’installation terminée.

Prise en main

Le projet Content-Package

Une fois l’extension installée, vous pouvez commencer à développer AEM composants en ouvrant un dossier content-package à partir de votre système de fichiers avec Brackets.

Le projet doit contenir au moins :

1. a jcr_root Dossier (par exemple, myproject/jcr_root)

2. a filter.xml (par exemple, myproject/META-INF/vault/filter.xml) ; pour plus d’informations sur la structure de la variable filter.xml voir 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.

Paramètres du projet

Pour synchroniser votre contenu avec et depuis une instance de développement AEM, vous devez définir vos paramètres de projet. Pour cela, accédez au menu AEM et choisissez Paramètres du projet…

Les paramètres du projet permettent de définir :

1. L’URL du serveur (par exemple, http://localhost:4502)
2. s’il faut accepter les serveurs sans certificat HTTPS valide (ne pas cocher, sauf si nécessaire) ;
3. Nom d’utilisateur utilisé pour synchroniser le contenu (par exemple : admin)
4. Le mot de passe de l’utilisateur (par exemple : admin)

Synchronisation du contenu

L’extension AEM Brackets fournit les types de synchronisation de contenu suivants pour les fichiers et dossiers autorisés par les règles de filtrage définies dans filter.xml :

Synchronisation Automatisée Des Fichiers Modifiés

Cela synchronise uniquement les modifications de Brackets vers l’instance AEM, mais jamais l’inverse.

Synchronisation bidirectionnelle manuelle

Dans l’Explorateur de projet, ouvrez le menu contextuel en cliquant avec le bouton droit de la souris sur un fichier ou un dossier, et accédez aux options Exporter vers le serveur ou Importer depuis le serveur.

Synchronisation complète des packages de contenu

Dans le menu AEM, les options Exporter le package de contenu ou Importer le package de contenu permettent de synchroniser l’ensemble du projet avec le serveur.

État de synchronisation

L’extension AEM Brackets comporte une icône de notification dans la barre d’outils située à 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
• blue : 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é

Cliquez sur l’icône de notification pour ouvrir la boîte de dialogue Rapport d’état de synchronisation qui répertorie tous les états de chaque fichier synchronisé.

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

Dans une expression ${}, les noms communs des variables sont remplis automatiquement.

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 :

• Référentiel de code : https://github.com/Adobe-Marketing-Cloud/aem-sightly-brackets-extension
• Licence Apache, version 2.0 : https://www.apache.org/licenses/LICENSE-2.0.html

L’éditeur de code Brackets est également un projet open source, hébergé sur GitHub par l’entreprise Adobe Systems Incorporated :

• Référentiel de code : https://github.com/adobe/brackets

N’hésitez pas à apporter votre contribution !