Olá, pessoal.
Hoje vamos fazer uso do AJAX Control Toolkit, fornecido na faixa, for free, para criar uma caixa com uma mensagem de notificação em nossa página que se assemelha a notificação do WLM.
Antes de tudo, vamos precisar:
- Visual Studio 2005 / 2008 ou Visual Web Developer (free);
- Quem tem o Visual Studio 2005 e/ou vai desenvolver em ASP.NET 2.0 vai precisar também do AJAX Extensions 1.0;
- AJAX Control Toolkit;
Pularemos as instruções de instalação já que nos respectivos endereços de download estão também os procedimentos para cada um deles.
Vamos abrir o Visual Studio e pedir um "Novo Web Site", e escolher o template que incluir já as ferramentas AJAX (este template é criado na instalação dos Extensions no VS 2005);
Estarei colocando meu exemplo devidamente explicado em comentários sobre o porque de cada coisa. Enjoy it!
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<%--Esta linha acima (ou algo muito parecido com ela) é criada
automáticamente quando você arrasta algum componente
do AJAX Control Toolkit da toolbar.--%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Animation</title>
<style type="text/css">
html, body, form
{
height: 100%;
margin: 0;
} /* Este css está aqui apenas para efeitos didáticos.
Vamos criar uma tabela que ocupe toda a tela para podermos
testar se os controles que ficarem embaixo da nossa notificação
estão bloqueados ou não. */
.pnlMensagem
{
opacity: 0;
-moz-opacity: 0;
filter: alpha(opacity=0);
/* Como a notificação não funciona com o "display: hidden" (escondida)
em seu estilo, precisamos deixá-la totalmente transparente
durante o carregamento da página.
Precisamos dos 3 filtros acima para garantir isso em diferentes navegadores */
height: 200px;
width: 200px;
background-color: #99ccff;
border: solid 1px #000000;
/* Uma formatação qualquer pra notificação */
overflow: hidden;
/* Para não termos barras de rolagens na nossa notificação */
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<%--O ScriptManager é O CARA pro AJAX no ASP.NET. Deve ser o primeiro controle do form.
Ele está no grupo AJAX Extensions no seu toolbar.--%>
<table border="0" cellpadding="0" cellspacing="0" style="height: 100%; width: 100%">
<%--Fazendo a tabela ocupar toda a tela--%>
<tr>
<td>
<input id="Button1" type="button" value="Mostrar" onclick="MostrarMensagem();" />
<input id="Button2" type="button" value="Esconder" onclick="EsconderMensagem();" />
<%--Botões onde vamos testar o funcionamento de nossa notificação--%>
</td>
<td valign="bottom">
<p style="text-align: right">
<input type="button" value="Algo" onclick="alert('Clicou!');" />
<%--Botão posicionado para ficar escondido sob a notificação.
Tem que estar disponível quando a notificação não estiver
sendo exibida. Vamos testar na sequência. --%>
</p>
</td>
</tr>
</table>
<asp:Panel runat="server" ID="pnlMensagem" CssClass="pnlMensagem">
Aqui vai a sua mensagem ou o que quer que seja que você queira pôr no Panel
</asp:Panel>
<%--O panel acima é efetivamente o panel que vai aparecer como notificação.
Sinta-se a vontade para preenche-lo com o que for necessário.--%>
<ajaxToolkit:AlwaysVisibleControlExtender ID="pnlMensagem_AlwaysVisibleControlExtender"
runat="server" Enabled="True" TargetControlID="pnlMensagem" HorizontalSide="Right"
VerticalSide="Bottom">
</ajaxToolkit:AlwaysVisibleControlExtender>
<%--Este extender do AJAX Toolkit é o que vai garantir que nossa
notificação apareça no canto inferior direito, indiferente
da quantidade de conteúdo da página e da posição do scrollbar.
Verifique bem as propriedades: ele está apontado para nosso panel
e com os "sides" configurados para onde deve ficar a notificação.--%>
</form>
</body>
</html>
<script type="text/javascript">
// Javascript no final da página!? Tudo bem... É contra as normas
// mas é o melhor lugar para se colocar os scripts que dependem
// dos controles AJAX, uma vez que quando o browser ler o header
// da página, o ScriptManager não estará carregado ainda.
function MostrarMensagem()
{
/// <summary>
/// Esta é a função que vai fazer a notificação ser exibida
/// </summary>
var controle = $get("<%= pnlMensagem.ClientID %>");
// Criando a referência para o panel da notificação
// A função $get é definido no Framework AJAX da Microsoft.
// Estude ele. Garanto que vale a pena.
// Temos muita coisa pronta lá (e testada nos browsers
// mais populares do mercado) para você não precisar
// ficar reinventando a roda.
var animacao = new AjaxControlToolkit.Animation.SequenceAnimation(controle, 0, 25);
// Como nossa animação precisa de 2 etapas, criamos um Sequence animation.
// O primeiro parâmetro recebe o controle que será animado.
// O segundo parâmetro informa a duração do efeito. Como o sequence obedece
// a duração dos eventos internos, pode ficar em 0 mesmo.
// O terceiro parametro é o "fps" (frames per second) que define a qualidade
// gráfica da animação. Geralmente 25 a 30 dá conta do recado sem sobrecarregar
// o navegador
animacao.add(new AjaxControlToolkit.Animation.HideAction(controle, 0, 25, true));
// A primeira animação de nossa sequência: exibir o controle de notificação
// (mesmo que ainda transparente) para este ficar acessível para a segunda
// animação e bloquear a área que ficar sob ele. Os 3 primeiros parametros
// são o mesmo do método anterior. O último parametro está como true indicando
// que o controle deve ser exibido. False esconde o controle. Eu sei: é meio
// contra o nome do método "HideAction", mas não me culpem, não fui eu quem
// fez o toolkit. Hehehe!
animacao.add(new AjaxControlToolkit.Animation.FadeInAnimation(controle, 0.5, 25, 0, 1, true));
// FadeIn: este cara faz a parte ornamental da coisa.
// Primeiro parametro é o panel da notificação.
// O segundo é o tempo, neste caso definimos que a animação deve durar meio segundo.
// O terceiro é o já citado FPS.
// O quarto parametro é a opacidade inicial do controle. Zero significa transparente.
// O quinto parametro é a opacidade final do controle. Um significa totalmente opaco, visível.
// O true do quinto parametro é algo relacionado ao IE, mas não pesquisei a fundo.
animacao.play();
// Disparando a animação na tela
}
function EsconderMensagem()
{
/// <summary>
/// Esta é a função que vai esconder novamente nossa notificação
/// </summary>
var controle = $get("<%= pnlMensagem.ClientID %>");
// Velho conhecido
var animacao = new AjaxControlToolkit.Animation.SequenceAnimation(controle, 0, 25);
// Velho conhecido
animacao.add(new AjaxControlToolkit.Animation.FadeOutAnimation(controle, 0.3, 25, 0, 1, true));
// FadeOut: hora de esconder de novo a notificação, seja devido a algum clique do usuário
// ou algum timer (temporizador) que você venha a criar.
animacao.add(new AjaxControlToolkit.Animation.HideAction(controle, 0, 25, false));
// Velho conhecido.
// Note que agora nós invertemos a ordem dos eventos.
// Primeiros fazemos a parte visual de sumir com a notificação
// para depois esconder efetivamente o panel, para liberar
// novamente a área abaixo dele para o internauta
animacao.play();
// Velho conhecido
}
function Teste()
{
/// <summary>
/// Função decorativa só para mostrar que o botão que fica
/// escondido pela notificação estará funcional quando a
/// notificação estiver oculta.
/// </summary>
alert('Teste');
}
AjaxControlToolkit.Animation.HideAction.play($get("<%= pnlMensagem.ClientID %>"), 0, 25, false);
// Lembra que no CSS do Panel da notificação nós definimos ele apenas como transparente,
// mas ainda ocupando uma área na tela e impedindo o acesso aos controles sob ele?
// Neste bloco de script já depois do corpo da página, nós finalmente mandamos
// ele desobstruir a área que ele vai ocupar. Tem que ser feito por uma animação,
// se você definir o display: hidden no braço as animações não irão funcionar.
</script>
É isso por hoje. Testei o código acima no IE7, IE6 (que infelizmente está demorando pra sumir do mapa) e no Firefox e tudo redondinho.
Em breve estaremos por aqui de novo. Até lá, felicidades, bom carnaval!
Nenhum comentário:
Postar um comentário