Alteração do local da interface do usuário do AEM Forms workspace changing-the-locale-of-aem-forms-workspace-user-interface
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.
Localização de texto localizing-text
Execute as etapas a seguir para adicionar suporte a um idioma Novo e o código de local do navegador nw.
-
Faça logon no CRXDE Lite.
O URL padrão do CRXDE Lite é
https://[server]:[port]/lc/crx/de/index.jsp
. -
Navegar até o local
apps/ws/locales
e criar uma nova pastanw.
-
Copiar o arquivo
translation.json
do local/apps/ws/locales/en-US
para localização/apps/ws/locales/nw
. -
Navegar para
/apps/ws/locales/nw
e abrirtranslation.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.
Localização de categorias, filas e processos recolhidos localizing-collapsed-categories-queues-and-processes
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.
https://[server]:[port]/lc/libs/ws/Locale.html
.
Execute as seguintes etapas para localizar as imagens:
-
Usando um cliente WebDAV, coloque os arquivos de imagem no /apps/ws/images pasta.
-
Navegar para /apps/ws/css. Abrir newStyle.css para editar e adicionar as seguintes 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; }
-
Execute todas as alterações semânticas listadas no Personalização do Workspace artigo 10. o
-
Navegue até o js/runtime/utility e abra o arquivo* usersession.js* para edição.
-
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-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; } }
Localizando seletor de datas localizing-date-picker
Você precisa de um pacote de desenvolvimento para localizar a API *datepicker *. 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.
-
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.
-
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 .
-
Navegar para
apps/ws/js
e abra ojquery.ui.datepicker-nw.js
para edição. -
No arquivo main.js, crie um alias para
jquery.ui.datepicker-nw.js.
O código para criar um alias para a variáveljquery.ui.datepicker-nw.js
O arquivo é:code language-none jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
-
Usar alias
jqueryuidatepickernw
para incluir ajquery.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:
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) {
-
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:
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['']); }
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['']);
}