Conhecendo o VS2008: Windows Forms X Web Forms X Web Services Bruno C. de Paula Conhecendo o VS2008: Windows Forms X Web Forms X Web Services 1º Semestre 2009 > PUCPR > Pós em Web
Resumo da aula O objetivo de hoje é comparar algumas das abordagens de desenvolvimento possíveis para trabalhar com a plataforma .Net.
Visual Studio 2008 Ambiente de desenvolvimento integrado (IDE - Integrated Development Environment) da Microsoft para geração rápida de aplicações (RAD - Rapid Application Development); Suporte a múltiplas linguagens (C#, VB.Net, F#, etc) e plataformas (Web, Mobile, Windows).
Edições Download e mais informações em: http://www.microsoft.com/express http://www.microsoft.com/visualstudio/ Express: limitada, voltada para estudantes, não tem MSDN completa, o Visual Web Developer é usado para programação para Web; Standard: IDE integrada, diversas funcionalidades a mais. Professional: Depuração remota, gerenciamento de DB SQL Server. Tools for Office: Para desenvolvimento voltado ao Office. Team System: grupos de trabalho; Mais detalhes na planilha em: http://tinyurl.com/2dlbdb
Passo a passo Projeto em Windows Forms para cálculo do IMC IMC = peso / (altura * altura) (Visual C# Express)
Windows Forms Desktop em .Net Abordagem imperativa (código C#): Descreve o programa como um conjunto de ordens (ações); Diz como fazer; Poderosas, mas difíceis para "pessoas normais"; Desenvolvimento Windows, Linux e MacOs (Mono). 25/03/2017 6
Criar um Projeto File > New Project
Escolher o tipo de projeto
Visualizar o esqueleto de solução criado Solução = Conjunto de Projetos
Esqueleto de solução Formulário: Form1.cs: comportamento; Form1.Designer.cs: interface. Arquivos (.cs, .vb, .resx, .settings, etc) estão contidos dentro de uma estrutura de pastas denominado Projeto; Uma solução (solution) é um conjunto de projetos e é representado por um arquivo com a extensão .sln; Na PUCPR os seus arquivos estão, geralmente na pasta: C:\Temp\VisualStudio2008\Projects
Exibir a barra de controles Exibir a barra de ferramentas em: View > Toolbox
Criar a interface Arrastar no formulário: 2 Label; 1 Button; 2 TextBox.
Alterar a interface Alterar o valor de cada um dos rótulos; Selecione o rótulo e pressionar F4 para exibir a janela de propriedades; Altere a propriedade Text.
Alterar a interface Propriedade Text do Botão para “Calcular IMC”; Propriedade Text de um Label para peso; Propriedade Text de outro para altura; Propriedade (Name) de uma caixa de texto para textBoxPeso; Propriedade (Name) de outra para textBoxAltura.
Onde está o código para criação desta interface? Ver arquivo Form1.Designer.cs
Onde está o código para criação desta interface? Cada instância corresponde a um elemento na interface.
Onde está o código para criação desta interface? O código de preenchimento de cada valor de propriedade é gerado automaticamente.
Associar o evento de clique ao botão Selecionar o botão; Pressionar F4 (propriedades); Selecionar o “raio” (lista de eventos); Clique 2 x na palavra Click.
Preencher o evento de clique de botão Foi gerado o esqueleto do código que será chamado quando o botão for clicado.
Preencher o evento de clique do botão double peso = Convert.ToDouble(textBoxPeso.Text); double altura = Convert.ToDouble(textBoxAltura.Text); double imc = peso / (altura * altura); MessageBox.Show("O seu imc é: " + Math.Round(imc,2) );
Fim! O programa gerado só roda em ambiente Desktop
Passo a passo Projeto em ASP Passo a passo Projeto em ASP.NET para cálculo do IMC sem usar Web Forms IMC = peso / (altura * altura) (Visual Web Developer)
Criar um novo Web Site File > New Web Site.
Escolher o tipo de web site Escolher web site vazio: Empty Web Site!
Criar uma página HTML (index.htm) Criar um novo item; Menu WebSite > Add New Item.
Criar uma página HTML
Criar a interface <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <form action="CalcularIMC.aspx" method="post"> <label>Peso: <input type="text" name="peso" /></label><br /> <label>Altura: <input type="text" name="altura" /></label><br /> <input type="submit" value="Calcular IMC" /> </form> </body> </html>
Quando o usuário clicar no botão submit, os dados serão enviados para a página CalcularIMC.aspx
Criar a página CalcularIMC.aspx Criar um novo item; Menu WebSite > Add New Item.
Criar a página CalcularIMC.aspx Desmarque a opção “Place code in separate file”.
Escrever o código para cálculo de IMC Limpar o que havia anteriormente na página <%@ Page Language="C#" %> <% double peso = Convert.ToDouble(Request.Form["peso"]); double altura = Convert.ToDouble(Request.Form["altura"]); double imc = peso / (altura * altura); Response.Write("O seu imc é: " + Math.Round(imc, 2)); %>
Compilar o Web Site Menu Build > Build Web Site
Verificar erros Cada linha com erros é indicada na tela de Output.
Selecionar o Navegador Web
Calcular o IMC
Fim! O programa gerado recarrega a página toda ao executar
Passo a passo Projeto em ASP Passo a passo Projeto em ASP.NET para cálculo do IMC sem usar Web Forms e usando Ajax (usando jQuery – http://jquery.com) IMC = peso / (altura * altura) (Visual Web Developer – usar o mesmo projeto!)
Criar a página index_ajax.html Criar um novo item; Menu WebSite > Add New Item.
Criar a página index_ajax.html
Escrever o código de transferência Ajax <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <form action="" method="post"> <label>Peso: <input type="text" name="peso" /></label><br /> <label>Altura: <input type="text" name="altura" /></label><br /> <input type="button" value="Calcular IMC" id="btCalcularIMC" /> </form> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> function exibirResultado(data) { // Exibe o resultado alert(data); } function clickBtCalcularIMC() { // Gere a representação serializada var s = $(":input").serialize(); // Envie para o servidor e exiba o resultado quando chegar $.post("CalcularIMC.aspx", s, exibirResultado); // Quando clicar no botão enviar $("#btCalcularIMC").click(clickBtCalcularIMC); </script> </body> </html>
Fim. Observe que a biblioteca jQuery pode ser “baixada” Fim! Observe que a biblioteca jQuery pode ser “baixada”. Por padrão, ela está disponível apenas no VS 2010.
Passo a passo Projeto em ASP Passo a passo Projeto em ASP.NET para cálculo do IMC usando Web Forms (sem Ajax) IMC = peso / (altura * altura) (Visual Web Developer – usar o mesmo projeto!)
Criar a página CalcularImcWebForms.aspx Criar um novo item; Menu WebSite > Add New Item.
Criar a página Escolher Web Form; Selecionar a opção “Place code in separate file”;
Criar a interface Criar de maneira semelhante à interface criada na versão Desktop; <%@ Page Language="C#" AutoEventWireup="true" CodeFile="CalcularIMCWebForm.aspx.cs" Inherits="CalcularIMCWebForm" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <asp:Label ID="Label1" runat="server" Text="Peso:"></asp:Label> <asp:TextBox ID="TextBoxPeso" runat="server"></asp:TextBox> <br /> <asp:Label ID="Label2" runat="server" Text="Altura:"></asp:Label> <asp:TextBox ID="TextBoxAltura" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Ok!" /> <asp:Label ID="resultado" runat="server" Text="Label"></asp:Label> </div> </form> </body> </html>
Associar o evento de clique ao botão Clicar 2 x no botão; Será gerado um esqueleto de código.
Preencher o evento de clique do botão double peso = Convert.ToDouble(TextBoxPeso.Text); double altura = Convert.ToDouble(TextBoxAltura.Text); double imc = peso / (altura * altura); resultado.Text = "O seu imc é: " + Math.Round(imc, 2);
Comentar linha no arquivo CalcularIMCWebForm.aspx (bug...)
Testar!
Fim!
Extras! Para usar Ajax em um projeto Web Forms: Crie um Ajax Web Form; Coloque dentro de um componente UpdatePanel todos os componentes ajaxificáveis; Você também pode criar Web Services em seu projeto.