Saudações a todos!
Neste artigo vou mostrar como criar uma janela de alerta muito semelhante à janela de alerta do Live Messenger através de uma DLL existente na web.
Em anexo, deixo a DLL e o projeto deste exemplo para download, baixe para seu PC e divirta-se!
Vamos então ao trabalho.
Crie um novo projeto web usando C# como Language.
Antes de mais nada extraia a DLL (EeekSoft.Web.PopupWin.dll) em um diretório qualquer do seu computador. Esta DLL está em anexo para download juntamente com o projeto deste exemplo.
Após descompactar a dll devemos adicionar uma tab no VS.NET 2005 para carregarmos e ter assim acesso aos controles desta dll. Então clique com o botão direito do mouse sobre a área abaixo da tab General e clique em Add Tab. Digite um nome para esta tab e tecle Enter. Acompanhe a figura 1.
Figura 1 – Adicionando e Nomeando a Tab
Após esse processo vamos agora inserir nesta tab a DLL do popup. Clique com o botão direito do mouse dentro desta tab e escolha a opção Choose Items... e na janela Choose Toolbox Items clique no botão Browse e localize o diretório onde você copiou a DLL, selecione a DLL e clique em Open, em seguida clique no botão OK.
Note que será adicionado 2 controles, nesse artigo vamos trabalhar com popupWin.
Pronto, estamos aptos a trabalhar com a DLL.
Neste exemplo vamos simular que um usuário faça login em nosso site e quero dar-lhes boas vindas, então vamos usar o controle popupWin para tal tarefa.
Na página Default.aspx insira 2 controles Labels, 2 Textbox e um LinkButton. Ajuste o layout como você preferir, confira o meu layout na figura 2.
Controle ............ Propriedade ............ Valor
Label1 ID lblLogin
Text Login
------------------------------------------------------------------
Label2 ID lblSenha
Text Senha
------------------------------------------------------------------
Textbox1 ID txLogin
------------------------------------------------------------------
Textbox2 ID txSenha
TextMode Password
------------------------------------------------------------------
LinkButton1 ID btnLogar
Text Efetuar Login
PostBackUrl “~/boas_vindas.aspx”
Figura 2- Layout de Login
Esta página servirá para mandar os dados para a página de boas vindas, claro que não vou fazer aqui nenhuma conexão para testar se o usuário existe ou algo parecido, este exemplo é apenas para ilustrar uma das inúmeras situações em que podemos usar este controle.
Agora precisamos criar a página “boas_vidas.aspx”. Crie então esta nova página e no evento Page_Load digite o seguinte código:
protected void Page_Load(object sender, EventArgs e)
{
string login = Request.Form["txLogin"];
string senha = Request.Form["txSenha"];
}
Isto com certeza dispensa comentários, apenas estamos pegando o conteúdo dos textbox da página Default.aspx.
Abra a página boas_vindas.aspx em modo Design e arraste o controle popupWin para dentro da página, veja que será criado uma janela muito semelhante a do Messenger, confira na figura 3 do meu exemplo.
Figura 3 – Controle popupWin adicionado ao Design da página boas_vindas.aspx
Este controle pode ter suas propriedades visuais alteradas tanto em Design quanto via código. Nós vamos trabalhar suas propriedades via código, para isso abra o arquivo “boas_vindas.aspx.cs” e abaixo das variáveis criadas anteriormente adicione o seguinte código:
string login = Request.Form["txLogin"];
string senha = Request.Form["txSenha"];
PopupWin1.ActionType = EeekSoft.Web.PopupAction.MessageWindow;
PopupWin1.ColorStyle = EeekSoft.Web.PopupColorStyle.Green;
PopupWin1.ShowLink = false;
if (login == "valdir" && senha == "123")
{
PopupWin1.Message = "<p align=center>Olá <b><font color=blue>" + login +
"</font></b><br> Seja bem Vindo à comunidade </p>";
PopupWin1.Title = "Boas Vindas!";
}
else
{
PopupWin1.Message = "<p align=center>Olá <b><font color=blue>Anonimo" +
"</font></b><br> Você não é um usuário cadastrado. <br>" +
"Cadastr-se agora mesmo!!!</p>";
PopupWin1.Title = "Usuário não logado!";
}
Bem, acho que este controle dispensa comentários em relação o que cada propriedade faz, claro que ele possui muitas outras propriedades que podem ser ajustadas. Abaixo listo as principais propriedades deste controle.
ID – Nome do controle popup
ActionType - Tipo de ação para a janela popup. São 3 os tipo:
MessageWindow..: Modo default, abre uma janela padrão do IE.
RaiseEvents.......: Controla a janela popup através de eventos.
OpenLink...........: Pode-se definir um link para abrir na janela popup
AutoSohow – Propriedade booleana que indica se o popup vai ser executado automaticamente.
ColorStyle – Permite escolher um dos 4 estilos pré-definidos ou ainda criar um customizado.
DockMode – Indica em qual canto do vídeo a janela de alerta deve ser aberta inicialmente.
Height – Altura da janela de alerta.
HideAfter – Indica depois de quanto tempo (em milissegundos) a janela deve se ocultar.
Message – A mensagem a ser exibida na janela de alerta.
OffsetX e OffsetY – Além da posição onde queremos que a janela abra inicialmente, a qual setamos em DockMode, podemos também trabalhar com o posicionamento dado em pixels, nas direções X e Y, basta digitar o valo do offset nestas propriedades.
PopupSpeed – Representa a velocidade na qual aparece na tela o controle popup.
ShowAfter – indica o tempo o qual deve-se esperar para exibir o controle após carregar a página.
ShowLink – A mensagem na janela de alerta é transformada em um Link.
Title – Título da janela de alerta.
Width – largura da janela de alerta.
As propriedades de cores, não coloquei nesta lista porque são auto-visuais, ou seja, você muda e já vê o resultado, então não vejo necessidade de comentá-las.
Vamos rodar nossa aplicação para ver o resultado final. Não esqueça de iniciar sua aplicação através da página Default.aspx.
Na figura 4 estou ilustrando o processo de “Login” do meu exemplo.
Figura 4 - Processo de Login
Bacana esse controle hein!!!
Bem, acho que por enquanto é isso...
Usem e abusem deste controle, é um sem dúvida alguma um belo controle para personalizar suas páginas...
Um abraço e até um próximo artigo!!!
