Para quem assim como eu se preocupa muito com a experiência do usuário no desenvolvimento de sistemas sabe como as janelas PopUp saltitantes que insistem em congelar a aplicação são desesperadoras. E se você tem essas mensagens programadas também para as falhas do sistema, tem que tratar muito bem as Exceptions para não encher a aplicação de mensagens do tipo modal e fazer o usuário ficar minutos e mais minutos clicando em ok.
Quando comecei a utilizar o twitter percebi algo diferente. As mensagens de confirmação de ações da área de configuração aparecem sempre no topo do browser, deslizando suavente da parte de cima e exibindo a mensagem, o que me pareceu muito interessante. Este tipo de mensagem não faz com que você tenha que clicar outra vez em um botão (normalmente OK), sendo que você já sabe que sua ação foi bem sucedida. Isso economiza tempo do usuário e causa um efeito mais clean e profissional no sistema.
A partir disso adotei essa técnica nos novos desenvolvimentos e vou compartilhar de forma geral como utilizo.
A mensagem é um componente baseado em um Canvas com uma imagem do lado esquerdo e um Label, onde será exibida a mensagem, sendo que o conteúdo será armazenado em uma variável de classe do tipo String.
<mx:Image id="imgAlert" source="imagens/ok.png" verticalCenter="0" left="10"/>
<mx:Label text="{mensagem}" left="98" verticalCenter="0" right="10" fontSize="16"/>
Também criei uma pasta com as imagens que utilizo para cada tipo de mensagem: Erro, Ajuda, Informativo, Ok, Alerta. De acordo com o tipo de mensagem será exibido a respectiva imagem.
No componente também foi criado um Timer, responsável por fazer com que a mensagem “feche”. Basicamente o efeito funciona da seguinte forma: O compomente inicialmente é criado com height igual a 0. Ao executar a mensagem, a altura do componente é setada por exemplo para 100 pixels e é iniciado o Timer. Ao final da contagem, novamente o tamanho do componente é setado para 0.
private var timer:Timer;
private function init():void
{
this.height = 0;
timer = new Timer(3000);
timer.addEventListener(TimerEvent.TIMER, timerComplete);
}
private function timerComplete(event:TimerEvent):void
{
this.height = 0;
timer.stop();
}
Para executar o alerta criei o seguinte método:
private var HEIGHT:int = 100;
public function show(tipo:String, mensagem:String):void
{
this.height = HEIGHT;
timer.start();
this.mensagem = mensagem;
if (tipo==ERROR) {
imgAlert.source = "imagens/error.png";
} else if (tipo==HELP) {
imgAlert.source = "imagens/help.png";
} else if (tipo==INFO) {
imgAlert.source = "imagens/info.png";
} else if (tipo==OK) {
imgAlert.source = "imagens/ok.png";
} else if (tipo==WARNING) {
imgAlert.source = "imagens/warning.png";
}
}
Dessa forma ao executar o método show() o tamanho do componente será setado para 100 pixels, executando o efeito de transição de cima para baixo e será iniciado a contagem do timer e de acordo com o tipo de mensagem informado no parâmetro “tipo”, será exibido um ícone diferente.
Para não ter que escrever sempre a string do tipo de mensagem, criei variáveis de classe do tipo static.
public static const ERROR:String = "error";
public static const HELP:String = "help";
public static const INFO:String = "info";
public static const OK:String = "ok";
public static const WARNING:String = "warning";
Para completar o componente, o tipo de efeito foi definido nos parâmetros do Canvas. É utilizado um efeito simples do tipo Resize.
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="{HEIGHT}"
backgroundColor="#E0EBF1"
initialize="init()"
resizeEffect="Resize">
Para utilizar o componente, crio uma variável de classe no Application, que chamarei de toda parte do sistema e no init defino onde deverá ficar o componente de alerta, ancorado na parte superior e nas laterais do Application.
public static var alert:MeuAlerta;
private function init():void {
alert = new MeuAlerta();
alert.setStyle("top",0);
alert.setStyle("left",0);
alert.setStyle("rigth",0);
addChild(alert);
}
Defini a variável do tipo static para não ter que sempre fazer referência ao Application.application, dessa forma pose-se executar realizando referência a classe principal (Application) que no meu projeto se chama AlertaDeslizante, e a variável alert.
AlertaDeslizante.alert.show(MeuAlerta.OK, "Texto da mensagem");
O primeiro parâmetro é o tipo de mensagem, passado através das variáveis estáticas do componente MeuAlerta, e o segundo parâmetro a string da mensagem. Dessa forma essa chamada pode ser executada de qualquer parte da aplicação.
Segue código completo do componente MeuAlerta:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="{HEIGHT}"
backgroundColor="#E0EBF1"
initialize="init()"
resizeEffect="Resize">
<mx:Script>
<![CDATA[
private var HEIGHT:int = 100;
[Bindable]
private var mensagem:String;
public static const ERROR:String = "error";
public static const HELP:String = "help";
public static const INFO:String = "info";
public static const OK:String = "ok";
public static const WARNING:String = "warning";
private var timer:Timer;
private function init():void
{
this.height = 0;
timer = new Timer(3000);
timer.addEventListener(TimerEvent.TIMER, timerComplete);
}
public function show(tipo:String, mensagem:String):void
{
this.height = HEIGHT;
timer.start();
this.mensagem = mensagem;
if (tipo==ERROR) {
imgAlert.source = "imagens/error.png";
} else if (tipo==HELP) {
imgAlert.source = "imagens/help.png";
} else if (tipo==INFO) {
imgAlert.source = "imagens/info.png";
} else if (tipo==OK) {
imgAlert.source = "imagens/ok.png";
} else if (tipo==WARNING) {
imgAlert.source = "imagens/warning.png";
}
}
private function timerComplete(event:TimerEvent):void
{
this.height = 0;
timer.stop();
}
]]>
</mx:Script>
<mx:Image id="imgAlert" source="imagens/ok.png" verticalCenter="0" left="10"/>
<mx:Label text="{mensagem}" left="98" verticalCenter="0" right="10" fontSize="16"/>
</mx:Canvas>
E aqui podem ver o resultado final:
Espero que esta dica seja útil e fiquem abertos a contribuir com melhorias!
(emilioParme){} 