Como posicionar o Alert nos valores x e y que eu queira?

, +, 4 Comentários

Share it now!

Com as mesmas palavras recebidas no título do e-mail enviado pelo Carlos Brandão sobre suas dificuldades em posicionar o componente Alert, escrevemos o título deste post.
Sem dúvidas é um problema simples, antigo e de fácil resolução. Porém muitos desenvolvedores acabam no final achando mais cômodo colocar o Alert em sua posição original, no centro da tela.

Em via das dúvidas, o mais correto seria imitar o Delphi, C#, Swing. Em deixar o desenvolvedor alertar alguma mensagem na posição que ele queira; Já que nativamente se você colocar o parent ele posiciona no container desejado o alerta na posição central referente ao tamanho e posição daquele container. No ambito de melhor experiência é bem mais agradável mostrar a mensagem de alerta onde o usuário esta usando naquele momento.

O Alert é um componente baseado em Panel, uma vez que ele possui apenas 1 método estático chamado show, ele cria 1 popUp por vez usando o PopUpManager direto no global do Application , comportamento esse que é padrão. Se você já é um usuário avançado do Flex com toda certeza você já deve ter implementado isso, analisando o código fonte do SDK.
Como ele é baseado em um Panel e por sua vez é herdado do UIComponent, ele possui tamanho, posição, cor, propriedades do Panel como a propriedade status, em fim uma gama de novas propriedades que podem ser usadas.

Para ajudar o Carlos, segue uma classe simples que faz todo esse trabalho, é definida por uma propriedade booleanada chamada posicionar que por padrão é false para deixar o mesmo comportamento original do Alert, e caso ela venha a ser alterada para true e suas posições x e y forem alteradas, ela fará um novo posicionamento do Alert para o local que você precisa. Veja como isso pode ser feito.

Classe utilitária para criação do Alerta costumizado.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

package org.igorcosta.alert
{
	import flash.display.Sprite;
 
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
 
	public class Alerta
	{
		/**
		 * @Author www.igorcosta.org
		 * */
		public function Alerta()
		{
			super();
		}
		/**
		 * @public
		 *
		 * Método estático que cria um Alert na posição desejada pelo usuário.
		 *
		 * Por padrão é desabilitado o posicionamento, caso você queira usar o posicionamento você
		 * deve passar o parametro posicionar como true e definir os pontos x e y para se Alert.
		 * vale resaltar que os valores para o posicionamento de x e y são por padrão iguais a 0.
		 * Caso você defina apenas os valores de x e y e deixar o valor original de posicionar como false
		 * não ocorrerá as mudanças.
		 * @return Alert
		 * */
		public static function show(mensagem:String,titulo:String,posicionar:Boolean=false,xPos:Number=0,yPos:Number=0,flags:uint=4,parent:Sprite=null,closehandler:Function =null,icon:Class = null,defaultbuttonFlag:uint =4):Alert{
			var alerta:Alert = Alert.show(mensagem,titulo,flags,parent,closehandler,icon,defaultbuttonFlag);
			Alert.yesLabel = 'Sim';
			Alert.noLabel = 'Não';
			Alert.cancelLabel = 'Cancelar';
			Alert.okLabel = 'OK';
			if(posicionar ==true){
			PopUpManager.centerPopUp (alerta);
			var internalX:Number = xPos;
			var internalY:Number = yPos;
			alerta.move(internalX,internalY);
			}else{
				PopUpManager.centerPopUp (alerta);
			}
 
		return alerta;
		}
	}
}

Aplicação da classe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import org.igorcosta.alert.Alerta;
 
			public function alertar(e:MouseEvent):void{
				Alerta.show('mensagem de boas vindas','teste',true,e.currentTarget.x,e.currentTarget.y);
			}
		]]>
	</mx>
	<mx :Button id="btn" click="alertar(event)" x="31" y="23" width="61" height="32" label="Click"/>
	<mx :Button id="btn0" click="alertar(event)" x="538" y="23" width="61" height="32" label="Click"/>
	<mx :Button id="btn1" click="alertar(event)" x="538" y="338" width="61" height="32" label="Click"/>
	<mx :Button id="btn2" click="alertar(event)" x="31" y="338" width="61" height="32" label="Click"/>
Seja um fã
 

4 Comentários

  2. Renan Fretta

    08/05/2009, 11:48 am

    Lembrando que também da pra passar o container pai para quando a alert for aberta ela ficar posicionada dentro de um local específico.

  3. Igor Costa

    08/05/2009, 12:49 pm

    @Renan Na verdade no primeiro comentário, não é necessário estender a classe Alert. Já que estou criando um objeto Alert e retornando a Classe. Como disse antes ela é uma classe utilitária como o Alert e não tem por que estender ela apenas para adicionar isso.

    Sobre o segundo comentário, pouco tempo antes de você escrever tinha acabado de editar o 2th paragrafo. falando sobre justamente isso.