Quando se esta criando um sistema, a principal preocupação é fazer um sistema que seja o mais simples e intuitivo. Uma destas simplificação esta em deixar o primeiro campo com foco para digitação e através de do teclado, com as teclas ‘tab’ e ‘enter’, ir para o próximo campo.
Então criei um exemplo simples que mostra esta interação por dois modos simples, o primeiro através de eventos do teclado, e outro através do atributo enter, existente no TextInput.
O código abaixo, é executado após a inicialização, e para o formulário form1 é adicionado um evento que é acionado a cada tecla pressionada do teclado. Quando um tecla for pressionada, a função tecla() é executada, passando como parâmetro a tecla pressionada.
Veja que o evento do teclado apenas adicionei ao formulário form1, evitando que o formulário form2 ou outros componentes fiquem trocando o foco sempre que pressionar a tecla ‘enter’.
Arquivo main.mxmlprivate function init():void { focusManager.setFocus(cp11); form1.addEventListener(KeyboardEvent.KEY_DOWN, tecla); } private function tecla(e:KeyboardEvent):void { if ((e.keyCode == 13)) { var objetoQueContemOFoco:String = getQualifiedClassName(focusManager.getFocus()); if(objetoQueContemOFoco.indexOf("TextInput") >= 0 ) { focusManager.setFocus(focusManager.getNextFocusManagerComponent()); } if(objetoQueContemOFoco.indexOf("Button") >= 0 ) { clicouNoBotao(); } } }
Na função tecla(), é verificado se o focus esta dentro de um TextInput. A método focusManager.getFocus() retorna uma String de identificação do componente que possui o foco, e a atributo getQualifiedClassName, através desta String, retorna outra String contendo o tipo do objeto que possui este foco.
Então neste caso se o foco estiver em um TextInput e o usuário precionar a tecla ‘enter’, sera dado o foco para o próximo campo. Caso o componente que possui o foco seja um Button é executado uma ação de salvar ou editar este formulário.
O formulário form2 utilza o evento enter, do do próprio TextInput.
Arquivo main.mxml<mx:Panel x="374" y="104" title="Usando o atributo "enter""> <mx:Form id="form2"> <mx:FormItem label="Primeiro campo:"> <mx:TextInput id="cp21" enter="{focusManager.setFocus(cp22)}"/> </mx:FormItem> <mx:FormItem label="Segundo campo:"> <mx:TextInput id="cp22" enter="{focusManager.setFocus(cp23)}"/> </mx:FormItem> <mx:FormItem label="Treceiro campo:"> <mx:TextInput id="cp23" enter="{focusManager.setFocus(cp24)}"/> </mx:FormItem> <mx:FormItem> <mx:Button label="Button" id="cp24" click="clicouNoBotao()" /> </mx:FormItem> </mx:Form> </mx:Panel>
Veja no código acima, que ao pressionar o ‘enter’, eu chamo a função focusManager.getFocus() e defino o foco para o próximo campo. Veja que neste exemplo, quando você possuir foco no botão, não acontece nada se pressionar a tecla ‘enter’.
Já no primeiro formulário este evento é controlado pelo KeyboardEvent. Cuidado ao trabalhar com este evento, pois se não fizer algum controle como é o caso do exemplo acima, a TextArea perde o foco cada vês que é pressionado ‘enter’ dentro dele.