Integrazione componenti dell'area di lavoro AEM Forms nelle applicazioni Web

È possibile utilizzare area di lavoro AEM Forms componenti nella propria applicazione Web. L'implementazione di esempio seguente utilizza i componenti di un pacchetto di sviluppo area di lavoro AEM Forms installato in un'istanza CRX™ per creare un'applicazione Web. Personalizza la soluzione indicata di seguito in base alle tue esigenze specifiche. L'implementazione di esempio riutilizza UserInfo, FilterList e TaskListcomponenti all'interno di un portale Web.

1. Accedete all’ambiente CRXDE Lite in https://'[server]:[port]'/lc/crx/de/. Accertatevi di disporre di un pacchetto di sviluppo del percorso di lavoro AEM Forms installato.

2. Create un percorso /apps/sampleApplication/wscomponents.

3. Copiate css, immagini, js/libs, js/runtime e js/registry.js

   • da /libs/ws
   • a /apps/sampleApplication/wscomponents.

4. Create un file dominio.js all'interno della cartella /apps/sampleApplication/wscomponents/js. Copiate il codice da /libs/ws/js/main.js a download.js.

5. In demomain.js, rimuovi il codice per inizializzare Router e aggiungi il seguente codice:

   require(['initializer','runtime/util/usersession'],
       function(initializer, UserSession) {
           UserSession.initialize(
               function() {
                   // Render all the global components
                   initializer.initGlobal();
               });
       });
   

6. Create un nodo in /content in base al nome sampleApplication e digitate nt:unstructured. Nelle proprietà di questo nodo aggiungere sling:resourceType di tipo String e valore sampleApplication. Nell'elenco Controllo di accesso di questo nodo aggiungere una voce per PERM_WORKSPACE_USER che consenta i privilegi jcr:read. Inoltre, nell'elenco Controllo accesso di /apps/sampleApplication aggiungere una voce per PERM_WORKSPACE_USER che consenta i privilegi jcr:read.

7. In /apps/sampleApplication/wscomponents/js/registry.js aggiornare i percorsi da /lc/libs/ws/ a /lc/apps/sampleApplication/wscomponents/ per i valori dei modelli.

8. Nel file JSP della home page del portale in /apps/sampleApplication/GET.jsp, aggiungi il codice seguente per includere i componenti richiesti all'interno del portale.

   <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>
   

   Includete anche i file CSS richiesti per i componenti dell'area di lavoro di AEM Forms.

   NOTA

   Ciascun componente viene aggiunto al tag del componente (con componente di classe) durante il rendering. Accertatevi che la pagina principale contenga questi tag. Per ulteriori informazioni su questi tag di controllo di base, vedere il file html.jsp area di lavoro di AEM Forms.

9. Per personalizzare i componenti, potete estendere le viste esistenti per il componente richiesto come segue:

   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. Modificate il CSS del portale per configurare il layout, il posizionamento e lo stile dei componenti richiesti sul portale. Ad esempio, per visualizzare correttamente il componente userInfo, si desidera mantenere il colore di sfondo nero per il portale. A tale scopo, è possibile modificare il colore di sfondo in /apps/sampleApplication/wscomponents/css/style.css nel modo seguente:

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