Integração de componentes do espaço de trabalho do AEM Forms em aplicativos web integrating-aem-forms-workspace-components-in-web-applications
Você pode usar o espaço de trabalho do AEM Forms componentes em seu próprio aplicativo web. O exemplo de implementação a seguir usa componentes de um pacote de desenvolvimento de espaço de trabalho do AEM Forms instalado em uma instância do CRX™ para criar um aplicativo web. Personalize a solução abaixo para atender às suas necessidades específicas. A amostra de reutilização de implementação UserInfo
, FilterList
, e TaskList
componentes dentro de um portal da web.
-
Fazer logon no ambiente de CRXDE Lite em
https://'[server]:[port]'/lc/crx/de/
. Verifique se você tem um pacote de desenvolvimento do AEM Forms Workspace instalado. -
Criar um caminho
/apps/sampleApplication/wscomponents
. -
Copie css, imagens, js/libs, js/runtime e js/registry.js
- de
/libs/ws
- para
/apps/sampleApplication/wscomponents
.
- de
-
Crie um arquivo demain.js dentro da pasta /apps/sampleApplication/wscomponents/js. Copie o código do /libs/ws/js/main.js para demomain.js.
-
Em demomain.js, remova o código para inicializar o roteador e adicione o seguinte código:
code language-javascript require(['initializer','runtime/util/usersession'], function(initializer, UserSession) { UserSession.initialize( function() { // Render all the global components initializer.initGlobal(); }); });
-
Criar um nó em /content por nome
sampleApplication
e tipont:unstructured
. Nas propriedades deste nó, adicionesling:resourceType
do tipo String e valorsampleApplication
. Na Lista de Controle de Acesso deste nó, adicione uma entrada paraPERM_WORKSPACE_USER
permitindo privilégios de jcr:read. Além disso, na Lista de controle de acesso do/apps/sampleApplication
adicionar uma entrada paraPERM_WORKSPACE_USER
permitindo privilégios de jcr:read. -
Entrada
/apps/sampleApplication/wscomponents/js/registry.js
atualizar caminhos de/lc/libs/ws/
para/lc/apps/sampleApplication/wscomponents/
para valores de modelo. -
No arquivo JSP da home page do portal em
/apps/sampleApplication/GET.jsp
, adicione o código a seguir para incluir os componentes necessários dentro do portal.code language-jsp <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>
Inclua também os arquivos CSS necessários para os componentes do espaço de trabalho do AEM Forms.
note note NOTE Cada componente é adicionado à tag do componente (com class gcomponent) durante a renderização. Certifique-se de que a home page contenha essas tags. Consulte a html.jsp
arquivo do espaço de trabalho do AEM Forms para saber mais sobre essas tags de controle base. -
Para personalizar os componentes, é possível estender as exibições existentes para o componente desejado da seguinte maneira:
code language-javascript 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; });
-
Modifique o CSS do portal para configurar o layout, o posicionamento e o estilo dos componentes necessários no portal. Por exemplo, você gostaria de manter a cor do plano de fundo preta para que este portal exiba bem o componente userInfo. Você pode fazer isso alterando a cor do plano de fundo no
/apps/sampleApplication/wscomponents/css/style.css
do seguinte modo:code language-css body { font-family: "Myriad pro", Arial; background: #000; //This was origianlly #CCC position: relative; margin: 0 auto; }