Criar uma nova tela de logon

Você pode modificar a tela de logon de todos os módulos AEM Forms que usam a tela de logon AEM Forms. Por exemplo, as modificações afetam a tela de logon da área de trabalho do Forms Manager e do AEM Forms.

Pré-requisitos

1. Faça logon em /lc/crx/de com permissões de administrador.

2. Execute as seguintes ações:

   1. Replicar a estrutura hierárquica: de /libs/livecycle/core/content em /apps/livecycle/core/content. Mantenha as mesmas propriedades (nó/pasta) e controle de acesso.
   2. Copie a pasta de conteúdo: de /libs/livecycle/core para /apps/livecycle/core.
   3. Exclua o conteúdo da pasta /apps/livecycle/core.

3. Execute estas ações:

   1. Replicar a estrutura hierárquica: de /libs/livecycle/core/components/login em /apps/livecycle/core/components/login. Mantenha as mesmas propriedades (nó/pasta) e controle de acesso.
   2. Copie a pasta de componentes: de /libs/livecycle/core para /apps/livecycle/core.
   3. Exclua o conteúdo da pasta: /apps/livecycle/core/components/login.

Adicionando uma nova localidade

1. Copie a pasta i18n:

   • de /libs/livecycle/core/components/login
   • para /apps/livecycle/core/components/login

2. Exclua todas as pastas dentro de i18n, exceto uma, digamos en.

3. Na pasta en, execute estas ações:

   1. Renomeie a pasta para o nome da localidade que deseja suportar. Por exemplo, ar.
   2. Altere o valor da propriedade jcr:language para ar(para a pasta ar).
   OBSERVAÇÃO

   Se locale for uma combinação de código de país de idioma, digamos, ar-DZ, altere o nome da pasta e o valor da propriedade para ar-DZ.

4. Copiar login.jsp:

   • de /libs/livecycle/core/components/login
   • para /apps/livecycle/core/components/login

5. Modifique o seguinte trecho de código para /apps/livecycle/core/components/login/login.jsp:

   Localidade é código de idioma

   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   
   To
   
   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().startsWith("ar")) {
               browserLocale = "ar";
               break;
           }
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   

   A localidade é o código do país do idioma

   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   
   To
   
   String browserLocale = "en";
       for(int i=0; i<locales.length; i++)
       {
           String prioperty = locales[i];
           if(prioperty.trim().equalsIgnoreCase("ar-DZ")) {
               browserLocale = "ar-DZ";
               break;
           }
           if(prioperty.trim().startsWith("en")) {
               browserLocale = "en";
               break;
           }
           if(prioperty.trim().startsWith("de")){
               browserLocale = "de";
               break;
           }
           if(prioperty.trim().startsWith("ja")){
               browserLocale = "ja";
               break;
           }
           if(prioperty.trim().startsWith("fr")){
               browserLocale = "fr";
               break;
           }
       }
   

   Para alterar a localidade padrão

   String browserLocale = "en";
   for(int i=0; i<locales.length; i++)
   
   To
   
   String browserLocale = "ar";
   for(int i=0; i<locales.length; i++)
   

Adicionar novo texto ou modificar o texto existente

1. Copiar pasta i18n:

   • de /libs/livecycle/core/components/login
   • para /apps/livecycle/core/components/login

2. Agora, modifique o valor da propriedade sling:message do nó (na pasta de código de localidade desejada) para o qual você deseja alterar o texto. A tradução é feita por meio da chave mencionada no valor da propriedade sling:key do nó.

3. Para adicionar um novo par de valores chave, execute as seguintes ações. Verifique um exemplo na captura de tela a seguir.

   1. Crie um nó do tipo sling:MessageEntry ou copie um nó existente e renomeie-o em todas as pastas de localidade.

   2. Copiar login.jsp :

      • de /libs/livecycle/core/components/login
      • para /apps/livecycle/core/components/login

   3. Modifique /apps/livecycle/core/components/login/login.jsp para incorporar o texto recém-adicionado.

   

   div class="loginContent">
                       <span class="loginFlow"></span>
                       <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></span>
                       <span class="loginTitle"><%= i18n.get("Login") %></span>
                       <% if (loginFailed) {%>
   
   To
   
   div class="loginContent">
                       <span class="loginFlow"></span>
                       <span class="loginVersion"><%= i18n.get("My Welcome Message") %></span>
                       <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></span>
                       <span class="loginTitle"><%= i18n.get("Login") %></span>
                       <% if (loginFailed) {%>
   

Adicionar novo estilo ou modificar o estilo existente

1. Copiar nó login:

   • de /libs/livecycle/core/content
   • para /apps/livecycle/core/content

2. Exclua os arquivos login.js e jquery-1.8.0.min.js do nó /apps/livecycle/core/content/login.

3. Modifique os estilos no arquivo CSS.

4. Para adicionar novos estilos:

   1. Adicionar novos estilos a /apps/livecycle/core/content/login/login.css

   2. Copiar login.jsp

      • de /libs/livecycle/core/components/login
      • para /apps/livecycle/core/components/login

   3. Modifique /apps/livecycle/core/components/login/login.jsp para incorporar os estilos recém-adicionados.

5. Por exemplo:

   • Adicione o seguinte a /apps/livecycle/core/content/login/login.css.

   .newLoginContentArea {
    width: 700px;
    padding: 100px 0px 0px 100px;
   }
   

   • Modifique o seguinte em /apps/livecycle/core/components/login.jsp.

   <div class="loginContentArea">
   
   To
   
   <div class="newLoginContentArea">
   

Adicionar novas imagens

1. Siga as etapas de Adicionar novo estilo ou modificar o estilo existente (documentado acima).

2. Adicione novas imagens em /apps/livecycle/core/content/login. Para adicionar imagem:

   1. Instale o cliente WebDAV.
   2. Navegue até a pasta /apps/livecycle/core/content/login, usando o cliente WebDAV. Para obter mais informações, consulte: https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
   3. Adicione novas imagens.

3. Adicione novos estilos em /apps/livecycle/core/content/login/login.css, correspondentes a novas imagens adicionadas em /apps/livecycle/core/content/login.

4. Use os novos estilos em login.jsp em /apps/livecycle/core/components.

5. Por exemplo:

   • Adicione o seguinte a /apps/livecycle/core/content/login/login.css

   .newLoginContainerBkg {
    background-image: url(my_Bg.gif);
    background-repeat: no-repeat;
    background-position: left top;
    width: 727px;
   }
   

   • Modifique o seguinte em /apps/livecycle/core/components/login.jsp.

   <div class="loginContainerBkg">
   
   To
   
   <div class="newLginContainerBkg">