CRIAR UM POPUP DE ALERTA SIMILIAR AO LIVE MESSENGER

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