Partie 2: Création de consoles d'administration AEM qui ne seront pas rompues avec les nouvelles versions d'AEM

Ceci est la partie 2 d'un article de blog en 2 parties. Si vous ne l'avez pas déjà fait, passez à la caisse partie 1. Dans cet article, je reprends ce dont nous avons discuté dans la partie 1 et j'ajoute coral-spectre et une nouvelle CLI pour générer des interfaces d'administration dans votre projet existant.

Avant d'y arriver

pas à utiliser coral-spectre . Je répète: vous n'avez PAS à utiliser le spectre corallien . Son objectif principal est de donner à votre application l'apparence du reste de l'interface utilisateur d'Adobe dans AEM. Mais vous n'y êtes pas lié. Si votre équipe préfère une combinaison de différentes bibliothèques et cadres d'interface utilisateur, utilisez cela! Il est beaucoup mieux pour vous, à long terme, de choisir quelque chose qui, selon vous, sera facile à entretenir et qui serait fortement lié à ce que votre équipe connaît le mieux. coral-spectre n'offre absolument AUCUN avantage sur les autres bibliothèques de composants, à part le fait qu'il ressemble au reste d'AEM.

D'accord! Allons-y

Il s'agit d'une

Une bibliothèque JavaScript de composants Web suivant des modèles de conception de spectre

Vous pouvez consulter des exemples voir documentation de référence ou intégrer leur aire de jeux

Parce que le spectre de corail est construit à l'aide d'éléments personnalisés, qui sont pris en charge dans tous les principaux navigateurs, il est parfait pour une utilisation avec Vue / React / Angular ou même seul avec vanilla JS!

Qui a dit que j'étais bon pour nommer les choses?

Pour simplifier la construction des interfaces d'administration comme je l'ai décrit, j'ai construit un CLI Nodejs qui vous permet de générer un Interface d'administration de base, avec spectre de corail inclus en tant que bibliothèque cliente et petits utilitaires utiles (pour le chargement des écrans et des notifications). Utilisons-le:

Installation CLI

 npm install -g aem-admin-interface-generator 

Utilisation CLI

Pour cette démo, j'ai créé un vierge aem-archetype projet qui ressemble à ceci:

Ensuite, je navigue vers le dossier apps apps dans le terminal et j'ai exécuté aemag admin new voir la sortie ci-dessous:

comme vous pouvez le voir, qui a généré un nouveau dossier sous les applications appelé sample

After déployant l'ensemble du projet tel quel et naviguant vers http: // localhost: 4502 / apps / ahmeds-app / sample.html voici ce que vous obtenez:

Ajoutons une carte à ce que nous avons maintenant

Comme exemple amusant, ajoutons quelques cartes simples à partir des exemples de cartes à spectre corallien .
. dans mon page html générée: /apps/ahmeds-app/sample/components/page/page.html J'ai commenté l'alerte et ajouté une liste de cartes à la place:

Un dernier mot

Maintenant que nous avons quelque chose de entièrement construit en vanille Js et coral-spectre, vous êtes libre de construire en plus de cela, ou peut-être d'introduire un front -end build module, similaire au module frontal Adobe aem-archetype vous pouvez même créer votre bibliothèque cliente d'administration en utilisant la même! Mais j'espère que cela vous donne un bon point de départ pour que vous n'ayez pas à écrire beaucoup de code standard!