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.
Mostrando postagens com marcador javascript. Mostrar todas as postagens
Mostrando postagens com marcador javascript. Mostrar todas as postagens
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.
<script>
Cufon.now();
function pageLoad(sender, args) {
Cufon.refresh();
}
</script>
Assim ele aplica corretamente após o carregamento da página.
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:
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.
"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.
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.
Obs: outros frameworks JavaScript podem vir a ocasionar o mesmo problema sob as mesmas circunstâncias.
Refresh automático ou execução de script em ciclos
Durante o desenvolvimento de muitos sistemas web nos deparamos com as seguintes situações:
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:
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é?
- 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.
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é?
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:
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:
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!
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().
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!
Postagens
