Artigo da WebMobile 10 - Herança visual em WebForms

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Artigo Originalmente publicado na WebMobile 10.

capa10.JPG

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).

 

image002.jpg

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.

 

image004.jpg

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.


image006.jpg

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.

 

image008.jpg

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.


image010.jpg

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.

 

ID

Tipo

Propriedades

lbProducts

Label

Text=Produtos

lnkProductsPage

HyperLink

Text=Inserir

NavigateURL= ../Forms/ProductsPage.aspx?pOperationType=INSERT

lnkProductsPageFind

HyperLink

Text=Localizar/Alterar

NavigateURL= ../Forms/ProductsPageFind.aspx

lbCategories

Label

Text=Categorias

lnkCategoriesPage

HyperLink

Text=Inserir

NavigateURL= ../Forms/CategoriesPage.aspx?pOperationType=INSERT

lnkCategoriesPageFind

HyperLink

Text=Localizar/Alterar

NavigateURL= ../Forms/CategoriesPageFind.aspx

Tabela 1. Componentes do “cabeçalho” da Master Page.

Depois do ContentPlaceHolder, devem ser inseridos os botões a serem utilizados nas páginas de inserção de cadastro, conforme temos na Tabela 2.

 

ID

Tipo

Propriedades

btnCancel

Button

Text=Cancelar

btnDelete

Button

Text=Remover

btnAlter

Button

Text=Alterar

btnSave

Button

Text=Salvar

btnNew

Button

Text=Novo

pnlButtonBar

Panel

Width=100%

Tabela 2. Componentes do rodapé da Master Page.

Uma dica interessante neste momento é utilizar tabelas HTML para alinhar os botões.

Perceba na Tabela 1 que a URL dos links de inserção possuem o parâmetro indicando a operação de Inserção. No caso da página de localização, o parâmetro será configurado pelo GridView. Essa técnica será detalhada mais adiante (ler Nota 1).

 

Nota 1. Construção da Master Pages

Na edição anterior havíamos criado User Controls para o cabeçalho, rodapé e barra de botões. Com a utilização de Master Pages, no Framework 2.0, tem-se a vantagem de construir a página padrão em modo de design, consequentemente há um relevante incremento de agilidade no desenvolvimento de herança visual.

 

A seguir, é necessário codificar o comportamento da página template. Digite o tipo enumerado a ser utilizado, e os eventos a serem expostos para que a página consumidora possa incrementar o comportamento de cada botão da barra de botões conforme a Listagem 1.

 

Listagem 1. Enum e eventos a serem subscritos.

//Tipo enumerado para identificar a operação

//de Insert ou Alter

public enum OperationType

{

  ALTER,

  INSERT

};

 

//eventos que serão manipulados pelas páginas

//hospedeiras

public event EventHandler btnNewClickHandler;

public event EventHandler btnSaveClickHandler;

public event EventHandler btnCancelClickHandler;

"

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?