Trabalhando com foco em formulários

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.mxml
private 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.

Veja o código completo aqui.

Fique por dentro de nossas novidades, ideias e atualizações