Creación de una nueva pantalla de inicio de sesión

Puede modificar la pantalla de inicio de sesión de todos los módulos de AEM Forms que utilizan la pantalla de inicio de sesión de AEM Forms. Por ejemplo, las modificaciones afectan a la pantalla de inicio de sesión del área de trabajo de Forms Manager y AEM Forms.

Requisitos previos

  1. Inicie sesión en /lc/crx/de con permisos de administrador.

  2. Realice las siguientes acciones:

    1. Replicar la estructura jerárquica: de /libs/livecycle/core/content a /apps/livecycle/core/content. Mantenga las mismas propiedades (nodo/carpeta) y el mismo control de acceso.
    2. Copie la carpeta de contenido: de /libs/livecycle/core a /apps/livecycle/core.
    3. Elimine el contenido de la carpeta /apps/livecycle/core.
  3. Realice estas acciones:

    1. Replicar la estructura jerárquica: de /libs/livecycle/core/components/login a /apps/livecycle/core/components/login. Mantenga las mismas propiedades (nodo/carpeta) y el mismo control de acceso.
    2. Copie la carpeta components: de /libs/livecycle/core a /apps/livecycle/core.
    3. Elimine el contenido de la carpeta: /apps/livecycle/core/components/login.

Añadir una nueva configuración regional

  1. Copie la carpeta i18n:

    • de /libs/livecycle/core/components/login
    • hasta /apps/livecycle/core/components/login
  2. Elimine todas las carpetas dentro de i18n excepto una, digamos en.

  3. En la carpeta en, realice las siguientes acciones:

    1. Cambie el nombre de la carpeta por el nombre de configuración regional que desee admitir. Por ejemplo, ar.
    2. Cambie el valor de la propiedad jcr:language a ar (para la carpeta ar).
    NOTA

    Si locale es una combinación de código de país-idioma, por ejemplo, ar-DZ, cambie el nombre de la carpeta y el valor de la propiedad a ar-DZ.

  4. Copiar login.jsp:

    • de /libs/livecycle/core/components/login
    • hasta /apps/livecycle/core/components/login
  5. Modifique el siguiente fragmento de código para /apps/livecycle/core/components/login/login.jsp:

    La configuración regional es el 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;
            }
        }
    

    La configuración regional es un código de país 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().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 cambiar la configuración regional predeterminada

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

Añadir texto nuevo o modificar texto existente

  1. Copiar carpeta i18n:

    • de /libs/livecycle/core/components/login
    • hasta /apps/livecycle/core/components/login
  2. Ahora modifique el valor de la propiedad sling:message del nodo (debajo de la carpeta de código de configuración regional deseada) para la que desea cambiar el texto. La traducción se realiza mediante la clave mencionada en el valor de la propiedad sling:key del nodo.

  3. Para agregar un nuevo par clave-valor, realice las siguientes acciones. Compruebe un ejemplo en la captura de pantalla siguiente.

    1. Cree un nodo de tipo sling:MessageEntry o copie un nodo existente y cambie su nombre en todas las carpetas de configuración regional.

    2. Copiar login.jsp :

      • de /libs/livecycle/core/components/login
      • hasta /apps/livecycle/core/components/login
    3. Modifique /apps/livecycle/core/components/login/login.jsp para incorporar el texto recientemente agregado.

    captura

    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) {%>
    

Añadir estilo nuevo o modificar estilo existente

  1. Copiar nodo login:

    • de /libs/livecycle/core/content
    • hasta /apps/livecycle/core/content
  2. Eliminar archivos login.js y jquery-1.8.0.min.js del nodo /apps/livecycle/core/content/login.

  3. Modifique los estilos del archivo CSS.

  4. Para agregar nuevos estilos:

    1. Añadir nuevos estilos a /apps/livecycle/core/content/login/login.css

    2. Copiar login.jsp

      • de /libs/livecycle/core/components/login
      • hasta /apps/livecycle/core/components/login
    3. Modifique /apps/livecycle/core/components/login/login.jsp para incorporar los estilos recién agregados.

  5. Por ejemplo:

    • Añada lo siguiente a /apps/livecycle/core/content/login/login.css.
    .newLoginContentArea {
     width: 700px;
     padding: 100px 0px 0px 100px;
    }
    
    • Modifique lo siguiente en /apps/livecycle/core/components/login.jsp.
    <div class="loginContentArea">
    
    To
    
    <div class="newLoginContentArea">
    
NOTA

Si se eliminan las imágenes existentes en /apps/livecycle/core/content/login (copiadas de /libs/livecycle/core/content/login), elimine las referencias correspondientes en CSS.

Añadir nuevas imágenes

  1. Siga los pasos para Añadir un nuevo estilo o modificar un estilo existente (documentados anteriormente).

  2. Añada nuevas imágenes en /apps/livecycle/core/content/login. Para agregar una imagen:

    1. Instale el cliente WebDAV.
    2. Navegue a la carpeta /apps/livecycle/core/content/login mediante el cliente webDAV. Para obtener más información, consulte: https://dev.day.com/docs/en/crx/current/how_to/webdav_access.html.
    3. Añadir imágenes nuevas.
  3. Añada nuevos estilos en /apps/livecycle/core/content/login/login.css, correspondientes a las nuevas imágenes agregadas en /apps/livecycle/core/content/login.

  4. Utilice los nuevos estilos en login.jsp en /apps/livecycle/core/components.

  5. Por ejemplo:

    • Añada lo siguiente 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 lo siguiente en /apps/livecycle/core/components/login.jsp.
    <div class="loginContainerBkg">
    
    To
    
    <div class="newLginContainerBkg">
    

En esta página