Integração de componentes do espaço de trabalho do AEM Forms em aplicativos da Web integrating-aem-forms-workspace-components-in-web-applications
Você pode usar a área de trabalho do AEM Forms componentes em seu próprio aplicativo web. O exemplo de implementação a seguir usa componentes de um pacote dev de espaço de trabalho do AEM Forms instalado em uma instância do CRX™ para criar um aplicativo da Web. Personalize a solução abaixo para atender às suas necessidades específicas. A implementação de exemplo reutiliza UserInfo
, FilterList
e TaskList
componentes dentro de um portal da Web.
-
Faça logon no ambiente CRXDE Lite em
https://[server]:[port]/lc/crx/de/
. Verifique se você tem um pacote de desenvolvimento de espaço de trabalho do AEM Forms 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 demomain.js dentro da pasta /apps/sampleApplication/wscomponents/js . Copie o código de /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-none 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 desse nó, adicionesling:resourceType
do tipo String e valuesampleApplication
. Na Lista de Controle de Acesso deste nó, adicione uma entrada paraPERM_WORKSPACE_USER
permissão de privilégios jcr:read. Além disso, na Lista de Controle de Acesso de/apps/sampleApplication
adicionar uma entrada paraPERM_WORKSPACE_USER
permissão de privilégios jcr:read. -
Em
/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 página inicial do portal em
/apps/sampleApplication/GET.jsp
, adicione o seguinte código para incluir os componentes necessários dentro do portal.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>
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 (tendo um componente de classe) durante a renderização. Certifique-se de que sua página inicial contenha essas tags. Consulte a html.jsp
arquivo do espaço de trabalho do AEM Forms para saber mais sobre essas tags de controle básicas. -
Para personalizar os componentes, você pode estender as exibições existentes para o componente desejado da seguinte maneira:
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; });
-
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 de fundo como preta para que este portal exiba bem o componente userInfo . Você pode fazer isso alterando a cor do fundo em
/apps/sampleApplication/wscomponents/css/style.css
como se segue:code language-as3 body { font-family: "Myriad pro", Arial; background: #000; //This was origianlly #CCC position: relative; margin: 0 auto; }