Histórico da Página
...
A técnica para tradução de label, possui como base as recomendações de i18n do PO UI (https://po-ui.io/documentation/po-i18n) com algumas características adicionais. A seguir serão apresentadas alguns trechos de código que representam a utilização desta técnica de tradução em conjunto com formulários dinâmicos.
Para diferenciar as labels que a label que devem ser traduzidastraduzida, deve-se inserir a key de tradução entre os caracteres " chaves". Exemplo: { key }.
Bloco de código | ||||
---|---|---|---|---|
| ||||
... ASSIGN jObj = NEW JsonObject(). jObj:add('divider', "Itens da UPC"). jObj:add('property', 'codUsuario'). jObj:add('label', '~{~{user~}~}'). jObj:add('visible', TRUE). jObj:add('required', TRUE). jObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). jObj:add('gridColumns', 6). oFields:add(jObj). ... |
...
Conforme a arquitetura de customização apresentada anteriormente, deve-se aguardar o resultado da requisição ao serviço metadata e posteriormente, efetuar os seus devidos tratamentos de tradução.
Bloco de código | ||||
---|---|---|---|---|
| ||||
... this.service.getMetadata().subscribe(resp => { this.service.setFieldList(resp['items']); this.fields = this.service.getFieldList(false, this.literals); this.showLoading = false; }); ... |
...
Para que o ponto de tradução seja único e compatível com as técnicas recomendadas pelo PO UI, deve-se efetuar o tratamento no Front-end. Recomenda-se que seja realizado na função que retorna a lista de 'fields' pois neste momento, foram são carregados todos os campos que posteriormente são apresentados na interfacecorrespondentes à tela.
Bloco de código | ||||
---|---|---|---|---|
| ||||
... public getFieldList(update, literals) { // ajusta alista de campos para habilitar ou nao a chave primaria se for CREATE let fields: Array<any> = []; if (this.fieldList.length > 0) { this.fieldList.forEach((data) => { if (data['label'] !== undefined) { const key = data['label'].replace('{{', '').replace('}}', ''); if (literals[key] !== undefined) { data['label'] = literals[key]; } } if (data['options'] !== undefined) { let options = data['options']; options.forEach((option) => { const key = option['label'].replace('{{', '').replace('}}', ''); if (literals[key] !== undefined) { option['label'] = literals[key]; } }); } fields.push(data); }); } return fields; } ... |
...
A arquitetura de tradução do PO UI cita: "... Existe também a possibilidade de utilizar ambos, onde será feito a busca das literais nas constantes e depois efetua a busca no serviço ...", portanto é recomendado pode-se configurar os arquivos de tradução com um serviço (URL) que retorna as literais adicionais desenvolvidas no "Back-end", sendo assim, um complemento ao arquivo.
Observação: O exemplo da URL abaixo não segue as recomendações do PO UI (api/translations/idiomas). Foi desenvolvido em uma estrutura diferente para facilitar os códigos a conceito de POC.
...
Para o endpoint de tradução, é recomendado utilizar pode ser utilizado uma chamada UPC conforme trecho de código a seguir:
...
A Procedure correspondente ao serviço (URL) citado anteriormente, deve retornar um objeto no formato JSon JSON de acordo com o idioma enviado por parâmetro.
Nota | ||
---|---|---|
| ||
O exemplo a seguir efetua o tratamento somente do parâmetro "language". Segundo a documentação do PO UI, outros parâmetros (context, literals) podem ser enviados, sendo necessária uma futura implementação de seu recebimento no Back-End. |
...