Clique aqui para ler este artigo em PDF
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,
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”.
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.
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)
...
