Integrazione dei componenti dell’area di lavoro AEM Forms nelle applicazioni web integrating-aem-forms-workspace-components-in-web-applications
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
, FilterList
e TaskList
all’interno di un portale web.
-
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. -
Creare un percorso
/apps/sampleApplication/wscomponents
. -
Copia css, immagini, js/libs, js/runtime e js/registry.js
- da
/libs/ws
- a
/apps/sampleApplication/wscomponents
.
- da
-
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.
-
In demomain.js, rimuovi il codice per inizializzare Router e aggiungi il seguente codice:
code language-none require(['initializer','runtime/util/usersession'], function(initializer, UserSession) { UserSession.initialize( function() { // Render all the global components initializer.initGlobal(); }); });
-
Crea un nodo sotto /content per nome
sampleApplication
e tipont:unstructured
. Nelle proprietà di questo nodo aggiungisling:resourceType
di tipo String e di valoresampleApplication
. Nell'elenco Controllo Accesso di questo nodo aggiungere una voce perPERM_WORKSPACE_USER
abilitazione dei privilegi jcr:read. Inoltre, nell'elenco di controllo accessi di/apps/sampleApplication
aggiungi una voce perPERM_WORKSPACE_USER
abilitazione dei privilegi jcr:read. -
In
/apps/sampleApplication/wscomponents/js/registry.js
aggiorna percorsi da/lc/libs/ws/
a/lc/apps/sampleApplication/wscomponents/
per i valori del modello. -
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.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>
Includere anche i file CSS richiesti per i componenti dell’area di lavoro di AEM Forms.
note note NOTE 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. -
Per personalizzare i componenti, è possibile estendere le viste esistenti per il componente richiesto come segue:
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; });
-
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:code language-as3 body { font-family: "Myriad pro", Arial; background: #000; //This was origianlly #CCC position: relative; margin: 0 auto; }