Artigo da WebMobile 10 - Herança visual em WebForms

Clique aqui para ler este artigo em pdf

Clique aqui para ler todos os artigos desta edição

Herança visual em WebForms

Criando páginas templates em .NET 1.x e 2.0 – Parte II

Na edição anterior destacamos que em desenvolvimento de aplicações é muito comum criarmos uma grande quantidade de telas com aparência semelhante, tanto para ambiente web, como para desktop. Alguns exemplos dessa situação são páginas que possuem o mesmo cabeçalho e rodapé, além de sites que possuem o mesmo menu em todas as suas páginas.

Para evitar o esforço duplicado no desenvolvimento de cada uma dessas telas e para facilitar a manutenção do layout de nossas aplicações, podemos utilizar um importante recurso da Orientação a Objetos: a herança, através da qual é criada uma classe base com características semelhantes de outras classes, agrupando funcionalidades e organizando o código.

No ambiente .NET há dois cenários para o desenvolvimento de aplicações utilizando a herança visual. Na edição anterior utilizamos o Framework 1.x para mostrar como podemos criar a herança visual de aplicações web através da codificação Orientada a Objetos. Nesta edição apresentaremos como essa funcionalidade pode ser desenvolvida no Framework 2.0, através da utilização de páginas templates chamadas de Master Page.

Para destacar as diferenças das duas abordagens (framework 1.x e 2.0), construiremos a mesma aplicação desenvolvida na edição anterior, utilizando o ambiente 2.0 e Visual Studio 2005. Trata-se de uma aplicação simples e rotineira de cadastros (gerenciamento de tabelas).

Caso você não tenha acompanhado o desenvolvimento da primeira parte, você poderá tranquilamente acompanhar o desenvolvimento nesta edição. Para fins didáticos, será utilizado o banco de dados Northwind disponível no SQL Server 2000.

Herança visual utilizando o framework 2.0

A ordem para o desenvolvimento da aplicação dada como exemplo no Framework 2.0 será: criação do projeto, criação da Master Page (página template) com as características comuns entre as páginas, e por último, a criação das páginas que herdarão as características dessa Master Page.

A estrutura da aplicação funciona da seguinte forma: a Master Page possui em seu conteúdo quatro regiões (cabeçalho, barra de botões, contentPlaceHolder e rodapé), e cada página de cadastro (exemplo: CategoriesPage.aspx) herda a página Master Page, reutilizando os componentes e adicionando os controles extras no ContentPlaceHolder, sendo que esse é o principal segredo das Master Pages: permitir que as páginas herdeiras insiram seus controles específicos no ContentPlaceHolder e reutilizar os controles da Master Page, que estejam externos ao ContentPlaceHolder.

Por fim, restará criar o layout das páginas com os campos a serem preenchidos pelo usuário e codificar o comportamento de cada botão da barra, como Alterar e Salvar.

Uma das principais características de páginas de cadastros é a existência dos botões que realizam as operações de: Novo, Salvar, Alterar, Cancelar. Para reutilizar essas funcionalidades, os mesmos são inseridos na Master Page que ficarão expostos às páginas consumidoras com o intuito de permitir a cada página personalizar o comportamento de cada operação.

Para isso, utilizaremos a funcionalidade dos Delegates, que expõem os eventos para as páginas hospedeiras. Para exemplificar, imagine que ao clicar no botão Inserir da página Produtos os componentes a serem manipulados serão diferentes dos componentes da página Categoria.

Por isso, cada página deve subscrever o evento correspondente do botão. Na Master Page também constam o header (cabeçalho) e footer (rodapé).

Para iniciar, crie uma nova Solution no Visual Studio 2005, File>New>Project com o nome “InheritedWebForms2.0” (Figura 1).

Figura 1. Criação da Solution no Visual Studio 2005.

Na seqüência, adicione um novo Web Site: File>Add>New Web Site, nomeado “InheritedWebForms2.0”. Após a criação, o arquivo default.aspx criado automaticamente deve ser apagado.

Figura 2. Criação do Web Site InheritedWebForms2.0.

Criação da Master Page

Crie, na hierarquia do projeto, uma pasta com o nome “MasterPages”. Clique com o botão direito na pasta e, através do menu Add New Item, crie uma Master Page chamada “InheritedWebForms.master”, conforme mostra a Figura 3.

Figura 3. Criação da página Master Page.

Perceba que na Master Page foi automaticamente criado um espaço denominado ContentPlaceHolder, destinado para que as páginas herdeiras possam ser customizadas, ou seja, será o espaço para incluir novos campos, imagens etc. Observe a Figura 4.

Figura 4. ContentPlaceHolder da Master Page.

Portanto, cada página baseada na Master Page poderá ter informações e comportamentos adicionais, além dos herdados da página template. Esse recurso é semelhante ao controle Panel (pnlContent) que utilizamos na aplicação desenvolvida utilizando o framework 1.x.

A seguir, vamos alterar a aparência de nossa página template de acordo com nosso objetivo, que é propagar para as páginas que herdam o padrão de nosso web site. Veja o layout sugerido na Figura 5.

Figura 5. Layout sugerido da Master Page.

Para desenhar o layout sugerido, conforme a Figura 5, deve-se utilizar tabelas HTML para alinhamento. O importante é a adição de alguns componentes, na parte superior, que servirão como menu para a página, conforme vemos na Tabela 1.