c#

...now browsing by category

 

jQuery + Ajax + ASP.NET Generic Handler = Interactividade e Performance

Segunda-feira, Agosto 23rd, 2010

jquery-logo

O título pode parecer demasiado confuso com a utilização de tantos termos, no entanto estou confiante que no fim do artigo, vai estar de acordo com a escolha.

Recentemente deparei-me com uma nova situação, por um lado necessitava de toda a interactividade e flexibilidade proporcionada pelo jQuery no cliente mas também queria continuar a utilizar no lado do servidor Microsoft ASP.NET de forma convencional, ou seja, eu precisava do melhor dos dois mundos.

Depois de executar alguns testes, encontrei rapidamente alguns entraves, limitações e complexidades, o que me levou à procura de uma solução simples e  eficaz.

Deparei-me com um cenário em que o utilizador necessitava de preencher um formulário extenso, para tornar mais agradável a experiência do utilizador, para isso implementei vários plugins do jQueryUI, conforme se pode verificar nas imagens em baixo.

 

img_6

img_7

img_8

 

A informação a inserir é extensa e necessita de validação no lado do servidor, não se torna prático executar tudo isso postback atrás de postback até estar tudo correcto, utilizar update panels torna-se demasiado complexo para o tipo de validação necessário e a biblioteca Ajax do ASP.NET não é das mais agradáveis de utilizar quando necessitamos de performance, optei por isso experimentar utilizar o método Ajax disponibilizado pelo jQuery.

Para simplificar o artigo, e porque o que realmente interessa é o conceito, optei por criar um formulário de teste cujo objectivo é adicionar um cliente ao sistema.

img_9

 

Depois adiciona-se um novo item ao projecto, um Generic Handler

img_10

Visto de uma forma mais simplista, um Generic Handler é uma página ASP.NET que contém apenas um método e não suporta eventos nem controlos.

De seguida vamos adicionar um novo ficheiro JS e utilizando método Ajax da biblioteca jQuery, vai ser chamado o Generic Handler AdicionarClienteHandler.

A função Ajax é de simples implementação, como se pode verificar ao analisar o script apresentado.

$(document).ready(function () {

    //activa o plugin Tabs
    $(function () {
        $("#tabs").tabs();
    });

    //método adicionar cliente
    $('#btnAdicionar').click(function () {

        $.ajax({
            url: '../../Handlers/AdicionarClienteHandler.ashx',
            data: $('form').serialize(),
            type: 'POST',
            success: function (data) {
                alert('Cliente adicionado com sucesso.');
                $('#listClientes').append(data);
            },
            error: function (data) {
                alert("Ocorreu um erro ao processar o seu pedido.");
            }
        });
    });
});

O utilizador vai preencher o formulário e quando é executado o click sobre o botão adicionar, vai ser executado o script apresentado anteriormente.

img_1

Este script vai serializar todos os campos de input que se encontram dentro da tag <form> e enviar esta informação para o Generic Handler através de um POST executado de forma assíncrona.

img_2

 

Depois o Generic Handler vai processar a informação enviada, executar as suas validações e construir a resposta.

using System;
using System.Linq;
using System.Web;
using System.Text;
using System.Collections.Generic;
using System.Collections.Specialized;

namespace WebApplication1.Handlers
{

    public class AdicionarClienteHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            var form = context.Request.Form;
            context.Response.ContentType = "text/html";
            context.Response.Write(ProcessaFormulario(form));
        }

        protected string ProcessaFormulario(NameValueCollection form)
        {
            string username, nome, email, telefone, telemovel, fax;

            nome        = form["txtNome"];
            username    = form["txtUsername"];
            email       = form["txtEmail"];
            telefone    = form["txtTelefone"];
            telemovel   = form["txtTelemovel"];
            fax         = form["txtFax"];

            var buildResponse = new StringBuilder();

            buildResponse.AppendLine("<div class=\"DefaultRow\">");
            buildResponse.AppendLine(string.Format("<h6>{0}</h6>", nome));
            buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Username: {0}</span>", username));
            buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Email: {0}</span>", email));
            buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Telefone: {0}</span>", telefone));
            buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Telemóvel: {0}</span>", telemovel));
            buildResponse.AppendLine(string.Format("<span class=\"DafaultRowLabel\">Fax: {0}</span>", fax));
            buildResponse.AppendLine("</div>");

            return buildResponse.ToString();
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

 

A resposta por sua vez, é a informação do cliente formatada de acordo com a forma pretendida e pronta para ser adicionada à lista de clientes.

img_3

img_5

Tudo isto é executado de forma assíncrona, simples, eficaz e sem a necessidade de executar qualquer postback.

 

/*Versão JSON*/

Depois de verificar que surgiram alguns pedidos relativamente à utilização de JSON na resposta do Generic Handler, deixo aqui as alterações necessárias:

using System;
using System.Linq;
using System.Web;
using System.Text;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Web.Script.Serialization;

namespace WebApplication1.Handlers
{

    public class AdicionarClienteHandler : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            var form = context.Request.Form;
            var serializer = new JavaScriptSerializer();

            context.Response.Charset = "utf-8";
            context.Response.ContentType = "application/json";
            context.Response.Write(serializer.Serialize(JsonResponse(form)));
        }

        public List<string> JsonResponse(NameValueCollection form)
        {
            string username, nome, email, telefone, telemovel, fax;

            var lista   = new List<string>();
            nome        = form["txtNome"];
            username    = form["txtUsername"];
            email       = form["txtEmail"];
            telefone    = form["txtTelefone"];
            telemovel   = form["txtTelemovel"];
            fax         = form["txtFax"];

            lista.Add(nome);
            lista.Add(username);
            lista.Add(email);
            lista.Add(telefone);
            lista.Add(telemovel);
            lista.Add(fax);

            return lista;

        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

Como podemos verificar na imagem em baixo, a resposta é agora JSON

foto_2

 

img_5

O projecto de teste aqui demonstrado , desenvolvido em Visual Studio 2010, está disponível para download aqui.

 

Referências:

http://api.jquery.com/serialize/

http://api.jquery.com/category/ajax/

http://msdn.microsoft.com/en-us/library/bb398986.aspx

Herança, Polimorfismo e Classes Abstractas – Quick Tips #2

Terça-feira, Julho 6th, 2010

Quando, a nível profissional trabalhamos em certas áreas de negócio, por vezes torna-se muito complexo implementar alguns dos conceitos básicos de POO (Programação Orientada a Objectos) que aprendemos.

Nestes casos é necessário fazer um esforço extra, abstrairmo-nos dos problemas de implementação das regras de negócio, dos sistemas existentes e desenvolver uma plataforma que, além de conciliar as regras de negócio e regras de arquitectura de software, tira partido das melhores funcionalidades oferecidas pela linguagem a ser utilizada.

É certamente o caminho para uma manutenção acessível e escalável, que vai garantir a longevidade da plataforma.

Herança e Polimorfismo são alguns dos conceitos mais importantes de POO, vou falar um pouco de cada um e apresentar uma pequena demonstração.

 

Herança

Por vezes as próprias regras de negócio estão agrupadas em famílias, temos que aproveitar esse factor a nosso favor e desenvolver uma estrutura do mesmo tipo por forma a que a arquitectura final seja consistente.

Recorrendo à herança entre classes podemos desenvolver uma estrutura de classes agrupadas por família, e que por sua vez têm informação organizada e transversal a toda a aplicação.

Vamos olhar para um exemplo real:

public class Angariacao
{
    public string Nome          { get; set; }
    public string Morada        { get; set; }
    public string EpocaBaixa    { get; set; }
    public string EpocaAlta     { get; set; }
    public string Enquadramento { get; set; }
}

public class CasaDeCampo : Angariacao
{
    public int    Capacidade    { get; set; }
    public string Tipologia     { get; set; }
}

public class HotelRural : Angariacao
{
    public string Actividades   { get; set; }
    public string Exterior      { get; set; }
    public string AreaSocial    { get; set; }
}

 

Como podemos verificar facilmente depois de analisar o código apresentado anteriormente, existe uma lógica para agrupar todas as propriedades partilhadas pelas classes CasaDeCampo e HotelRural.

A maioria das propriedades que cada uma das classes teria, estão agora na classe Angariação e essas propriedades vão ser partilhadas nas classes  CasaDeCampo e HotelRural através de herança.

Temos um grande número de vantagens ao utilizar este conceito de POO, uma delas é a fácil manutenção: caso se tenha que alterar/adicionar/remover uma propriedade na classe base, essa alteração é reflectida de forma automática em todas as classes que herdam da classe base.  Torna-se também mais rápido e eficiente adicionar novas classes que herdem da classe base, pois já existem nela implementadas muitas das funcionalidades básicas bem como as propriedades partilhadas que são transversais à família de classes.

 

Polimorfismo e Classes Abstractas

Polimorfismo significa “tomar várias formas”, quando utilizado em POO significa que uma assinatura de um método pode ter várias implementações diferentes.

Uma classe abstracta não pode ser instanciada, apenas define as propriedades e métodos que as classes filho que vão herdar.

Para exemplificar este conceito vamos recorrer às classes apresentadas no exemplo anterior e continuar a explorar o mesmo conceito:

//A classe passou a ser abstracta
public abstract class Angariacao
{
    public string Nome          { get; set; }
    public string Morada        { get; set; }
    public string EpocaBaixa    { get; set; }
    public string EpocaAlta     { get; set; }
    public string Enquadramento { get; set; }

    //Definição do método a ser implementado nas
    //classes que herdam de Angariacao
    public abstract void ImprimirTipoClasse();

}

public class CasaDeCampo : Angariacao
{
    public int    Capacidade    { get; set; }
    public string Tipologia     { get; set; }

    //Quando o método tem a assinatura abstract na classe base
    //é obrigatório implementar o override nas classes que herdam
    //da classe base
    public override void ImprimirTipoClasse()
    {
        Console.WriteLine(string.Format("Tipo: {0}", this.GetType()));
    }
}

public class HotelRural : Angariacao
{
    public string Actividades   { get; set; }
    public string Exterior      { get; set; }
    public string AreaSocial    { get; set; }

    //Quando o método tem a assinatura abstract na classe base
    //é obrigatório implementar o override nas classes que herdam
    //da classe base
    public override void ImprimirTipoClasse()
    {
        Console.WriteLine(string.Format("Tipo: {0}", this.GetType()));
    }
}

 

Neste momento temos definida a família angariação, que tem como base  a classe Angariação e filhos as classes CasaDeCampo e HotelRural.

A classe Angariação é abstract porque na lógica de negócio a implementar não existem objectos da classe base.

Como na classe base está declarado o método ImprimirTipoClasse com a assinatura abstract, a implementação de este método é obrigatória nas classes filho.

Para validar estes conceitos, criei um programa muito simples e que demonstra o potencial da Herança, Polimorfismo:

    class Program
    {
        static void Main(string[] args)
        {
            //lista de objectos da classe base
            var list = new List<Angariacao>();

            //adicionar à lista objectos que 
            //herdam da classe base
            list.Add(new CasaDeCampo());
            list.Add(new HotelRural());

            foreach (var item in list)
            {
                //Imprimir no ecrã o tipo de objecto
                //Demonstração final de Polimorfismo
                item.ImprimirTipoClasse();
            }

            Console.ReadKey();
        }
    }

Que resulta no seguinte ecrã quando se executa a aplicação:

heranca_e_polimorfismo

 

 

Para concluir, podemos verificar ao analisar a execução do programa que, embora a lista seja de objectos da classe base, podemos adicionar objectos que herdam da classe base, e quando invocamos o método ImprimirTipoClasse, o resultado é a execução do método que está definido classe filho.

Para criar um exemplo mais real, se a classe base tiver um método abstract que se chama AdicionarAngariacao, quando executado no programa da mesma forma que no exemplo acima demonstrado, iria ser adicionada uma Casa de Campo e um Hotel Rural ao sistema de acordo com as suas propriedades partilhadas e específicas, pois cada uma das classes filho implementa o método AdicionarAngariacao da forma mais conveniente.

Nested ListViews em ASP.NET

Quinta-feira, Julho 1st, 2010

ASP.net_100_logo_5

Por vezes temos necessidade de integrar muitos dados num ecrã para os apresentar da forma mais conveniente ao utilizador.

O que acontece durante este processo é que por vezes enfrentamos algumas dificuldades em transpor a informação que temos organizada na camada de negócio para a camada de apresentação de uma forma simples e sem grandes  alterações na sua estrutura.

Por exemplo, quando temos uma classe Contacto que além das suas propriedades mais comuns, contém também uma propriedade que é uma estrutura de dados da classe Servico, por vezes a melhor solução é optar por utilizar ListViews encadeadas.

public class Contacto
{
    public int id { get; set; }
    public string nome { get; set; }
    public IEnumerable<Servico> servicos { get; set; }

    public Contacto()
    {
        servicos = new List<Servico>();
    }

    public IEnumerable<Contacto> ObterContactos()
    {
        for (int i = 0; i < 3; i++)
        {
            var c = new Contacto();
            c.id = i;
            c.nome = "nome_" + i;
            c.servicos = (new Servico()).ObterServicos(i);

            yield return c;
        }

        yield break;
    }
}

Como podem verificar no código apresentado anteriormente, a classe Contacto tem uma propriedade do tipo IEnumerable<Servico>, que é uma estrutura de dados da classe Servico.

public class Servico
{
    public int id { get; set; }
    public string descricao { get; set; }

    public IEnumerable<Servico> ObterServicos(int id)
    {
        var listaServicos = new List<Servico>();

        for (int i = 0; i < 3; i++)
        {
            var serv = new Servico();
            serv.id = i;
            serv.descricao = string.Format("servico_{0}_{1}", i, id);
            listaServicos.Add(serv);
        }

        return listaServicos;
    }
}

Numa situação em que temos que apresentar num ecrã a informação da classe Contacto, a melhor solução seria poder alimentar um único controlo com uma lista de elementos desta classe e, este se encarrega-se de agregar a informação.

Sugiro algo assim:

<div>
        <h2>Exemplo de Nested ListViews</h2>
        <asp:ListView ID="ListViewPai" runat="server">
            <LayoutTemplate>
                <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
            </LayoutTemplate>
            <ItemTemplate>
                <h5>Informacao da ListView Pai</h5>
                <p>Nome:<%#Eval("nome") %></p>
                <asp:ListView ID="ListViewFilho" runat="server" DataSource='<%# Eval("servicos") %>'>
                    <LayoutTemplate>
                        <h6>Informacao da ListView Filho</h6>
                        <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <div style="border:1px solid black; width:250px; margin:15px;">
                            <p>id:<%#Eval("id") %></p>
                            <p>descricao:<%#Eval("descricao") %></p>
                        </div>
                    </ItemTemplate>
                </asp:ListView>
                <hr />
            </ItemTemplate>
        </asp:ListView>
    </div>

Como podem verificar, a fonte de dados que alimenta a ListViewFilho é         “<%# Eval("servicos") %>” que é o nome da propriedade existente na classe Contacto e que é do tipo IEnumerable<Servico>.

Ou seja, cada item do ListViewPai vai alimentar o ListViewFilho com a sua propriedade Servico.

O que resulta num código de carregamento de dados extremamente simples, como podemos verificar:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace WebApplication1
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                CarregarDadosListView();
            }
        }

        public void CarregarDadosListView()
        {
            ListViewPai.DataSource = (new Contacto()).ObterContactos();
            ListViewPai.DataBind();
        }
    }
}

Ao utilizar este método apenas basta alimentar o datasource da ListViewPai, depois é cada item desta listview quem se encarrega de dar informação a ser apresentada à ListViewFilho.

Faça aqui o download  do projecto de demonstração em VS2010

Visual Studio Configuration Manager

Segunda-feira, Maio 3rd, 2010

visual_studio_ars

Durante o ciclo de vida de uma aplicação, seja durante o seu desenvolvimento ou manutenção, é prática comum distribuir a aplicação por um conjunto distinto de ambientes, de forma a garantir  qualidade no software produzido.

 

Estes ambientes são definidos em conjunto com as funções que desempenham, normalmente são três: desenvolvimento, testes e produção.

Cada ambiente é uma caixa estanque, tem o seu próprio conjunto de servidores (Web, SQL, etc..) de forma a que estejam reunidas todas as condições para que um ambiente não necessite de aceder a recursos de outro ambiente para funcionar, garantindo-se assim consistência.

Podemos olhar para cada um destes ambientes como uma etapa no decorrer de um desenvolvimento num projecto. No ambiente de desenvolvimento o developer pode testar toda e qualquer situação sem necessitar de se preocupar por exemplo com  a consistência de dados na base de dados. O ambiente de testes é aquele em que depois de estarem concluídos os desenvolvimentos são executados todo o tipo de testes para garantir que os desenvolvimentos efectuados se encontram correctos, tanto do ponto de vista técnico como nas regras de negócio. Normalmente este ambiente necessita de ter garantida a consistência de dados. Depois de estes dois estágios estarem concluídos temos o ambiente de produção, este é o ambiente no qual  utilizador da aplicação  efectua as suas operações e toda a aplicação necessita estabilidade.

Como estamos a falar de três ambientes, cada um deles com configurações específicas, como é o caso de endereços de servidores web, sql, entre outros, por vezes torna-se difícil gerir as configurações correctas para o ambiente que vamos executar uma publicação.

Para nos ajudar nesta situação, o Visual Studio disponibiliza uma ferramenta para este fim, o Configuration Manager.

Todos os developers utilizam esta ferramenta diariamente, só que normalmente apenas para trocar a configuração de Debug para Release ou vice-versa. No entanto esta ferramenta permite fazer muito mais, permite criar ambientes personalizados com configurações específicas, como um web.config personalizado e adequado a cada um dos ambientes.

Neste post vou explicar como criar e configurar ambientes personalizados no Configuration Manager do Visual Studio, que permitem garantir que, ao alterar o ambiente em utilização, a aplicação está a utilizar todas as configurações específicas desse mesmo ambiente de forma automática e sem a necessidade de intervenção do developer.

 

1º Passo:

config_01

Criar uma directoria na raíz do projecto, com o nome “Ambientes”, e dentro dessa pasta criar uma directoria para cada um dos ambientes que vamos personalizar.

Copiar para a directoria de cada ambiente o seu web.config personalizado e adequado.

De seguida abrir o Configuration Manager.

 

2º Passo:

config_02

config_03

 

Criar uma configuração para cada um dos ambientes que vamos criar, neste exemplo vou criar os ambientes Local, Testes e Produção.

Para os ambientes Local e Testes, vou copiar as configurações base do ambiente de Debug e para o ambiente de Produção vou efectuar a cópia do ambiente de Release.

 

3º Passo:

config_04config_05 

Remover as configurações de Debug e Release da Solution.

 

4º Passo:

config_06

Remover as configurações de Debug e Release do projecto.

 

5º Passo

config_07

config_08

Nas propriedades do projecto, ir a “Build Events” e carregar em “Edit Post-Build” e de seguida colar na caixa de texto a seguinte macro:

xcopy /R /Y "$(ProjectDir)Ambientes\$(ConfigurationName)\Web.config" "$(ProjectDir)Web.config"

Agora, sempre que necessitar de executar uma publicação, apenas necessita de seleccionar o ambiente que deseja publicar, fazer build e tem todas as configurações necessárias para executar a aplicação correctamente no ambiente seleccionado.

 

Criei um projecto de teste, uma aplicação web em que a página Default.aspx mostra que ambiente está em utilização.

config_09

Pode fazer o download do projecto de teste aqui.

ASP.NET Google Maps

Terça-feira, Abril 20th, 2010

google

O ASP.NET Google Maps é um Web User Control que implementa a API v2 do Google Maps.

Para utilizar esta API e este Web User Control é necessário registar-se aqui e obter uma chave de utilização.

A utilização deste controlo é em tudo semelhante ao ASP.NET Bing Maps, é apenas executar o Drag & Drop do controlo na página de implementação e configurar as propriedades do controlo.

Como utilizar?

Substituir no ficheiro GoogleMapsControl.ascx “YOU_KEY” pela chave que lhe foi atribuída durante o processo de registo na API do Google Maps.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GoogleMapsControl.ascx.cs" Inherits="GoogleMaps.GoogleMaps.GoogleMapsControl" %>

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOU_KEY"></script>
<script type="text/javascript" src="GoogleMaps/GoogleMaps.js"></script>
<div id="myMap"></div>

Implementação do Web User Control numa página Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="GoogleMaps._Default" %>

<%@ Register src="GoogleMaps/GoogleMapsControl.ascx" tagname="GoogleMapsControl" tagprefix="uc1" %>

<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:GoogleMapsControl ID="GoogleMapsControl" runat="server" latitude="38.69052609303235" longitude="-9.297544956207275"
        pushPin="true" pushPinTitle="Sample Title" pushPinDescription="Sample Description" zoom="17" MapWidth="600px" MapHeight="400px"
        mapStyle="G_SATELLITE_MAP" />
    </div>
    </form>
</body>
</html>

Nas propriedades do controlo podemos definir um conjunto de funcionalidades disponibilizadas pela API do Google Maps, como o estilo de apresentação do mapa, definir a utilização de um marcador bem como o seu título e descrição.

Deixo aqui algumas imagens do controlo:

google_map_standard

google_satelite

google_satelite_2

google_terrain

Demo projecto de VS2008 e Web User Control disponível em:

http://aspnetgooglemaps.codeplex.com

ASP.NET Bing Maps

Terça-feira, Abril 20th, 2010

Bing_maps

O ASP.NET Bing Maps é mais um Web User Control que desenvolvi e decidi partilhar com a comunidade.

Por vezes damos por nós a fazer tarefas ou processos repetitivas durante o processo de desenvolvimento de aplicações, quando isso acontece é sinal que provavelmente podemos criar um controlo ou um fluxo genérico em substituição de todo esse trabalho. Os controlos genéricos são fáceis de manter actualizados, a actualização do controlo reflecte-se em todos os locais onde este é utilizado, são fáceis de implementar, são reutilizáveis e extensíveis.

Decidi criar um  Web User Control que implementa o Bing Maps porque necessitava de um controlo que eu pudesse controlar e alterar  programaticamente as propriedades de um mapa numa aplicação web.

Como utilizar?

projectlocation Criar no projecto de Visual Studio uma pasta com o nome BingMaps, adicionar os ficheiros BingMaps.ascx e BingMaps.js.

Depois, já na página onde se pretende implementar o controlo, é necessário registar o controlo como qualquer outro Web User Control (normalmente o Visual Studio faz isso por nós quando se executa o drag & drop do controlo sobre a página de implementação).

Exemplo de implementação:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="BingMaps._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Registo do controlo na página -->
<%@ Register src="BingMaps/BingMaps.ascx" tagname="BingMaps" tagprefix="UserControl" %>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Teste Bing Maps</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <UserControl:BingMaps runat="server" ID="BingMapContainer" runat="server" distanceUnit="Kilometers"  MapWidth="600px"
        MapHeight="400px" mapMode="Mode2D" mapStyle="BirdseyeHybrid" pushPin="true" pushPinTitle="Sample Title" zoom="1"
            pushPinDescription="Sample Description" latitude="38.69052609303235" longitude="-9.297544956207275"/>
    </div>
    </form>
</body>
</html>

Nas opções do controlo podemos definir o modo de apresentação do mapa (2D/3D), o estilo do mapa (Birds Eye, Road, Aerial, etc).

É possível definir um marcador, com um título e descrição,  para uma melhor indicação no mapa do local que pretendemos  apresentar.

Deixo aqui algumas imagens de demonstram as capacidades do controlo:

bingmaps_2d_birdseye

bingmaps_2d_aerial

bingmaps_2d_road

bingmaps_3d

Demo projecto de VS2008 e Web User Control disponível em:

http://aspnetbingmaps.codeplex.com

Tech Days 2010 Lisboa

Terça-feira, Abril 20th, 2010

techdays2010_logo Foi com grande entusiasmo que hoje recebi a notícia que vou ter a oportunidade de estar presente no TechDays 2010 na condição de orador. Vou apresentar uma sessão sobre como programar em C# para a plataforma iPhone.

Quem segue o meu blog deve estar recordado que à uns meses atrás coloquei aqui um post sobre este assunto. Quando li as primeiras notícias sobre o MonoTouch fiquei em pulgas para experimentar a framework e verificar com “o meu próprio código” que funcionava, e não é que funciona mesmo?

Executei alguns testes que  revelaram resultados muito interessantes, principalmente quando estamos a falar de uma framework com alguns meses de vida.

Quais as capacidades de esta framework? As suas limitações? O seu futuro e como pode influenciar o mercado dos dispositivos móveis?

Não percam no techdays a sessão Desenvolver aplicações em C# para o iPhone.

Não podia deixar de referir que nada disto seria possível sem o apoio da Comunidade NetPonto e do Caio Proiete, que me deram todo o apoio necessário para que esta sessão se torna-se realidade.

 

Update: Sessão agendada para dia 20 de Abril às 12h45 no espaço 20/10

ASP.NET DataPager – EFDataPager

Terça-feira, Abril 20th, 2010

att9ae36 O EFDataPager é um Web User Control que permite paginação com Entity Framework ou qualquer outro tipo de repositório de dados. A grande diferença entre este DataPager e o controlo standard que é disponibilizado no Visual Studio é que ao contrário do controlo standard este apenas vai buscar ao repositório de dados a informação que está a ser apresentada na página seleccionada, o que permite uma melhoria substancial na performance de acesso a dados e tempos de carregamento da página web.

Exemplo de uma ListView com o DataPager do VS2008:

image_3

image_4

 

Como se pode verificar na Imagem1 e Imagem2 acima apresentadas, quando estamos a utilizar o Standard DataPager para controlar a paginação de uma ListView, este carrega todos os dados do repositório e posteriormente organiza-os por páginas.

O maior problema de este controlo é que, em cada postback efectuado, é carregada novamente para a ListView a informação de todas as páginas mesmo que, como podemos ver na imagem2, apenas estejam a ser apresentados 3 registos ao utilizador. Como consequência o tempo de carregamento da página da página é penalizado, pois são carregadas informações que não vão ser apresentadas ao utilizador,  o que gera um declínio na experiência de utilização.

 

Exemplo de uma ListView com o EFDataPager:

image_1

image_2

 

Por outro lado, ao utilizar o EFDataPager, apenas são carregados para a ListView os registos que são apresentados (Imagem3 e Imagem4), garantindo assim uma melhor experiência de utilização por parte do utilizador e um tempo de carregamento da página substancialmente menor.

Pode utilizar o EFDataPager com qualquer repositório de dados, incluindo com Entity Framework.

 

Implementação

Além de ser muito fácil de implementar o EFDataPager, é também um controlo extensível e facilmente personalizado para ir de encontro a necessidades mais específicas.

image_5

Para implementar o EFDataPager é necessário adicionar ao projecto o ficheiro ControloDataPager.ascx e o ficheiroPagerEventArgs.cs.

Depois é necessário, como em qualquer outro WebUserControl, registar o controlo na página em que este vai ser utilizado.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ControloListView.ascx.cs" Inherits="EFDataPager.UserControls.ControloListView" %>
<%@ Register src="ControloDataPager.ascx" tagname="ControloDataPager" tagprefix="UserControl" %>

<h1>Notícias</h1>

<div class="noticias-pager">
    <UserControl:ControloDataPager ID="ControloDataPager1" runat="server" ViewStateMode="Enabled" />
    <asp:Label ID="NumberOfRowsLoadedFromDataSource" runat="server"></asp:Label>
    <br />
    <asp:Label ID="NumberOfRowsLoadedFromDataSourceEN" runat="server"></asp:Label>
</div>

<asp:ListView ID="listviewNoticias" runat="server" >
    <LayoutTemplate>
        <asp:PlaceHolder runat="server" ID="itemPlaceholder"></asp:PlaceHolder>
    </LayoutTemplate>
    <ItemTemplate>
        <div class="noticias-title" >
            <h3><%#Eval("Titulo")%></h3>
        </div>
        <div class="body-container">
            <p><%#Eval("Descricao") %></p>
        </div>
    </ItemTemplate>
    <EmptyItemTemplate>
        <h1>Não existem notícias disponíveis neste momento.</h1>
    </EmptyItemTemplate>
</asp:ListView>

Depois é necessário implementar o método RegistarEventos, utilizá-lo no Page_Load, implementar os eventos registados no método  RegistarEventos e implementar o método CarregarDadosListview.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace EFDataPager.UserControls
{
    using EFDataPager.BusinessObjects;

    public partial class ControloListView : System.Web.UI.UserControl
    {

        protected void Page_Load(object sender, EventArgs e)
        {
            RegistarEventos();
            ControloDataPager1.PageSize = 5;
            ControloDataPager1.RowCount = GetNumberOfRows();

            if (!Page.IsPostBack)
            {
                CarregarDadosListview(ControloDataPager1.PageSize, 0);
            }
        }

        private void RegistarEventos()
        {
            ControloDataPager1.First    += new ControloDataPager.ListViewPagerFirstHandler(ControloDataPager1_First);
            ControloDataPager1.Previous += new ControloDataPager.ListViewPagerPreviousHandler(ControloDataPager1_Previous);
            ControloDataPager1.Next     += new ControloDataPager.ListViewPagerNextHandler(ControloDataPager1_Next);
            ControloDataPager1.Last     += new ControloDataPager.ListViewPagerLastHandler(ControloDataPager1_Last);
        }

        void ControloDataPager1_Last(object sender, PagerEventArgs e)
        {
            CarregarDadosListview(e.pageSize, e.currentRow);
        }

        void ControloDataPager1_Next(object sender, PagerEventArgs e)
        {
            CarregarDadosListview(e.pageSize, e.currentRow);
        }

        void ControloDataPager1_Previous(object sender, PagerEventArgs e)
        {
            CarregarDadosListview(e.pageSize, e.currentRow);
        }

        void ControloDataPager1_First(object sender, PagerEventArgs e)
        {
            CarregarDadosListview(e.pageSize, e.currentRow);
        }

        private void CarregarDadosListview(int pageSize, int currentRow)
        {
            var data = new DadosMock();
            listviewNoticias.DataSource = data.ObterDadosMock(pageSize, currentRow).ToArray();
            listviewNoticias.DataBind();

            var nRows = data.ObterDadosMock(pageSize, currentRow).ToArray().Count();
            NumberOfRowsLoadedFromDataSource.Text = string.Format("Número de elementos carregados: {0}", nRows);
            NumberOfRowsLoadedFromDataSourceEN.Text = string.Format("Number of binded elements: {0}", nRows);
        }

        private int GetNumberOfRows()
        {
            var data = new DadosMock();
            return data.ObterRowCount();
        }
    }
}

 

Está classe é um Mock para simular o comportamento de um repositório de dados.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EFDataPager.BusinessObjects
{
    public class DadosMock
    {
        public int ID { get; set; }
        public string Titulo { get; set; }
        public string Descricao { get; set; }

        public DadosMock()
        {

        }

        public DadosMock(int id, string title, string desc)
        {
            this.Descricao = desc;
            this.ID = id;
            this.Titulo = title;
        }

        public IQueryable<DadosMock> ObterDadosMock()
        {
            var lista = new List<DadosMock>();

            for (int i = 0; i < 18; i++)
            {

                var item = new DadosMock(i, string.Format("Titulo {0}", i), string.Format("Descricao {0}", i));
                lista.Add(item);
            }

            return lista.ToArray().AsQueryable();
        }

        public IQueryable<DadosMock> ObterDadosMock(int pageSize, int currentRow)
        {
            var lista = new List<DadosMock>();

            //only for generate test data
            for (int i = 0; i < 18; i++)
            {
                var item = new DadosMock(i, string.Format("Titulo {0}", i), string.Format("Descricao {1}", i, i));
                lista.Add(item);
            }

            return lista.ToArray().Skip(currentRow).Take(pageSize).AsQueryable();
        }

        public int ObterRowCount()
        {
            return ObterDadosMock().Count();
        }
    }
}

Com o recurso ao linq, podemos facilmente controlar a paginação dos dados pedidos ao repositório de dados através dos métodos Skip e Take.

Demo: http://blastersystems.com/efdatapager/

O EFDataPager e o projecto vs2008 de teste estão disponíveis em:

http://efdatapager.codeplex.com/

IE 8 & VS2005 Debug

Sábado, Março 13th, 2010

VisualStudioLogoO Internet Explorer 8 tem melhorias e novas funcionalidades. Entre elas está o LCIE (Loosely Coupled Internet Explorer).

Essencialmente o LCIE é um conjunto de mudanças internas na arquitectura do Internet Explorer 8 que têm com objectivo melhorar a performance, escalabilidade e robustez do browser.

Entre essas melhorias está uma em especial, que trouxe alguns problemas inesperados aos programadores que utilizam o Visual Studio 2005 juntamente o com Internet Explorer 8.

No IE7 cada janela do browser (UI Frame) tem o seu processo, todos os novos separadores e controlos ActiveX estavam residem nesse processo. O problema com este modelo é, quando um separador provoca um “access violation” ou “stack overflow”, o processo é terminado, logo todos os separadores que estão no mesmo UI Frame vão ser terminados.

ie-tabsPara isso não acontecer no IE8, cada separador tem um processo próprio, assim quando existe um erro provocado por um separador, apenas o processo do separador é terminado, não o processo da janela do browser.

Na imagem apresentada, o browser tem três separadores abertos, o que no IE7 se irá traduzir num único processo, mas no IE8 se vai traduzir em 4 processos como se pode verificar na imagem em baixo.task-manager

Um dos processos é do UI Frame e os restantes três pertencem cada um a cada um dos separadores activos na janela do browser.

É sem dúvida uma excelente melhoria face à versão anterior do browser, no entanto surgiram alguns problemas aos programadores no momento que estes fazem o debug de aplicações  web com o Visual Studio 2005 e IE8.

O que acontece é que se, ao executar o debug da aplicação já existir um processo com o Internet Explorer a ser executado, o debugger do Visual Studio para e ignora os “break points” porque não encontra qual o processo do Internet Explorer que está a ser depurado.

Para resolver esta situação é necessário desabilitar a funcionalidade “grouwth” do LCIE.

Os passos são os seguintes:

1 – Abrir o RegEdit

 

2- Percorer HKEY_LOCALMACHINE -> SOFTWARE -> Microsoft -> Internet Explorer –> Main

 

3 – Adicionar uma DWORD com o nome “TabProcGrowth”

 

4 – Colocar no valor de “TabProcGrowth”  0

 

Fontes:

http://blogs.msdn.com/ie/archive/2008/03/11/ie8-and-loosely-coupled-ie-lcie.aspx

http://weblogs.asp.net/abdullaabdelhaq/archive/2009/06/01/VS-Debug-Problem-with-IE8.aspx

ASP.NET jQuery MessageBox

Terça-feira, Março 9th, 2010

4qjbsb5pxk1lp7f1pf66w3ls2a O ASP.NET MessageBox  é um Web User Control que integra a framework jQuery , é um controlo extensível que possibilita várias formas diferentes de apresentar MessageBox’s ao utilizador, utilizando duas tecnologias que em conjunto permitem a construção de um controlo dinâmico, extensível e de agradável utilização.

Disponível em http://jquerymessagebox.codeplex.com

Nesta primeira versão o controlo permite dois tipos diferentes de messagebox, uma do tipo “bubble” e outra standard.

O controlo possibilita a criação automática de um botão para interagir com o controlo, no entanto este é apenas opcional e pode-se desligar esta funcionalidade facilmente.

O design do controlo assenta nos plugins de jquery jQueryUI e plugin BlockUI, apenas com alguma modificações para estes se integrarem melhor num Web User Control de ASP.NET.

Vou passar agora a exemplificar a utilização do ASP.NET jQuery MessageBox com um exemplo para a MessageBox do tipo buble:

 

Página de exemplo que vai utilizar o controlo (default.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryMessageBox._Default" %>
<%@ Register src="WebUserControl/MessageBoxControl.ascx" tagname="MessageBoxControl" tagprefix="uc1" %>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:MessageBoxControl ID="MessageBoxControl1" runat="server" />
    </div>
    </form>
</body>
</html>

 

 

Code behind (default.aspx.cs)


using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

namespace jQueryMessageBox
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            MessageBoxControl1.Title = "Test jQueryMessageBox";
            MessageBoxControl1.NameBtn = "Open Message";
            MessageBoxControl1.NameBtnMessageBox = "Close";
            MessageBoxControl1.tipo =
                WebUserControl.MessageBoxControl.typeMessageBox.growlMessageBox;

            MessageBoxControl1.Text = "Login succeeded!";
        }

        protected void btn_Click(object sender, EventArgs e)
        {
            MessageBoxControl1.btn_Click(sender, e);
        }
    }
}

 

Ao carregar no botão visível na imagem, pode-se visualizar a mensagem dirigida ao utilizador.

bubble_message

 

Por outro lado se o tipo de mensagem que nos interessa mostrar ao utilizador contém muita informação e obriga a uma maior atenção por parte do utilizador, podemos utilizar este tipo de MessageBox, alterando o tipo de mensagem a apresentar e alterando o ficheiro default.aspx.cs:

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

namespace jQueryMessageBox
{
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            MessageBoxControl1.Title = "Test jQueryMessageBox";
            MessageBoxControl1.NameBtn = "Open Message";
            MessageBoxControl1.NameBtnMessageBox = "Close";

            /*Alteração do tipo de MessageBox*/
            MessageBoxControl1.tipo =
                WebUserControl.MessageBoxControl.typeMessageBox.centerMessageBox;

            var dados = new StringBuilder();

            dados.Append("jQuery is a lightweight cross-browser JavaScript library that emphasizes interaction between JavaScript and HTML. It was released in ");
            dados.Append("January 2006 at BarCamp NYC by John Resig. Used by over 27% of the 10,000 most visited websites, jQuery is the most popular ");
            dados.Append("JavaScript library in use today.");
            dados.Append("jQuery is free, open source software, dual-licensed under the MIT License and the GNU General Public License, Version 2. jQuerys ");
            dados.Append("syntax is designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax ");
            dados.Append("applications. jQuery also provides capabilities for developers to create plugins on top of the JavaScript library. Providing this option, ");
            dados.Append("developers are able to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets. This");
            dados.Append("contributes to the creation of powerful and dynamic web pages.");
            dados.Append("Microsoft and Nokia have announced plans to bundle jQuery on their platforms, Microsoft adopting it initially within Visual Studio for use ");
            dados.Append("within Microsoft ASP.NET AJAX framework and ASP.NET MVC Framework whilst Nokia will integrate it into their Web Run-Time platform.");

            MessageBoxControl1.Text = dados.ToString();
        }

        protected void btn_Click(object sender, EventArgs e)
        {
            MessageBoxControl1.btn_Click(sender, e);
        }
    }
}

 

E o resultado ao executar o click no mesmo botão é apresentado em baixo:

center_meaage

 

O projecto de teste e o código fonte do controlo está disponível em http://jquerymessagebox.codeplex.com

 

Fontes de informação úteis:

http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx

http://jquery.com/

http://jqueryui.com/