O NeoMatrix Tech está de casa nova!

Você deverá ser redirecionado em 6 segundos. Se não, visite:
http://www.leonelfraga.com/neomatrixtech
e atualize seus favoritos.

Aviso IMPORTANTÍSSIMO!

Aviso aos navegantes:

O NeoMatrix Tech mudou de casa!!!

A partir de agora, acessem pelo novo endereço:

http://www.leonelfraga.com/neomatrixtech

Ué... mas é só o domínio mudou de lugar?

R: Na verdade, não é bem assim hehe. Este domínio que você acessa agora aponta para um blog hospedado no Blogger, enquanto no novo, aponta para um blog na plataforma Wordpress, hospedagem própria, muito mais rápida e com um layout mais agradável de ler ;)

Não vou fechar este domínio igual ao que eu fiz com o NM Light (que já está 100% na nova plataforma). Talvez beeeeeeem depois eu faça isso.

Todos os posts daqui se encontram lá, e novos posts serão colocados somente no novo endereço.
A única coisa que não consegui importar foram os comentários. Mas em breve vai ter um post contando sobre a epopéia que foi migrar o NeoMatrix Tech!

Somente vou fechar a área de comentários daqui. Caso queiram comentar, favor ver o post correspondente no "Novo NeoMatrix Tech" e comentem por lá. É bem melhor! (pena que os permalinks "amigáveis para SEO" não funcionam lá, dá erro 404 e não consigo fazer a configuração funcionar. E olha que eu já vi vários artigos falando desse assunto :( ).

Quem assina o feed, já está lendo o conteúdo do novo NeoMatrix Tech!

domingo, 29 de junho de 2008

Ajax Loader com Bloqueio da Tela

Olá pessoal! Nos posts anteriores, vimos como trabalhar com Banco de dados no C# utilizando uma classe que facilita e muito as operações com BD, principalmente as básicas (inserção, deleção, atualização e seleção). Agora, nesse post, vou dar uma dica de como dar um "tapa" no front-end de uma aplicação ASP.NET, ou seja, na interface com o usuário.

Você já deve ter visto por aí em alguns sites que quando executam uma operação, fica em algum lugar um indicador de processamento, algo como uma telinha escrito "Carregando" na página. Isto é feito utilizando-se AJAX, e serve basicamente para não "matar" o usuário de tédio enquanto o browser realiza alguma comunicação com o servidor assincronamente.

Se você já teve a oportunidade de trabalhar com o ASP.NET Ajax Extensions, deve ter visto um componente chamado UpdateProgress, não é? Ele serve justamente para fazer o que eu disse acima, ou seja, apresentar uma mensagem para o usuário enquanto um postback assíncrono é executado. Ele aparece quando a requisição é iniciada (quando clicamos em um botão, por exemplo) e some quando a página é atualizada.

Mas ele tem um incoveniente: Quando o postback é executado, o usuário tem total acesso aos outros elementos da página, dependendo de como você fez o conteúdo do UpdateProgress. Ou seja, enquanto uma requisição é processada, se o usuário clicar em qualquer outro botão, a requisição é cancelada e isso pode ter outros efeitos desagradáveis também. Vou mostrar uma maneira de como "travar" o acesso a página enquanto um postback é executado.

Para isso, vamos utilizar o excelente JQuery e o plugin jqModal.

Nossa ação vai consistir em fazer uma janela modal aparecer quando for solicitado um postback assíncrono da página; o overlay definido na janela modal irá bloquear o acesso aos elementos da página enquanto a requisição é processada. Também iremos incluir uma maneira do usuário cancelar o processamento, caso seja muuuuuuuuito longo (uma consulta demorada e com um filtro não bem delimitado por engano, por exemplo).

Para os exemplos, estarei utilizando o Visual Studio 2005.

Primeiro, crie um novo website habilitado para AJAX, e coloque o seguinte código no arquivo .aspx:


   1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
   2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
   3: <html xmlns="http://www.w3.org/1999/xhtml">
   4: <head runat="server">
   5: <title>Exemplo de Ajax Loader Modal</title>
   6: <script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
   1:  
   2: <script type="text/javascript" src="jqModal.js">
   1: </script>
   2: <link rel="stylesheet" href="jqModal.css" />
   3: <style type="text/css">
   4: .AjaxLoader 
   5: {
   6: width:200px;
   7: height:200px;
   8: top:50%;
   9: left:50%;
  10: margin-left:-100px;
  11: margin-top:-100px;
  12: background-color:#0000FF;
  13: z-index:4000;
  14: text-align:center;
  15: position:absolute;
  16: }
  17: </style>
  18: </head>
  19: <body>
  20: <form id="form1" runat="server">
  21: <asp:ScriptManager ID="ScriptManager1" runat="server" />
  22: <asp:UpdatePanel runat="server" ID="UpdatePanel1">
  23: <ContentTemplate>
  24: <div>
  25: <asp:Button runat="server" ID="btnClickMe" Text="Clique-me :-)" OnClick="btnClickMe_Click" />
  26: </div>
  27: </ContentTemplate>
  28: </asp:UpdatePanel>
  29: <asp:UpdateProgress runat="server" ID="UpdateProgress1">
  30: <ProgressTemplate>
  31: <div id="dvAjaxLoader" class="AjaxLoader">
  32: <img src="ajax-loader.gif" alt="Carregando..." />
  33: <span style="color:White;font-family:Verdana;font-weight:bold;">Carregando...</span><br />
  34: <div style="width:100%;text-align:center;">
  35: <input type="button" id="btnCancelar" value="Cancelar Requisição" onclick="cancelPostback();" />
  36: </div>
  37: </div>
  38: </ProgressTemplate>
  39: </asp:UpdateProgress>
  40: <div id="dvModalLoader" style="width:0px;height:0px;left:-8000px;" class="jqmWindow">
  41: </div>
  42: <script type="text/javascript">
  43: //Inicializa o Modal
  44: var $dvModalLoader = $('#dvModalLoader').jqm({modal:true,toTop:true,trigger:false});
  45: //Adiciona os eventos para exibir/ocultar modal enquanto o postback assíncrono é executado.
  46: Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest); 
  47: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
  48: function beginRequest(sender,args)
  49: {
  50: $dvModalLoader.jqmShow();
  51: }
  52: function endRequest(sender,args)
  53: {
  54: $dvModalLoader.jqmHide();
  55: }
  56: function cancelPostback()
  57: {
  58: Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
  59: return false;
  60: }
</script>
   7: </form>
   8: </body>
   9: </html>

Coloque também o seguinte no code-behind:


   1: protected void btnClickMe_Click(object sender, EventArgs e)
   2: {
   3:     Thread.Sleep(5000);
   4: }

Com isso, construímos uma página que dentro de um UpdatePanel temos um botão, que ao ser clicado executará alguma coisa no servidor. Como não temos nada, coloquei apenas um delay, que é o suficiente para demonstrar o efeito do bloqueio da página.

Também colocamos um UpdateProgress, onde iremos construir a caixa que irá aparecer para o usuário ficar aguardando pelo carregamento da página. Nela tem uma figura, construída pelo site http://www.ajaxload.info/, um label e um botão, que ao ser clicado irá cancelar o postback. Um cuidado que devemos ter é colocar o atributo z-index do loader SEMPRE acima dos outros elementos da página, inclusive das janelas modais.

Além disso, temos um div que foi nomeado de "dvModalLoader", cuja classe CSS é "jqmWindow" (definida no arquivo jqModal.css) que define as características da janela modal para o plugin jqModal. Note que a largura e altura foram definidas para "0px" e posicionada com left em "-8000". A única coisa que iremos utilizar deste div é o overlay que o jqModal coloca para exibir a janela modal, e através dele bloquear o conteúdo atrás dele.

A mágica toda será executada através de JavaScript, então vamos a ele:


   1: //Inicializa o Modal            
   2: var $dvModalLoader = $('#dvModalLoader').jqm({modal:true,toTop:true,trigger:false});

A linha acima inicializa o plugin jqModal, informando que o div dvModalLoader é uma janela modal. Através da variável $dvModalLoader é possível controlar a exibição da janela com os métodos jqmShow() e jqmHide() para exibir e ocultar, respectivamente.

Uma vez exibido a janela modal, os componentes que estão atrás dele não poderão ser clicados; somente poderemos usá-los após fechar a janela modal, o que pode ser feito com um botão dentro dela, chamando o método jqmHide().

O fluxo do botão "Clique-me :-)" fica assim: o botão é clicado, abre-se a janela modal, o UpdateProgress é exibido, é feito um processamento no servidor e após o processamento a página é atualizada e volta ao estado normal.

Para que essa janela modal apareça sempre ao efetuar uma chamada assíncrona ao servidor, juntamente com o UpdateProgress, iremos sobreescrever dois eventos da biblioteca AJAX, os eventos beginRequest e endRequest, que disparam quando uma chamada assíncrona é iniciada e finalizada, respectivamente.


   1: //Adiciona os eventos para exibir/ocultar modal enquanto o postback assíncrono é executado.
   2: Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest); 
   3: Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
   4: function beginRequest(sender,args)
   5: {
   6:     $dvModalLoader.jqmShow();
   7: }
   8: function endRequest(sender,args)
   9: {
  10:     $dvModalLoader.jqmHide();
  11: }
  12: function cancelPostback()
  13: {
  14:     Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
  15:     return false;
  16: }


No evento beginRequest, daremos o comando de exbição do dvModalLoader. Ao se iniciar um postback, o dvModalLoader é exibido e em seguida o UpdateProgress. Ao terminar a requisição ao servidor e a página for atualizada, é disparado o evento endRequest, ocultando o dvModal.

Construímos, no div que contém o Ajax Loader, um botão de cancelamento. No script acima, temos a função cancelPostback, que é a responsável por finalizar a requisição, disparando um endRequest e liberando a página para o usuário.

Como eu não tenho um local para hospedar o exemplo, vejam um vídeo com o efeito funcionando:


Os arquivos utilizados como exemplo do post estão na Página de Suporte do NeoMatrix Tech no link abaixo :-)

Exemplo de bloqueio de tela nas requisições ASP.NET AJAX usando jQuery (29 KiB)


Um abraço a todos!

4 comentários:

Anônimo,  22 de mai de 2009 09:39:00  

aonde fica essa pagina de suporte por favor!

Leonel Fraga de Oliveira 22 de mai de 2009 10:40:00  

@Anônimo.

Ops... falha minha :-)
Devido a várias mudanças de template depois que este post foi publicado, esqueci deste detalhe.

Segue a página de suporte:
http://br.geocities.com/leonel_fraga/neomatrixtech/download_neomatrixtech.html

Em breve, como o Geocities irá sair do ar, vou reeditar os posts que contém link para esta página (ou mencionam), e colocar os respectivos arquivos para download diretamente no post, igual nas postagens atuais.

Um abraço e valeu pelo aviso :-)

Anônimo,  17 de fev de 2010 17:16:00  

Prezado Leonel,
Sou iniciante em jquery e estou implementando o exemplo acima. Está funcionando perfeitamente.
Gostaria de aprender a incluir no exemplo a abertura de uma página aspx, em substituição à imagem. Onde tenho que modificar o código.
Poderia me ajudar... outra coisa seria como fazer a página por trás no stylo transparente.
Grato. adim.almeida@globo.com

Leonel Fraga de Oliveira 17 de fev de 2010 21:27:00  

hum... vc poderá colocar um iframe dentro do modal, ou então, quando for chamar o javascript que declara o modal, passar um parâmetro "ajax" com o nome da página aspx que vc quer abrir.

Quanto a página de trás transparente, vc fala do overlay ou da própria página de conteúdo? Se for o overlay, lá no jqModal.css tem onde formatá-lo.

[]'s!


Postar um comentário

Para tornar este artigo ainda mais interessante, escreva suas críticas (desde que construtivas e sem ofenças), elogios, sugestões, complementos, dúvidas, etc, etc, etc!!!

Sobre o NeoMatrix Tech

Meu blog para assuntos profissionais, ligado com tecnologia.
Dicas de programação (grande parte de C# e ASP.NET, mas não limitado a essa plataforma :-) ), dicas de utilitários, análises de equipamentos e serviços, resenhas sobre sites que eu visito, relacionados com tecnologia, opinião sobre mercado de trabalho, metodologias de desenvolvimento, comportamento no mundo tecnológico...

NeoMatrix Light

  © Blogger templates ProBlogger Template by Ourblogtemplates.com 2008 - Editado e configurado por Leonel F.

Voltar ao TOPO