Construindo aplicações Web de última geração com Microsoft ASP.NET MVC 2 e jQueryVictor CavalcanteArquiteto de Softwarehttp://www.cavalcante.nethttp://twitter.com/vcavalcantevictor@cavalcante.net

10/06/2010

2

Agenda

− WebStandards e o ASP.Net MVC− jQuery− Seletores− Eventos− Plugins− Ajax− Json

3

O que é uma aplicação Web?− Sistemas de informática

desenvolvidos para rodar através de um Browser;

− Utiliza um servidor para fazer o processamento;

− A comunicação é feita através do protocolo HTTP;

− Existe algumas tecnologias/linguagens padrões para exibição do conteúdo nos browsers;

4

Tecnologias/Linguagens

− Tecnologias para desenvolvimento de interfaces ricas como:

− Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas:

HTML

CSS

JavaScript

5

O que é WebStandards

− Padrões Web;

− É um conjunto de padrões produzidos pela W3C;

− Destinado a orientar como deve ser desenvolvido páginas/sistemas para internet;

6

O que é WebStandards

− A base do desenvolvimento Web;− Visa a separação das camadas;− Composto por 3 partes;

Estrutura

Compora-mentoDesign

HTML

JavaScriptCSS

7

Por que WebStandards?

− Todos os sites desenvolvidos segundo os padrões W3C podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software;

− Acessibilidade;− Portabilidade;− Velocidade;

8

O que é o jQuery

− Poderosa biblioteca JavaScript−Simplifica tarefas comuns com

JavaScript−Acessa qualquer parte das páginas

− usando CSS ou expressões XPath-like −Modifica a aparência das páginas−Altera o conteúdo das páginas−Adiciona animação à página−Prove suporte a Ajax−Abstrai os erros dos browsers

9

Por que o jQuery

− Leve − 14kb (Minified and Gzipped)

− Suporte Cross Browser − (IE 6.0+, FF 1.5+, Safari 2.0+, Opera

9.0+)− Sintaxe CSS like

− Fácil para web-developers e web-designers

− Comunidade ativa− Extensibilidade com muitos plugins

− Aproximadamente 5000 plugins cadastrados

10

Como funciona?

− Acrescente o arquivo do jQuery na página

− Já está pronto para usar o jQuery

11

jQuery

− Selecionar parte do documento é o fundamental

− O objeto jQuery é um wrapper para um grupo de elementos selecionados

− $() function é um factory method que cria os objetos jQuery

12

jQuery – Seletores - CSS

$(“p”) nome do elemento (tag)$(“#id”) identificador (id do CSS)$(“.class”) nome da classe do CSS$(“p.class”) elemento com 1 determinada

classe$(“p a”) link que está dentro de um

elemento p$(“p > a”) link que é filho direto de um

elemento p

Demo

14

jQuery – Seletores - filtros

$(“p:first”) primeiro parágrafo$(“li:last”) último item da lista$(“a:nth(3)”) quarto link$(“a:eq(3)”) quarto link$(“p:even”) ou p:odd parágrafo sim, parágrafo não

$(“a:gt(3)”) ou a:lt(3) todo link acima do quarto$(“a:contains(‘click’)”) links que contenha a palavra

click$(“:checked”) todos os itens “checados”$(“:radio”) todos os inputs do tipo radio

Demo

16

jQuery – Eventos

− $(document).ready();− $(“#menu a”).click();− $(“form”).submit();− $(“select”).bind(“change”,function(){})

Demo

18

jQuery – Plugins

− Ajax (254)− Animation and Effects

(408)− Browser Tweaks (96)− Data (190)− DOM (191)− Drag-and-Drop (47)− Events (160)− Forms (454)− Integration (134)− JavaScript (189)− jQuery Extensions (275)

− Layout (249)− Media (172)− Menus (135)− Metaplugin (30)− Navigation (194)− Tables (90)− User Interface (785)− Utilities (413)− Widgets (307)− Windows and Overlays

(134)

Demo

20

− Um novo template de projeto no Visual Studio

− Uma opção− Uma nova maneira de desenvolver

com ASP.Net− Um template mais opinativo

O que é o ASP.Net MVC

21

Como funciona o ASP.NET MVC

Routing

View

ModelControlle

r

Requisição HTTP

Resposta (HTML, JSON, etc)

BD

22

E agora?

− HTML− JavaScript− Verbos HTTP− Controle de estado da Aplicação− Grandes poderes trazem

grandes responsabilidades

23

A mudança

24

AJAX− Asynchronous JavaScript and

XML(AJAX)− Técnica de desenvolvimento web para

criar aplicações web− Troca pequenos pedaços de dados ao

invés de carregar a página inteira.− Permite que a página troque seu

conteúdo sem atualizar a página− É uma tecnologia do lado do cliente,

não importando o lado do servidor

25

AJAX - Derivações− AJAX Asynchronous JavaScript and XML− AJAH Asynchronous JavaScript and

HTML− AJAJ Asynchronous JavaScript and JSON

− JSON – JavaScript Object Notation

26

JSON / XML

− {clientes:

[{nome:'Victor',sobrenome:'Cavalcante'},

{nome:'Mariana',sobrenome:'Frioli'}] }

27

jQuery + ASP.Net MVC

− Com controle total sobre o HTML fica fácil criar páginas semanticamente corretas

− Isso facilita a consulta de elementos pelo jQuery

− O consulta por Ajax fica facilitada pelo retorno JSON

28

jQuery + ASP.Net MVC

− A intenção do padrão MVC é a separação das camadas

− O jQuery ajuda isso, pois ele atua somente no cliente

− Quando precisa de dados do servidor ele solicita via Ajax

Demo

30

Mindset

- Nós precisamos de um controle Repeater!

- Nós já o temos, se chama: laço de foreach.

Conversa entre desenvolvedores da Microsoft, segundo relatado por Scott Hanselman, do time do MVC.

31

Links

− Site do ASP.Net− http://www.asp.net/mvc

− Blog do Scot Hanselman (MSFT – Routing/MVC)− http://www.hanselman.com/blog/CategoryView.aspx?

category=ASP.NET+MVC− Blog do Scott Guthrie (MSFT)

− http://weblogs.asp.net/scottgu/archive/tags/ASP.NET/default.aspx

− Blog do Phil Haack (MSFT – Routing/MVC)− http://haacked.com/Tags/ASP.NET%20MVC/default.aspx

− Blog do Rob Conery (MSFT – Routing/MVC)− http://blog.wekeroad.com/tags/aspnetmvc

− Blog do Giovanni:− http://unplugged.giggio.net/?tag=/asp.net+mvc

32

Links

− Site do jQuery− http://www.jQuery.com

− jQuery UI− http://www.jQuery UI.com

− API do jQuery− http://api.jquery.com/ http://api.jquery.com/browser

− jQuery 1.4 API Cheat Sheet− http://www.futurecolors.ru/jquery/

− FireBug− http://getfirebug.com/

33

Victor CavalcanteArquiteto de Software - Stefaninihttp://www.cavalcante.nethttp://twitter.com/vcavalcantevictor@cavalcante.nethttp://www.dotnetarchitects.net

04/05/2010

© 2010 Microsoft Corporation. All rights reserved. Microsoft, MSDN, the MSDN logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.  The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond

to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. 

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.