Histórico da Página
...
Método | Descrição | Assinatura/Exemplo |
---|---|---|
convertAblTypeToHtmlType | Converte os tipos nativos do Progress para os tipos esperados pelo PO-UI | Assinatura: convertAblTypeToHtmlType (INPUT cType AS CHARACTER) Exemplo: ASSIGN cType = JsonAPIUtils:convertAblTypeToHtmlType ("integer"). O retorno no cType será "number", que é um formato reconhecido pelo PO-UI. |
convertToCamelCase | Converter os nomes dos campos lidos da tabela, normalmente com "_", para "camel case", que é o mais comum utilizado em Json's. | Assinatura: convertToCamelCase (INPUT cKey AS CHARACTER) Exemplo: ASSIGN cField= JsonAPIUtils:convertToCamelCase ("cod_e_mail_usuar"). O retorno no cField será "codEMailUsuar", que é o campo em Camel Case. |
getIdField | Retorna um campo do tipo ID para ser adicionado na lista de campos do Metadata. Este campo serve como chave do registro nos tratamentos de CRUD na parte HTML. | Assinatura: getIdField() Exemplo: oIdiomas:add( JsonAPIUtils:getIdField() ). |
09.
...
TÉCNICA PARA TRADUÇÃO
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 devem ser traduzidas, deve-se inserir a key de tradução entre os caracteres "chaves". Exemplo: { key }.
Bloco de código | ||||
---|---|---|---|---|
| ||||
...
|
...
breve descricao
Bloco de código |
---|
... ASSIGN oObjjObj = NEW JsonObject(). oObjjObj:add('divider', "Itens da UPC"). jObj:add('property', 'codIdiomacodUsuario'). oObjjObj:add('label', "'~{~{language~user~}~}"'). oObjjObj:add('visible', TRUE). oObjjObj:add('disablerequired', TRUE). oObjjObj:add('type', JsonAPIUtils:convertAblTypeToHtmlType('character')). oObjjObj:add('gridColumns', 6). oIdiomasoFields:add(oObjjObj). ... |
No Front-endConforme a arquitetura de customização apresentada anteriormente, deve-se efetuar a substitução para que as literais aguardar o resultado da requisição ao serviço metadata e efetuar os seus devidos tratamentos.
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 carregados todos os campos que posteriormente são apresentados na interface.
Bloco de código | ||||
---|---|---|---|---|
| ||||
...
| ||||
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; } ... |
Exemplo de chamadas
Bloco de código |
---|
...
// carrega a lista de campos somente apos receber o registro a ser apresentado
this.fields = this.service.getFieldList(false, this.literals);
if (this.fields === null || this.fields.length === 0) {
this.service.getMetadata().subscribe(data => {
this.fields = data['items'];
this.service.setFieldList(this.fields);
this.showLoading = false;
});
}
... |
Avaisjdioasjdi aisodjsiad
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 configurar os arquivos de tradução com um serviço (URL) que retorna as literais adicionais desenvolvidas no "Back-end".
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.
Bloco de código | ||||
---|---|---|---|---|
| ||||
... const i18nConfig: PoI18nConfig = { default: { language: 'pt-BR', context: 'general', cache: false }, contexts: { general: { 'pt-BR': generalPt, 'en-US': generalEn, url: 'api/trn/v1/idiomas/translations' } } }; ... |
Definição das literais no back-end
Para o endpoint de tradução, é recomendado utilizar uma chamada UPC conforme trecho de código a seguir:
Bloco de código | ||||
---|---|---|---|---|
| ||||
...
{utp/ut-api-action.i pIdiomas GET /translations/~* }
...
/* | ||||
Bloco de código | ||||
/**
Recupera as literais
*/
PROCEDURE pIdiomas:
DEFINE INPUT PARAMETER oJsonInput AS JsonObject NO-UNDO.
DEFINE OUTPUT PARAMETER oJsonOutput AS JsonObject NO-UNDO.
// Realiza a chamada da UPC Progress
{include/i-epcrest.i &endpoint=i18n &event=i18n &jsonVar=oJsonInput}
ASSIGN oJsonOutput = oJsonInput.
END PROCEDURE. |
A Procedure correspondente ao serviço (URL) citado anteriormente, deve retornar um objeto no formato 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. |
Bloco de código | ||||
---|---|---|---|---|
| ||||
...
IF pEndPoint = "i18n"
AND pEvent = "i18n" THEN DO ON STOP UNDO, LEAVE:
RUN piI18N.
END.
...
PROCEDURE piI18N:
DEFINE VARIABLE oParser AS JsonAPIRequestParser NO-UNDO.
DEFINE VARIABLE oQueryParams AS JsonObject NO-UNDO.
DEFINE VARIABLE pIdioma AS CHARACTER NO-UNDO.
ASSIGN
oParser = NEW JsonAPIRequestParser(jsonIO)
oQueryParams = oParser:GetQueryParams()
pIdioma = oQueryParams:GetJsonArray("language"):GetCharacter(1).
IF (pIdioma = "pt-BR") THEN DO:
jsonIO = NEW JsonObject().
jsonIO:Add("user", "Usu rio").
jsonIO:Add("name", "Nome").
jsonIO:Add("regexTestValidation", "Teste Valida‡Æo REGEX").
jsonIO:Add("cpfMaskApply", "Aplica‡Æo M scara CPF").
jsonIO:Add("onlyNumbers", "Somente N£meros").
END.
ELSE IF (pIdioma = "en-US") THEN DO:
jsonIO = NEW JsonObject().
jsonIO:Add("user", "User").
jsonIO:Add("name", "Name").
jsonIO:Add("regexTestValidation", "REGEX Test Validation").
jsonIO:Add("cpfMaskApply", "CPF Apply Mask").
jsonIO:Add("onlyNumbers", "Only Numbers").
END.
END PROCEDURE. |
...
- Migração THF PO-UI (https://po-ui.io/guides/migration-thf-to-po-ui)
- Dynamic-Form (https://po-ui.io/documentation/po-dynamic-form);
- Dynamic-View (https://po-ui.io/documentation/po-dynamic-view);
- Page-Dynamic-Detail (https://po-ui.io/documentation/po-page-dynamic-detail);
- Page-Dymic-Edit (https://po-ui.io/documentation/po-page-dynamic-edit);
- Page-Dynamic-Search (https://po-ui.io/documentation/po-page-dynamic-search);
- Page-Dynamic-Table (https://po-ui.io/documentation/po-page-dynamic-table);
- I18N (https://po-ui.io/documentation/po-i18n)
GIT Projeto:
fwk-tools-jille/DATASUL/customization-poui/ ( https://github.com/totvs/fwk-tools-jille )
...