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:
Antes de executar as etapas acima, siga as etapas listadas em Etapas genéricas para personalização do espaço de trabalho AEM Forms.
Para alterar o idioma da tela de logon da área de trabalho do AEM Forms, consulte Criar uma nova tela de logon.
Execute as seguintes etapas para adicionar suporte para um idioma Novo e o código de localidade do navegador novo.
Efetue login no CRXDE Lite.
O URL padrão do CRXDE Lite é https://[server]:[port]/lc/crx/de/index.jsp
.
Navegue até o local apps/ws/locales
e crie uma nova pasta nw.
Copie o arquivo translation.json
do local /apps/ws/locales/en-US
para o local /apps/ws/locales/nw
.
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.
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.
Para localizar o código de idioma do navegador do seu navegador. Abrir 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 na pasta /apps/ws/images.
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;
}
Execute todas as alterações semânticas listadas no artigo Personalização da Workspace.
Navegue até a pasta 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:
// 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;
}
}
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.
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.
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.
Navegue até apps/ws/js
e abra o arquivo jquery.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 o arquivo jquery.ui.datepicker-nw.js
é:
jqueryuidatepickernw : pathprefix + 'libs/jqueryui/jquery.ui.datepicker-nw'
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) {
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:
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['']);
}