Show Menu
ARGOMENTI×

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

Potete utilizzare i componenti dell’area di lavoro AEM Forms nella vostra applicazione Web. L'implementazione di esempio seguente utilizza i componenti di un pacchetto di sviluppo dell'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 TaskList componenti all’interno di un portale Web.
  1. Accedere all'ambiente CRXDE Lite all'indirizzo https://'[server]:[port]'/lc/crx/de/ . Verificare che sia installato un pacchetto di sviluppo del percorso di lavoro AEM Forms.
  2. Creare 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 per nome sampleApplication e tipo nt:unstructured . Nelle proprietà di questo nodo aggiungere sling:resourceType di tipo Stringa e valore sampleApplication . Nell'elenco Controllo accesso di questo nodo aggiungere una voce per PERM_WORKSPACE_USER consentire i privilegi jcr:read. Inoltre, nell'elenco di controllo degli accessi /apps/sampleApplication aggiungete una voce per PERM_WORKSPACE_USER consentire i privilegi jcr:read.
  7. In /apps/sampleApplication/wscomponents/js/registry.js percorsi di aggiornamento 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 AEM Forms.
    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 html.jsp file dell'area di lavoro 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 tal fine, potete modificare il colore di sfondo nel /apps/sampleApplication/wscomponents/css/style.css modo seguente:
    body {
        font-family: "Myriad pro", Arial;
        background: #000;    //This was origianlly #CCC
        position: relative;
        margin: 0 auto;
    }