Intégration des composants de l’espace de travail AEM Forms dans des applications Web integrating-aem-forms-workspace-components-in-web-applications
Vous pouvez utiliser l’espace de travail AEM Forms components dans votre propre application web. L’exemple d’implémentation suivant utilise des composants d’un package de développement d’espace de travail AEM Forms installé sur une instance CRX™ pour créer une application web. Personnalisez la solution ci-dessous en fonction de vos besoins. L’exemple d’implémentation réutilise les composants UserInfo
, FilterList
et TaskList
dans un portail Web.
-
Connectez-vous à l’environnement CRXDE Lite à l’adresse
https://[server]:[port]/lc/crx/de/
. Assurez-vous que vous avez installé un package de développement d’espace de travail AEM Forms. -
Créez un chemin d’accès
/apps/sampleApplication/wscomponents
. -
Copiez css, images, js/libs, js/runtime et js/registry.js
- de
/libs/ws
- vers
/apps/sampleApplication/wscomponents
.
- de
-
Créez un fichier demomain.js dans le dossier /apps/sampleApplication/wscomponents/js. Copiez le code de /libs/ws/js/main.js dans demomain.js.
-
Dans demomain.js, supprimez le code pour initialiser le routeur et ajoutez le code suivant :
code language-none require(['initializer','runtime/util/usersession'], function(initializer, UserSession) { UserSession.initialize( function() { // Render all the global components initializer.initGlobal(); }); });
-
Créez un nœud sous /content du nom de
sampleApplication
et du typent:unstructured
. Dans les propriétés de ce nœud, ajoutezsling:resourceType
du type chaîne et de la valeursampleApplication
. Dans la liste de contrôle d’accès de ce nœud, ajoutez une entrée pourPERM_WORKSPACE_USER
autorisant des privilèges jcr:read. De même, dans la liste de contrôle d’accès de/apps/sampleApplication
, ajoutez une entrée pourPERM_WORKSPACE_USER
autorisant les privilèges jcr:read. -
Dans
/apps/sampleApplication/wscomponents/js/registry.js
, mettez à jour les chemins d’accès de/lc/libs/ws/
à/lc/apps/sampleApplication/wscomponents/
pour les valeurs des modèles. -
Dans le fichier JSP de la page d’accueil de votre portail, à l’adresse
/apps/sampleApplication/GET.jsp
, ajoutez le code suivant pour inclure les composants requis dans le portail.code language-as3 <script data-main="/lc/apps/sampleApplication/wscomponents/js/demomain" src="/lc/apps/sampleApplication/wscomponents/js/libs/require/require.js"></script> <div class="UserInfoView gcomponent" data-name="userinfo"></div> <div class="filterListView gcomponent" data-name="filterlist"></div> <div class="taskListView gcomponent" data-name="tasklist"></div>
Incluez également les fichiers CSS requis pour les composants de l’espace de travail AEM Forms.
note note NOTE Chaque composant est ajouté à la balise du composant (ayant la classe gcomponent) pendant le rendu. Assurez-vous que votre page d’accueil contient ces balises. Voir le fichier html.jsp
de l’espace de travail AEM Forms pour en savoir plus sur les balises de contrôle de base. -
Pour personnaliser les composants, vous pouvez étendre les vues existantes pour le composant requis comme suit :
code language-as3 define([ ‘jquery’, ‘underscore’, ‘backbone’, ‘runtime/views/userinfo'], function($, _, Backbone, UserInfo){ var demoUserInfo = UserInfo.extend({ //override the functions to customize the functionality render: function() { UserInfo.prototype.render.call(this); // call the render function of the super class … //other tasks … } }); return demoUserInfo; });
-
Modifiez le portail CSS pour configurer la mise en page, le positionnement et le style des composants souhaités sur votre portail. Par exemple, vous souhaitez garder la couleur d’arrière-plan en noir pour ce portail pour afficher correctement le composant userInfo. Vous pouvez le faire en modifiant la couleur d’arrière-plan dans
/apps/sampleApplication/wscomponents/css/style.css
comme suit :code language-as3 body { font-family: "Myriad pro", Arial; background: #000; //This was origianlly #CCC position: relative; margin: 0 auto; }