Nem tudo na vida são mil maravilhas!

Alguns screenshots muito cômicos achados em outros sites (infelizmente não tenho mais os créditos):

 




 

Service Pack 3 do Windows XP está pronto

Saiu na Info:
http://info.abril.com.br/aberto/infonews/042008/22042008-8.shl

A Microsoft já está entregando o SP3 do Windows XP para alguns fornecedores. Ainda segundo a nota, a partir do dia 29/abril o download já estará disponível ao grande público.

Este service pack não traz nenhuma grande novidade, mas só de instalar um windows e não ter que de cara baixar mais de 100mb de atualizações já é de grande ajuda. Sem contar que isto dará fôlego ao XP para os usuários insatisfeitos com o Vista (quase todos) esperarem para ver como será o "Windows 7".

Todos os usuários do Windows XP agradecem! :-)

Encoding em Update Panel

    Esta semana me deparei com um problema de resolução bem simples, mas que pode tirar uma pessoa do sério ao utilizar o update panel do ASP.NET AJAX.
    Por motivo de compatilidade com nosso conjunto de caracteres, na empresa onde trabalho costumamos criar os aplicativos ASP.NET e definir os encodings sempre para iso-8859-1 no web.config:

<system.web>
    <globalization fileEncoding="iso-8859-1" responseEncoding="iso-8859-1" requestEncoding="iso-8859-1" uiCulture="pt-BR" />
[...]
</system.web>

    Tudo funcionava muito bem, pois não tinhamos o custume de usar AJAX.
De um tempo pra cá, entramos na onda Web 2.0, onde tudo é interativo, tudo é AJAX.
    Nesta semana que passou uma desenvolvedora estava testando novas tecnologias em seus projetos, entre as quais utilizando o que podemos chamar de "AJAX Express", o Update Panel. Explico: a grosso modo, o Update Panel não exige nenhuma grande mudança nas páginas, você joga um update panel e a página vira AJAX. Mas esta facilidade tem seu custo. Toda vez que você atualiza a página no update panel, todo o viewstate trafega junto e em uma página complexa isto realmente é um grande tráfego. Mas meios mais eficientes serão tema de um futuro post.
    Voltando ao que interessa. Quando minha colega tentou recuperar os valores de um TextBox, os caracteres especiais não vinham corretamente, aquele valor não era utilizável. Depois de deixá-la procurando uma solução sozinha por algum tempo, aproximei-me para ver o que estava acontecendo. Depois de algumas tentativas, percebi que o textbox estava dentro de um update panel e isto fazia toda a diferença. Pedi para ver o web.config do aplicativo e foi onde lembrei que também já passei por este problema. O update panel ignora o encoding do webconfig e tenta ler tudo como UTF-8. Isto me parece um bug, mas não procurei a fundo o motivo (talvez exista um). Mudamos o web.config para:

<system.web>
    <globalization fileEncoding="iso-8859-1" responseEncoding="utf-8" requestEncoding="utf-8" uiCulture="pt-BR" />
[...]
</system.web>

    Aí tudo correu bem!
    Resumo da história: se você for utilizar update panels em seu aplicativo, lembre-se de sempre definir responseEnconding e requestEncoding como UTF-8.
    Mas dê uma olhada em PageMethods. É bem mais trabalhoso de utilizar, mas tanto o tamanho das respostas quanto a agilidade na atualização da página são muito melhores. Mas vão precisar que você tenha um bom conhecimento de JavaScript.

Abraços e até a próxima!

Plugins para o Internet Explorer que todo desenvolvedor ASP.NET deve ter

Pra começar, porque o IE?
Não, o IE não é o melhor browser. Mas ele carrega muito mais rápido por estar enraizado no Windows e tem suporte no Visual Studio para a depuração de javascript. E isto faz a diferença pro desenvolvedor web. Para o Firefox existem excelentes plugins para este fim também, mas o debugger de javascript do Visual Studio 2008 está excelente e vale a pena ser utilizado.
Agora vamos aos plugins propriamente dito.
O primeiro plugin obrigatório é o IE7Pro. Na verdade este plugin não é voltado ao desenvolvedor, mas traz excelentes recursos que não dá pra entender como não estão já no próprio IE, uma vez que seus concorrentes os têm. Com ele você pode manter sincronizados seus Favoritos, caso utilize mais de um computador, pode ver mais detalhes na janela de propriedades da página (como as imagens, os css's...), pode salvar a página como imagem, pode redimensionar a janela para tamanhos comuns de desktops como 800x600, 1024x768... (estes 2 últimos bem úteis ao desenvolvedor), e mais uma porção de aprimoramentos como "crash recovery" (recuperação de sessões travadas), gestos de mouse, etc.
Outro plugin indispensável é o Internet Explorer Developer Toolbar. Este traz um inspetor de elementos (aponte o mouse para uma imagem, por exemplo, e você vê todas as propriedades da mesma), um color picker, "pegador de cores", para descobrir o código de alguma cor da página, uma régua para medir na tela o tamanho de um elemento e várias outras funções para validar o CSS, o HTML, manusear as imagens, as divs, etc.
Por último mas não menos importante, temos o Webdevhelper. Com ele você pode executar javascript contra a página em um console, e o mais importante, pode exibir um log de todas as chamadas do navegador para a web. A partir desta lista, você pode ver os detalhes de cada chamada, os cabeçalhos da requisição e da resposta, o conteúdo da resposta, e se a resposta for um objeto JSON ou a atualização de update panels o plugin cria uma estrutura para facilitar a visualização da resposta. Os problemas deste plugin é que ele é pesado, acaba travando o IE algumas vezes e não lida muito bem com encodings diferentes de UTF-8, mas o custo-benefício ainda é bem interessante.

E você, utiliza algum plugin para o IE que considera indispensável? Quer um passo a passo mais detalhado sobre algum dos plugins citados? Coloque sua dica nos comentários!

Os plugins para o Firefox serão comentados num próximo post.

Abraços a todos!

Links de 14/04/2008

• 101 LINQ Samples - Exemplos do básico ao intermediário de uso do LINQ para SQL (DLINQ): http://msdn2.microsoft.com/en-us/vcsharp/aa336746.aspx
• ASP.NET AJAX Control Toolkit - Exemplos e documentação básica do toolkit: http://www.asp.net/ajax/ajaxcontroltoolkit/samples/
• Regular Expressions Reference - Aprenda a fazer buscas dentro de strings de forma muito mais ágil e poderosa: http://www.regular-expressions.info/reference.html
• ScottGu's Blog - Excelente blog do co-criador do ASP.NET: http://weblogs.asp.net/scottgu/
• 10 ASP.NET Performance and Scalability Secrets - Excelentes dicas de otimização para ASP.NET: http://www.codeproject.com/KB/aspnet/10ASPNetPerformance.aspx

Criando uma mensagem de notificação estilo MSN / Windows Live Messenger

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!

Rich Text Editor para ASP.NET

Here we go.

Para abrir bem este blog, vamos falar de algo que qualquer programador web, se nunca precisou, certamente irá precisar um dia: um "editor rico" para textos em seu site.
Como assim? Imagine: você está escrevendo uma ferramenta de blog, de edição de notícias ou alguma coisa assim. Seus visitantes internautas vão querer pôr links, figuras, mudar a cor ou fonte do texto, etc. É disso que eu falo. Agora que estamos melhor situados, prossigamos.
Infelizmente a Microsoft parece ignorar o apelo forte de incluir este componente no pacote asp.net ou ajax toolkit.
Foi em uma situação desta que precisei "googlar" a internet. Queria uma ferramenta que não somente fizesse este papel de "word para a web" mas que eu pudesse integrar em um site asp.net e programar sobre usando C#. Achei várias, testei algumas, mas quem se saiu melhor mesmo foi o FCKEditor (http://www.fckeditor.net), seja pelo bom resultado, testado por mim no Internet Explorer 7, Internet Explorer 6 e no Mozilla Firefox (compreendendo assim algo em torno de 95% da internet, e não tenho fonte oficial para este número), seja pelo preço = freeware.
No quisito ASP.NET, este também é perfeito. No site oficial encontram-se links para ferramentas de interface para várias linguagens server-side, inclusive com um wiki (http://wiki.fckeditor.net) suficientemente bom. Mas neste mundo nem tudo é perfeito. Seguindo as instruções do wiki, criei um site asp.net, carreguei a dll para o diretório /bin e os arquivos do FCKEditor propriamente na pasta /FCKEditor. Nesta última pasta, editei o arquivo fckconfig.js para especificar que estarei utilizando asp.net. Criei a pasta para os uploads de imagens e swf's para as edições. Inclui as chaves no web.config para a dll saber quais folders tem o quê. Inclui na diretiva @Page ValidateRequest="false". O-ou: nada bom isso, estamos intencionalmente abrindo brechas de segurança desabilitando validações built-in do asp.net para Cross-site-scripts (XSS) e afins. Em teoria isto é tudo. Rodar o site: F5. Sucesso!
Agora que sabemos que funciona, vamos para a parte divertida da brincadeira: personalizar. Primeiro setar o valor inicial do editor: fácil, fckeditor1.value. Depois, receber o valor postado pelo internauta: fácil, ler fckeditor1.value. Terceiro: configurar pastas de arquivos de imagens e flash diferentes para cada usuário ou grupo. Não posso dizer que é difícil, mas aí comecei a achar informações desencontradas. Segundo o wiki, bastava setar um valor na sessão do usuário, mas assim não funcionou. Analisei o código fonte da dll (disponível via SourceForge), a lógica está perfeita. Depois de googlar mais um tanto, descobri que por padrão a ferramenta de upload e inclusão de arquivos não fica ligada a sessão do usuário (???) e que isto deve ser mudado no config do editor. Agora sim. Mas ainda não está bom, meu site continua exposto a ataques. Resolvi analisar o config. Surpresa! O FCKEditor é customizável de uma forma incrível! Tudo lá, esperando uma leitura com atenção. Foi lá também que descobri uma chave HtmlEncodeOutput com valor padrão false. Alterei este valor para true, exclui o validaterequest=false da minha página e tudo correu bem, bastando um Server.HTMLDecode na função que recebe o postback para ter novamente o HTML "utilizável". Finish, sem abrir mão da segurança.
Não detalhei muito as etapas, mas como "brinde" deixo o meu site de exemplo no SkyDrive (link na home do meu Space), pasta Componentes.NET.

Resumindo: o FCKEditor excelente editor Rich Text integrável com asp.net, altamente customizável, e ainda é free, mas precisa de uns ajustes fáceis para ficar melhor ainda.

Até a próxima. Abraços!

Começando...

Sabe aquelas dicas que você descobre por acaso?
Aqueles programas bons que estão "escondidos" na internet e pouca gente conhece?
Aquele review que você gostaria de compartilhar?

Pois é, esta é a idéia deste blog que começa hoje (29/11/07). Falar de tecnologia.
O primeiro post "quente" vem logo, logo... Já tem assunto e escopo definido, só estou esperando uma brexa de tempo para eu escrever algo "inteligente" a respeito. Hehehe...

Até mais!