Inserindo o teclado virtual do Google em sua página

Nesse tutorial vamos ver como inserir o teclado virtual do google em sua página, de forma simples e rápida. O que é um teclado virtual? Um teclado virtual é usado para traduzir a entrada de um layout de teclado para outro.

Por Programação Pular para comentários

Antes de come?ar a mostrar como inserir o teclado virtual na p?gina, vamos entender o que ? um teclado virtual e algumas das suas vantagens.

O que ? um teclado virtual?


Um teclado virtual ? usado para traduzir a entrada de um layout de teclado para outro.

Algumas vantagens do uso do teclado virtual
  • Permite que os usu?rios digitem nos seus pr?prios idiomas em teclados estrangeiros, quando estiverem viajando para fora do pa?s, vivendo em um pa?s no qual o seu idioma n?o ? o idioma oficial e situa?es semelhantes.
  • Para usu?rios incapacitados que n?o conseguem usar um teclado f?sico, o teclado na tela proporciona uma forma alternativa de digitar clicando com o mouse.
  • Outro uso importante para um teclado na tela ? destinado a usu?rios bil?ngues ou multil?ngues que precisam alternar continuamente entre conjuntos de caracteres e/ou alfabetos diferentes.

(texto extra?do do Google Code)


Para come?ar, vamos ver o c?digo da p?gina:

  
    
    
    
    Inserindo o teclado virtual do Google em sua p?gina
  
  
  

Digite algumas palavras no teclado para preencher o campo abaixo.


Vamos entender linha a linha o que est? sendo feito para inserir o teclado virtual do Google.

Linha 4 - Nessa linha ? inserida a API AJAX do Google, para que voc? possa fazer uso das fun?es para inserir o teclado.

Linhas 6, 7 e 8 - Nessas linhas acontecer? o carregamento da fun??o google.load, onde podemos fazer o carregamento das APIs de forma individual. No caso do nosso exemplo estamos usando as chamadas correspondentes ao teclado virtual, onde pasamos os par?metros informando que o pacote (package) a ser utilizado ser? o "keyborad", ou seja, do teclado.

Linhas 9, 10, 11, 12 e 13 - Nessas linhas criamos a fun??o que ir? inserir e vincular o teclado virtual aos campos que dever?o ser preenchidos com o seu uso.

A sintaxe do construtor Keyboard ? a seguinte:
Keyboard(layouts, textfieldIds)

layouts: especifica o layout que ser? carregado.
textfieldIds: ? uma matriz que cont?m os Ids dos campos que estar?o vinculados ao teclado virtual.

Os valores para o argumento layouts devem estar em uma matriz e ser do tipo google.elements.keyboard.LayoutCode, e no nosso caso foi especificado BRAZILIAN_PORTUGUESE, usando a seguinte sintaxe:
[google.elements.keyboard.LayoutCode.BRAZILIAN_PORTUGUESE]


Os tipos suportados s?o:
ALBANIAN, ARABIC, ARMENIAN_EASTERN, ARMENIAN_WESTERN, BASQUE, BELARUSIAN, BENGALI_PHONETIC, BOSNIA, BRAZILIAN_PORTUGUESE, BULGARIAN, CATALAN, CROATIAN, CZECH, CZECH_QWERTZ, DANISH, DUTCH, DEVANAGARI_PHONETIC, ENGLISH, ESTONIAN, ETHIOPIC, FINNISH, FRENCH, GALICIAN,
GEORGIAN_QWERTY, GEORGIAN_TYPEWRITER, GERMAN, GREEK, GUJARATI_PHONETIC, GURMUKHI_PHONETIC, HEBREW, HINDI, HUNGARIAN_10, ICELANDIC, ITALIAN, KANNADA_PHONETIC, KAZAKH, KYRGYZ, LITHUANIAN, LATVIAN, MACEDONIAN, MALAYALAM_PHONETIC, MALTESE, MONGOLIAN_CYRILLIC, MONTENEGRIN, NORWEGIAN, ORIYA_PHONETIC, PERSIAN, POLISH, ROMANI, ROMANIAN, RUSSIAN, SANSKRIT_PHONETIC, SERBIAN_CYRILLIC, SERBIAN_LATIN, SLOVAK, SLOVAK_QWERTY, SLOVENIAN, SPANISH, SWEDISH, TAMIL_PHONETIC, TATAR, TELUGU_PHONETIC, THAI, TURKISH_F, TURKISH_Q, UKRAINIAN_101, UZBEK_LATIN, UZBEK_CYRILLIC_PHONETIC, UZBEK_CYRILLIC_TYPEWRITTER

Para a matriz textfieldIds usamos os IDs dos elementos que dever?o ter o seu preenchimento feito atrav?s do teclado virtual, no nosso caso usamos o ID "tv1".

Linha 14 - ? chamada a fun??o que ser? executada ao carregar a p?gina, e o seu par?metro ? a fun??o onLoad, declarada na linha 9. Ela ir? executar a fun??o onLoad, que criar? o teclado virtual em sua p?gina.

Fa?a o download do arquivo teclado_virtual.zip para que voc? veja o funcionamento do exemplo, mas lembre-se, como a API AJAX do Google ? chamada direto do servidor do mesmo, ent?o ? preciso ter uma conex?o com a internet para que tenha o resultado desejado.
teclado_virtual.zip
Em breve voltaremos com mais tutoriais sobre o teclado virtual do Google.

At? o pr?ximo tutorial!

Compartilhe com seus amigos:
Jonathan Lamim
Jonathan Lamim Empreendedor digital, ex-programador (decidi abandonar a carreira após 12 anos), especialista em marketing de conteúdo e agora atuando exclusivamente com Marketing Digital, em projetos de Marketing de Conteúdo, produção de conteúdo para internet, além de escrever ebooks e criar cursos ligados ao marketing digital de um modo geral.
FACEBOOK // TWITTER: @jonathanlamimkt
Quer conversar com o(a) Jonathan, comente:
Carregar comentários
Quantos celulares a Motorola tem em linha?
5(15,17%)
10(56,67%)
15(11,84%)
20(8,74%)
26(7,59%)