Alteração do local da interface do usuário do AEM Forms workspace

A AEM Forms workspace oferece suporte pronto para uso para idiomas inglês, francês, alemão e japonês. Também fornece a capacidade de localizar a interface do usuário do AEM Forms workspace para qualquer outro idioma.

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

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

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.

OBSERVAÇÃO

Para alterar o idioma da tela de logon do espaço de trabalho do AEM Forms, consulte Criação de uma nova tela de logon.

Localização de texto

Execute as etapas a seguir para adicionar suporte a um idioma Novo e o código de local do navegador nw.

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

  2. Navegar até o local apps/ws/locales e criar uma nova pasta nw.

  3. Copiar o arquivo translation.jsondo local /apps/ws/locales/en-US para localização /apps/ws/locales/nw .

  4. Navegar para /apps/ws/locales/nw e abrir 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 as localidades em 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

O espaço 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 a criação de pacotes 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 é de 19px.

OBSERVAÇÃO

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

recolher_painéis_imagem

Execute as seguintes etapas para localizar as imagens:

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

  2. Navegar para /apps/ws/css. Abrir 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 Personalização do Workspace artigo 10. o

  4. Navegue até o js/runtime/utility e abra o 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 seletor de datas

Você precisa que o pacote de desenvolvimento localize o datepicker API. Para obter informações detalhadas sobre a criação de pacotes 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é <extracted jquery="" ui="" package="">\jquery-ui-1.10.2.zip\jquery-ui-1.10.2\ui\i18n.

  2. Copie o arquivo jquery.ui.datepicker-new.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. Navegar para apps/ws/js e abra o 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 a variável jquery.ui.datepicker-nw.js O arquivo é:

    jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
    
  5. Usar alias jqueryuidatepickernw para incluir a jquery.ui.datepicker-nw.js em todos os arquivos que usam 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-new.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 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 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['']);
    }
    
    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