DocumentaçãoAEM 6.5Guia do usuário

Alterando o local da interface do usuário do espaço de trabalho do AEM Forms changing-the-locale-of-aem-forms-workspace-user-interface

Last update: Mon Jul 15 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Tópicos:

Criado para:

  • undefined
  • undefined

O espaço de trabalho do AEM Forms oferece suporte imediato para os idiomas inglês, francês, alemão e japonês. Ela também permite localizar a interface do usuário do AEM Forms Workspace em qualquer outro idioma.

Para localizar a interface do usuário do espaço de trabalho do AEM Forms no idioma de sua escolha:

  • Localize o texto do espaço de trabalho do AEM Forms.
  • Localizar categorias, filas e processos recolhidos.
  • Localizar Seletor de Data

Antes de executar as etapas acima, siga as etapas listadas em Etapas genéricas para personalização do espaço de trabalho do AEM Forms.

NOTE
Para alterar o idioma da tela de logon do espaço de trabalho do AEM Forms, consulte Criando uma tela de logon.

Localização de texto localizing-text

Execute as etapas a seguir para adicionar suporte a um idioma Novo e ao código de localidade do navegador novo.

  1. Efetue logon no CRXDE Lite.
    A URL padrão do CRXDE Lite é https://'[server]:[port]'/lc/crx/de/index.jsp.

  2. Navegue até o local apps/ws/locales e crie uma pasta nw.

  3. Copie o arquivo translation.jsondo local /apps/ws/locales/en-US para o local /apps/ws/locales/nw.

  4. Navegue até /apps/ws/locales/nw e abra translation.json para edição. Faça alterações específicas da localidade no arquivo translation.json.

    Os exemplos a seguir contêm o arquivo translation.json para os códigos de idioma inglês e francês do espaço de trabalho do AEM Forms.

    translation_json_in_en translation_json_in_fr

Localização de categorias, filas e processos recolhidos localizing-collapsed-categories-queues-and-processes

O AEM Forms workspace usa imagens para exibir cabeçalhos de categorias, filas e processos. Você precisa de um pacote de desenvolvimento para localizar esses cabeçalhos. Para obter informações detalhadas sobre como criar um pacote de desenvolvimento, consulte Criação do código do espaço de trabalho do AEM Forms.

Nas etapas a seguir, presume-se que os novos arquivos de imagem localizados sejam Categories_nw.png, Queue_nw.png e Processes_nw.png. A largura recomendada das imagens deve ser definida como 19 pixels.

NOTE
Para encontrar o código de localidade do idioma do navegador do seu navegador. Abrir https://'[server]:[port]'/lc/libs/ws/Locale.html.

recolhendo_imagens_de_painéis

Para localizar as imagens, execute as seguintes etapas:

  1. Usando um cliente WebDAV, coloque os arquivos de imagem na pasta /apps/ws/images.

  2. Navegue até /apps/ws/css. Abra newStyle.css para edição e adicione as seguintes entradas:

    code language-css 
    #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. Execute todas as alterações semânticas listadas no artigo Personalização do Workspace.

  4. Navegue até a pasta js/runtime/utility e abra o arquivo usersession.js para edição.

  5. Localize o código listado no bloco de código original e adicione a condição lang!== 'nw' para a instrução if:

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

Seletor de Data de Localização localizing-date-picker

Você precisa de um pacote de desenvolvimento para localizar a API datepicker. Para obter informações detalhadas sobre como criar um pacote de desenvolvimento, consulte Criação do código do espaço de trabalho do AEM Forms.

  1. Baixe e extraia o Pacote da interface do usuário do jQuery, navegue até <pacote da interface do usuário do jquery extraído>\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.

  2. Copie o arquivo jquery.ui.datepicker-nw.js do código de localidade nw para apps/ws/js/libs/jqueryui e faça alterações específicas de localidade no arquivo.

  3. Navegue até apps/ws/js e abra o arquivo jquery.ui.datepicker-nw.js para edição.

  4. No arquivo main.js, crie um alias para jquery.ui.datepicker-nw.js. O código para criar um alias para o arquivo jquery.ui.datepicker-nw.js é:

    code language-javascript 
    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'

  5. Use o alias jqueryuidatepickernw para incluir o arquivo jquery.ui.datepicker-nw.js em todos os arquivos que usam o datepicker. O seletor de datas é usado nos seguintes arquivos:

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

    O código de amostra abaixo mostra como adicionar a entrada de jquery.ui.datepicker-nw.js:

    code language-json 
    //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-json 
    // 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. Em todos os arquivos que usam a API do datepicker, altere as configurações padrão da API do datepicker. A API do datepicker é usada nos seguintes arquivos:

    • apps\ws\js\runtime\views\searchtemplatedetails.js
    • apps\ws\js\runtime\views\outofoffice.js

    Altere o código a seguir para adicionar o novo local:

    code language-javascript 
    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['']);
}
    code language-javascript 
    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
19ffd973-7af2-44d0-84b5-d547b0dffee2