Comment ajouter des composants de conception matérielle à Adobe Experience Manager

Question

J'ai été chargé de coder un composant dans Adobe Experience Manager en utilisant Material Design pour le style et les fonctionnalités. Je suis arrivé à mi-chemin - j'ai importé le CSS pour Material Design dans mon composant AEM, et cela fonctionne correctement.

Cependant, je n'arrive pas à comprendre comment faire fonctionner les parties Javascript de Material Design dans mon composant. Si je comprends bien, vous devez ajouter les fichiers Javascript un par un dans votre dossier clientlib, puis les ajouter à votre fichier js.txt. Material Design a des dizaines et des dizaines de fichiers JS individuels dans sa bibliothèque, et je ne peux pas imaginer que j'ai besoin de les ajouter un par un à mon clientlib.

Des conseils pour que Material Design fonctionne avec AEM?

Answer 1

Si je vous comprends question, vous voulez inclure le composant matériel JS de la bibliothèque vous avez fait référence: material-components-web

pour ce faire, vous pouvez télécharger la bibliothèque minified complète de ce lien: https://unpkg.com/material-components-web/dist/material-components-web.min.js que j'ai trouvé en suivant le composant matériel getting started guide , vous pouvez également l'inclure à partir de leur dépendance npm publiée (si vous avez un projet npm).

vous pouvez inclure la JS dans votre clientlib actuel ou create a clientlib avec ce JS inclus (ne sera pas entrer dans les détails sur la façon de créer clientlibs que ce n'est pas la question)

Sinon, si vous ne voulez pas inclure toute la bibliothèque de matériaux et vous préférez choisir quels composants sont inclus dans votre clientlib vous devrez créer un paquet via WebPack ou tout autre bundler JS, WebPack est le plus populaire. Il faudrait une très longue réponse pour expliquer WebPack, google autour pour cela et vous trouverez de nombreux exemples de configs et de projets. J'ai trouvé ce repo qui a un projet de démarrage pour les composants matériels: https://github.com/vardius/web-components-webpack-es6-boilerplate