Teclas de atalhos nos botões

[Sá]

Pessoal, meu cliente pediu para que ao clicar certas teclas executar o
click de determinados botões...
Eu trabalho full-time com Flex e ActionScript há menos de 10 dias, e
sou auto-didata, ou seja, pouca experiência e sem nenhum curso sobre o
assunto...

Mas até que a coisa tá indo...

Então, resolvi criar um classe estendendo o Button, criar um set
shortKey nessa classe, adicionar um addEventListener do KeyDown e
intercepta-lo executando o click do botão caso o cidadão tenha
pressionado a tecla informada na propriedade shortKey... Mas acontece
que o KeyDown não é interceptado...

Eu queria saber se já existe a implementação de algo desse tipo, botão
com tecla de atalho, e se não houver, alguem se dispõe a me ajudar a
fazer isso? Pelo menos digam ai se eu estou no caminho certo, com o
raciocino e lógica certa...

Pretendo disponibilizar esse controle para download no nosso blog,
será open-source ;)

Abraço e obrigado desde já!

Marcus Sá
http://www.maxup.com.br
http://www.maxup.com.br/blog

[Daniel Lopes]

Da uma olhada aqui:

http://www.abdulqabiz.com/blog/archives/macromedia_flex/keyboard_shortc.php

[Daniel Lopes]

cara... tem um tanto de coisa nesse código que não precisa e mudou
para o Flex 3...
Vou fazer um exemplo e posto aqui daqui a pouco

On 9 abr, 19:49, Sá <z2s...@gmail.com> wrote:

[Daniel Lopes]

Ai está o exemplo que prometi... é só dar uma olhada na classe
flash.ui.Keyboard . Cada tecla tem uma constante e vc pode usar isso
como shortcut, no exemplo se vc aperta SHIFT ele muda a cor do
componente e se apertar ctrl muda de cor de novo.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="initApp()">

<mx:Script>
<![CDATA[
import flash.ui.Keyboard;

public function initApp():void{
tf.addEventListener(KeyboardEvent.KEY_DOWN,reportKeyDown);
}

public function reportKeyDown(event:KeyboardEvent):void
{
trace("Tecla apertada: " + String.fromCharCode(event.charCode) +
"(codigo:" + event.keyCode + " character code: " + event.charCode +
")");
if (event.keyCode == Keyboard.CONTROL)
tf.setStyle('backgroundColor',0xFFFF00);
else if (event.keyCode == Keyboard.SHIFT)
tf.setStyle('backgroundColor',0xFF0000);
}

]]>
</mx:Script>

<mx:TextInput id="tf" />

</mx:Application>

[Beck Novaes]

Hm... acho que o problema do nosso amigo é outro. Pelo que eu pude
entender ele já esta familiarizado com a API necessária para capturar
os eventos do teclado. Suponho que o componente que ele estendeu não
esteja funcionando porque ele adicionou o Listener para o botão, assim
o evento do teclado só será capturado se o botão tiver o foco. Da
mesma forma, no seu exemplo o evento só será capturado se o textInput
tiver o foco. Tanto o seu exemplo quanto o dele poderiam ser
independentes do componente que tivesse o foco se o Handler estivesse
tratando um evento do Application no lugar de um componente
específico. No seu exemplo basta remover o substituir
"tf.addEventListener(KeyboardEvent.KEY_DOWN,reportKeyDown)" por
"addEventListener(KeyboardEvent.KEY_DOWN,reportKeyDown)" ou seja, sem
a referência para o textInput. No caso dele, talvez ele tenha que
adicionar o listener para o Application.

mx.core.Application.application.addEventListener(KeyboardEvent.KEY_DOWN,
myHandler);

Será que é isso, Sá, que você precisa?

[]'s
Beck Novaes

[Daniel Lopes]

Obrigado Beck, não tinha me atentado para isso... realmente acho que o
problema dele vai ser resolvido colocando os listeners no container
onde está o componente.
Bem de qualquer forma fica ai o exemplo se alguem procurar por isso no
grupo.

Abraço.

[Luis Eduardo - Suprasis Softwares]

Só lembrando que determinadas teclas e/ou conjunto de teclas não
estão disponíveis para o FlashPlayer, logo não são utilizáveis (como em
um programa Delphi seriam ou provavelmente em um AIR também).
Um exemplo é a tecla F5, ALT+F4, CTRL+W. Mas existem umas tantas
outras... e se não me engano (uns 90% de certeza, se é que certeza
existe em 90%) isso varia de browser pra browser, mesmo o Flex tentando
esconder essa briga entre browsers pra gente.

Então a dica é: antes de escolher as teclas, dê uma testada se ela
está disponível nos navegadores de seus clientes.

Ah! detalhe sórdido... as teclas disponíveis dependem também dos
sistemas instalados no computador do usuário. Se um google toolbar, por
exemplo, estiver instalado, uma combinação de tecla que não me lembro
qual, fica pra ele e o FlashPlayer não a enxerga mais. Sei lá quais
teclas o Yahoo toolbar ou o Mininova toolbar usam.

Isso o marketing da Adobe não fala pra gente.... enfim...

Queria dar notícias mais alegres :)

abraços,
Luís Eduardo

Daniel Lopes escreveu:

[Sá]

Pessoal, muito obrigado a todos pela ajuda...
Daniel, muito obrigado pelo exemplo que você postou, vai se tornar uma
boa referencia mais a frente...
Beck, meu problema era exatamente este que você mencionou! Muito
Obrigado...
Luís, eu preciso basicamente do ESC e do ENTER, mais a frentre quem
sabe eu precisse de outras teclas... Obrigado também!

On 10 abr, 08:22, Luis Eduardo - Suprasis Softwares

[Sá]

Só mais uma coisa!

Vejam com eu fiz,,,
Coloquei:
addEventListener(KeyboardEvent.KEY_DOWN, this.mubtn.interceptKey

Onde mubtn é o meu botão...

E interceptKey é:
public function interceptKey( event:flash.events.KeyboardEvent ) :
void{
if (event.keyCode==_key){
Alert.show("Apertou!")
}
}

As dúvidas agora, pra cada botão com tecla de atalho eu vou ter que
colocar um addEventListener?
E ali, onde tem Alert.show("Apertou!") eu quero que execute o clique
do botão... Como faço isso?

Valeu pessoal! Abraço!

[Daniel Lopes]

Coloca o event listener no container de seus botoes e faz um case para
ver qual tecla foi apertada.
Para dispara o evento do botão use dispatch, tipo assim:

b1.dispatchEvent(new MouseEvent(MouseEvent.CLICK));

[Sá]

Daniel, obrigado pela resposta, o dispatchEvent funcionou
direitinho...

Só não entendi direito ainda essa parte que voce mencionou sobre
colocar o event listener no container...

Tipo, pra cada Title Window por exemplo, digamos que eu tenho 2 botoes
com shortKey, eu teria que fazer 2 ouvintes em cada TitleWindow?

Muito obrigado pela ajuda! Abraço!

[Beck Novaes]

Como isto parece ser algo que muita gente pode precisar, acho que este
componente pode ser um bom ponto de partida para uma boa solução para
o problema:
http://groups.google.com/group/flexdev/web/ShortKey.zip

A idéia é poder usar algo mais ou menos assim:

<local:ShortKey key="{Keyboard.HOME}" ctrlKey="true"
handler="{endHandler}" args="{['Ctrl + Home', 'arg2']}"/>

O componente tem suporte para a tecla CTRL e Shift em combinação com
as demais teclas. Eu achei esta a parte mais legal de implementação,
visto que pela primeira vez no Flex eu pude usar o Bitwise XOR.

var checkShiftKey:Boolean = !(Number(event.shiftKey) ^
Number(shiftKey));

Ainda está bem simples e talvez precise de alguma refatoração, mas
como eu disse pode ser um bom ponto de partida.

O .zip é um projeto Flex que você pode importar e ver funcionando.

[]'s
Beck Novaes

[Beck Novaes]

Ah... eu removi o SWF da pasta bin-debug para ficar mais leve,
portanto, não esqueca de compilar antes de tentar rodar no Flex
Builder (você pode apenas abrir um dos arquivos e salvar novamente
antes de rodar).

[]'s
Beck Novaes

[Sá]

Pessoal, desculpem nao ter dado um retorno, as coisas andam corridas
por aqui, mas ca estou pra lhes falar...

Consegui fazer o que queria, queria postar aqui o codigo, alterei
poucas coisas nos arquivos que o Beck mandou... Se ele me permitir eu
divulgo no meu blog, dando os devidos creditos claro...

Creio que tenha ficado bastante customizavel, intuitivo e bem usual!
Entao vou postar aqui como fica o uso!


Eu passo a tecla e o botao q tera o click executado quando a devida
tecla for pressionada: Isso é tudo que será necessário, porém para
cada botao!
<cp:ShortKey key="{Keyboard.ENTER}" button="{btnLogar}"/>

E esse eh o codigo da ShortKey: A maior parte dele feito pelo Beck:
package components
{

import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import mx.controls.Button;
import mx.core.IMXMLObject;

public class ShortKey implements IMXMLObject
{
[Bindable]
public var key:uint;

[Bindable]
public var button:Button;

[Bindable]
public var shiftKey:Boolean = false;

[Bindable]
public var ctrlKey:Boolean = false;

private var document:Object;

public function initialized(document:Object, id:String):void
{
this.document = document;
document.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
}
private function keyDownHandler(event:KeyboardEvent):void
{

var checkShiftKey:Boolean = !(Number(event.shiftKey) ^
Number(shiftKey));

var checkCtrlKey:Boolean = !(Number(event.ctrlKey) ^
Number(ctrlKey));

if ((checkShiftKey && checkCtrlKey) && event.keyCode == key)
{
button.dispatchEvent(new MouseEvent(MouseEvent.CLICK))
}
}
}
}

E ai, o que vcs acham? Sera que eh interessante pra comunidade, vcs
tem algo a acrescentar?

Abraço!

Marcus Sá
http://www.maxup.com.br
http://www.maxup.com.br/blog

> > > > > As dúvidas agora, pra cada botão com tecla deatalhoeu vou ter que

> > > > > > > >>>>> com tecla deatalho, e se não houver, alguem se dispõe a me ajudar a

> > > > > > > >>>>> fazer isso? Pelo menos digam ai se eu estou no caminho certo, com o
> > > > > > > >>>>> raciocino e lógica certa...
>
> > > > > > > >>>>> Pretendo disponibilizar esse controle
>

> ...
>
> mais »