Show Menu
TÓPICOS×

Criar uma nova tela de login

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 com permissões /lc/crx/de de administrador.
  2. Execute as seguintes ações:
    1. Replicar a estrutura hierárquica: de /libs/livecycle/core/content na /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 a /apps/livecycle/core .
    3. Exclua o conteúdo da /apps/livecycle/core pasta.
  3. Execute estas ações:
    1. Replicar a estrutura hierárquica: de /libs/livecycle/core/components/login na /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 a /apps/livecycle/core .
    3. Exclua o conteúdo da pasta: /apps/livecycle/core/components/login .

Adicionar uma nova localidade

  1. Copie a i18n pasta:
    • from /libs/livecycle/core/components/login
    • para /apps/livecycle/core/components/login
  2. Exclua todas as pastas dentro 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 jcr:language valor da propriedade para ar (para a ar pasta).
    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 :
    • from /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 um texto existente

  1. Copiar i18n pasta:
    • from /libs/livecycle/core/components/login
    • para /apps/livecycle/core/components/login
  2. Agora, modifique o valor da propriedade sling:message do nó (sob a 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 sling:key propriedade 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 :
      • from /libs/livecycle/core/components/login
      • para /apps/livecycle/core/components/login
    3. Modificar /apps/livecycle/core/components/login/login.jsp para incorporar o texto recém-adicionado.
    div class="loginContent">
                        <span class="loginFlow"></code>
                        <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></code>
                        <span class="loginTitle"><%= i18n.get("Login") %></code>
                        <% if (loginFailed) {%>
    
    To
    
    div class="loginContent">
                        <span class="loginFlow"></code>
                        <span class="loginVersion"><%= i18n.get("My Welcome Message") %></code>
                        <span class="loginVersion"><%= i18n.get("Version: 11.0.0") %></code>
                        <span class="loginTitle"><%= i18n.get("Login") %></code>
                        <% if (loginFailed) {%>
    
    

Adicionar novo estilo ou modificar o estilo existente

  1. Copy login node:
    • from /libs/livecycle/core/content
    • para /apps/livecycle/core/content
  2. Excluir 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
      • from /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">
    
    
Se as imagens existentes em /apps/livecycle/core/content/login (copiadas de /libs/livecycle/core/content/login ) forem removidas, remova as referências correspondentes em CSS.

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 /apps/livecycle/core/content/login pasta, 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 /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">