Categoria: javascript

Categorias
ajax dicas javascript

Usando o ScripManager em sequ??ncia

Esse artigo ser?? apenas uma dica para os desatentos. Quando voc?? usa o ScriptManager para exibir um alerta, por exemplo, e em outro trecho do c??digo fazer a mesma coisa, ver?? que apenas o primeiro alerta ?? demonstrado e o segundo n??o. O porqu?? disso ?? se estiver reaproveitando o mesmo script e n??o diferenciar o bloco de execu????o dele, sempre ser?? exibido apenas o primeiro. Logo, o certo, ?? ter algo do tipo:

// Exibe o primeiro alerta
ScriptManager.RegisterStartupScript(Page, typeof(Page), “script1”, “alert(‘Alerta 1’);”, true);


…

// Exibe o segundo alerta
ScriptManager.RegisterStartupScript(Page, typeof(Page), “script2”, “alert(‘Alerta 2’);”, true);

Reparou no bloco script1 e script2? ?? isso.

Categorias
cufon dicas javascript jquery master page

Cufon na Master Page

Para quem est?? com problemas no carregamento/aplica????o do Cufon quando estiver usando Master Page, chame-o da seguinte forma:

<script>
Cufon.now();
function pageLoad(sender, args) {
      Cufon.refresh();
}
</script>

Assim ele aplica corretamente ap??s o carregamento da p??gina.

Categorias
ajax componentes dicas javascript

Utilizando mensagem de confirma????o e executando c??digo de acordo com o que foi clicado na mesma p??gina

N??o sei se o t??tulo ficou claro com o que eu queria dizer, mas vejamos a seguinte situa????o:

“Quero colocar uma mensagem de confirma????o via code-behind onde ir?? ser emitida para o usu??rio e a depender do que ele escolher ir?? ser processado um certo trecho de c??digo ou outro. Tipo o confirm do JavaScript, s?? que ?? executado pelo ASP.NET.”

No Code Project tem v??rias formas de implementa????o e umas delas me chamou a aten????o: o de Yavuz Kucukpetek. Usando AJAX ?? poss??vel transformar um Panel nessa janela flutuante usando o ModalPopupExtender. Dei uma simplificada no c??digo dele (j?? informei que n??o fiz, apenas ajustei) e voc?? podem baixar o controle modificado aqui.

Depois que baixarem o controle, adicione no seu projeto. Vamos l??! Na p??gina que deseja utilizar o controle, registre-o e coloque-o da seguinte forma:

<%@ Register Src=”~/inc_ConfirmMessage.ascx” TagName=”ConfirmacaoBox” TagPrefix=”Thiago” %>


<Thiago:ConfirmacaoBox ID=”ConfirmacaoBox” runat=”server”></Thiago:ConfirmacaoBox>

No code-behind dever?? ficar o seguinte:

    protected void Page_Load(object sender, EventArgs e)
    {
        ConfirmacaoBox.MsgBoxAnswered += Mensagem_Resposta;
    }

    public void Mensagem_Resposta(object sender, inc_ConfirmMessage.MsgBoxEventArgs e)
    {
        if (e.Answer == inc_ConfirmMessage.enmAnswer.OK)
        {
            // Se clicou em OK processa o que deseja
        }
        else
        {
            // Sen??o processa outra coisa
        }
    }

    protected void ExecutaProcesso_Click(object sender, EventArgs e)
    {
        ConfirmacaoBox.AddMessage(“Deseja continuar o c??lculo do processo na mesma p??gina?”, inc_ConfirmMessage.enmMessageType.Attention, true, true, “”);
    }

Pronto! Apenas isso… Vamos ??s explica????es. No Page_Load precisamos informar o m??todo que ir?? gerenciar as decis??es do usu??rio, por isso informamos o Mensagem_Resposta. Dentro dele ir?? conter os processos que ir??o ser executados a depender da escolha. O ExecutaProcesso_Click ?? o m??todo executado quando clicamos no bot??o que ir?? disparar a pergunta.

“Ah Thiago, mas a?? ?? s?? apenas uma confirma????o. E se eu quiser v??rias intera????es?”

Simples, basta adicionar outra Caixa de Confirma????o para a segunda etapa de decis??es chamando-a dentro do processo de decis??o da primeira e assim por diante.

Categorias
dicas javascript jquery mootools

Problema do Mootools dentro de um frame

O Mootools ?? um framework JavaScript para criar abas com um belo design e praticidade no uso. Por??m verifiquei que ele tem um certo “probleminha de comportamento” quando o usa dentro de um frame / frameset no IE. O seu carregamento / aplica????o de estilo se d?? atrav??s de uma adi????o de uma fun????o chamadora na janela (usando window.addEvent). A condi????o para execu????o do script se d?? quando o DOM estiver pronto, ou seja, window.addEvent(‘domready’,function({})); . O problema ?? que, para o Internet Explorer (IE) o carregamento da p??gina ?? meio que desordenado enquanto o Firefox e Chrome (n??o testei nos demais navegadores) possuem uma ??tima engine de carregamento de p??gina. Ou seja, ?? vezes o conte??do da p??gina demora a ser carregado e o DOM fica pronto antes dos controles HTML serem devidamente carregados ocasionando erro na execu????o. Para contornar o problema, basta substituir o ‘domready‘ por ‘load‘. Ent??o a aplica????o do Mootools sobre o conte??do ser?? providenciado logo que a p??gina for totalmente carregada. O problema ?? se houver muito conte??do na p??gina e houver demora no carregamento da p??gina pois o estilo ser?? aplicado apenas no final… da?? ?? s?? ter mesmo paci??ncia (ou remove do frame)!

Obs: outros frameworks JavaScript podem vir a ocasionar o mesmo problema sob as mesmas circunst??ncias.

Categorias
ajax html javascript

Refresh autom??tico ou execu????o de script em ciclos

Durante o desenvolvimento de muitos sistemas web nos deparamos com as seguintes situa????es:

  • P??gina dar refresh automaticamente a cada x segundos;
  • Executar um bloco de script (JavaScript) a cada x segundos;
  • Executar um bloco de c??digo (ASP.NET) a cada x segundos sem refresh na p??gina.

Creio que s??o essas as principais situa????es que s??o mais comumentes buscadas afim de atingir o objetivo de atualiza????o autom??tica. Pois bem, nesse artigo irei demonstrar como solucion??-las de maneira r??pida e eficaz.

Situa????o 1: Atualizar p??gina automacatimente

Para essa situa????o, que ?? a mais simples, basta inserir a seguinte tag no head da p??gina especificando a quantidade de segundos que deve aguardar para dar o refresh:

<META HTTP-EQUIV=“Refresh”
CONTENT=“10;URL=http://thiagomarcal.blogspot.com”>

Situa????o 2: Executar uma fun????o JavaScript a cada x segundos

Se derem uma olhada no post anterior do chat, ver??o que uso uma fun????o chamada setTimeout() que ir?? registrar qual fun????o ir?? executar e qual o tempo de espera. Ent??o, coloque o seguinte c??digo JS:

window.onload = function() {
    setTimeout(“FuncaoJS()”, 10000);
}
 
function FuncaoJS(){
    // Instru????es
    setTimeout(“FuncaoJS()”, 10000);
}

De forma similar, pode-se usar tamb??m a fun????o setInterval().

Situa????o 3: Executar um m??todo ASP.NET a cada x segundos sem dar refresh

J?? para o ASP.NET podemos usar o AJAX. Para isso utilizaremos um Timer e um UpdatePanel. Na p??gina, adicione o ScriptManager e insira o Timer dentro do ContentTemplate do UpdatePanel. Atribua um m??todo no evento OnTick do Timer ficando da seguinte forma:

<Ajax:ScriptManager ID=“ScriptManagerAjax” runat=“server”>
</Ajax:ScriptManager>
<Ajax:UpdatePanel ID=“Painel” runat=“server”>
<ContentTemplate>
<Ajax:Timer ID=“Temporizador” runat=“server” Interval=“10000” OnTick=“ExecutaScript_Tick”>
</Ajax:Timer>
</ContentTemplate>
</Ajax:UpdatePanel>

Se voc?? deixar o Timer fora do UpdatePanel ele ir?? realizar a execu????o do bloco de script, mas ir?? dar PostBack e, consequentemente, refresh na p??gina. Por isso, e mais amig??vel, deve-se deixar dentro.
Agora basta criar o m??todo no Code-Behind contendo o c??digo a ser executado:

protected void ExecutaScript_Tick(object sender, EventArgs e)
{
}

Tranquilo, n???

Categorias
chat javascript visual studio

Criando um Chat em ASP.NET em 1 minuto

Para quem quer ter um chat em seu web site, esse componente ?? uma m??o na roda. Muito f??cil de ser utilizado e configurado, apesar de seus bugs (irei solucion??-los no fim do post). Em poucos segundos voc?? tem um chat funcional! A Web Furbish desenvolveu esse componente e pode ser encontrado tanto aqui quanto aqui e em v??rios mirros pela net. Vamos ao desenvolvimento…
Extraia os arquivos em um local onde poder?? busc??-los. Agora crie um novo Web Site. Se for sua primeira vez usando o componente, primeiramente, deve-se adicionar o novo controle ao ToolBox do Visual Studio. Para isso, clique com o bot??o direito em algum local onde ?? exibido os itens e escolha a op????o Choose Items:

Quando surgir a caixa de sele????o de componentes, na aba .NET Framework Components, clique no bot??o Browse… para selecionar a DLL JaxterChat.dll na pasta onde extraiu os arquivos a princ??pio. Clique em OK para carreg??-la. Ver?? que ela foi adicionada ao ToolBox. Esse passo foi o mais dif??cil! Em seguida copie a pasta JaxterChat (que havia junto ?? DLL) e incorpore-o a seu projeto. Nessa pasta cont??m arquivos de imagem, som, etc. Agora ?? simples: arraste-o para a p??gina para que ele seja adicionado. Pronto! Voc?? j?? tem seu chat…
O resto ?? apenas configura????o: tema, tempo de atualiza????o, usar som, nome dos labels, etc. Veja como ficou o meu!

Tranquilo e pr??tico, n??o? Antes dos bugs, vamos a alguns questionamentos?

1) Como fa??o para ter v??rias salas?

Voc?? n??o precisar criar v??rias p??ginas para a cada sala. Basta que, no Page_Load, atribua o nome da sala ao controle. Exemplo: Chat.RoomName = “Blog”; O controle ir?? se encarregar de fazer a separa????o dos usu??rios de acordo com o nome da sala.

2) Como gravar o log das conversas?

Crie um m??todo para o OnMessagePosted do chat. Voc?? pode gravar em banco ou em arquivo. Ficaria mais ou menos assim:

protected void Grava_Log(object sender, WebFurbish.JaxterMessageEventArgs e)
{
      string sala = e.RoomName;
      string usuario = e.UserName;
      string mensagemExibida = e.Message;
      string mensagemHtml = e.MessageHTML;
      string hora = DateTime.Now.ToString(“dd/MM/yyyy HH:mm:ss”);
      // Grava o log em banco ou em arquivo
}
 
3) Como enviar mensagens ??s salas (avisos de administra????o, etc) igual a um Broadcast?
 
Esse ?? um pouco mais complicado e demorado, ent??o irei explicar em linhas gerais como seria:

  • Pegaria todas as sala usando o m??todo GetRoomList();
  • E para cada sala faz-se o envio atrav??s do m??todo SendCustomMessage().

Um exemplo seria: Chat.SendCustomMessage(“Nova not??cia no blog!”, “Administra????o”, “Blog”, false);
O par??metro false indica que essa mensagem n??o ser?? processada em log (ou seja, n??o parass?? pelo m??todo do OnMessagePosted).
 
E n formas que h?? de customizar o chat para trabalhar da forma como desejar. Pois bem, agora vamos aos bugs encontrados. Quando levantei esses bugs enviei um e-mail para eles mas n??o obtive resposta at?? o momento (tamb??m nem tentei mais… :P).

Bug 1: A cada mensagem entrada, a barra de rolagem ao inv??s de acompanhar as mensagens, ela fica sempre apontada para o topo. Ou seja, ela n??o desce…

Notamos isso quando come??a a encher de mensagens. A barra ao inv??s de rolar automaticamente para baixo, fica estagnada no topo. Analisando o JavaScript que ele gera, verifiquei que h?? um problema na fun????o WF_goToBottomScroll. Da??, como n??o posso apagar ela, criei uma outra com o mesmo nome. Como h?? sobrecarga ela ser?? executada tamb??m. ?? armengue, mas ?? uma solu????o. Como funciona essa solu????o? A cada 0 segundos verifico se o foco est?? no campo de texto digitado: se estiver, a barra da div rola automaticamente para baixo. Para que isso funcione, baixe esse script aqui para fazer uma varredura de controles HTML. E adicione o seguinte bloco de c??digo JS na p??gina que cont??m o chat:

window.onload = function() {
    setFocusTracking();
    sizeMsgOut = document.getElementById(‘WF_msgOut’).scrollHeight;
    setTimeout(“WF_goToBottomScroll(‘WF_msgOut’);”, 0);
}


function WF_goToBottomScroll(elemento) {
    var msgOut = document.getElementById(elemento);
    if (document.hasFocus) {
        if (document.hasFocus.id == ‘WF_textInput’)
            msgOut.scrollTop = msgOut.scrollHeight;
    }
    setTimeout(“WF_goToBottomScroll(‘” + elemento + “‘);”, 0);
}

Bug 2: O som n??o funciona!

Quando vi que iria ter som, pensei: “Bala!”. Mas da?? ele exige Java para rodar. Pensei novamente: “Tranquilo! Hoje na net, em sites de banco, tem que ter Java, logo pro chat vai ser pr??-requisito ter tamb??m.”. Instalei a vers??o mais recente e n??o funcionou! Porque, eu n??o sei. Como o componente ?? fechado, a ??nica coisa que deu para ver ?? que ele chama uma classe Java SoundApplet.class j?? compilada. Enfim, providenciei outra solu????o: coloquei a propriedade EnableSound como false e adicionei algumas linhas ao script WF_goToBottomScroll para tocar um som a cada vez que ?? dado uma entrada de mensagem. Esse som ?? puro JavaScript! Primeiro, adicione uma tag de som em background em qualquer local da p??gina, assim:

<BGSOUND id=“sound” src=“”>

Depois crie uma vari??vel global var sizeMsgOut = 0; antes do window.onload . Ou seja, estou criando uma vari??vel global que ir?? armazenar o tamanho de minha div a cada momento e quando entrar na p??gina pela primeira vez ter?? valor 0. Agora, adicione as linhas abaixo na fun????o WF_goToBottomScroll antes do setTimeout:
if (document.getElementById(‘WF_msgOut’).scrollHeight != sizeMsgOut) {
    document.all.sound.src = “JaxterChat/Sounds/alert.au”;
    sizeMsgOut = document.getElementById(‘WF_msgOut’).scrollHeight;
}

A cada itera????o da fun????o, verifico se o tamanho da div que cont??m as mensagens ?? diferente do valor armazenado na vari??vel. Se for ?? porque entrou nova mensagem logo deve tocar o som.

Esses foram dois bugs que encontrei quando estava usando-o. Pode ser que haja outros que n??o encontrei. Se n??o tiver ?? bom, pois ?? um chat bem legalzinho e f??cil e manipular. At?? mais!