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

1º Semestre 2009 > PUCPR > Pós em Web

Bruno C. de PaulaBruno C. de Paula

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/expresshttp://www.microsoft.com/visualstudio/

Passo a passoProjeto em Windows Formspara cálculo do IMCIMC = peso / (altura * altura)

(Visual C# Express)

611/04/23

Windows FormsDesktop em .NetAbordagem 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).

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.

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ãoFoi gerado o esqueleto do código que será

chamado quando o botão for clicado.

Preencher o evento de clique do botão

Fim!O programa gerado só roda em

ambiente Desktop

Passo a passoProjeto em ASP.NETpara cálculo do IMCsem usar Web FormsIMC = 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

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.aspxDesmarque 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

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 passoProjeto em ASP.NETpara cálculo do IMCsem usar Web Formse 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

Fim!Observe que a biblioteca jQuery

pode ser “baixada”.Por padrão, ela está disponível

apenas no VS 2010.

Passo a passoProjeto em ASP.NETpara cálculo do IMCusando 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 interfaceCriar de maneira semelhante à interface

criada na versão Desktop;

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

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.