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.