264 alt=capa10.JPG src="/imagens/webmobile/edicoes/10/capa10.JPG" width=201 border=0>
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
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
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
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.
|
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;
...
