Flex/ Flex 3/ Flex 3 how to

#6 Flex How to: Habilitando acesso da aplicação por teclado

Ter acesso à execução de operações por teclado em sua aplicação RIA com Flex é essencial, uma aplicação ótima tem que deixar isso de fácil uso para o usuário final.
No Flash Player a classe responsável por isso é o KeyBoard que possui várias variáveis, constantes pré-definidas que mapeiam todo seu teclado; A Classe está localizada em flash.ui.KeyBoard, outras classes existentes que também faz parte do esquema de teclado é a KeyEquevalent(Apenas para AIR) e KeyLocation.

Embora em Flex para web usemos apenas o KeyBoard e junto a ele os disparos de eventos pelo KeyBoardEvent que possuim duas constantes definidas(KEY_DOWN,KEY_UP), que faz a interpretação de teclas pressionadas ou não.
Cada tecla é mapeada por códigos únicos, esses códigos são universais em qualquer teclado multimídia ou normal, esses códigos por tecla estão descritos na classe KeyBoard.

Prática 01:
Exemplo abaixo mostra como capturar cada código no Flex. Nele adicionamos dois listeners de eventos um capturando o exato momento que a tecla está pressionada e quando ela é solta.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
 
		public function init():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN,teclaPressionada);
		    stage.addEventListener(KeyboardEvent.KEY_UP,teclaSolta);
		}
		private var check:Boolean = false;
		public function teclaPressionada(e:KeyboardEvent):void {
				if(!check){
					check = true;
					Alert.show('Codigo caracter : '+e.charCode +'n'+
					'Codigo da tecla : '+ e.keyCode.toString());
				}
		}
		private function teclaSolta(event:KeyboardEvent):void {
			check = false;
			Log.text += 'Tecla pressionada!'+ 'n';
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 02:

Como identifica a combinação de Ctrl + F1 para pedir ajuda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
 
		public function init():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN,teclaPressionada);
		    stage.addEventListener(KeyboardEvent.KEY_UP,teclaSolta);
		}
		public function teclaPressionada(e:KeyboardEvent):void {
				if(e.ctrlKey){
						if(e.keyCode == Keyboard.F1){
							Alert.show('Help');
						}
				}
		}
		private function teclaSolta(event:KeyboardEvent):void {
			Log.text += 'Help acionado';
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 03:

Verificando se a tecla CapsLock está ativa ou não. Isso é bem útil em telas de login.Onde você pode também colocar o listener no textInput quando o usuário for dar o focus, ou direto no stage da App.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
		import flash.ui.Keyboard;
 
		public function init():void {
			if(Keyboard.capsLock){
				Log.text +='Caps lock ativada' +'n';
			}else{
				Log.text += 'Caps lock desativada'+'n';
			}
			stage.addEventListener(KeyboardEvent.KEY_UP,verifica,true);
		}
		public function verifica(e:KeyboardEvent):void {
				if(e.keyCode == Keyboard.CAPS_LOCK){
						if(Keyboard.capsLock){
								Log.text +='Ativou'+'n';
						}else {
							Log.text +='Desativou'+'n';
						}
				}
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 04:

Como combinar clique de Mouse com Shift,Alt e Ctrl por exemplo, quando queremos selecionar um lote de itens.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import flash.ui.Keyboard;
		import mx.containers.Panel;
 
		public function init():void {
				 stage.addEventListener(KeyboardEvent.KEY_UP,deleta);
		}
		public var itens:ArrayCollection = new ArrayCollection();
		public function seleciona(event:MouseEvent):void {
				if(event.shiftKey){
						itens.addItem(event.currentTarget);
				}
				else{
					itens.removeAll();
				}
		}
		public function deleta(e:KeyboardEvent):void {
			if(e.keyCode == Keyboard.DELETE){
						if(itens.length <=0){
							Alert.show('Nada para deletar');
						}else{
							for each( var item:Object in itens){
								this.removeChild(item as DisplayObject);
						}
					}
			}
		}
	]]>
</mx>
 
 
		<mx :Panel title="a" click="seleciona(event)" width="100" height="100" x="59" y="76"/>
		<mx :Panel title="b" click="seleciona(event)" width="100" height="100" x="167" y="76"/>
		<mx :Panel title="c" click="seleciona(event)" width="100" height="100" x="275" y="76"/>
		<mx :Panel title="d" click="seleciona(event)" width="100" height="100" x="392" y="76"/>