Show Menu
TEMAS×

Cambio de la configuración regional de la interfaz de usuario del espacio de trabajo de AEM Forms

El espacio de trabajo de AEM Forms ofrece compatibilidad inmediata con los idiomas inglés, francés, alemán y japonés. También permite localizar la interfaz de usuario del espacio de trabajo de AEM Forms en cualquier otro idioma.
Para localizar la interfaz de usuario del espacio de trabajo de AEM Forms en el idioma que elija:
  • Localización del texto del espacio de trabajo de AEM Forms.
  • Localice categorías contraídas, colas y procesos.
  • Localizar selector de fechas
Antes de realizar los pasos anteriores, asegúrese de seguir los pasos que se indican en Pasos genéricos para la personalización del espacio de trabajo de AEM Forms.
Para cambiar el idioma de la pantalla de inicio de sesión del espacio de trabajo de AEM Forms, consulte Creación de una nueva pantalla de inicio de sesión.

Localización de texto

Realice los siguientes pasos para agregar compatibilidad con un idioma Nuevo y el código de configuración regional del explorador ahora .
  1. Inicie sesión en CRXDE Lite. La dirección URL predeterminada de CRXDE Lite es https://'[server]:[port]'/lc/crx/de/index.jsp .
  2. Vaya a la ubicación apps/ws/locales y cree una nueva carpeta nw.
  3. Copie el archivo translation.json de la ubicación /apps/ws/locales/en-US a la ubicación /apps/ws/locales/nw .
  4. Vaya a /apps/ws/locales/nw y abra translation.json para editarlo. Realice cambios específicos de la configuración regional en el archivo translate.json.
    Los siguientes ejemplos contienen el archivo translate.json para las configuraciones regionales en inglés y francés del espacio de trabajo de AEM Forms.

Localización de categorías contraídas, colas y procesos

El espacio de trabajo de AEM Forms utiliza imágenes para mostrar encabezados de categorías, colas y procesos. Es necesario un paquete de desarrollo para localizar estos encabezados. Para obtener información detallada sobre la creación de paquetes de desarrollo, consulte Creación de un código de espacio de trabajo de AEM Forms.
En los pasos siguientes, se da por hecho que los nuevos archivos de imagen localizados son Categorías_nw.png , Queue_nw.png y Processes_nw.png . La anchura recomendada de las imágenes es de 19 píxeles.
Para buscar el código de configuración regional del idioma del explorador. Abra https://'[server]:[port]'/lc/libs/ws/Locale.html .
Siga estos pasos para localizar las imágenes:
  1. Con un cliente WebDAV, coloque los archivos de imagen en la carpeta /apps/ws/images .
  2. Vaya a /apps/ws/css . Abra newStyle.css para editar y agregue las siguientes entradas:
    #categoryListBar .content.nw {
         background: #3e3e3e url(../images/Categories_nw.png) no-repeat 10px 10px;
     }
    
    #filterListBar .content.nw {
        background: #3e3e3e url(../images/Queues_nw.png) no-repeat 10px 10px;
    }
    
    #processNameListBar .content.nw {
        background: #3e3e3e url(../images/Processes_nw.png) no-repeat 10px 10px;
    }
    
    
  3. Realice todos los cambios semánticos enumerados en el artículo Personalización del espacio de trabajo.
  4. Vaya a la carpeta js/Runtime/Utility y abra el archivo usersession.js para editarlo.
  5. Busque el código que aparece en el bloque de código original y agregue lang de condición.== 'nw' a la sentencia if:
    // Orignal code
    setLocale = function () {
            var lang = $.trim(i18n.lng());
            if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP')) {
                window.lcWorkspace.locale = 'en-US';
            } else {
                window.lcWorkspace.locale = lang;
            }
        }
    
    
    //new code
     setLocale = function () {
            var lang = $.trim(i18n.lng());
            if (lang === null || lang === '' || (lang !== 'fr-FR' && lang !== 'de-DE' && lang !== 'ja-JP' && lang !== 'nw')) {
                window.lcWorkspace.locale = 'en-US';
            } else {
                window.lcWorkspace.locale = lang;
            }
        }
    
    

Localización del selector de fechas

Se requiere un paquete de desarrollo para localizar la API de datepicker . Para obtener información detallada sobre la creación de paquetes de desarrollo, consulte Creación de un código de espacio de trabajo de AEM Forms.
  1. Descargue y extraiga el paquete de IU de jQuery, vaya a <paquete de IU de jquery extraído> \jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.
  2. Copie el archivo jquery.ui.datepicker-nw.js para el código de configuración regional ahora en las aplicaciones/ws/js/libs/jqueryui y realice cambios específicos de configuración regional en el archivo.
  3. Desplácese hasta apps/ws/js y abra el jquery.ui.datepicker-nw.js archivo para editarlo.
  4. En el archivo main.js, cree un alias para jquery.ui.datepicker-nw.js. El código para crear un alias para el jquery.ui.datepicker-nw.js archivo es:
    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
    
    
  5. Utilice alias jqueryuidatepickernw para incluir el jquery.ui.datepicker-nw.js archivo en todos los archivos que utilizan datepicker. El selector de datos se utiliza en los siguientes archivos:
    • js/runtime/views/outofoffice.js
    • js/runtime/views/searchtemplatedetails.js
    El código de muestra siguiente muestra cómo agregar la entrada de jquery.ui.datepicker-nw.js:
    //Original Code
    define([
        'jquery',
        'underscore',
        'backbone',
        'jqueryui',
        'jqueryuidatepickerja',
        'jqueryuidatepickerde',
        'jqueryuidatepickerfr',
        'slimscroll',
        'usersearchview',
        'logmanagerutil',
        'loggerutil'
    ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, slimScroll, UserSearch, LogManager, Logger) {
    
    
    // Code with Date Picker alias for new language
    define([
        'jquery',
        'underscore',
        'backbone',
        'jqueryui',
        'jqueryuidatepickerja',
        'jqueryuidatepickerde',
        'jqueryuidatepickerfr',
        'jqueryuidatepickernw', // Date Picker alias
        'slimscroll',
        'usersearchview',
        'logmanagerutil',
        'loggerutil'
    ], function ($, _, Backbone, jQueryUI, jQueryUIDatePickerJA, jQueryUIDatePickerDE, jQueryUIDatePickerFR, jQueryUIDatePickerNW, slimScroll, UserSearch, LogManager, Logger) {
    
    
  6. En todos los archivos que utilizan la API de datepicker, cambie la configuración predeterminada de la API de datepicker. La API de datepicker se utiliza en los siguientes archivos:
    • apps\ws\js\runtime\views\searchtemplatedetails.js
    • apps\ws\js\runtime\views\outofoffice.js
    Cambie el siguiente código para agregar la nueva configuración regional:
    if (locale === 'ja-JP') {
       $.datepicker.setDefaults($.datepicker.regional.ja);
    } else if (locale === 'de-DE') {
       $.datepicker.setDefaults($.datepicker.regional.de);
    } else if (locale === 'fr-FR') {
       $.datepicker.setDefaults($.datepicker.regional.fr);
    } else {
       $.datepicker.setDefaults($.datepicker.regional['']);
    }
    
    
    if (locale === 'ja-JP') {
        $.datepicker.setDefaults($.datepicker.regional.ja);
    } else if (locale === 'de-DE') {
        $.datepicker.setDefaults($.datepicker.regional.de);
    } else if (locale === 'fr-FR') {
        $.datepicker.setDefaults($.datepicker.regional.fr);
    } else if (locale === 'nw') {
        $.datepicker.setDefaults($.datepicker.regional.nw);
    } else {
        $.datepicker.setDefaults($.datepicker.regional['']);
    }