Criando janelas personalizadas

• Tweet
• Sharebar

• Tweet

Olá comunidade.

Nesse meu segundo tutorial sobre o Adobe AIR, irei mostrar como criar um aplicativo usando uma janela personalizada. Nessa janela, poderemos minimizar, maximizar, fechar e mover o aplicativo usando um layout personalizado, diferente das janelas padrões dos Sistemas Operacionais.

Pré-requisitos para esse tutorial:

• Flash CS3 com atualização para o Adobe AIR
• Adobe AIR

Para os que não sabem como instalar o Adobe AIR no seu computador ou atualizar o Flash, nesse tutorial eu mostro como fazer.

http://www.mxstudio.com.br/adobe-air/criando-aplicativos-air-no-flash-cs3

Criando sua janela

A criação da janela é livre, criem o desing que bem preferirem. Para esse tutorial irei usar o visual das janelas dos Mac OS da Apple. Comecei com um palco com dimenções de 540×340, desenhei três retangulos, um servirá como o topo da janela, outro será a área do conteúdo e o terceiro o rodapé da janela (como se fosse a barra de status). Selecionem os três retangulos e os coloquem em um MovieClip com instancia de janela. O MovieClip que criei ficou menor que o tamanho original do palco, pois decidi usar o filtro Glow para dar um efeito mais legal a janela.

No palco, criem seus botões de Fechar, Minimizar e Maximizar, dêem instancia de fechar, minimizar e maximizar respectivamente. Criem um campo de texto para ser usado como título de nossa janela, dêem instancia de campo a esse campo de texto. E por último, criem um MovieClip que será usado para dimencionar a nossa janela, dêem instancia de aumentar.

A minha janela personalizada ficou assim:

Programando sua janela

Com nossa janela criada, vamos ao ActionScript, tirando a parte em que a janela é maximizada ou dimencionada a programação é bem tranquila. Coloquem as seguintes ações no primeiro frame de seu arquivo:

/* Importamos a Classe */
import flash.desktop.NativeApplication;
/* Deixamos o conteúdo para ser alinhado no canto esquerdo superior */
stage.align = StageAlign.TOP_LEFT;
/* Manteremos a proporção do palco */
stage.scaleMode = StageScaleMode.NO_SCALE;
/* Variável para saber se a janela está Maximizada ou não */
var clicado:Boolean = false;
/* Posição inical do MovieClip janela */
var espaco:Number = janela.x;
/* Variável que armazena tamanho mínimo para o aplicativo */
var tamMin:Point = new Point(stage.stageWidth, stage.stageHeight);
/* Determinamos o tamanho mínimo do site */
stage.nativeWindow.minSize = tamMin;
/* Criamos um Listener para saber quando a janela será modifica */
stage.nativeWindow.addEventListener(NativeWindowBoundsEvent.RESIZE, modifica);
/* Criamos um Listener que será disparado quando clicar sobre a janela */
janela.addEventListener(MouseEvent.MOUSE_DOWN, movimenta);
/* Criamos um Listener que será disparado quando clicar no botão aumentar */
aumentar.addEventListener(MouseEvent.MOUSE_DOWN, aumenta);
/* Criamos um Listener que será disparado quando clicar no boão fechar */
fechar.addEventListener(MouseEvent.CLICK, fecha);
/* Criamos um Listener que será disparado quando clicar no botão minimizar */
minimizar.addEventListener(MouseEvent.CLICK, minimiza);
/* Criamos um Listener que será disparado quando clicar no botão maximizar */
maximizar.addEventListener(MouseEvent.CLICK, maximiza);
/* Função que será disparada quando clicar na janela */
function movimenta(event:MouseEvent):void {
   /* Movimentamos nossa janela */
   stage.nativeWindow.startMove();
}
/* Função que será dispara quando clicar no botão aumentar */
function aumenta(event:MouseEvent):void {
   /* Modificamos o tamanho de nosso aplicativo */
   /* O tamanho será modificado no canto interior direito */
   stage.nativeWindow.startResize(NativeWindowResize.BOTTOM_RIGHT);
}
/* Função que será disparada quando clicar no botão fechar */
function fecha(event:MouseEvent):void {
   /* Fechamos o aplicativo */
   stage.nativeWindow.close();
}
/* Função que será disparada quando clicar no botão minimizar */
function minimiza(event:MouseEvent):void {
   /* Minimizamos o aplicativo */
   stage.nativeWindow.minimize();
}
/* Função que será disparada quando clicar no botão maximizar */
function maximiza(event:MouseEvent):void {
   /* Se o aplicativo não está maximizado  */
   if (clicado == false) {
      /* Maximizamos ele */
      stage.nativeWindow.maximize();
      /* Trocamos o valor da variável */
      clicado = true;
      /* Escondemos o MovieClip aumentar */
      aumentar.visible = false;
   /* Se o aplicativo está maximizado */
   } else {
      /* Restauramos ele */
      stage.nativeWindow.restore();
      /* Trocamos o valor da variável */
      clicado = false;
      /* Exibe o MovieClip aumentar */
      aumentar.visible = true;
   }
}
/* Função que será disparada quando o aplicativo tiver seu tamanho alterado */
function modifica(event:NativeWindowBoundsEvent):void {
   /* Modificamos o tamanho do MovieClip janela */
   janela.width = stage.stageWidth-(espaco*2);
   janela.height = stage.stageHeight-(espaco*2);
   /* Movemos o campo de texto para o centro do palco */
   campo.x = (stage.stageWidth-campo.width)/2;
   /* Movemos o MovieClip aumentar */
   /* Provavelmente vocês terão que modificar essa parte conforme o seu layout */
   aumentar.x = janela.width-11;
   aumentar.y = janela.height-11;
}

Preparando seu arquivo

Agora falta pouco para terminar de criar nossa janela. Se testarem seus arquivos, vocês irão notar que a janela padrão do Sistema Operacional ainda está visível, precisamos dizer ao nosso arquivo para que ignore essa janela.

Para isso, basta irem ao menu Commands e selecionar a opção “AIR – Application and Installer Settings”. Uma nova janela será aberta, na opção Window style selecionem “Custom Chrome (opaque)” ou “Custom Chrome (transparent)”, a diferença entre o opaque para o transparent é que o opaque o fundo do Flash é preservado e o transparent o fundo é removido (igual ao que ocorre ao se usar o wmode no HTML).

Pronto, agora é só testar seu aplicativo com a sua janela personalizada.

Considerações finais

A chance de criar nossas janelas personalizadas sem dúvidas é uma das inúmeras vantagens do Adobe AIR. A única recomendação que faço é para que não abusem muito dessa opção, evitem criar janelas que sejam muito pesadas ou que tenham muitas coisas, a Adobe pede isso pois seu aplicativo poderá usar mais memória e processamento do computador podendo até travar.

No próximo tutorial, irei mostrar como criar um aplicativo Drag and Drop, ou seja, pegar um arquivo do seu computador e jogar no aplicativo e poder interagir com ele.

Gostaria de aproveitar a oportunidade e convidar todos os leitores a visitarem meu Portfolio Online, lá vocês poderão encontrar todos os meus trabalhos e tutoriais desenvolvidos: http://www.natanalves.com/

Um abraço a todos e até a próxima.

Autor: Natan D. Alves – Moderador do Fórum de Flash & ActionSctipt MXSTUDIO

Qualquer dúvida envie um e-mail para natanalves@mxstudio.com.br ou acesse nosso fórum

Escrito por Natan D. Alves on julho 31, 2008. Arquivado em Adobe AIR. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo