Como a maioria deve saber o significado de RIA é rich internet applications. Há muito tempo atrás, assistindo a um dos screencasts do? Vedovelli, ele falou que o flex é muito rico e que você pode melhorar a experiência dos usuários trabalhando os pequenos detalhes da aplicação. Coisas como limpar os campos e mudança de foco são primordiais para deixar suas aplicações mais intuitivas e fáceis de serem usadas.
Baseado nisso eu passei a prestar um pouco mais de atenção nesses detalhes e uma das coisas que veio ? cabeça foi os eventos de teclado. Claro eu não poderia de deixar de citar meu amigo? @brunoaraujo_id que foi o primeiro que eu vi a manipular esse tipo de evento e quem também me mostrou um exemplo no qual vou mostrar aqui.
Historinhas ? parte, vamos ao que interessa.
Nesse tutorial eu irei (tentarei) explicar como trabalhar com eventos de teclado e também como eles podem ser úteis na sua aplicação.
Primeiro vamos a um simples exemplo para que possamos observar um pouco melhor a classe KeyboardEvent.
Seu browser não suporta iframes.
No exemplo acima tem duas caixas de texto, quando você digita algo na primeira caixa de texto ele exibe na caixa de baixo as propriedades do evento. Nesse primeiro passo nós iremos observar apenas o? charCode e o? keyCode.
- charCode: é o código do caractere, ele obedece a tabela ASCII e você pode pegar o valor de cada caractere? aqui. Lembrando que cada caractere tem seu código, ou seja, o a minúsculo é diferente do A MAIÚCULO.
- keyCode: é o código numérico que corresponde ao valor da tecla no teclado. Ele pode variar conforme sistema operacional e dispositivo.
O mapeamento desses eventos é bem simples você deve apenas verificar qual a tecla pressionada e apartir dai executar alguma ação. Exemplo.
switch(event.keyCode)
//Quando o usuário apertar o esc
case 27:
//Executa alguma ação
break;
//Quando o usuário apertar o enter
case 13:
//Executa alguma ação
break;
Bom, já sabemos qual evento iremos trabalhar e como pegar o código de uma tecla apertada, mas em que isso será útil? O próximo evento ilustra isso perfeitamente.
No exemplo acima eu estou mapeando os eventos do enter e do esc.
Quando o usuário está no state de login e pressiona enter ele verifica se o campo está vazio, se estiver mostrará uma mensagem de erro, caso contrário ele passará para o próximo state. Se o usuário pressionar esc o campo será limpo.
No state de senha ao pressionar esc ele também verifica se o campo está vazio, se estiver ele vai volta para o state de usuário, caso contrário ele irá limpar o campo. Se o usuário apertar enter ele irá dar uma alert avisando que naquele momento seria a hora de fazer o login.
Bom, mais explicações pelo código fonte, ele está bem simples de fácil compreensão.
Você pode também criar atalhos em seu aplicativo, pode por exemplo, fazer com que um ctrl+n deixe o texto em negrito.
Vamos a uma rápida passada sobre isso.
Volte para o primeiro exemplo e pressione ctrl + i.
O resultado do evento será:
[KeyboardEvent type="keyDown" bubbles=true cancelable=false eventPhase=3 charCode=105 keyCode=73 keyLocation=0 ctrlKey=true altKey=false shiftKey=false]
Notem que agora o ctrlKey tem o valor true. Usando no seu código você verifica se ele é true e depois verifica o código da tecla para criar as combinações de atalhos. Agora é só usar a criatividade.
Espero que essas informações tenham sido úteis para vocês.
Abraço e até a próxima.
