Entendendo Aplicações WEB

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 <asp:.  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 <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.

<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />

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 <h2>, <p>, <br /> assim como <asp:TextBox>, <DropDownList>, <Button> e <Label>. Cada controle contém as propriedades pois são objetos.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <h2>

        Welcome to ASP.NET!

    </h2>

    <p>

        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.

    </p>

    Nome:

    <asp:TextBox ID="txtNome" runat="server"></asp:TextBox>

    <br />

    Categoria:

    <asp:DropDownList runat="server" ID="ddlCategorias">

        <asp:ListItem Text="Bebidas" />

        <asp:ListItem Text="Massas" />

        <asp:ListItem Text="Automoveis" />

        <asp:ListItem Text="Acessorios" />

    </asp:DropDownList>

    <br />

    <asp:Button Text="Enviar" runat="server" id="btnEnviar" CssClass="bold" onclick="btnEnviar_Click"/>

    <br />

    <asp:Label id="lblNome" runat="server" CssClass="failureNotification" />

</asp:Content>

A figura seguinte ilustra exatamente o código anterior.

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

protected void btnEnviar_Click(object sender, EventArgs e)

{

    lblNome.Text = txtNome.Text +

        " - 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 alert 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 document.getElementsByName("lblNome"); contendo o nome do controle em si, neste caso o lblNome.

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

    <script type="text/javascript">

        alert('Ola');

        document.getElementsByName("lblNome");

    </script>

</asp:Content>

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 WebService1, poderia ser qualquer outro nome também o qual herda de System.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 HelloWorld que é default e eu não o apaguei, e o Somar que digitei. Este Somar retorna um tipo int (inteiro) e tem dois parâmetros de entrada do tipo 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

{

    [WebMethod]

    public string HelloWorld()

    {

        return "Hello World";

    }

    [WebMethod(Description = "Somar 2 numeros")]

    public int Somar(int n1, int n2)

    {

        return n1 + n2;

    }

}

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.

<h1>Consome web service</h1>

número 1:

<asp:TextBox runat="server" id="txt1"/>

<br />

número 2:

<asp:TextBox runat="server" id="txt2"/>

<br />

<asp:Button Text="Somar" ID="btnSomar" runat="server" onclick="btnSomar_Click" />

<br />

<asp:Label Text="0" ID="lblSomar" runat="server" />

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 int.Parse é necessário porque os parâmetros no Web Service esperam um número do tipo int.

protected void btnSomar_Click(object sender, EventArgs e)

{

    WebService1 ws = new WebService1();

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

                                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 URL completa do Web Service.

Bons estudos e sucesso nos projetos.

Sobre o Autor

Renato Haddad (rehaddad@msn.com  – www.renatohaddad.com ) é 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 http://weblogs.asp.net/renatohaddad.