Artigo WebMobile 9 - 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)  (1)

Artigo Originalmente publicado na WebMobile 9.

Esse artigo faz parte da revista WebMobile edição 09. Clique aqui para ler todos os artigos desta edição

Capa_WM09_M.gif

imagem_pdf.jpg

Herança visual em WebForms

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

No 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 também para facilitar a manutenção do layout de nossa aplicação, 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. No Framework 1.x é necessário codificar e utilizar-se de recursos de orientação a objetos, e no Framework 2.0 esse conceito foi incorporado em páginas templates chamadas de Master Page. Atualmente existem diversas aplicações sendo desenvolvidas nos dois cenários, portanto abordaremos essa técnica nos dois ambientes, em dois artigos, para que possamos explicar detalhadamente. Nesta edição desenvolveremos uma aplicação no Framework 1.x e na próxima edição utilizaremos o Framework 2.0.

Construiremos uma aplicação simples e rotineira de cadastros (gerenciamento de tabelas). Para fins didáticos, será utilizado o banco de dados NorthWind disponível no SQL Server 2000.

Herança Visual utilizando o framework 1.x

A ordem para o desenvolvimento da aplicação dada como exemplo no Framework 1.x será: criação do projeto, criação dos User Controls que pertencerão à classe base, criação da classe Base (Página Base), e por último, a criação das páginas que herdarão as características dessa classe base.

A estrutura da aplicação funciona da seguinte forma: a classe base (BasePage) possui como atributos os três User Controls (cabeçalho, barra de botões e rodapé), e cada página de cadastro (exemplo: CategoriesPage.aspx) herda a classe BasePage, reutilizando os controles. 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 exemplo Alterar e Salvar.

As páginas de cadastros comumente possuem botões que realizam as operações de: Novo, Salvar, Alterar, Cancelar. Para reutilizar esse trabalho, será criado um User Control com uma barra de botões para cada ação, que ficarão expostas às páginas consumidoras, com o intuito de permitir 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. Adicionalmente, serão desenvolvidos os User Controls: header (cabeçalho) e footer (rodapé), para padronização da aparência das páginas.

Inicialmente crie um projeto ASP.NET Web Application chamado “InheritedWebForms” usando como linguagem o Visual C#. Em seguida, vamos à criação dos User Controls.

Criação dos User Controls           

Adicione uma pasta chamada “Controls” no projeto, e dentro dela crie um User Control chamado “UcButtonBar.ascx”, conforme a Figura 1. Repita esse procedimento para “UcFooter.ascx” e “UcHeader.ascx”.

image002.jpg

Figura 1. Criando o User Control UcButtonBar.

Insira os botões que compõem a barra no UcButtonBar e configure suas propriedades conforme a Tabela 1.

 

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 1. Configurando os componentes do UcButtonBar.

 

Veja o layout sugerido do UcButtonBar na Figura 2.

 

image003.gif

Figura 2. Layout sugerido do UcButtonBar.

 

Agora digite os métodos “SetButtonsNewAlter” e “SetButtonsSaveCancel” (conforme a Listagem 1) que são responsáveis por alterar o estado dos botões quando é realizado um determinado clique na página. Por exemplo: quando o usuário clicar em Novo, só pode ser dada a opção para clicar em Salvar ou Cancelar e quando clicar em Salvar só podem ser disponibilizadas as opções para inserir um novo registro ou alterar o atual.

 

Listagem 1. Métodos que descrevem a visibilidade dos botões.

public void SetButtonsNewAlter()

{

         //altera os botões após clicar em novo ou alterar

         btnCancel.Visible = true;

         btnSave.Visible = true;

         btnNew.Visible = false;

         btnAlter.Visible = false;

}

 

public void SetButtonsSaveCancel()

{

         //altera os botões após clicar em //salvar ou cancelar

         btnCancel.Visible = false;

         btnSave.Visible = false;

         btnNew.Visible = true;

         btnAlter.Visible = true;

}

 

A seguir, adicione a declaração dos eventos que serão manipulados pelas páginas hospedeiras, conforme a Listagem 2.

 

Listagem 2. Eventos dos botões.

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

public event EventHandler btnNewClickHandler;

public event EventHandler btnSaveClickHandler;

public event EventHandler btnCancelClickHandler;

public event EventHandler btnDeleteClickHandler;

public event EventHandler btnAlterClickHandler;

 

A página consumidora deverá descrever o comportamento do clique de cada botão. Vamos exemplificar como expor o botão Novo, e posteriormente bastará repetir o procedimento para os demais botões. Ao ocorrer um clique no botão Novo, o evento btnNew_Click (do User Control) será invocado. Se houver um evento subscrito no atributo btnNewClickHandler, basta chamá-lo. Veja o código na Listagem 3.

 

Listagem 3. Configurações do botão Novo.

private void btnNew_Click(object sender, System.EventArgs e)

{

  //invoca métodos anexados       

  OnBtnNewClick(sender,e);

  //configura estado dos botões

  this.SetButtonsNewAlter();

}

protected void OnBtnNewClick(object o, EventArgs e)

{

  //se existir algum evento anexado ao clique do botão btnNew, dispara o evento

  if(btnNewClickHandler != null)

  {

     btnNewClickHandler(this, e);   

  }

}

 

Perceba que é feita uma verificação para checar se o evento está anexado para que o comportamento do método seja interpretado pela página executada. Repita isto para os demais botões (Listagem 4).

 

Listagem 4. Configuração dos outros botões.

//-------Botão salvar-------

private void btnSave_Click(object sender, System.EventArgs e)

{

  OnBtnSaveClick(sender,e);

  this.SetButtonsSaveCancel();

}

 

protected void OnBtnSaveClick(object o, EventArgs e)

{

  //se existir algum evento anexo ao clique do botão btnSave, dispara o evento

  if(btnSaveClickHandler != null)

  {

     btnSaveClickHandler(this, e);

  }

}

 

//------Botão Cancelar-------

private void btnCancel_Click(object sender, System.EventArgs e)

{"

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?