Ola pessoal, conforme post no Forum Flex-Brasil (que está crescendo muito bem por sinal, e preparem-se, eu e o Rodrigo vamos trazer novidades em breve no Forum), e no blog tambem, eu prometi que iria postar alguma coisa sobre a troca de foco entre componentes usando o ENTER, já que li algumas dúvidas sobre isso nas listas de discussões.

Bom, no post anterior, eu comentei a todos sobre o FlexMDI, que na minha opinião, é o melhor componente para trabalhar com janelas hoje no Flex. Mas por um detalhe pratico ainda não estava 100%. A troca de foco dos componentes.

Para quem já trabalha com desenvolvimento de sistemas, e vem de plataformas como Visual Basic e Delphi, ou até mais antigas, como Clipper e Cobol, sabe que os usuários dos sistemas usam o maldito Enter para a troca de foco, e não sabem que existem a tecla TAB (e os que sabem, usam apenas para fazer paragrafo no Word).

O fato que a perca de um recurso como esse na migração de softwares é algo um tanto complicado para a equipe de implantação de sistemas, ou seja, não podemos deixar eles na mão com um pepino como esse, até porque, imaginem os comentários maldosos: “Nossa, um sistema tão bonito como esse, na internet, e para trocar de campo não posso usar o Enter??. Muitos defendem a idéia da evolução do usuário de acordo com a nova plataforma (inclusive eu), mas fazer o que, o importante é o software ser sucesso no mercado e o usuário usar ele com prazer e confiança.

Vamos lá. Depois de você ter baixado e descompactado os fontes do FlexMDI e importado eles em seu Flex Builder (File -> Import) apague o arquivo FlexMDI.swc dentro da pasta bin/.

Bom, o que iremos fazer é criar um evento no arquivo containers/MDIWindow.as que verifique as teclas digitadas, e quando a tecla digitada for o ENTER, ele deve procurar o foco no proximo componente disponivel na tela.

Como iremos usar um evento de teclado, primeiramente devemos importar a package flash.events.KeyboardEvent. O local apropriado para essa importação é lá pela linha 30 da classe, logo no inicio, seguindo a ordem de importação do criador do FlexMDI.


package flexmdi.containers {
     import flash.events.ContextMenuEvent;
     import flash.events.Event;
     import flash.events.MouseEvent;
     import flash.events.KeyboardEvent;
....


Bom, agora, temos que adicionar um novo evento que fique atento as teclas digitadas dentro do FlexMDI. Para isso, dentro do método construtor da classe, lá pela linha 330, vamos adicionar um novo evento.


/**
* Constructor
*/
public function MDIWindow() {
     super();
     controls = new Array();
     doubleClickEnabled = true;
     minWidth = 200;
     minHeight = 200;
     windowState = MDIWindowState.NORMAL;
     resizable = true;
     styleName = "mdiWindowFocus";
     addEventListener(FlexEvent.CREATION_COMPLETE, componentComplete);
     addEventListener(KeyboardEvent.KEY_DOWN, enterNextFocus);
}

Bom, já foi importado a package e adicionado o evento que será o responsável para a troca do foco, agora, vamos a ele. Logo após o método construtor, você já pode adicionar a função.


/**
* @private
*/
private function enterNextFocus(event:KeyboardEvent) : void {
     if (event.keyCode == 13) {
          this.focusManager.setFocus(this.focusManager.getNextFocusManagerComponent());
          this.focusManager.showFocus();
     }
}


Prontinho, apenas isso resolve seu “problema”. Obviamente que essa é uma forma genérica de tratamento de foco. Lembrando que alguns componentes merecem tratamentos especiais, porém, a partir disso, você pode evoluir a idéia para sua necessidade.

Agora é só compilar o projeto e importar o novo FlexMDI.swc que for gerado na pasta bin/.

Espero ter ajudado, qualquer dúvida, só postar

Abraços