Vous avez donc construit cette nouvelle et brillante console d'administration dans AEM Author pour permettre à vos auteurs de faire quelque chose de cool, comme ACS Commons Generic List par exemple. Et vous avez probablement construit ladite interface utilisateur de la console d'administration en utilisant tout ce qui est fourni avec votre version AEM: Coral UI2, Coral UI3 et / ou jQuery et autres.

Vous avez probablement utilisé Granite UI Shell pour construire votre console. Ce qui vous donne l'en-tête AEM qui comprend: navigation, profil, recherche, notifications et ainsi de suite:

Et vous avez probablement utilisé CoralUI 2/3, jQuery et d'autres frameworks et bibliothèques d'interface utilisateur pour créer votre application.

Avance rapide quelques mois plus tard

Quelques mois plus tard, un nouveau Service Pack est publié ou vous devez migrer vers une nouvelle version AEM. Et voilà, votre console est cassée! Vous passez donc des heures à réparer l'interface utilisateur et à la corriger pour contourner les changements de rupture introduits par Adobe. Ou peut-être avez-vous utilisé une API javascript interne non documentée AEM qui a maintenant changé.

Problèmes avec cette approche:

1. Vous dépendez de bibliothèques JS / CSS qui sont hors de votre contrôle et peuvent changer avec les mises à jour AEM (problème majeur .)
2. Vous ne pouvez pas "simplement" mettre à jour ou réparer des éléments cassés dans lesdites bibliothèques JS.
3. Le CSS / JS d'Adobe peut "s'infiltrer" dans le vôtre et casser votre interface utilisateur.
4. Vous finissez par écrire beaucoup de travail- contournements et non-sens pour contourner plusieurs problèmes dans Coral UI et d'autres dépendances. Croyez-moi, je devais le faire BEAUCOUP.

Tout cela signifie de l'incertitude. Et l'incertitude est un non-non si vous prévoyez de créer une application maintenable.

Je suis ici pour vous dire, il y a une meilleure façon: les iFrames!

Les iFrames ont une mauvaise réputation. Mais lorsqu'ils sont utilisés correctement les iFrames peuvent être impressionnants! diable, AEM utilise iFrames pour son éditeur de page et dans de nombreux autres endroits.
L'idée est simple, créez votre application HTML complète, selon vos propres termes, avec vos propres bibliothèques JS / CSS, puis incluez-la comme un iframe dans une page shell.

Voici l'idée, visualisée:

Mais pourquoi est-ce mieux?

Quelques choses:

1. Vous contrôlez chaque pièce du code HTML de votre application; votre application étant un document HTML complet.
2. Vous apportez votre propre JS / CSS, utilisez n'importe quel framework ou bibliothèque d'interface utilisateur que vous voulez, pas de chaînes et pas de dépendances sur AEM!
3. Le CSS / JS d'Adobe ne s'infiltrera jamais dans votre application; il est inclus dans un iframe. Donc, d'un point de vue CSS / JS, votre application est agnostique AEM.
4. Vous pouvez conserver toutes les fonctionnalités d'en-tête AEM: recherche, profil, navigation, etc.

Tout cela signifie que peu importe les changements d'Adobe, votre application fonctionnera toujours comme prévu, du point de vue de l'interface utilisateur.
Vous pouvez tout garder, créez votre application comme vous le souhaitez et surtout: économisez du temps et de l'argent!

construire un exemple extrêmement simple qui illustre cette idée

Vous pouvez également télécharger cet exemple à partir de github et suivre.

J'ai déjà créé la structure suivante pour / apps / my- console :

Voici une représentation JSON pour cela:

 {
  "jcr: primaryType": "nt: unstructured",
  "jcr: title": "Ma console",
  "consoleId": "ma-console",
  "sling: resourceSuperType": "granite / ui / components / shell / page",
  "sling: resourceType": "/ apps / ma-console",
  "contenu": {
    "jcr: primaryType": "nt: unstructured",
    "sling: resourceType": "granite / ui / components / coral / foundation / container",
    "articles": {
      "jcr: primaryType": "nt: unstructured",
      "contenu": {
        "jcr: primaryType": "nt: unstructured",
        "sling: resourceType": "/ apps / ma-console / composants / iframe"
      }
    }
  },
  "Composants": {
    "jcr: primaryType": "sling: Folder",
    "iframe": {
      "jcr: primaryType": "nt: unstructured",
      "iframe.html": {
        "jcr: primaryType": "nt: fichier"
      }
    },
    "page": {
      "jcr: primaryType": "nt: unstructured",
      "page.html": {
        "jcr: primaryType": "nt: fichier"
      }
    }
  },
  "Cadre": {
    "jcr: primaryType": "nt: unstructured",
    "jcr: title": "Mon application",
    "sling: resourceSuperType": "/ apps / ma-console / composants / page",
    "sling: resourceType": "/ apps / ma-console / frame"
  }
} 

Jetons un coup d'œil plus profond:

/ apps / my-console est une simple page Granite UI Shell de type: granite / ui / components / shell / page
Elle comprend uniquement le composant: / apps / my-console / components / iframe

Le iframe composant HTML ressemble à ceci:
Comme vous pouvez le voir, l'élément iframe pointe vers la page du cadre: /apps/my-console/frame.htm
De plus, la hauteur est définie sur calc (100vh - 60px); c'est-à-dire la hauteur totale du navigateur moins 60px (pour tenir compte de l'en-tête AEM.)

Le nœud du cadre est une simple page de type: / apps / my-console / components / page

Le composant de la page ressemble à ceci:

    
    
    


  
 Bienvenue dans mon application! 

Et le résultat est le suivant:

Lorsque vous accédez à la page de la console: http: // localhost: 4502 / apps / my-console.html [19659002]

et lorsque vous accédez à la page du cadre: http: // localhost: 4502 / apps / my-console / frame.html

Maintenant, vous pouvez ajouter des listes de clients avec votre JS / CSS préféré, inclure cela dans page.html et créer l'interface utilisateur selon vos désirs.

Bonus

Si vous voulez votre console d'administration pour correspondre aux spécifications de conception d'Adobe (AKA Spectrum ), vous pouvez inclure coral-spectre JS et CSS. coral-spectre est une implémentation de composant Web de la Spectrum Design Spec. J'aurai un article de suivi sur la façon d'ajouter le spectre corallien à votre application. Restez à l'écoute pour cela !!