Curso ASP.NET 3.5 em VB.NET e C# - WebParts

WebParts nos permite criar páginas com conteúdo gerenciável pelo usuário, onde esse pode arrastar controles, mudar aparências, ocultar o que não for preciso ou exibir novamente, enfim, traz para o ambiente Web uma interatividade completa entre o usuário e a aplicação, tudo isto com persistência.

por Fernando Amaral

8. WebParts

WebParts não é um conceito novo, mas que surgiu a partir do ASP.NET 2.0 de forma fácil e poderosa.

WebParts nos permite criar páginas com conteúdo gerenciável pelo usuário, onde esse pode arrastar controles, mudar aparências, ocultar o que não for preciso ou exibir novamente, enfim, traz para o ambiente Web uma interatividade completa entre o usuário e a aplicação, tudo isto com persistência.

Modos

Uma página ASP.NET utilizando WebParts pode estar em diferentes modos. Cada modo diz respeito ao comportamento do conteúdo da página e como o usuário poderá interagir com este conteúdo. Os quatro modos possíveis são:

· Normal: A página esta em modo normal, não permite quase nenhuma interatividade com o usuário;

· Catalog: Exibe a relação de seções da página, bem como permite ao usuário indicar em qual seção determinado item deverá permanecer. Permite restaurar controles que foram fechados.

· Design: Permite fazer o gerenciamento de zonas em uma página;

· Edit: Permite editar zonas de uma página

WebPartManager

O WebPartManager é um controle disponível na guia WebParts e é o responsável por todo o gerenciamento do conteúdo e de seu estado. É o principal controle e é obrigatório quanto trabalhamos com WebParts.

O gerenciamento de estado e conteúdo do WebPartManager é feito utilizando um banco de dados do SQL Server 2005, de nome ASPNETDB.MDF, que pode ser encontrando dentro da pasta App_Data.

WebPartZone

Outro controle importantíssimo e essencial é o WebPartZone. Através deste podemos definir as zonas onde serão agrupados o conteúdo da página. Este controle é um container para controles comuns, que de forma declarativa devem estar dentro da tag ZoneTemplate.

Utilizando WebParts

Crie uma nova aplicação ASP.NET;

Coloque sobre o Web Form criado um controle WebPartManager;

Coloque sobre o Web Form criado um controle WebPartZone;

Através da Smart Tag escolha uma das opções de auto-formatação;

Arraste para dentro do WebPartZone criado dois controles textbox;

Rode a aplicação

Com esta simplicidade nossa aplicação já contem alguma interatividade. Observe que cada controle dentro da WebPartZone pode ser minimizado ou fechando, através da seta a direita do controle:

Caso não apareça em sua aplicação o menu, ou mesmo se você não consegue alterar o modo de sua página, basta você autenticar o usuário que esta acessando a página, ou seja, não permitir acesso anônimo. A maneira mais simples de faz isto é utilizando autenticação integrada do Windows.

Se você fechar um controle, não conseguirá mais restaurá-lo, mesmo que reinicie a aplicação. Isto porque o WebPartManager mantém o estado da aplicação. Na próxima seção veremos que no modo Catalog podemos trazer os controles fechados de volta ao formulário.

Observe que no exemplo acima os controles possuem um texto personalizado, Primeiro e Segundo. Isto pode ser feito através do atributo Title de cada controle contido dentro da Zone Template. Isto deve ser feito de forma declarativa, pois esta não é uma propriedade do controle:

<ZoneTemplate>       <asp:TextBox Title="Primeiro" ID="TextBox1"                            runat="server"></asp:TextBox>       <asp:TextBox Title="Segundo" ID="TextBox2"                             runat="server"></asp:TextBox> </ZoneTemplate>

Você também pode personalizar os textos do Menu de controle através das propriedades CloseVerb e MinimizeVerb, procurando pelo atributo Text. Outras mensagens e rótulos que surgirão mais adiante poderão também ser personalizadas, basta procurar a propriedade equivalente.

Modo Catalog

Como dissemos o modo padrão de uma página é o Normal. Vamos ver agora como colocar uma página em modo Catalog, e quais as funcionalidades deste modo. Porém antes vamos criar mais duas zonas, para isto adicione mais dois novos controles WebPartZone ao formulário. Dentro do primeiro adicione dois controles Button, e no segundo dois controles CheckBox. Adicione um terceiro botão, alterando a propriedade text para Catalog, porém não o coloque dentro de nenhuma zona.

Para que seja possível colocar a página em modo catalogo você deve adicionar um controle CatalogZone. De ao mesmo uma auto formatação. O Controle CatalogZone é um container para Catálogos de Página. Coloque um controle PageCatalogPart dentro do CatalogZone.

De um duplo clique sobre o botão Catalog, no manipulador de evento criado adicione o seguinte código:

Dim mgr As WebPartManager mgr = WebPartManager.GetCurrentWebPartManager(Page) mgr.DisplayMode = mgr.SupportedDisplayModes.Item("Catalog")

WebPartManager mgr; mgr = WebPartManager.GetCurrentWebPartManager(Page); mgr.DisplayMode = mgr.SupportedDisplayModes["Catalog"];

O código acima declara um tipo WebPartManager e recebe o gerenciador da página por referencia, em seguida altera seu modo para Catalog. Rode a aplicação e a coloque no modo Catalog. Neste modo você pode:

Restaurar um controle fechado. Note que através das zonas listadas no DropDownList Add to você pode inclusive restaurar o controle em outra zona:

Arrastar controles entre as zonas. Para isto basta clicar no titulo do controle e arrastá-lo até a posição desejada:

Você pode ainda querer voltar a página ao modo normal. Para isto adicione um novo botão externo a qualquer zona, coloque o titulo Normal e adicione o seguinte código:

Dim mgr As WebPartManager mgr = WebPartManager.GetCurrentWebPartManager(Page) mgr.DisplayMode = mgr.SupportedDisplayModes.Item("Browse")

WebPartManager mgr; mgr = WebPartManager.GetCurrentWebPartManager(Page); mgr.DisplayMode = mgr.SupportedDisplayModes["Browse"];

As alterações que o usuário faz nas zonas são persistentes, voltar ao modo normal não irá desfazê-las.

Modo Design

Neste modo o usuário pode, alem de minimizar e fechar um controle, arrastá-los de uma zona para outra ou mesmo ordená-los, tarefas que são possíveis também no modo Catalog, porém sem exibir o controle CatalogZone e sem possibilidade de mostrar um controle oculto.

Veja abaixo um exemplo de como colocar a página em modo Design:

Dim mgr As WebPartManager mgr = WebPartManager.GetCurrentWebPartManager(Page) mgr.DisplayMode = mgr.SupportedDisplayModes.Item("Design")

WebPartManager mgr; mgr = WebPartManager.GetCurrentWebPartManager(Page); mgr.DisplayMode = mgr.SupportedDisplayModes["Browse"];

Modo Edit

O modo mais complexo e rico em funcionalidades é o modo de Edição. Através dele o usuário final poderá personalizar inúmeros aspectos dos controles, como aparência, comportamento e layout.

O Modo de edição é possível com a adição do controle EditorZone, este também é um container, que pode receber um ApperanceEditorPart e/ou BehaviorEditorPart e /ou LayoutEditorPart e /ou PropertyEditorPart.

Vamos os dois primeiros em funcionamento, para isso adicione um controle EditorZone a sua página e um button com a propriedade text configurada como Edit. No manipulador de evento do botão adicione o seguinte código:

Dim mgr As WebPartManager mgr = WebPartManager.GetCurrentWebPartManager(Page) mgr.DisplayMode = mgr.SupportedDisplayModes.Item("Edit")

WebPartManager mgr; mgr = WebPartManager.GetCurrentWebPartManager(Page); mgr.DisplayMode = mgr.SupportedDisplayModes["Edit"];

É preciso fazer algumas configurações para o modo de edição funcionar.

Primeiramente adicione o seguinte nó ao arquivo web.config de sua aplicação

<webParts>       <personalization>         <authorization>           <allow users="*" roles="admin" verbs="enterSharedScope"/>         </authorization>       </personalization> </webParts>

Esta configuração deve estar dentro do nó system.web.

Em seguida adicione o seguinte código ao evento PageLoad da página:

If WebPartManager1.Personalization.Scope = PersonalizationScope.User _ AndAlso WebPartManager1.Personalization.CanEnterSharedScope Then       WebPartManager1.Personalization.ToggleScope() End If

if (WebPartManager1.Personalization.Scope = PersonalizationScope.User && WebPartManager1.Personalization.CanEnterSharedScope) {       WebPartManager1.Personalization.ToggleScope(); }

Para não tornar o aprendizado mais claro e simples, vamos estudar um os quatro editores existentes.

ApperanceEditorPart

Adicione um controle ApperanceEditorPart ao EditorZone. Rode a aplicação e clique em Edit para permitir que um controle entre em modo de edição. Observe que em todo o controle, no menu a esquerda, surge uma nova opção: Edit:

Ao clicar na opção Edit, as opções do controle ApperanceEditorPart que adicionamos ao container são exibidas, você pode alterá-las a seu gosto. Para persistir as alterações clique em Apply, ou Cancel para cancelar.

As alterações irão persistir mesmo se você fechar o navegador.

BehaviorEditorPart

Remova o ApperanceEditorPart e adicione um BehaviorEditorPart, clique no botão Edit e em seguida no comando edit de algum controle:

Veja que são muitas configurações de comportamento possíveis. Faça alguns testes, por exemplo, desmarque a opção Allow Close e verifique que a opção de fechar desaparece do controle.