1. jQuery e ASP.NET MVC 2 a dupla dinmica.
Victor Cavalcante
Arquiteto de Software
http://www.cavalcante.net
http://twitter.com/vcavalcante
victor@cavalcante.net

2. 2
Agenda
WebStandards e o ASP.Net MVC
jQuery
Seletores
Eventos
Plugins
Ajax
Json
3. 3
O que uma aplicao Web?
Sistemas de informtica desenvolvidos para rodar atravs de um Browser;
Utiliza um servidor para fazer o processamento;
A comunicao feita atravs do protocolo HTTP;
Existe algumas tecnologias/linguagens padres para exibio do contedo nos browsers;
4. 4
Tecnologias/Linguagens
Tecnologias para desenvolvimento de interfaces ricas como:
Linguagens que podem ser utilizadas para desenvolvimento de interfaces ricas:
5. O que WebStandards
Padres Web;
um conjuntode padresproduzidospelaW3C;
Destinado a orientar como deve ser desenvolvido pginas/sistemas para internet;
5
6. O que WebStandards
A base do desenvolvimento Web;
Visa a separao das camadas;
Composto por 3 partes;
6
7. Por que WebStandards?
Todos os sites desenvolvidos segundo os padres W3C podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software;
Acessibilidade;
Portabilidade;
Velocidade;
7
8. O que o jQuery
Poderosa biblioteca JavaScript
Simplifica tarefas comuns com JavaScript
Acessa qualquer parte das pginas
usando CSS ou expresses XPath-like
Modifica a aparncia das pginas
Altera o contedo das pginas
Adiciona animao pgina
Prove suporte a Ajax
Abstrai os erros dos browsers
8
9. Por que o jQuery
Leve
14kb (MinifiedandGzipped)
Suporte Cross Browser
(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
Sintaxe CSS like
Fcil para web-developers e web-designers
Comunidade ativa
Extensibilidade com muitos plugins
Aproximadamente 5000 plugins cadastrados
9
10. Como funciona?
Acrescente o arquivo do jQuery na pgina
J est pronto para usar o jQuery
10
11. jQuery
Selecionar parte do documento o fundamental
O objeto jQuery um wrapper para um grupo de elementos selecionados
$() function um factorymethod que cria os objetos jQuery
11
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
12
13. Demo
14. jQuery Seletores - filtros
$(p:first)primeiro pargrafo
$(li:last) ltimo item da lista
$(a:eq(3)) quarto link
$(p:even) ou p:oddpargrafo sim, pargrafo no
$(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
14
15. Demo
16. jQuery Eventos
$(document).ready();
$(#menu a).click();
$(form).submit();
$(select).bind(change,function(){})
16
17. Demo
18. jQuery Plugins
Ajax (254)
AnimationandEffects (408)
Browser Tweaks (96)
Data (190)
DOM (191)
Drag-and-Drop (47)
Events (160)
Forms (454)
Integration (134)
JavaScript (189)
jQueryExtensions (275)
Layout (249)
Media (172)
Menus (135)
Metaplugin (30)
Navigation (194)
Tables (90)
User Interface (785)
Utilities (413)
Widgets (307)
Windows and Overlays (134)
18
19. Demo
20. 20
O que o ASP.Net MVC
Um novo template de projeto no Visual Studio
Uma opo
Uma nova maneira de desenvolver com ASP.Net
Um template mais opinativo
21. Como funciona o ASP.NET MVC
21
Requisio HTTP
Routing
Model
Controller
BD
View
Resposta (HTML, JSON, etc)
22. E agora?
HTML
JavaScript
Verbos HTTP
Controle de estado da Aplicao
Grandes poderes trazem grandes responsabilidades
22
23. A mudana
23
24. AJAX
AsynchronousJavaScriptand XML(AJAX)
Tcnica de desenvolvimento web para criar aplicaes web
Troca pequenos pedaos de dados ao invs de carregar a pgina inteira.
Permite que a pgina troque seu contedo sem atualizar a pgina
uma tecnologia do lado do cliente, no importando o lado do servidor
24
25. AJAX - Derivaes
AJAX AsynchronousJavaScriptandXML
AJAH AsynchronousJavaScriptandHTML
AJAJ AsynchronousJavaScriptandJSON
JSON JavaScriptObjectNotation
25
26. JSON / XML
{clientes:
[{nome:'Victor',sobrenome:'Cavalcante'},
{nome:'Mariana',sobrenome:'Frioli'}]
}
26
27. jQuery + ASP.Net MVC
Com controle total sobre o HTML fica fcil criar pginas semanticamente corretas
Isso facilita a consulta de elementos pelo jQuery
O consulta por Ajax fica facilitada pelo retorno JSON
27
28. jQuery + ASP.Net MVC
A inteno do padro MVC a separao das camadas
O jQuery ajuda isso, pois ele atua somente no cliente
Quando precisa de dados do servidor ele solicita via Ajax
28
29. Demo
30. Mindset
30
- Ns precisamos de um controle Repeater!
- Ns j o temos, se chama: lao 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
31
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/
32
33. 33
34. 19/06/2010
Victor Cavalcante
Arquiteto de Software - Stefanini
http://www.cavalcante.net
http://twitter.com/vcavalcante
victor@cavalcante.net
http://www.dotnetarchitects.net