Se esta querendo aprender ou iniciar novos projetos em Flex, clique aqui

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.

Gostou? Não esqueça de curtir!

Ou compartilhe o link com seus amigos

11 comentários

Deixe uma resposta

  1. Estou tentando Tratar Focus em CSS...

    Ex.: quando eu selecionar um TextInput ele trocar de cor...

    Já fez isso antes? Se souber passa como é!

    Vlw...

     
  2. Ai terás que interagir o Focus com o AS.

    <fx:Script>
        <![CDATA[
            protected function textinput1_focusInHandler(event:FocusEvent):void
            {
                textinput1.setStyle("contentBackgroundColor", 0xF0FF35);
            }

            protected function textinput1_focusOutHandler(event:FocusEvent):void
            {
                textinput1.setStyle("contentBackgroundColor", 0xFFFFFF);
            }
        ]]>
    </fx:Script>

    <s:TextInput contentBackgroundColor="#FFFFFF"
                 id="textinput1"
                 focusIn="textinput1_focusInHandler(event)"
                 focusOut="textinput1_focusOutHandler(event)"/>

     
  3. Bom dia Eduardo

    É o seguinte tenho uma aplicação que importo uma série de componentes que foram criados diretamente pela a nossa equipe, com isso foi criado um componente de pesquisa, onde tem um textInput, um Button e outro textInput, clicando no botão abre uma janela onde lista os grupos e depois de clicado, no 2º textInput será completado. O problema está em que eu queria que o foco, caso eu use o enter o foco não fosse para ele, e sim ir direto para componente seguiten. Estou usando o seguinte método:

    public static function EnterNext(event:KeyboardEvent):void{
                
    if (event.keyCode == 13) {
    event.currentTarget.focusManager.setFocus(event.currentTarget.focusManager.getNextFocusManagerComponent());
    event.currentTarget.focusManager.showFocus();
    }
            }

    Como posso implementar este meu método para que isso aconteça?
    Desde já agradeço.

     
  4. Você pode usar assim: idDoTextinput.setFocus();

     
  5. Ola Quinhone

    Em qual momento você faz este chamado.

     
  6. Olá Eduardo, estou tentando usar esse exemplo e estou recebendo esse erro:

    TypeError: Error #1009: Não é possível acessar uma propriedade ou um método de uma referência de objeto nula.
        at mx.managers::FocusManager/setFocus()

    onde o erro é nessa linha:

    focusManager.setFocus(focusManager.getNextFocusManagerComponent());

    o que poderia ser?

     
  7. @Luis terás que usar o evento  form1.addEventListener(KeyboardEvent.KEY_DOWN, tecla); que foi descrito no exemplo.

     
  8. Olá. Este problema é simples quando se trata de text imput, porém e quando no meio do formulário temos um ComboBox? Como fazer com que o Enter Funcionar para focar o proximo?

    Abraço!

     
  9. Eduardo parabéns por suas dicas, sempre vejo seu blog quanto tenho alguma dúvida, estou com um problema com o foco q não consigo resolver, tenho um programa em flex que ao abrir carrega um componente com o PopUpManager e preciso colocar o foco em  um campo deste componente, já tentei tanto no createComplete do componente quanto do Application chamar a função e utilizar o InputMeuCampo.setFocus() ou focusManager.setFocus(InputMeuCampo) e nada, as bordas ficam como se tivesse com o foco mas o cursor não para lá, você teria alguma dica de como posso fazer isso ?

    Valeu....