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.