Cambiar la configuración regional de la interfaz de usuario de AEM Forms Workspace changing-the-locale-of-aem-forms-workspace-user-interface

CAUTION
AEM 6.4 ha llegado al final de la compatibilidad ampliada y esta documentación ya no se actualiza. Para obtener más información, consulte nuestra períodos de asistencia técnica. Buscar las versiones compatibles here.

El espacio de trabajo de AEM Forms es compatible de serie con los idiomas inglés, francés, alemán y japonés. También permite localizar la interfaz de usuario de AEM Forms Workspace en cualquier otro idioma.

Para localizar la interfaz de usuario de AEM Forms Workspace en el idioma que elija haga lo siguiente:

  • Localice el texto de AEM Forms Workspace.
  • Localice las categorías contraídas, las colas y los procesos.
  • Localice el selector de fechas

Antes de realizar los pasos anteriores, asegúrese de seguir los pasos enumerados en Pasos genéricos para personalizar AEM Forms Workspace.

NOTE
Para cambiar el idioma de la pantalla de inicio de sesión de AEM Forms Workspace, consulte Crear una nueva pantalla de inicio de sesión.

Localizar texto localizing-text

Realice los siguientes pasos para agregar compatibilidad con un idioma Nuevo y el código de configuración regional del explorador nw.

  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. Navegue hasta la ubicación apps/ws/locales y cree una carpeta nueva nw.

  3. Copie el archivo translation.json desde la ubicación /apps/ws/locales/en-US a la ubicación /apps/ws/locales/nw.

  4. Navegue hasta /apps/ws/locales/nw y abra translation.json para editarlo. Realice cambios específicos de la configuración regional en el archivo translation.json.

    Los siguientes ejemplos contienen el archivo translation.json para las configuraciones regionales en inglés y francés de AEM Forms Workspace.

    translation_json_in_es translation_json_in_fr

Localización de categorías, colas y procesos contraídos localizing-collapsed-categories-queues-and-processes

El espacio de trabajo de AEM Forms utiliza imágenes para mostrar encabezados de categorías, colas y procesos. Se necesita un paquete de desarrollo para localizar estos encabezados. Para obtener información detallada sobre la creación de paquetes de desarrollo, consulte Crear el 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 Categories_nw.png, Queue_nw.png y Processes_nw.png. La anchura recomendada de las imágenes es de 19 píxeles.

NOTE
Para encontrar el código de configuración regional del idioma del explorador. Abra https://[server]:[port]/lc/libs/ws/Locale.html.

contraer_paneles_imagen

Siga estos pasos para localizar las imágenes:

  1. Mediante un cliente WebDAV, coloque los archivos de imagen en la carpeta /apps/ws/images.

  2. Navegue hasta /apps/ws/css. Abra newStyle.css para editar y agregar las siguientes entradas:

    code language-none
    #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 Personalizar el espacio de trabajo.

  4. Vaya a la js/runtime/utilidad y abra el archivo usuariesession.js* para editarlo.

  5. Busque el código que aparece en el bloque de código original y agregue la condición lang !== 'nw' a al enunciado if:

    code language-none
    // 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;
            }
        }
    
    code language-none
    //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;
            }
        }
    

Localizar el selector de fechas localizing-date-picker

Se necesita un paquete de desarrollo para localizar la API *datepicker *API. Para obtener información detallada sobre la creación de paquetes de desarrollo, consulte Crear el código de espacio de trabajo de AEM Forms.

  1. Descargue y extraiga el Paquete de IU de jQuery, navegue hasta <extracted jquery UI package>\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 apps/ws/js/libs/jqueryui y realice cambios específicos de configuración regional en el archivo.

  3. Navegue hasta apps/ws/js y abra el archivo jquery.ui.datepicker-nw.js 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 archivo jquery.ui.datepicker-nw.js es:

    code language-none
    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
    
  5. Use el alias jqueryuidatepickernw para incluir el archivo jquery.ui.datepicker-nw.js en todos los archivos que utilizan el selector de fecha. El selector de fecha se utiliza en los siguientes archivos:

    • js/runtime/views/outofoffice.js
    • js/runtime/views/searchtemplatedetails.js

    El siguiente código de ejemplo muestra cómo agregar la entrada de jquery.ui.datepicker-nw.js:

    code language-none
    //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 language-none
    // 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. Cambie la configuración predeterminada de la API en todos los archivos que utilizan la API del selector de fecha. La API del selector de fecha 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:

    code language-none
    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['']);
    }
    

hasta

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['']);
}
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da