Bruno C.

de Paula

Conhecendo o VS2008: Windows Forms X Web Forms X Web Services

1 Semestre 2009 > PUCPR > Ps em Web

Resumo da aula O objetivo de hoje comparar algumas das abordagens de desenvolvimento possveis para trabalhar com a plataforma .Net.

Visual Studio 2008

Ambiente de desenvolvimento integrado (IDE - Integrated Development Environment) da Microsoft para gerao rpida de aplicaes (RAD - Rapid Application Development); Suporte a mltiplas linguagens (C#, VB.Net, F#, etc) e plataformas (Web, Mobile, Windows).

Edies

Download e mais informaes em: http://www.microsoft.com/express http://www.microsoft.com/visualstudio/

Passo a passo Projeto em Windows Forms para clculo do IMC IMC = peso / (altura * altura)
(Visual C# Express)

Windows Forms Desktop em .Net

Abordagem imperativa (cdigo C#): Descreve o programa como um conjunto de ordens (aes); Diz como fazer; Poderosas, mas difceis para "pessoas normais"; Desenvolvimento Windows, Linux e MacOs (Mono).
27/04/2012 6

Criar um Projeto

File > New Project

Escolher o tipo de projeto

Visualizar o esqueleto de soluo criado

Soluo = Conjunto de Projetos

Esqueleto de soluo
Formulrio: Form1.cs: comportamento; Form1.Designer.cs: interface.

Exibir a barra de controles

Exibir a barra de ferramentas em: View > Toolbox

Criar a interface
Arrastar no formulrio: 2 Label; 1 Button; 2 TextBox.

Alterar a interface
Alterar o valor de cada um dos rtulos; Selecione o rtulo e pressionar F4 para exibir a janela de propriedades; Altere a propriedade Text.

Alterar a interface
Propriedade Text do Boto 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 cdigo para criao desta interface?

Ver arquivo Form1.Designer.cs

Onde est o cdigo para criao desta interface?

Cada instncia corresponde a um elemento na interface.

Onde est o cdigo para criao desta interface?

O cdigo de preenchimento de cada valor de propriedade gerado automaticamente.

Associar o evento de clique ao boto

Selecionar o boto; Pressionar F4 (propriedades); Selecionar o raio (lista de eventos); Clique 2 x na palavra Click.

Preencher o evento de clique de boto

Foi gerado o esqueleto do cdigo que ser chamado quando o boto for clicado.

Preencher o evento de clique do boto

Fim! O programa gerado s roda em ambiente Desktop

Passo a passo Projeto em ASP.NET para clculo 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 pgina HTML (index.htm)

Criar um novo item; Menu WebSite > Add New Item.

Criar uma pgina HTML

Criar a interface

Quando o usurio clicar no boto submit, os dados sero enviados para a pgina CalcularIMC.aspx

Criar a pgina CalcularIMC.aspx

Criar um novo item; Menu WebSite > Add New Item.

Criar a pgina CalcularIMC.aspx

Desmarque a opo Place code in separate file.

Escrever o cdigo para clculo de IMC

Limpar o que havia anteriormente na pgina

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 pgina toda ao executar

Passo a passo Projeto em ASP.NET para clculo 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 pgina index_ajax.html

Criar um novo item; Menu WebSite > Add New Item.

Criar a pgina index_ajax.html

Escrever o cdigo de transferncia Ajax

Fim! Observe que a biblioteca jQuery pode ser baixada. Por padro, ela est disponvel apenas no VS 2010.

Passo a passo Projeto em ASP.NET para clculo do IMC usando Web Forms (sem Ajax) IMC = peso / (altura * altura)

(Visual Web Developer usar o mesmo projeto!)

Criar a pgina CalcularImcWebForms.aspx

Criar um novo item; Menu WebSite > Add New Item.

Criar a pgina

Escolher Web Form; Selecionar a opo Place code in separate file;

Criar a interface
Criar de maneira semelhante interface criada na verso Desktop;

Associar o evento de clique ao boto

Clicar 2 x no boto; Ser gerado um esqueleto de cdigo.

Preencher o evento de clique do boto

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 ajaxificveis; Voc tambm pode criar Web Services em seu projeto.