Entendendo Aplicações WEB
Autor: Vguedes | Publicado: 2012-05-02T17:39:00-07:00




Entendendo Aplicações WEB

Renato Haddad

Microsoft Most Valuable Professional MVP, MCT, MCPD e MCTS

Tecnologias

Visual Studio .NET 2010, C#



Introdução

Neste artigo vamos falar sobre aplicações ASP.NET e Web Services. As aplicações feitas para rodarem em navegadores atingiram um nível de apresentação e interação com o internauta excelente. Os próprios recursos atualmente nos permite executar aplicações ASP.NET com desempenhos ótimos, por exemplo, sites do governo, pesquisa de preços, classificados e portais. Alguns destes tem uma grande quantidade de internautas simultâneos e a aplicação aguenta tranquilamente.



Já o Web Service é uma forma de expor informações de uma aplicação via WEB através de XML, HTTP e o protocolo SOAP (Simple Object Access Protocol). Internamente é uma classe como outra qualquer contendo alguns atributos. O conceito de Web Service é compartilhar informações entre aplicações e plataformas.



Aplicação ASP.NET

Toda aplicação ASP.NET contém o layout que chamamos de interface com o usuário. Existe a linguagem HTML que é aceita por todos os navegadores, e sendo assim, é correto pensar em gerar o máximo possível de HTML e Java Script para que a compatibilidade fique 100%.



No entanto, o ASP.NET tem uma particularidade porque a maioria dos tipos de controles utilizados nas páginas são assinados com a tag &lt;asp:.&nbsp; Isto significa dizer que são controles executados no servidor, e o fluxo de execução ocorre da seguinte forma: o internauta faz uma requisição no servidor, onde o mesmo processa o código, gera um HTML e devolve para o navegador do internauta. Isto ocorre a cada solicitação no servidor. Desta maneira, o responsável por gerar o HTML é o servidor. Perceba então que o desenvolvedor não coloca controles HTML no código ASP.NET, mesmo porque se você usar os controles do ASP.NET assinados como &lt;asp: tem a enorme vantagem de disparar eventos, atribuir propriedades, ou seja, ele é um objeto.



Em relação ao layout das páginas ASP.NET, 100% dos sites utilizam um arquivo de CSS (Cascade Style Sheet) o qual contém todas as configurações de layout, cores, tamanhos e aspectos gerais de formatação. Uma aplicação ASP.NET pode ser modificada quase que 100% só com a utilização de CSS, então, dominar CSS é muito importante, facilitando o desenvolvimento.



Para referenciar um arquivo CSS numa página ASP.NET coloque a seguinte declaração na sessão HEAD da página. Normalmente declaramos na Master.Page, assim todas as páginas que herdarem a Master já enxergam o CSS. Antes que você pergunte, sim é possível ter vários CSS na mesma página.



&lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;





No Visual Studio .NET 2010 quando você cria uma aplicação ASP.NET, já são criados alguns modelos para facilitar o desenvolvimento, por exemplo a Master.Page, um CSS, a página Default. Veja no código a seguir os controles ASP.NET inseridos no ContentPlaceHolder da página default.aspx. Veja que há declarações HTML como &lt;h2&gt;, &lt;p&gt;, &lt;br /&gt; assim como &lt;asp:TextBox&gt;, &lt;DropDownList&gt;, &lt;Button&gt; e &lt;Label&gt;. Cada controle contém as propriedades pois são objetos.



&lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;

&nbsp;&nbsp;&nbsp; &lt;h2&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Welcome to ASP.NET!

&nbsp;&nbsp;&nbsp; &lt;/h2&gt;

&nbsp;&nbsp;&nbsp; &lt;p&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; To learn more about ASP.NET visit &lt;a href="http://www.asp.net" title="ASP.NET Website"&gt;www.asp.net&lt;/a&gt;.

&nbsp;&nbsp;&nbsp; &lt;/p&gt;

&nbsp;&nbsp;&nbsp; Nome:

&nbsp;&nbsp;&nbsp; &lt;asp:TextBox ID="txtNome" runat="server"&gt;&lt;/asp:TextBox&gt;

&nbsp;&nbsp;&nbsp; &lt;br /&gt;

&nbsp;&nbsp;&nbsp; Categoria:

&nbsp;&nbsp;&nbsp; &lt;asp:DropDownList runat="server" ID="ddlCategorias"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;asp:ListItem Text="Bebidas" /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;asp:ListItem Text="Massas" /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;asp:ListItem Text="Automoveis" /&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;asp:ListItem Text="Acessorios" /&gt;

&nbsp;&nbsp;&nbsp; &lt;/asp:DropDownList&gt;

&nbsp;&nbsp;&nbsp; &lt;br /&gt;

&nbsp;&nbsp;&nbsp; &lt;asp:Button Text="Enviar" runat="server" id="btnEnviar" CssClass="bold" onclick="btnEnviar_Click"/&gt;

&nbsp;&nbsp;&nbsp; &lt;br /&gt;

&nbsp;&nbsp;&nbsp; &lt;asp:Label id="lblNome" runat="server" CssClass="failureNotification" /&gt;

&lt;/asp:Content&gt;



A figura seguinte ilustra exatamente o código anterior.



Como há um botão chamado&nbsp;btnEnviar, dê um duplo clique para criar o evento de clicar. Digite o seguinte código que irá exibir no&nbsp;Label lblNome&nbsp;o nome digitado no&nbsp;txtNomeconcatenado da categoria selecionada no&nbsp;DropDownList&nbsp;ddlCategorias.



protected void btnEnviar_Click(object sender, EventArgs e)

{

&nbsp;&nbsp;&nbsp; lblNome.Text = txtNome.Text +

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; " - categoria: " + ddlCategorias.Text;

}



Para executar pressione F5 e teste no navegador.





Exatamente no evento clicar do botão, é enviada uma requisição ao servidor que irá ler os dados digitados/selecionados, gerar o HTML e devolver ao cliente o resultado. Isto é o que chamamos de execução no servidor.



Já o processamento do lado do cliente é usado o Java Script porque todo navegador entende isto. Desta forma, como tudo está no cliente, não há requisição feita no servidor, deixando o processamento muito mais rápido, afinal fica tudo local.

As declarações do Java Script podem ser feitas na sessão HEAD do HTML. Quando se utiliza Mater.Page na Master há o PlaceHolder chamado HeaderContent e é exatamente aqui que declaramos o Java Script, conforme o código a seguir. Está código mostrará uma caixa de mensagem Olá toda vez que a página for carregada. O comando&nbsp;alert&nbsp;do Java Script contém a mensagem que quer exibir ao usuário.



Em alguns tipos de aplicações quando é preciso identificar um elemento na página, é usado o&nbsp;document.getElementsByName("lblNome");&nbsp;contendo o nome do controle em si, neste caso o&nbsp;lblNome.



&lt;asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"&gt;

&nbsp;&nbsp;&nbsp; &lt;script type="text/javascript"&gt;

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert('Ola');

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; document.getElementsByName("lblNome");

&nbsp;&nbsp;&nbsp; &lt;/script&gt;

&lt;/asp:Content&gt;



Isto foi apenas para você ter uma ideia de processamento no cliente e no servidor.



Quando tiver um formulário aberto no VS, abra a Toolbox para ver quais controles podem ser usados na aplicação, conforme a seguinte figura.



Web Service



Web Service é uma forma de compartilhar informações entre aplicações e plataformas, permitindo assim expor serviços de leitura e escrita pela WEB. Basicamente se eu disser que muitas aplicações trocam arquivos texto para conversarem você saberá o que estou dizendo. No entanto, Web Service foi feito para ser transparente, ou seja, você cria um método que recebe a solicitação via WEB, executa um determinado código que só o método sabe, e no retorno ao cliente é gerado um XML. Para o tráfego é utilizado o protocolo SOAP (Simple Object Access Protocol) que é trafegado via HTTP.



Veja no código a seguir um Web Service criado no Visual Studio contendo os atributos de [WebService] e [WebServiceBinding]. Veja que a classe chama-se&nbsp;WebService1, poderia ser qualquer outro nome também o qual herda deSystem.Web.Service.WebServices.



Já na declaração dos métodos, o mais importante é a declaração do atributo [WebMethod] que indica que este método será exposto via WEB. Neste exemplo, temos dois métodos, o&nbsp;HelloWorld&nbsp;que é default e eu não o apaguei, e o&nbsp;Somar&nbsp;que digitei. EsteSomar&nbsp;retorna um tipo&nbsp;int (inteiro)&nbsp;e tem dois parâmetros de entrada do tipo&nbsp;int, que são os números a serem somados. O conteúdo do método é apenas a soma dos dois parâmetros n1 e n2.



[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.ComponentModel.ToolboxItem(false)]

[System.Web.Script.Services.ScriptService]

public class WebService1 : System.Web.Services.WebService

{



&nbsp;&nbsp;&nbsp; [WebMethod]

&nbsp;&nbsp;&nbsp; public string HelloWorld()

&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return "Hello World";

&nbsp;&nbsp;&nbsp; }



&nbsp;&nbsp;&nbsp; [WebMethod(Description = "Somar 2 numeros")]

&nbsp;&nbsp;&nbsp; public int Somar(int n1, int n2)

&nbsp;&nbsp;&nbsp; {

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; return n1 + n2;

&nbsp;&nbsp;&nbsp; }

}





Na execução do Web Service no navegador (veja que a extensão do arquivo é .asmx) são mostrados os dois métodos.



Clique em Somar e aparecerá uma tela solicitando a digitação dos dois números.



Digite por exemplo os números 27 e 3 e clique no botão Invoke. O resultado final será um XML contendo o resultado da soma 30.



Agora vou mostrar como montar uma página ASP.NET chamada ConsomeWebService contendo o layout a seguir que irá invocar o web servisse criado.



&lt;h1&gt;Consome web service&lt;/h1&gt;

número 1:

&lt;asp:TextBox runat="server" id="txt1"/&gt;

&lt;br /&gt;



número 2:

&lt;asp:TextBox runat="server" id="txt2"/&gt;

&lt;br /&gt;



&lt;asp:Button Text="Somar" ID="btnSomar" runat="server" onclick="btnSomar_Click" /&gt;



&lt;br /&gt;



&lt;asp:Label Text="0" ID="lblSomar" runat="server" /&gt;



Veja o layout do código.



Dê um duplo clique no botão Somar e digite o seguinte código que irá instanciar a classe WebService1, invocar o método Somar passando os dois números digitados como argumentos. O uso do&nbsp;int.Parse&nbsp;é necessário porque os parâmetros no Web Service esperam um número do tipo&nbsp;int.



protected void btnSomar_Click(object sender, EventArgs e)

{

&nbsp;&nbsp;&nbsp; WebService1 ws = new WebService1();

&nbsp;&nbsp;&nbsp; lblSomar.Text = ws.Somar(int.Parse(txt1.Text),

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; int.Parse(txt2.Text)).ToString();

}



Este exemplo é prático porque fiz o Web Service no mesmo projeto, mas se você quiser separar os projetos, um de ASP.NET e outro de Web Service ou ainda referenciar um Web Service do mercado, basta adicionar a referencia no projeto ASP.NET. Neste caso, informa a&nbsp;URL&nbsp;completa do Web Service.



Bons estudos e sucesso nos projetos.





Sobre o Autor

Renato Haddad (rehaddad@msn.com&nbsp; –&nbsp;www.renatohaddad.com&nbsp;) é MVP, MCT, MCPD e MCTS, palestrante em eventos da Microsoft em diversos países, ministra treinamentos focados em produtividade com o VS.NET 2010, ASP.NET 4, Entity Framework, Reporting Services e Windows Phone. Visite o blog&nbsp;http://weblogs.asp.net/renatohaddad.