Artigos .NET PivotViewer - .Net Magazine 80
Demais posts desta série:
PivotViewer - Parte 1
Artigo no estilo: Curso

Do que trata o artigo

Este artigo mostra como criar coleções dinâmicas com o PivotViewer, o novo controle do Silverlight que permite realizar pesquisas no estilo Pivot, com a utilização de imagens e usando o famoso recurso de DeepZoom. Mostra também como criar coleções a partir de fontes de dados externas, como por exemplo, um banco de dados do SQL Server.

Para que serve

Se o leitor já conhece o Pivot Viewer e já sabe fazer coleções estáticas com a ajuda do plug-in do Excel (ver artigo introdutório sobre o Pivot Viewer na edição 79), esta é uma ótima oportunidade para aprender como criar coleções dinâmicas, em diversas fontes de dados.

Em que situação o tema é útil

Esse tema é especialmente útil para desenvolver aplicações que oferecem recursos de pesquisa e análise avançadas em bases de dados. Com ele as aplicações analíticas ganham uma enorme qualidade visual e de interação com o usuário.

Resumo do DevMan

O PivotViewer é uma das grandes novidades do momento, no que se diz respeito ao desenvolvimento de aplicações com alta interatividade do usuário. Esse controle do Silverlight permite criar coleções de dados que possam ser manipuladas visualmente. É basicamente uma evolução das ferramentas de consulta OLAP, como as tabelas dinâmicas do próprio Excel. Este artigo mostra a criação de coleções dinâmicas e a apresentação com o PivotViewer do Silverlight. É possível criar coleções de qualquer fonte de dados externa, basta ter uma imagem de exibição para cada item e dados para categorizá-los.

Na edição de número 79 da .NET Magazine, foi publicado um artigo introdutório sobre o controle PivotViewer do Silverlight. Se o leitor ainda não conhece esse novo controle do Silverlight, sugiro fortemente a leitura do artigo da edição 79, antes de continuar a ler este aqui. Lá são abordados todos os conceitos básicos do PivotViewer, bem como onde baixar e instalar o controle.

Este artigo tenta ser bem mais prático, já que toda a teoria que envolve o PivotViewer já foi bastante explorada no artigo anterior. Só para refrescar a memória, o funcionamento do controle pode ser visto em http://algorama.selfip.net/Filmoteca (Figura 1).

Figura 1. Coleção de filmes exibida no PivotViewer

No artigo anterior a esse, foi demonstrada a criação dessa coleção de filmes e como exibí-la no PivotViewer. Cada filme dessa coleção é representado por uma imagem, que é rearranjada dentro do Pivot, de acordo com as mudanças e escolhas feitas nas categorias (lado esquerdo), ordenação e tipos de exibição (lado superior direito).

Pode-se ainda fazer um zoom em qualquer imagem, a fim de visualizá-la por inteiro e consultar os detalhes de cada filme. Esse recurso de Zoom é realizado através do DeepZoom, antigo conhecido de aplicações Silverlight.

Nota do Devman

O DeepZoom é uma implementação para o Silverlight de uma tecnologia da Microsoft chamada Seadragon. Tanto o Seadragon quanto a ideia por trás do PivotViewer fazem parte de um programa da Microsoft chamado Microsoft Live Labs.

O DeepZoom permite navegar facilmente através de uma grande imagem, ou de um conjunto de imagens colocadas em conjunto. Essa navegação é feita simplesmente arrastando a superfície onde se encontram as imagens. Além disso, o principal recurso do DeepZoom é a possibilidade de fazer um Zoom In e um Zoom Out com a ajuda do botão de rolagem do mouse. Todo o mecanismo de renderização e carga das imagens em memória é controlado pelo DeepZoom.

O Controle PivotViewer do Silverlight possibilita as mesmas funcionalidades do DeepZoom nas imagens que compõem a coleção que está sendo visualizada no controle.

No exemplo da coleção de Filmes, foi criado o que é chamado de coleção estática (ou coleção simples). Nesse tipo de coleção é criado manualmente o arquivo XML que contém todos os dados da collection. Esse arquivo possui a extensão .CXML, um arquivo no formato XML que define como os itens de uma coleção são organizados.

Na verdade, não é necessário criar este arquivo “na mão”, mas com a ajuda de um plug-in do Excel, que permite montar as coleções e gerar os arquivos necessários. Para a criação de coleções para o PivotViewer, temos três estratégias possíveis, como você pode ver na Figura 2.

Figura 2. Três tipos de coleções que podemos criar

As Simple Collections são as que podem ser geradas com a ajuda do Excel, e que na verdade são chamadas de simples ou estáticas, pois a coleção é previamente criada e só será atualizada se houver uma intervenção futura.

As Linked Collections são várias coleções simples conectadas entre si. O controle PivotViewer permite a chamada de uma coleção a partir de links relacionados aos itens da coleção.

Por fim as Dynamic Collections, ou coleções dinâmicas, chamada assim porque ela é criada em tempo de execução. Isso permite gerar coleções por demanda, consultando as mais diversas fontes de dados.

Enquanto a Simple Collection é uma ótima solução para a coleção de Filmes, para uma coleção que precisa estar sempre atualizada, é necessária a utilização de uma coleção dinâmica. O que será visto nos próximos capítulos deste artigo é a criação de uma coleção dinâmica que irá expor dados de um banco de dados do SQL Server.

Álbum de fotos

O exemplo do artigo mostra no PivotViewer um Álbum de Fotos, que estão armazenadas em um banco de dados do SQL Server. São utilizados recursos para a criação de coleções dinâmicas do PivotViewer. O NHibernate cuida do acesso e persistência no BD. Uma página ASP.NET faz o upload das imagens.

A solução chamada AlbumFotos contém dois projetos, um chamado AlbumFotos.Dominio e outro AlbumFotos.Repositorio. Em AlbumFotos.Dominio estão as entidades EntidadeBase e Foto (Listagem 1).

Listagem 1. EntidadeBase e Foto

namespace AlbumFotos.Dominio.Entidades
  {
         public class EntidadeBase
         {
               public long Id { get; set; }
         }
   
  public class Foto : EntidadeBase
         {          
               public string   Caminho     { get; set; }
                public short    Ano         { get; set; }
                public string   Mes         { get; set; }
               public string   Categoria   { get; set; }
               public string   Evento      { get; set; }
               public string   Cidade      { get; set; }
                public string   Pessoas     { get; set; }
                public string   Observacao  { get; set; }                 
         }
  } ...

Quer ler esse conteúdo completo? Tenha acesso completo