---
title: Internacionalização (i18n)
source: https://tdn.totvs.com/pages/viewpage.action?pageId=185738869
path: \Plataforma  Documentação técnica\Recurso de Páginas e Widgets (WCM)\Estrutura de páginas\Internacionalização (i18n).md
---

# Índice

- 1 [Objetivo](#Internacionalização(i18n)-Objetivo)
- 2 [Conceito e configuração](#Internacionalização(i18n)-Conceitoeconfiguração)
- 3 [Utilização no desenvolvimento](#Internacionalização(i18n)-Utilizaçãonodesenvolvimento)
  - 3.1 [Arquivos de fontes freemarker (.ftl) e javascript (.js)](#Internacionalização(i18n)-Arquivosdefontesfreemarker(.ftl)ejavascript(.js))
    - 3.1.1 [Arquivo .ftl:](#Internacionalização(i18n)-Arquivo.ftl:)
    - 3.1.2 [Arquivo .js:](#Internacionalização(i18n)-Arquivo.js:)
  - 3.2 [Como traduzir propriedades do application.info?](#Internacionalização(i18n)-Comotraduzirpropriedadesdoapplication.info?)
- 4 [Mapeamento de caracteres (text file enconding)](#Internacionalização(i18n)-Mapeamentodecaracteres(textfileenconding))
- 5 [Escape de caracteres (escape character)](#Internacionalização(i18n)-Escapedecaracteres(escapecharacter))

# Objetivo

O objetivo deste guia é apresentar os procedimentos necessários para adaptar a plataforma Fluig para ser traduzida para outros idiomas.

# Conceito e configuração

O conceito de internacionalização ou i18n *(*que, por vezes, também é chamado de "Localização"*)* consiste no desenvolvimento e/ou adaptação de um produto para o idioma de um ou mais países. O acrônimo *"*i18n*"* origina-se do inglês "*internationalization*", onde 18 é o número de letras entre o primeiro *"*i*"* e o último *"*n*"*.

Na plataforma Fluig, o i18n é suportado na forma de arquivos de propriedades distintos para cada idioma. Sempre que for [criado um projeto a partir do Fluig Studio](http://tdn.totvs.com/display/fluig/Criando+um+projeto+Fluig+no+Studio), a estrutura de *i18n* será apresentada conforme o exemplo a seguir:

![](..\..\..\images\i18n_I.png)

Não se engane!

O nome do componente *(widget, layout etc.)* em questão coincide com o prefixo dos arquivos i18n. Este é o comportamento padrão do Studio, mas não é isso que fará com que as funções de i18n funcionem corretamente em seu componente. Dentro do [arquivo application.info](Arquivo application.info.md) deve existir uma propriedade chamada [locale.file.base.name](http://tdn.totvs.com/display/fluig/Arquivo+application.info#Arquivoapplication.info-locale.file.base.name). O importante é que o valor desta propriedade - esse sim - seja o mesmo que o prefixo dos arquivos i18n.

# Utilização no desenvolvimento

Nos arquivos i18n o cadastro deve ser feito da seguinte forma:

```
codigo.da.label=Valor da Label
```

## Arquivos de fontes *freemarker* (.ftl) e *javascript* (.js)

Quando é necessário referenciar o valor da tradução desejada, deve-se utilizar o código *"${i18n.getTranslation('codigo.da.label')}"*.

Em arquivos .js a partir da versão **1.8.3** é possível utilizar o código *"[=i18n.getTranslation('codigo.da.label')]"* para evitar conflitos com template string.

### Arquivo .ftl:

```
<div class="form-group">
	<label for="inputCode_${instanceId}">${i18n.getTranslation('codigo.da.label')}</label>
	<input type="text" class="form-control" id="inputCode_${instanceId}" />
</div>
```

### Arquivo .js:

```
var descricao = '[=i18n.getTranslation("codigo.da.label")]';
ou
var descricao = '${i18n.getTranslation("codigo.da.label")}';
```

## Como traduzir propriedades do application.info?

Algumas propriedades do [application.info](http://tdn.totvs.com/display/fluig/Arquivo+application.info) são utilizadas em telas do sistema, sendo uma delas a tela de seleção de *widgets* na edição de páginas. É obrigatório, portanto, que ao menos as propriedades [application.title](Arquivo application.info.md), [application.description](Arquivo application.info.md) e [application.category](Arquivo application.info.md) sejam traduzidas.

Para que isso seja possível, basta criar essas propriedades com os mesmos códigos que aparecem no application.info nos arquivos i18n. Veja o exemplo a seguir:

```
codigo.da.label=Valor da Label
application.title=Título
application.description=Descrição do Componente
application.category=Categoria Escolhida
```

# Mapeamento de caracteres *(text file enconding)*

É importante ter certeza de que todos os arquivos de seu projeto estejam configurados como **UTF-8**. Normalmente a configuração de mapeamento de caracteres pode ser encontrada em dois lugares.

**Nas propriedades do projeto do eclipse:**

![](..\..\..\images\utf8-a_I.png)

**Ou nas propriedades do próprio fonte:**

![](..\..\..\images\utf8-b_I.png)

# Escape de caracteres (e*scape character*)

Mesmo utilizando os arquivos com mapeamento de caractere UTF-8, é aconselhável utilizar caracteres de *espace* sempre que houver a necessidade de escrever caracteres especiais *(ç, á, é etc.)*. Portanto, a propriedade:

```
window.edit.name=Nome de Exibição
```

torna-se:

```
window.edit.name=Nome de Exibi\u00E7\u00E3o
```

Assim, independentemente do sistema operacional no qual a plataforma Fluig é utilizado, os caracteres especiais sempre são mostrados corretamente. Para que esse processo seja feito de forma produtiva, pode-se utilizar uma das muitas [ferramentas *online* de *character escaping*](https://www.google.com.br/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=online+character+escape).