Artigo Webmobile 1- Tutorial ASP.NET
Artigos Mobile Artigo Webmobile 1- Tutorial ASP.NET
Por Eduardo Bottcher
A tecnologia ASP.NET, lançada pela Microsoft em 2002, pode ser considerada um marco histórico na área de desenvolvimento de aplicativos voltados para a web, pelo fato de ter sido uma linguagem idealizada, projetada e preparada para um mundo onde a Internet é parte fundamental do cotidiano das pessoas e das empresas. Além de trazer novos recursos que fazem de uma página web uma interface quase tão rica quanto um formulário convencional, a linguagem ASP.NET e seus conceitos são bastante simples de aprender. Por estes motivos é que em tão pouco tempo essa tecnologia ganhou um significativo espaço no mercado, e cada dia vem crescendo o número de empresas que passam a utilizá-la.
Neste tutorial, vamos aprender como desenvolver um aplicativo em ASP.NET usando seu novo modelo de programação e veremos como utilizar seus novos recursos.
Uma página ASP.NET é muito mais que uma simples página ou site estático, pois permite uma dinamicidade das informações contidas nessas páginas. Uma página desenvolvida em ASP.NET é um aplicativo .NET para ambientes web, ou seja, um programa que trabalha na arquitetura cliente-servidor utilizando a internet ou intranet como meio de comunicação dos dados e com interface baseada em HTML para trafegar os dados via protocolo HTTP. Para tornar possível este cenário, é necessário que esteja instalado um programa servidor de aplicações web na máquina que funcionará como servidor. Existem diversos servidores de aplicações disponíveis. Neste tutorial utilizaremos o IIS (Internet Information Services). Sua instalação é simples e quaisquer configurações adicionais para rodar o ASP.NET serão gerenciadas pelo software de desenvolvimento que iremos usar.
Também será necessário instalar o .NET Framework, que pode ser encontrado em (http://www.microsoft.com/downloads/details.aspx?FamilyID=262D25E3-F589-4842-8157-034D1E7CF3A3&displaylang=en). Este componente é o responsável pela execução e processamento das páginas ASP.NET. Como esse processamento é realizado no servidor, não é necessário instalar o .NET Framework nas máquinas clientes que vão acessar essas páginas. Para ambientes de desenvolvimento, a mesma máquina que será o servidor também funcionará como cliente, utilizando os endereços http://localhost ou http://127.0.0.1 para fazer referência à máquina local.
Neste tutorial usaremos o Visual Studio.NET 2003 para desenvolver nossas aplicações. Embora você possa escrever suas páginas em outros programas como o Web Matrix (software gratuito disponível em http://www.asp.net/webmatrix) ou até mesmo no bloco de notas utilizando o .NET Framework SDK (http://www.microsoft.com/downloads/details.aspx?familyid=9B3A2CA6-3647-4070-9F41-A333C6B9181D&displaylang=en), o Visual Studio .NET é o mais recomendado, pois apresenta vários recursos que facilitam o dia a dia do desenvolvedor, proporcionando ganho de performance e diminuindo o tempo de desenvolvimento (veremos mais a frente alguns desses recursos).
Para escrever nossa primeira página ASP.NET, abra o Visual Studio.NET e clique no Menu File à New à Project (ou a tecla de atalho Crtl+Shift+N). A Figura 1 mostra a tela com as opções de Projeto.
Figura 1. Escolha a linguagem e o tipo de projeto.
Nesta tela devemos escolher primeiramente qual linguagem iremos desenvolver nossa página. Neste Tutorial usaremos o VB.NET, mas nada impede que você escolha o C# ou outra linguagem compatível com o .NET Framework. Após escolher a linguagem na lista a esquerda da tela, selecione ao lado a opção ASP. NET Web Application, conforme apresentado na Figura 1. Logo abaixo, no campo location, onde estiver escrito webapplication1, renomeie para TutorialASPNET, que será o nome do nosso projeto. Logo depois clique em OK. A Figura 2 mostra a tela principal do Visual Studio.NET para o desenvolvimento de páginas ASP.NET.
Figura 2. Tela Principal do Visual Studio.NET
Antes de prosseguir vamos conhecer as principais janelas do Visual Studio.NET:
· Solution Explorer (Figura 2A): É onde visualizamos os arquivos que fazem parte do projeto, onde podemos organizar os arquivo em pastas e ver quais as referencias externas que são feitas pelo projeto.
· Menu Bar (Figura 2B): localizada no topo da tela, contém ícones de atalho como copiar, recortar, colar, salvar, abrir, executar entre outros.
· ToolBox (Figura 2C): É a barra de ferramentas onde estão os objetos e elementos que eu posso adicionar na minha página. Ex: TextBox, Label, etc.
· Área de Trabalho (Figura 2D): Ë a região onde o código da página é visualizado e editado. É possível alterar a visualização para design ou ver o código HTML clicando os respectivos botões localizados na parte inferior dessa janela.
· Properties window (Figura 2E): É a janela na qual alteramos as propriedades como fonte, texto, vinculo de dados e o posicionamento dos objetos que estão na página.
Cada página ASP.NET também é chamada de Web Form (formulário web), pois seu conceito é muito parecido com um formulário de aplicações desktop convencional, quer dizer, uma tela composta por diversos tipos de controles como caixas de texto, labels e botões, entre outros que servem de interação entre o usuário e o sistema. No Visual Studio.NET, para adicionar um controle basta arrastá-lo da Toolbox para dentro do formulário web.
Para o nosso primeiro exemplo, iremos fazer uma tela de login de um sistema, contendo campos para informar o login do usuário, a senha e um botão para efetuar o acesso. O primeiro passo é criar um novo Web Form. Para isso clique em File à Add New Item. Na janela que irá aparecer, selecione o item Web Form, nomeie-o para MinhaPagina.aspx e clique em OK (ver Nota 1).
Quando criamos um novo projeto, já é criada por padrão uma página Web chamada WebForm1.aspx, que pode ser acessado pelo solution explorer. Está página está sendo criada apenas para demonstrar todo o processo.
A Tabela 1 contém a listagem dos objetos utilizados nesta tela e as propriedades que devem ser alteradas nesses objetos. A Figura 3 apresenta o resultado da construção da nossa tela exemplo de login (ver Nota 2).
Figura 3. a tela de acesso a um sistema do nosso exemplo
Tabela 1. Objetos da tela de Login
lblSenha
lblMensagem
Btnlogar
Para que apareçam "*" na caixa de senha conforme o usuário vai digitando o valor de sua senha correta, coloque o valor "Password" na propriedade textmode do objeto Txtsenha.
Vamos analisar agora o HTML resultante desta tela. A Listagem 1 apresenta o código HTML da página gerada. Você pode visualizar este código clicando no botão HTML no canto inferior esquerdo da área de trabalho do Visual Studio.NET (Figura 2D).
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="MinhaPagina.aspx.vb" Inherits="TutorialASPNET.MinhaPagina"%>
<asp:Label id="Lbllogin" runat="server" ForeColor="Black">Login
<asp:Label id="lblsenha" runat="server">Senha </asp:Label>
<asp:TextBox id="Txtlogin" runat="server"> </asp:TextBox>
<asp:Button id="Btnlogar" runat="server" Text="Entrar" Width="120px">
<asp:Label id="lblmensagem" runat="server" Visible="False"></asp:Label>
Basicamente, o código HTML de uma página ASP.NET é composto por tags HTML padrão e algumas tags que iniciam com "<asp: ". Estas tags são chamadas de Web Controls, que são controles pertencentes ao .NET Framework e que tem seu comportamento gerenciado no servidor. Essas tags foram sendo adicionadas ao código conforme arrastávamos os objetos para a página. Por exemplo, a tag descrita abaixo representa o web control TextBox.
<asp:TextBox id="TextBox2" runat="server"> </asp:TextBox>
Quando a página é exibida em um browser, cada web control é representado por uma tag HTML padrão, ou seja, não veremos no navegador uma tag "<asp:textbox>" e sim sua correspondente, neste caso "<input type=text>". Além de ter as propriedades comuns às suas tags HTML correspondentes, os web controls possuem outras propriedades que os tornam mais práticos e eficientes. Veja o exemplo abaixo.
Um <asp:label> é um web control que exibe um texto na página. Quando acessado pelo cliente é representado pela tag <span>. Perceba que há uma propriedade Visible="False" nesta tag que faz com que, quando a página seja carregada, esse texto não apareça. Este tipo de recurso, ou propriedade, não existe na tag <span>, e para ter esse efeito é necessário ao programador adicionar um estilo ou usar um JavaScript. No entanto, a página ASP.NET faz isso automaticamente. Ao carregar a página, o .NET Framework identifica essas propriedades e compatibiliza o código para criar um código HTML resultante que realiza o efeito desejado sem que haja esforço adicional por parte do desenvolvedor.
Ainda no código desenvolvido para a tela de login, temos a seguinte tag que representa o web control do botão que irá validar o login e a senha do usuário.
<asp:Button id="Button1" runat="server" Text="Entrar" Width="120px"></asp:Button>
Fazendo o Postback da página
Quando criamos um formulário, é necessário indicar através da propriedade action da tag <form> o destino para o qual os dados serão remetidos. Existem dois destinos para onde esses dados podem ser encaminhados: para um e-mail usando o comando mailto:emaildesejado e, para uma outra página que contenha scripts que possam receber e processar os dados. Para evitar que se tenham dois arquivos, um com o formulário e outro que processe os dados, segmentando desnecessariamente o código (é claro que em alguns casos isso se faz necessário), colocamos o form e o código na mesma página, fazendo com que ao submeter o formulário a página envie os dados para ela mesma, e dê continuidade ao processamento da aplicação. Esta operação de enviar os dados de uma página para si mesma é chamada de Postback da página e é um recurso muito utilizado nos web forms. Enquanto em outras linguagens, quando fazemos Postback, precisamos de um código adicional para recuperar e repovoar os campos do formulário (os dados preenchidos são enviados, mas os valores nos campos do formulário não são mantidos), um web form já faz isso automaticamente, visto que seus web controls são gerenciados no servidor, mantendo os dados da página sem que haja nenhum código adicional. Para configurarmos o Postback é necessário que a página tenha a seguinte tag
Além disso, todos os controles que necessitem ter seus valores recuperados devem estar entre essas tags e devem ter sua a propriedade runat="server". Ë importante ressaltar que só é permitido apenas uma tag <form> com a propriedade runat="server" por página.
Além de web controls, uma página ASP.NET também pode ter os chamados HTML Controls, controles HTML padrão, e os Web user controls, controles personalizados.
Cada Página ASP.NET é composta por um arquivo .aspx que contem o HTML da página e lida com a parte visual, e um arquivo .aspx.vb que contém toda a parte de programação. Esta separação de funcionalidade por arquivos é chamada de CodeBehind, ou código por trás de uma página. As páginas aspx de um site são passadas ao browser enquanto que os arquivos .vb são compilados em uma dll e controlam a execução da página.
Para vincular qual arquivo .vb controla qual arquivo aspx, precisamos adicionar ao aspx uma diretiva. A linha abaixo mostra esse comando:
Esta linha é obrigatória em todos os arquivos aspx, pois nos fornece informações importantes sobre a página. Na diretiva Codebehind="MinhaPagina.aspx.vb" estamos informando qual arquivo controlará esta página (no Visual Studio.NET esses dados já são preenchidos automaticamente).
Outra vantagem do uso do CodeBehind é que profissionais de áreas diferentes podem trabalhar independentemente na mesma página sem que um interfira no trabalho do outro. Em outras palavras, o designer pode ficar codificando o HTML da página no arquivo aspx enquanto o programador se encarrega da programação no arquivo .vb.
Como toda a plataforma .NET, uma aplicação ASP.NET é baseada nos conceitos de orientação a objetos. Cada web form é considerado uma classe, que é descrita no arquivo aspx.vb. Para indicar a classe que representa e descreve uma página aspx usamos a diretiva inherits. Assim um arquivo aspx passa a ser uma representação visual de uma classe bem definida, possibilitando ao sistema as operações clássicas de OO como herança, encapsulamento, sobrecarga, etc. A Listagem 2 mostra o código em vb criado pelo Visual Studio.NET para nossa tela de login (ver Nota 4).
Listagem 2. Codebehind gerado pelo VS.NET para a nossa página aspx
Public Class MinhaPagina
Protected WithEvents Lblsenha As System.Web.UI.WebControls.Label
Protected WithEvents Txtsenha As System.Web.UI.WebControls.TextBox
Protected WithEvents Btnlogar As System.Web.UI.WebControls.Button
Protected WithEvents lblmensagem As System.Web.UI.WebControls.Label
No código da Listagem 2 temos a descrição da Classe MinhaPagina que herda da classe System.Web.UI.Page, a classe do .NET Framework que representa uma página web, além da declaração de seus métodos e atributos. Os atributos são os web controls daquela página. Temos ainda os métodos page_init e page_load, que são executados toda vez que a página é carregada ou faz Postback.
Quando o Visual Studio.NET cria o código da classe de uma página, ele automaticamente comenta algumas regiões do código com rápidas descrições sobre sua funcionalidade parte para situar melhor o programador.
Programando a página
Uma vez que já vimos os principais conceitos que envolvem uma página ASP.NET, vamos continuar a implementação do nosso exemplo da tela de login. Vamos agora programar o evento do clique do botão para verificar se o login e a senha são válidos ou não. Para isso, na tela de design da página dê um duplo clique no botão e digite o código descrito na Listagem 3.
Listagem 3. Validando o login
Private Sub btnlogar_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnlogar.Click
If txtlogin.Text = "tutorial" And txtsenha.Text = "123456" Then
'verifica se os valores digitados estão corretos
Session("login") = txtlogin.Text 'Cria uma sessão chamada login
Response.Redirect("PaginaDB.aspx") 'Redireciona para outra página
lblmensagem.Visible = True
lblmensagem.Text = "Login inválido"
lblmensagem.Text = ex.Message.ToString
Temos na Listagem 3 a rotina de clique do botão btnlogar. Iniciamos a programação com um bloco de tratamento de exceção try...catch. Ele funciona da seguinte maneira: caso aconteça algum erro durante a execução do código que está dentro do bloco try, o programa captura esse erro e faz seu tratamento na segunda parte da estrutura, na parte catch do bloco. Neste caso, estamos exibindo a mensagem de erro no objeto label lblmensagem e tornando-a visível, já que sua propriedade visible foi inicialmente definida como false.
O código é simples. Fazemos um teste para verificar se o valor da caixa de texto txtlogin é "tutorial" e o valor da caixa de texto txtsenha é "123456". Se for, criamos uma sessão chamada login com o valor de txtlogin e em seguida redirecionamos o usuário para outra página. Caso contrário, escrevemos a frase "Login inválido" na label lblmensagem e a deixamos como visível.
Perceba que para fazer esta validação, a página deverá ir ao servidor, ou melhor, fazer um Postback. Portanto, nenhuma operação acima é realizada no cliente. É importante ressaltar também que se por acaso o login estiver errado, a página exibirá uma mensagem e veremos que o campo login continuará preenchido (o campo senha não, pois se trata de um campo do tipo password) devido à manutenção do seu estado que é feita no servidor.
A plataforma .NET trouxe uma série de inovações no que diz respeito ao acesso a banco de dados através da tecnologia ADO.NET (Nota 5). Veremos agora como fazer uma página ASP.NET acessar uma base de dados usando o ADO.NET, além de conhecer alguns componentes visuais específicos para manipulação de dados. Para isso vamos fazer o exemplo de uma página contendo um grid exibindo alguns dados da tabela de produtos. Usaremos como banco de dados o bom e velho Northwind em sua versão para Access que pode ser baixado em http://office.microsoft.com/downloads/2000/Nwind2K.aspx.
Nota 5. Tecnologia ADO.NET
A tecnologia ADO.NET é sucessora da ADO, usada em quase todas as plataformas de desenvolvimento da Microsoft, como Visual Basic e ASP. A biblioteca de objetos do ADO.NET é parte integrante do .NET Framework e é responsável por prover acesso consistente a bases de dados, seja ela um SQL Server ou qualquer fonte de dados que possa ser acessada via padrões OLE DB ou ODBC. Além de possibilitar a manipulação dos dados, o ADO.NET conta com suporte integrado ao XML, acesso desconectado a bases de dados entre outros recursos.
Seguindo os passos descritos anteriormente neste tutorial, crie uma nova página chamada PaginaDB.aspx. Adicione um objeto DataGrid que está na aba Web Forms da barra de ferramentas ToolBox e nomeie-o para "DGProdutos". A Figura 4 mostra como deve ficar a sua página.
Figura 4. Exibindo dados do banco de dados.
É necessário agora configurar nosso datagrid para exibir os dados corretamente. O Visual Studio.NET possui um assistente para alterar as propriedades do datagrid. Para acessá-lo, clique com o botão direito no grid e selecione Property Builder. A Figura 5 apresenta a tela para configuração das propriedades de um datagrid. Na aba Columns, adicione as colunas de acordo com o que está descrito na Tabela 2. Desmarque a opção acima "create columns automatically at run time" para que possamos configurar manualmente as colunas. Para aplicar um layout no visual do grid, clique com o botão direto em cima dele, selecione auto format e escolha uma das opções disponíveis.
Figura 5. Wizard para configuração do datagrid
Tabela 2. Colunas do Datagrid
Uma vez configurado o datagrid, vamos descrever o código para acessar o banco e exibir os dados no datagrid. A Listagem 4 mostra como fica o código HTML do aspx e na Listagem 5 temos o código do arquivo .vb.
Listagem 4. Código HTML da página contendo um objeto datagrid
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="PaginaDB.aspx.vb" Inherits="TutorialASPNET.PaginaDB"%>
<h2 align="center">Listagem de Produtos</h2>
<asp:datagrid id="DGProdutos" runat="server" Height="240px" Width="504px" HorizontalAlign="Center" AutoGenerateColumns="False" BorderColor="#3366CC" Border BorderWidth="1px" BackColor="White" CellPadding="4">
<asp:BoundColumn DataField="Productname" HeaderText="Produto"></asp:BoundColumn>
<asp:BoundColumn DataField="UnitPrice" HeaderText="Pre&#231;o Unit&#225;rio"></asp:BoundColumn>
<asp:BoundColumn DataField="UnitsInStock" HeaderText="Unidades em Estoque"></asp:BoundColumn>
Listagem 5. Código para acessar o banco de dados
1: Public Class PaginaDB
2: Inherits System.Web.UI.Page
3: #Region " Web Form Designer Generated Code "
4: 'This call is required by the Web Form Designer.
5: <System.Diagnostics.DebuggerStepThrough()> Private Sub InitializeComponent()
7: Protected WithEvents DGProdutos As System.Web.UI.WebControls.DataGrid
8: 'NOTE: The following placeholder declaration is required by the Web Form Designer.
9: 'Do not delete or move it.
10: Private designerPlaceholderDeclaration As System.Object
11: Private Sub Page_Init(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Init
12: 'CODEGEN: This method call is required by the Web Form Designer
13: 'Do not modify it using the code editor.
14: InitializeComponent()
16: #End Region
17: Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
18: 'Put user code to initialize the page here
19: Dim conn As New System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("Nwind.mdb") + ";Persist Security Info=False")
20: conn.Open()
21: Dim cmd As New System.Data.OleDb.OleDbCommand
22: Dim adap As New System.Data.OleDb.OleDbDataAdapter
23: Dim Ds As New DataSet
24: cmd.CommandText = "Select * from Products order by productname"
25: cmd.Connection = conn
26: adap.SelectCommand = cmd
27: adap.Fill(Ds, "Produtos")
28: DGProdutos.DataSource = Ds
29: DGProdutos.DataMember = "Produtos"
30: DGProdutos.DataBind()
Todo o processo de acesso ao banco e exibição dos dados pelo controle ocorre no evento page_load da página (Linhas 17 a 31), ou seja, durante o carregamento da página. A primeira coisa realizada foi a criação de um objeto do tipo oledbconnection (Linha 19) para se conectar ao banco, passando no seu construtor a string de conexão como parâmetro. Finalmente, na linha seguinte (Linha 20) usamos o comando conn.open() para estabelecer a conexão. Em seguida (Linhas 21, 22 e 23) criamos três novos objetos: um oledbcommand, um oledbdataadapter e um dataset. O command é o objeto que servirá de ponte entre o oledbadapter e o banco de dados. É nele também que definimos a string de consulta através da propriedade CommandText, como vemos na Linha 24. Em seguida indicamos qual conexão o command irá usar (Linha 25) e vinculamos o command ao adapter (Linha 26).
O dataset é o principal objeto do ADO.NET. Ele é uma coleção de objetos do tipo datatable e datarelations, permitindo a representação em memória de um banco com suas tabelas e relacionamentos. Fazendo uma analogia com o ASP 3, um dataset é uma coleção de recordsets. Para valorar este dataset, adicionamos a ele um novo datatable com os dados da query usando o método fill do objeto oledbdataadapter, informando também um nome ao qual referenciaremos este datatable (Linha 27). Uma vez carregado o dataset, precisamos fazer o bind dele no controle datagrid. Bind é a operação de ligar um controle a uma fonte de dados, ao invés de criar uma estrutura de looping que percorra o banco e adicione os itens no controle um a um. Felizmente, quase todos os web controls do ASP.NET suportam este recurso. Inicialmente definimos a fonte de dados atribuindo o nosso dataset à propriedade datasource (Linha 28). Logo após informamos qual a tabela do conjunto de tabelas do dataset será exibida pelo grid, ou seja, o nome que definimos quando executamos o comando Fill, neste caso "Produtos" (Linha 29). Finalizamos executando o comando databind, para efetivamente realizar a operação de preencher o grid com os dados do dataset (Linha 30).
Compile o projeto acessando o menu Build – Build Soloution, execute-o através do menu Debug – Start (ou F5) e já temos nossa página acessando uma base de dados. Vale ressaltar que a idéia aqui não foi trazer todos os detalhes e recursos do ADO.NET, mas mostrar o necessário para fazer um acesso por página ASP.NET.
O ASP.NET é um novo universo a ser estudado e admirado, tanto por sua praticidade e como pela vastidão de novos recursos e implementações disponibilizadas. Este tutorial teve por objetivo ser uma referência para que você possa dar seus primeiros passos (ou seus primeiros vôos) na tecnologia.
Existem diversas formas de se fazer a mesma coisa no .NET, a idéia aqui foi mostrar apenas uma opção, para que possamos evoluir gradativamente. Há muito mais por ser desbravado e explorado. Até a próxima.