Personalizando o teclado nos aplicativos Firefox OS

Status do aplicativo Teclado interno do Gaia e arquitetura do sistema

As duas principais funcionalidades do teclado foram implementadas no Firefox OS em outubro de 2013.

• Uma opção de compilação para ativar/desativar dicionários no teclado/corretor ortográfico no aplicativo de teclado padrão (veja bug 884752).
• Um recurso no nível do sistema operacional que possibilita aos usuários instalar teclado de terceiros adquiridos no Firefox Marketplace. Disponível a partir do Firefox OS 2.0. Veja  bug 816869 e bug 964670 para detalhes.

Para incluir um novo layout de teclado no seu celular, você pode colocar arquivo de layout customizado no Gaia e fazer o aplicativo do teclado usando as configurações ou desenvolvendo seu próprio aplicativo de teclado e instalando no seu dispositivo. Vamos dar uma olhada de como fazer cada um destes. 

Como criar o aplicativo de teclado

Você pode usar o aplicativo de teclado que vem no Gaia como um modelo, ou fazer um fork do seu repositório. As ideias básicas são:

• No arquivo de manifesto, declare seu aplicativo como input na propriedade role.
• Certifique-se que você tem a permissão de input especificada.

Depois disso, você pode instalar seu teclado, e ele será mostrado na metade inferior da tela toda vez que o usuário focar em um campo de entrada de dados. O problema do espaço que surge disto pode ser resolvido da seguinte forma:

• Usando o velho e clássico window.resizeTo para atualizar a área que o seu aplicativo deve ocupar.
• Usando a nova API navigator.mozInputMethod para transformar o conteúdo da entrada; veja na Mozilla Wiki a página da API KeyboardIME para detalhes. Muitos destes métodos retornam os mesmos caracteres, mas geram diferentes eventos (KeyboardEvent, CompositionEvent, etc), então verifique se você está utilizando o método certo para o seu caso.

Talvez você ache em LOL Keyboard um exemplo mais fácil de compreender.

Como criar/adicionar um layout no aplicativo de teclado do Gaia

1. Veja os detalhes de configuração do teclado para maiores informações. Dependendo do idioma em que você quer incluir um dicionário, ou incluir um IME interativo (para idiomas asiáticos).
2. Se você adicionar layouts para um novo idioma suportado, você pode querer adicioná-los como layouts padrões do idioma em build/config/keyboard-layouts.json.

Asian IME

Idiomas orientais (Chinês, Japonês, e Coreano) usam um script bastante complexo que envolve milhares de caracteres. Como não há como colocar milhares de teclas em um teclado, os usuários contam com um programa de indexação chamado editor de método de entrada, ou IME (sigla em inglês para Input Method Editor) para facilitar, que converte uma série de símbolos em uma seleção de caracteres.

Como os símbolos devem ser convertidos a o quão "esperto" o IME deve ser depende do método escolhido, da própria implementação e muitas vezes da ciência do PLN (que está fora do escopo desse documento). A fim de economizar memória, é recomendável que os dados sejam compilados em um blob binário e consultados em um array buffer; estruturas JSON complexas não funcionarão nos dispositivos atuais.

Interface com IM Engine no aplicativo de teclado do Gaia

Assumindo que você tem uma biblioteca IME disponível para converter símbolos em caracteres (''IM Engine'' na nossa terminologia), você necessitará de uma interface definida com o aplicativo de teclado para receber os símbolos do layout e gerar os caracteres. A API atual está documentada no Github.

Nós convidamos aos implementadores a realizar alguns refinamentos nessa API.

Faça sua "IM engine" funcionar com o seu layout

Para fazer sua IM engine funcionar com o seu layout de teclado:

1. Coloque o novo layout em layout.js como descrito na seção anterior.
2. Referencie o IM engine com a propriedade imEngine. Quando o seu layout for habilitado, o aplicativo de teclado carregará o script localizado em keyboard/js/imes/<imEngine>/<imEngine>.js.
3. Configure as APIs para receber e enviar teclas/caracteres quando o script for carregado e inicializado (init).
4. Faça o que quiser em resposta à entrada do usuário. Quando o usuário tocar qualquer tecla, deve tipicamente enviar o comando para o IM engine.

Implementações conhecidas

• JSZhuyin é a primeira implementação do teclado Gaia com Asian IM engine, para chinês tradicional, incorporando Zhuyin IME.
• JSKanji é um protótipo de IM engine escrito para japonês.
• JSPinyin escrito para chinês simplificado e funciona com símbolos Pinyin .
• Como uma demonstração, Chewing, um Zhuyin IME em código aberto C/C++ para chinês tradicional, foi cross-compilado com emscripten e conectado ao teclado Gaia.
• JSHangul é um prototipo de IM engine para coreano e está atualmente em desenvolvimento.

Novas localizações sob a perspectiva dos localizadores

Geralmente duas coisas são necessárias: um teclado e um dicionário (para a função de texto preditivo).

Criando um layout

O layout do teclado fica em um arquivo JavaScript e define quais teclas estão no teclado e quais letras ou símbolos são resultados das opções disponíveis através do pressionamento longo. O caminho mais fácil é pegar um teclado existente no GitHub, renomeá-lo e então ajustá-lo.

Primeiramente, você precisa alterar o header. Vamos supor que o seu teclado é similar ao en-US e a localização que você deseja é o Escocês Gaélico (gd). Então você altera (usando um editor simples como Notepad++) de:

Keyboards.en = {
 label: 'English',
 shortLabel: 'En',
 imEngine: 'latin',
 types: ['text', 'url', 'email', 'number', 'password'],
 autoCorrectLanguage: 'en_us',
 menuLabel: 'English',

para:

Keyboards.gd = {
 label: 'Scottish Gaelic',
 shortLabel: 'gd',
 imEngine: 'latin',
 types: ['text', 'url', 'email', 'number', 'password'],
 autoCorrectLanguage: 'gd_gb',
 menuLabel: 'Gàidhlig',

o campo label deve conter o nome do seu idioam em inglês, o campo shortLabel deve conter três caracteres no máximo; é uma abreviação que irá aparecer na tela do teclado, para o usuário saber que idioma ele está atualmente usando. Você pode usar a codificação ISO, mas você deve usar outra coisa mais apropriada. O campo menuLabel é o nome do seu idioma escrito no seu idioma: é o que irá aparecer no menu de opções.

Agora, a única coisa que provavelmente você vai querer mexer são os caracteres alternativos (aquele que você acessa via a interface do usuário através de um toque longo):

alt: {
  a: 'áàâäåãāæ',
  c: 'çćč',
  e: 'éèêëēę€ɛ',
  i: 'ïíìîīį',
  o: 'öõóòôōœøɵ',
  u: 'üúùûū',
  s: 'ßśš$',
  S: 'ŚŠ$',
  n: 'ñń',
  l: 'ł£',
  y: 'ÿ¥',
  z: 'žźż',
  '.': ',?!;:'
},

Você pode alterar tanto a ordem como a quantidade dos caracteres alternantivos. No nosso caso, devido ao fato do Gaélico utilizar o acento grave mais vezes que o agudo, nós trocamos a ordem para:

a: 'àáâäåãāæ',

Nós também podemos querer dar a opção de consoantes com trema, então podemos adicionar novas linhas como:

b: 'ḃ',

Você provavelmente também vai querer verificar o layout alternativo (o que fornece números, pontuação, etc) e se o símbolo da moeda aparece corretamente.

Criando um dicionário

É bom ter um dicionário também para não seja necessário que o usuário insira todas as palavras, e que ele ainda tenha alguma precisão sobre elas. Para isso você precisa (idealmente) classificar as palavras de acordo com a frequência. Por exemplo, é mais provável que o usuário queira digitar quando ao digitar qua que quasar, então a palavar quando será sugerida antes de quasar.

Isso é feito atribuindo números de 1 (menos frequente) até 255 (mais frequente) para cada palavra (ou linha) no dicionário (um arquivo xml; você pode verificar um já existente aqui). Isso é o que você precisa criar:

<wordlist locale="gd" description="Gàidhlig" date="1401554807" version="1">
 <w f="255" flags="">a</w>
 <w f="254" flags="">an</w>
 <w f="247" flags="">agus</w>

Mesmo um conjunto pequeno (por exemplo, utilizar um texto grante e verificar a frequencia de cada palavra) pode ajudar. Caso seja difícil encontrar textos digitais no seu idioma, use seu conhecimento e classifique as palavras manualmente.

Compilando os arquivos

Uma vez que você tenha o js e o arquivo do dicionário, vá para esse diretório Gaia e abra o Makefile. Inclua o nome do seu dicionário à lista (por exemplo, se o nome do arquivo for gd_wordlist.xml), coloque:

ga.dict \
gd.dict \

Certifique-se que o arquivo gd_worldlist.xml esteja no diretório e execute $ make gd.dict

Se você chegou até aqui mas não conseguiu criar o arquivo .dict, registre um bug (Component: Gaia Keyboard) e anexe seu arquivo explicando qual o problema encontrado. Alguém o ajudará. Certifique-se de enviar a correção como um pull request, e marcar para a revisão de alguém, de outra forma, provavelmente o bug não irá ser verificado.

Testando sua nova localização

Uma vez que você (ou alguém) compilou os arquivos para a nova localização, a forma mais rápida de testar o novo teclado e dicionário é em uma página demo on-line e web-based que executa o aplicativo app, que pode ser acessada aqui. Clique em En para navegar pelos idiomas. Se você não encontrar o seu, clique no ícone da chave (canto superior direito) e selecione quais teclados você deseja testar.

Discussões, Perguntas e Respostas

Por favor visite a lista de emails dev-gaia ou o canal #gaia no irc.mozilla.org (veja Mozilla IRC). #mozilla-taiwan é o canal "de-facto" em chinês para esse tópico.