MXStudio » Adobe AIR » Criando janelas personalizadas

Criando janelas personalizadas

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.

Janela aplicativo

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:

Janela pronta

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).

Selecionando tipo de janela

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


Assine o nosso Feed
1.404 assinantes,
assine você também!
Publique esse artigo no Twitter Salve este artigo no Delicious Cadastre esse artigo no Dihitt Cadastre esse artigo no UEBA Cadastre esse artigo no Rec6

8 Comments to Criando janelas personalizadas

  1. Felipe's Gravatar Felipe
    Agosto 23, 2008 at 2:33 am | Permalink

    Parabéns cara mais um ótimo tutorial sobre AIR. Natan seguinte cara teria como vc me tirar uma pequena dúvida cara ,seguinte tem como eu bloquear o menu maximizar em uma aplicação do Adobe Air ? tipo igual ao Delphi a gente coloca o valor maximizar “false” e pronto o maximizar não funciona, teria como fazer isso no AIR também ?

  2. Pedro's Gravatar Pedro
    Setembro 1, 2008 at 9:00 am | Permalink

    muito bom esse tutorial! Parabéns

  3. Setembro 1, 2008 at 10:53 pm | Permalink

    òtimo tutorial Natan, espero mais em cara..

    Felipe: cara vai em COMMANDS>AIR – Application and Installer Settings depois clica no botão SETTINGS… e desmarque o MAXIMIZABLE e pronto

    Abraço.

  4. paullocezar's Gravatar paullocezar
    Novembro 24, 2008 at 11:48 am | Permalink

    show natan, valeuuuuu

  5. Lucas's Gravatar Lucas
    Dezembro 18, 2008 at 5:59 pm | Permalink

    Show!Mas tem uns problemas:
    1.Quando eu Maximizo ele os BTNS (eu também coloquei um Incone no canto da tela, com ele aconteceu o mesmo) eles não seguem os BTNs, eles ficam no mesmo lugar, a mesma coisa quando eu minimizo e abro de novo, não sei por que ele muda a windows para outro tamanho e os btns ficam no mesmo lugar.valeu

  6. Dezembro 23, 2008 at 9:56 pm | Permalink

    parabéns pelo tutorial! é show.
    espero aprender a programar mais aplicativos no Adobe AIR.

  7. Março 31, 2009 at 3:37 pm | Permalink

    Cara! Sinceramente, pense num post bom neguim!

    Obrigado, precisava muito disso!

  8. Maio 17, 2010 at 2:56 am | Permalink

    Love your new banner :)

  1. By on Julho 31, 2008 at 8:06 pm

Deixe um Comentario

You can use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="">

Natan D. Alves

Fã e divulgador da plataforma Flash e do ActionScript, músico nas horas vagas e estudante do curso de Ciência da Computação.

Últimos Artigos do Autor