CSS

...now browsing by category

 

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

IE8 e o modo de compatibilidade

Sexta-feira, Março 5th, 2010

internet-explorer Já foi anunciada a morte do Internet Explorer 6, a versão 7 do mesmo browser parece ter passado de moda muito depressa porque agora existe o IE8.

No passado mês de Fevereiro de 2010, no top 5 dos browsers mais utilizados na web estão as três últimas versões do Internet Explorer (IE6, IE7, IE8).

Esta situação provoca uma grande dor de cabeça nos developers de aplicações web, pois é necessário garantir a compatibilidade das aplicações com os browsers que detêm maior quota de mercado e ao mesmo tempo é necessário conseguir implementar nas aplicações novas funcionalidades disponíveis apenas nos browsers mais recentes.

O Internet Explorer 8 é a versão mais  recente disponibilizada pela Microsoft e a mais próxima aos standards do W3C, houve por isso mesmo alguma mudanças importantes. No entanto este browser apresenta algumas funcionalidades que garantem aos developers e às empresas a compatibilidade de este browser com as suas aplicações desenvolvidas para versões anteriores.

Está situação pode acontecer  em empresas que estejam a executar processos de migração para o Windows 7, e no qual não é possível instalar versões do browser anteriores à versão 8.

Existem várias formas de garantir a compatibilidade das aplicações com o IE8, como por exemplo, configurar no servidor web o modo de compatibilidade em cada uma das aplicações (mais info sobre como garantir a compatibilidade no IIS aqui, e no Apache aqui), no entanto neste artigo vou falar apenas nas funcionalidades que o IE8 disponibiliza para garantir este processo.

O Internet Explorer 8 tem 3 modos de funcionamento, estes são:

  • IE 8 Standards Mode – Este modo garante que as páginas vão ser processadas pelo browser utilizando os últimos  standards utilizados pela Microsost para esta versão de browser.

 

  • IE 7 Compatibility Mode – Com este modo o browser interpreta as páginas recorrendo ao DOCTYPE do IE7, contudo continua a ser utilizado o motor do IE8 para processar as páginas.

 

  • IE7 Mode – Com este modo as páginas vão ser executadas de acordo os standards do IE7 e o DOCTYPE do IE7.
Agora vou propor a análise de outro problema. Vamos supor  estamos a desenvolver uma aplicação web para uma máquina de windows 7 com IE8 com compatibility mode activo, não temos acesso ao servidor web nem podemos alterar a configuração do IE8.
 
Como desenvolver uma aplicação que utiliza todas vantagens que o IE8 disponibiliza e garantir que vai funcionar correctamente nesta situação?
 
Podemos garantir isso com uma alteração, incluindo  “meta tag” no cabeçalho da aplicação web que vai forçar o browser a sair do modo em que está a operar e processar as páginas da aplicação em causa com o motor e DOCTYPE do IE8 nativo.
 
Para isso basta inserir esta “meta tag” no cabeçalho das páginas:
<meta http-equiv="X-UA-Compatible" content="IE=8"/>
 
Veja as diferenças da utilização dos vários modos que o IE8 suporta em acção:
 
Nesta imagem podemos ver que o browser está configurado para correr em modo de compatibilidade, no entanto a ”meta tag” que está no cabeçalho obriga-o a comporta-se como o IE8 nativo, ou seja, a utilizar o motor de processamento do IE8 e o DOCTYPE do IE8.
 
IE8-mode
 

Nesta imagem podemos ver que o browser está configurado para correr em modo de compatibilidade, podemos verificar esta situação recorrendo ao Developer Tools, ferramenta incluída no IE8, que este está a utilizar o motor de IE8 em modo de compatibilidade e a utilizar o DOCTYPE do IE7.EmulateIE7-mode

 

Aqui podemos verificar que ao utilizar na “meta tag” o “IE=7”, o browser utiliza o modo e o DOCTYPE do IE7, embora nas preferências do browser esteja activo o modo de compatibilidade.

IE7-mode

 

Mais informação sobre o IE8 e os seus modos de funcionamento em:

http://msdn.microsoft.com/en-us/library/cc288325(VS.85).aspx#DCModes

Novo ano, novo website!

Sábado, Janeiro 16th, 2010

website Há quem diga ano novo, vida nova. Eu decidi fazer o mesmo, mas desta vez ao meu website pessoal, o BlasterSystems.com tem cara lavada e roupa nova, ao estilo Web 2.0, coisa que está na moda nos dias que passam.

A tecnologia utilizada é quase a mesma de à 10 anos atrás, quando fiz o meu primeiro website pessoal, HTML, não à que complicar quando não é necessário,  só que desta vez acompanhei com CSS, umas horas bem passadas no Photoshop para desenhar o layout da moda, acrescentei a minha informação pessoal, os meus links, os meus projectos pessoais e académicos, um widget com o meu twitter actualizado em tempo real e finalmente, aqui está ele!

Só me resta dizer para me fazerem uma visita ao meu site e espero pelas vossas críticas no meu e-mail :)