Integrazione dei componenti dell’area di lavoro AEM Forms nelle applicazioni web

Puoi utilizzare l’area di lavoro AEM Forms componenti nella tua applicazione web. L'implementazione di esempio seguente utilizza i componenti di un pacchetto di sviluppo dell'area di lavoro AEM Forms installato su un'istanza CRX™ per creare un'applicazione web. Personalizza la soluzione riportata di seguito in base alle tue esigenze specifiche. L’implementazione di esempio viene riutilizzata UserInfo, FilterListe TaskListall’interno di un portale web.

  1. Accedi all’ambiente CRXDE Lite all’indirizzo https://'[server]:[port]'/lc/crx/de/. Assicurati di avere installato un pacchetto di sviluppo del ritmo di lavoro di AEM Forms.

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

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

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

  4. Crea un file demomain.js all'interno della cartella /apps/sampleApplication/wscomponents/js . Copia il codice da /libs/ws/js/main.js in demomain.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. Crea un nodo sotto /content per nome sampleApplication e tipo nt:unstructured. Nelle proprietà di questo nodo aggiungi sling:resourceType di tipo String e di valore sampleApplication. Nell'elenco Controllo Accesso di questo nodo aggiungere una voce per PERM_WORKSPACE_USER abilitazione dei privilegi jcr:read. Inoltre, nell'elenco di controllo accessi di /apps/sampleApplication aggiungi una voce per PERM_WORKSPACE_USER abilitazione dei privilegi jcr:read.

  7. In /apps/sampleApplication/wscomponents/js/registry.js aggiorna percorsi da /lc/libs/ws/ a /lc/apps/sampleApplication/wscomponents/ per i valori del modello.

  8. Nel file JSP della home page del portale in /apps/sampleApplication/GET.jsp, aggiungi il seguente codice 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>

    Includere anche i file CSS richiesti per i componenti dell’area di lavoro di AEM Forms.

    NOTA

    Ogni componente viene aggiunto al tag componente (con componente classe) durante il rendering. Assicurati che la tua home page contenga questi tag. Consulta la sezione html.jsp file dell'area di lavoro di AEM Forms per ulteriori informazioni su questi tag di controllo di base.

  9. Per personalizzare i componenti, è possibile 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. Modifica il CSS del portale per configurare il layout, il posizionamento e lo stile dei componenti richiesti sul portale. Per visualizzare bene il componente userInfo, ad esempio, si desidera mantenere il colore di sfondo nero per il portale. Per farlo, modifica il colore di sfondo in /apps/sampleApplication/wscomponents/css/style.css come segue:

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

In questa pagina