WebParts – Introdução


Com a disseminação cada vez maior da internet, as aplicações Web tendem cada vez mais serem customizadas para atender um determinado usuário/cenário. Os usuários estão a cada dia mais exigentes e com isso nossas aplicações devem estar preparadas para isso. Essas customizações vão desde o que o usuário quer realmente ver até em que posição da tela ele quer que essa informação apareça. Já há vários sites que possibilitam essas customizações e um dos mais conhecidos é o já citado Windows Live Spaces, que fornece-nos uma gama de funcionalidades a nível de adição de conteúdo, customização das informações e aparência.

Na versão 2.0 do ASP.NET a Microsoft introduziu novos controles, denominados WebParts. A intenção é possibilitar a nós desenvolvedores criarmos aplicações mais customizavéis e, conseqüentemente, mais agradáveis aos nossos consumidores. Esses controles estão contidos dentro da ToolBox do Visual Studio .NET 2005 e sua respectivas classes e membros (enumeradores, estruturas, etc) constam dentro do namespace System.Web.UI.WebControls.WebParts.

Arquitetura das Classes

Antes de começarmos a analisar os controles já fornecidos pelo ASP.NET, vamos primeiramente entender como funciona a hierarquia das classes que provêm as funcionalidades das WebParts. Existem duas formas de estarmos criando uma WebPart. Você pode utilizar qualquer controle ASP.NET (TextBox, Calendar, User Control, GridView, etc.) como uma WebPart ou, se desejar um controle ainda mais customizado, pode herdar da classe abstrata chamada WebPart ou até mesmo implementar (direta ou indiretamente) a interface IWebPart.

Quando utilizamos algum controle ASP.NET como uma WebPart (que por sua vez não herda a classe WebPart e nem implementa a IWebPart), ele é encapsulado por uma classe denominada GenericWebPart que, por sua vez, implementa diretamente a interface IWebPart. Essa classe serve como um wrapper para o seu controle ASP.NET, provendo a ele todas as funcionalidades de uma WebParts, funcionalidades que veremos mais adiante. Para ilustramos melhor essa hierarquia, vejamos a imagem abaixo:

Figura 1 – Hierarquia das WebParts.

Analisando a imagem acima podemos ver a interface IWebPart, que nos fornece várias propriedades que definem algumas características de UI (User Interface) comuns entre todas as WebParts. Através da listagem abaixo será possível entender qual a finalidade de cada uma dessas propriedades:

Propriedade Descrição
CatalogIconImageUrl Define uma imagem que representará essa WebPart dentro de um catálogo de controles.
Description Especifica um texto que detalha superficialmente o que faz essa WebPart para ser usada como ToolTip dentro do catálogo de controles.
Subtitle Quando essa propriedade é definida, o valor desta é concatenado com o valor especificado na propriedade Title, formando assim um título mais completo/detalhado.
Title Define o título da WebPart.
TitleIconImageUrl Através desta propriedade, você pode definir o caminho até uma imagem, que será exibida na barra de título da WebPart, podendo ser a mesma que foi especificada na propriedade CatalogIconImageUrl.
TitleUrl Especifica uma URL contendo informações adicionais a respeito da sua WebPart.

Ainda analisando a imagem acima, podemos notar três outras classes: Part, WebPart e GenericWebPart. Essas classes são extremamente importantes dentro da arquitetura do Framework de WebParts e veremos a utilidade de cada uma delas abaixo.

A classe Part define propriedades comuns para todos os controles do tipo parts que tem uma aparência consistente, fornecendo propriedades para a customização da part dentro da página. Para exemplificar, podemos citar dois tipos de parts: a WebPart, que falaremos mais abaixo e o controle EditorPart, que fornece-nos uma UI para modificar (personalizar) uma determinada WebPart.

Já a classe WebPart serve como classe base para todos os controles WebParts, pois herda diretamente da classe Part, adicionando ainda funcionalidades para criar conexões entre WebParts, personalização e interações com o usuário. Se quiser criar uma WebPart customizada e fazer uso de todas as funcionalidades fornecidas pelas WebParts, então é desta classe que você deverá herdar e customizar de acordo com a sua necessidade. E, quando herdá-la, atente-se a sobrescrever o método RenderContents, que é o responsável pela exibição do conteúdo que a sua WebPart irá apresentar dentro da página. O trecho de código abaixo mostra um pequeno exemplo de como implementar essa classe concreta:

using System;
using System.Web.UI;
using System.Web.UI.WebControls.WebParts;

public class CustomWebPart : WebPart
{
    public CustomWebPart()
    {
        this.Title = "Minha WebPart";
    }

    protected override void RenderContents(HtmlTextWriter writer)
    {
        writer.Write("O conteúdo deve ser colocado aqui!");
    }
}

Finalmente a classe GenericWebPart, como já citamos anteriormente, herda diretamente da classe WebPart e serve como wrapper para controles que não tem suporte intrínsico as funcionalidades de WebParts, comportando-se como uma verdadeira WebPart em runtime. Como a utilidade desta classe é servir de wrapper para o controle, ela nunca será declarada dentro do HTML da página ASPX. Como essa classe só existirá em runtime, é possível acessá-la através de um método chamado GetGenericWebPart da classe WebPartManager. Esta, por sua vez, possui uma propriedade chamada ChildControl, que retorna uma referência ao controle que foi encapsulado pela GenericWebPart.

Controles de WebParts

Antes de efetivamente entrarmos na definição dos controles, é importante termos em mente um conceito bastante importante: as Zonas. As zonas são basicamente o local físico dentro da página onde podemos colocar uma ou mais WebParts. Como era de se esperar, vamos falar um pouco sobre a hierarquia de zonas que o Framework de WebParts nos fornece. Para isso, vejamos a figura abaixo:

Figura 2 – Hierarquia das Zonas.

Para iniciarmos nossa análise, iniciaremos com a classe WebZone. Essa classe abstrata provê grande parte das funcionalidades para os controles que servem como containers, ou seja, para os controles (parts) que estão contidos dentro da zona, sendo a classe base para todas as zonas fornecidas pelo Framework de WebParts. Isso inclui controles Web Parts, controles de servidor e User Controls. Como já era de se esperar, uma zona pode armazenar vários controles internamente, já que o mesmo herda diretamente da classe CompositeControl e a sua renderização é gerada em tabelas HTML. Como essas zonas permitem a configuração da aparência das mesmas, logo, qualquer WebPart colocada dentro dela herdará essas configurações.

Derivadas desta classe, existem dois tipos: WebPartZoneBase e ToolZone. A primeira delas, WebPartZoneBase, além de herdar todas as funcionalidades da classe WebZone, adiciona código cliente (Javascript) para permitir o Drag and Drop das WebParts contidas dentro da zona, coloca em funcionamento os verbos (veremos mais tarde a respeito), e outros detalhes a nível de aparência, como por exemplo bordas e menus. Um detalhe importante é que essa classe fornece duas propriedades interessantes; a primeira delas chamanda WebParts do tipo WebPartCollection, que retorna uma coleção de objetos do tipo WebPart, representando todas as WebParts que estão contidas dentro daquela zona; a segunda, LayoutOrientation, é onde especificamos em que sentido as WebParts serão posicionadas dentro da zona, ou seja, Vertical ou Horizontal. Já a outra classe, ToolZone, tem a finalidade de servir como classe base para as zonas que somente aparecerão em determinados modos de visualização, contendo controles especiais que permitem os usuários modificar a aparência e propriedades que foram herdadas, e assim criar zonas mais customizadas. Ainda analisando o diagrama de classes, podemos ver que da classe base WebZone surgem algumas outras zonas, como por exemplo EditorZone, CatalogZone, ConnectionsZone e WebPartZone, mas estas já são controles que estão dentro da ToolBox do Visual Studio .NET 2005, queveremos mais abaixo.

Para ilustrar as zonas e as WebParts, onde e como elas se encaixam, a imagem abaixo mostra no primeiro quadro, as seções da página que contém zonas disponíveis que permitem o drag-and-drop de WebParts. Já o segundo quadro exibe as mesmas zonas, só que agora com uma WebPart diferente dentro de cada zona. Vale lembrar que nada impede de termos todas as WebParts dentro de uma única zona e, como já podemos deduzir, é necessário que nossa página tenha, no mínimo, uma zona para que possa armazenar as WebParts.

Figura 3 – Zonas e WebParts.

Agora que já vimos como é a hierarquia e estrutura das classes que fornecem as WebParts e WebZones, vamos analisar os controles que o próprio ASP.NET nos fornece para usarmos dentro da página ASPX. Os controles serão aqui apresentados, porém veremos o uso deles no decorrer deste artigo, analisando detalhadamente cada um deles quando forem realmente utilizados.

Figura 4 – Controles de WebParts – ToolBox – VS.NET 2005.

 

Controle Descrição
WebPartManager

Este é um dos principais controles, já que gerencia todas as WebParts e WebPartZones da página. Entre as suas funcionalidades temos: lista e relacionamento entre as WebParts, adição e remoção de WebParts, conexões, personalização e manutenção de estado, define modos de visualização da página, entre outros. Esse controle não tem nenhuma aparência/visualização em runtime e deve existir apenas um controle por página.

ProxyWebPartManager

Este controle é utilizado para quando há conexões estáticas entre a Master Page e as Content Pages, ou seja, precisamos estabelecer conexões dentro das Content Pages com um controle WebPartManager declarado na Master Page. Como temos apenas um controle WebPartManager por página, é muito comum quando temos uma Master Page colocar o WebPartManager dentro dela e, como ela é mesclada com a Content Page em runtime, um único controle WebPartManager gerenciará todas as WebParts de todas as Content Pages.

WebPartZone

Este controle contém as WebParts em si. Os controles WebPartZone delimitam o local físico onde as WebParts serão armazenadas e exibidas. As WebPartZone ainda permitem configurar algumas propriedades, como por exemplo, a aparência que as WebParts terão quando forem colocadas dentro dela. Uma das principais propriedades é a ZoneTemplate. Essa propriedade recebe uma referência de uma classe que implementa a interface ITemplate, onde podemos definir controles estáticos que podem ser declarados ainda em design-time.

CatalogZone

Através deste controle conseguimos delimitar uma zona onde poderemos incluir dentro dela as zonas conhecidas como catálogos, que irão listar algumas WebParts que estarão disponíveis dentro da página e, conseqüentemente, permitirão a interação do usuário para personalizar a página, podendo escolher qualquer uma destas WebParts para visualizar/manipular. Este controle também é dotado de uma propriedade chamada ZoneTemplate do tipo ITemplate e, em seu interior, podemos fazer o uso dos seguintes controles de catálogo: DeclarativeCatalogPart, PageCatalogPart e ImportCatalogPart.

DeclarativeCatalogPart

Este catálogo permite-nos adicionar controles de forma declarativa, ou seja, via HTML ainda em design-time. Esse controle disponibiliza uma propriedade chamada WebPartsTemplate onde dentro dela definiremos as WebParts, que serão exibidas ao usuário final em uma listagem, possibilitando que ele adicione tais WebParts onde desejar.

PageCatalogPart

Este catálogo lista todas as WebParts que foram removidas da página pelo usuário, permitindo ao usuário trazer a WebPart de volta quando desejar. Sendo assim, só é viável o uso deste controle quando queira que o usuário tenha essa flexibilidade.

ImportCatalogPart

Através deste controle é permitido que o usuário envie um arquivo (via upload) com extensão *.webpart para que a mesma possa ser importada para dentro deste controle e, conseqüentemente, o usuário possa fazer o uso dela, adicionando-a na zona que desejar. Veremos o uso deste controle na íntegra e também da exportação de WebParts nas próximas seções.

EditorZone

Assim como o controle CatalogZone, o EditorZone também delimita uma zona onde dentro dela definiremos outros controles que permitirão a edição das WebParts existentes na página. Isso permitirá que o usuário altere a visualização e configuração das WebParts, salvando tais configurações para permitir que o mesmo acesse mais tarde e as modificações sejam mantidas. Essas modificações vão desde a aparência até o comportamento destas WebParts e, dentro deste controle, no interior da propriedade ZoneTemplate, podemos ter os seguintes editores: AppearanceEditorPart, BehaviorEditorPart, LayoutEditorPart e PropertyGridEditorPart.

AppearanceEditorPart

Este editor fornece propriedades para alterarmos a aparência de cada WebPart, como por exemplo, alterar o título apresentado pela WebPart.

BehaviorEditorPart

Este controle permite-nos configurar a utilização dos verbos expostos pelas WebParts, como por exemplo, AllowClose, AllowEdit, etc.

LayoutEditorPart

Este controle permite a configuração do estado e da localização da WebPart. Por estado, signifca se ele deve ser minimizado, fechado, etc. Já a localização diz respeito a zona e a posição dentro dela que a WebPart terá. Esse editor permitirá a alteração das seguintes propriedades das WebParts: ChromeState, Zone e ZoneIndex.

PropertyGridEditorPart

Este controle permite a configuração de propriedades customizadas das WebParts, contrariando os outros editores, que editam apenas as propriedades relacionadas com a UI (User Interface). Este controle irá exibir todas as propriedades da WebPart denotadas com o atributo WebBrowsable. Para cada tipo dessas propriedades, um controle ASP.NET específico é criado para satisfazer as alterações. Na listagem abaixo é mostrado a relação entre tipo e controle:

Tipo Controle
String

TextBox

Int, Float, Unit

TextBox

Boolean

CheckBox

Enum

DropDownList (contendo os valores)

DateTime

TextBox

ConnectionsZone

Este controle permite que as WebParts sejam conectadas umas com as outras dinamicamente ou estaticamente, desde que as conexões estejam habilitadas nas WebParts. As conexões entre WebParts serão abordadas detalhadamente na seção Conexões, ainda neste artigo.

 WebParts.zip (293.75 kb)

Anúncios

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s