Alteração da localidade da interface de usuário do espaço de trabalho AEM Forms

A área de trabalho do AEM Forms oferece suporte imediato para idiomas inglês, francês, alemão e japonês. Também oferece a capacidade de localizar a interface do usuário do espaço de trabalho AEM Forms para qualquer outro idioma.

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

  • Localize o texto da área de trabalho do AEM Forms.
  • Localize categorias recolhidas, filas e processos.
  • Localizar o seletor de datas

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

OBSERVAÇÃO

Para alterar o idioma da tela de logon da área de trabalho do AEM Forms, consulte Criar uma nova tela de logon.

Localizando texto

Execute as seguintes etapas para adicionar suporte para um idioma Novo e o código de localidade do navegador novo.

  1. Efetue login no CRXDE Lite.

    O 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 nova 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 à localidade no arquivo Translation.json.

    Os exemplos a seguir contêm o arquivo Translation.json para localidades inglesas e francesas da área de trabalho do AEM Forms.

    Translation_json_in_ entranslation_json_in_fr

Localizando categorias recolhidas, filas e processos

A área de trabalho do AEM Forms 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 o pacote de desenvolvimento, consulte Criando o código de espaço de trabalho AEM Forms.

Nas etapas a seguir, presume-se que os novos arquivos de imagem localizados sejam Categoria_nw.png, Queue_nw.png e Processes_nw.png. A largura recomendada das imagens é de 19x.

OBSERVAÇÃO

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

collapsing_panel_image

Execute as seguintes etapas para localizar as imagens:

  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 editar e adicionar as seguintes 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. Execute todas as alterações semânticas listadas no artigo Personalização da 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:

    // 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;
            }
        }
    

Localizando o seletor de datas

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

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

  2. Copie o arquivo jquery.ui.datepicker-nw.js para código de localidade agora em 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 é:

    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 datepicker é 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:

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

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

    Altere o seguinte código para adicionar a nova localidade:

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

para

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

Nesta página

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now