Carregar apresentação
A apresentação está carregando. Por favor, espere
1
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
2
Resumo da aula O objetivo de hoje é comparar algumas das abordagens de desenvolvimento possíveis para trabalhar com a plataforma .Net.
3
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).
4
Edições Download e mais informações em:
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:
5
Passo a passo Projeto em Windows Forms para cálculo do IMC IMC = peso / (altura * altura) (Visual C# Express)
6
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
7
Criar um Projeto File > New Project
8
Escolher o tipo de projeto
9
Visualizar o esqueleto de solução criado
Solução = Conjunto de Projetos
10
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
11
Exibir a barra de controles
Exibir a barra de ferramentas em: View > Toolbox
12
Criar a interface Arrastar no formulário: 2 Label; 1 Button;
2 TextBox.
13
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.
14
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.
16
Onde está o código para criação desta interface?
Ver arquivo Form1.Designer.cs
17
Onde está o código para criação desta interface?
Cada instância corresponde a um elemento na interface.
18
Onde está o código para criação desta interface?
O código de preenchimento de cada valor de propriedade é gerado automaticamente.
19
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.
20
Preencher o evento de clique de botão
Foi gerado o esqueleto do código que será chamado quando o botão for clicado.
21
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) );
23
Fim! O programa gerado só roda em ambiente Desktop
24
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)
25
Criar um novo Web Site File > New Web Site.
26
Escolher o tipo de web site
Escolher web site vazio: Empty Web Site!
27
Criar uma página HTML (index.htm)
Criar um novo item; Menu WebSite > Add New Item.
28
Criar uma página HTML
29
Criar a interface <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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>
30
Quando o usuário clicar no botão submit, os dados serão enviados para a página CalcularIMC.aspx
31
Criar a página CalcularIMC.aspx
Criar um novo item; Menu WebSite > Add New Item.
32
Criar a página CalcularIMC.aspx
Desmarque a opção “Place code in separate file”.
33
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)); %>
34
Compilar o Web Site Menu Build > Build Web Site
35
Verificar erros Cada linha com erros é indicada na tela de Output.
36
Selecionar o Navegador Web
37
Calcular o IMC
38
Fim! O programa gerado recarrega a página toda ao executar
39
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 – IMC = peso / (altura * altura) (Visual Web Developer – usar o mesmo projeto!)
40
Criar a página index_ajax.html
Criar um novo item; Menu WebSite > Add New Item.
41
Criar a página index_ajax.html
42
Escrever o código de transferência Ajax
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" <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=" <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>
43
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.
44
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!)
45
Criar a página CalcularImcWebForms.aspx
Criar um novo item; Menu WebSite > Add New Item.
46
Criar a página Escolher Web Form;
Selecionar a opção “Place code in separate file”;
47
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" " <html xmlns=" <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>
48
Associar o evento de clique ao botão
Clicar 2 x no botão; Será gerado um esqueleto de código.
49
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);
50
Comentar linha no arquivo CalcularIMCWebForm.aspx (bug...)
51
Testar!
52
Fim!
53
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.
Apresentações semelhantes
