Histórico da Página

...

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 }.

...

...

breve descricao 

...
    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. 

...

    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. 

...

...
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

...
    // 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.  

...

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:

...

{utp/ut-api-action.i pIdiomas GET /translations/~* }

... 

/*

/**
    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.

...

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 )

...