Vous consultez actuellement l'aide de la version:

Vous pouvez utiliser les composants de l’espace de travail AEM Forms dans votre propre application Web. L’exemple d’implémentation suivant utilise des composants d’un paquet 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.

  1. Connectez-vous à l’environnement CRXDE Lite à l’adresse http://[serveur]:[port]/lc/crx/de/. Assurez-vous que vous avez installé un package de développement d’espace de travail AEM Forms.

  2. Créez un chemin /apps/sampleApplication/wscomponents.

  3. Copiez css, images, js/libs, js/runtime et js/registry.js

    • de /libs/ws
    • dans /apps/sampleApplication/wscomponents.
  4. 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.

  5. Dans demomain.js, supprimez le code pour initialiser le routeur et ajoutez le code suivant :

    require(['initializer','runtime/util/usersession'], 
        function(initializer, UserSession) { 
            UserSession.initialize( 
                function() { 
                    // Render all the global components
                    initializer.initGlobal();  
                }); 
        });
  6. Créez un nœud sous /content par nom sampleApplication et type nt:unstructured. Dans les propriétés de ce nœud, ajoutez sling:resourceType de type String et la valeur sampleApplication. Dans la liste de contrôle d’accès de ce nœud, ajoutez une entrée pour PERM_WORKSPACE_USER autorisant des privilèges jcr:read. En outre, dans la liste de contrôle d’accès de /apps/sampleApplication, ajoutez une entrée pour PERM_WORKSPACE_USER autorisant des privilèges jcr:read.

  7. Dans /apps/sampleApplication/wscomponents/js/registry.js mettez à jour les chemins d’accès de /lc/libs/ws/ vers /lc/apps/sampleApplication/wscomponents/ pour les valeurs du modèle.

  8. Dans le fichier JSP de la page d’accueil de votre portail /apps/sampleApplication/GET.jsp, ajoutez le code suivant pour inclure les composants requis dans le portail :

    <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 d’espace de travail AEM Forms.

    Remarque :

    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.

  9. Pour personnaliser les composants, agrandissez les vues existantes pour le composant requis comme suit :

    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; 
    });
  10. 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 :

    body {
        font-family: "Myriad pro", Arial;
        background: #000;    //This was origianlly #CCC    
        position: relative;
        margin: 0 auto;
    }

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne