Aplicacoes Ricas Para Web Com Prototype - Enecomp - Agosto 2007

Curso ministrado no XXV Enecomp em Cuiabá/MT.

Transcript

1. aplicações ricas para web com prototype Sylvestre Mergulhão Enecomp 2007 Cuiabá
2. Aula 1 >> Revisão de conceitos do protocolo HTTP >> Como funcionam as aplicações web >> O ciclo de uma aplicação web tradicional >> AJAX, AJAJ e AJAH >> O cliclo de uma aplicação web utilizando AJAX >> Por quê, quando e como usar? >> XmlHttpRequest
3. Revisão protocolo http >> Protocolo de Transferência de Hipertexto >> Protocolo da camada de Aplicação do modelo OSI >> Na web utiliza como padrão a porta 80 >> Protocolo Stateless >> Protocolo Cliente/Servidor >> Baseado em Requisição/Resposta >> Utiliza cabeçalhos (headers)
4. Como funciona? Cliente (agent) envia requisição ao servidor: Host=www.mergulhao.info User-Agent=Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.4) Gecko/20061201 Firefox/2.0.0.4 (Ubuntu-feisty) Accept=text/xml,application/xml,application/xhtml+xml,text/html;q= 0.9,text/plain;q=0.8,image/png,*/*;q=0.5 Accept-Language=pt-br,pt;q=0.8,en-us;q=0.5,en;q=0.3 Accept-Encoding=gzip,deflate Accept-Charset=ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive=300 Connection=keep-alive Pragma=no-cache Cache-Control=no-cache
5. Como funciona? Servidor envia resposta ao cliente: Status=OK - 200 Date=Mon, 06 Aug 2007 02:36:30 GMT Server=Apache/2.0.54 (Unix) PHP/4.4.7 mod_ssl/2.0.54 OpenSSL/0.9.7e mod_fastcgi/2.4.2 DAV/2 SVN/1.4.2 Last-Modified=Wed, 01 Aug 2007 05:37:29 GMT Etag="294f7c5-22f2-b8bc7840" Accept-Ranges=bytes Vary=Accept-Encoding Content-Encoding=gzip Content-Length=3636 Keep-Alive=timeout=15, max=100 Connection=Keep-Alive Content-Type=text/html
6. O ciclo tradicional
7. Ajax, Ajaj, Ajah, Ajajs? Ajax quer dizer: Asynchronous Javascript and XML Mas também pode ser: Asynchronous Javascript and + XHTML + JSON + JAVASCRIPT + CSS
8. O que muda para o usuário Uso de AJAX substitui refresh de páginas por atualização(update) nas páginas.
9. O ciclo AJAX
10. Por que? Por que não applets java ou flash? >> Fora do padrão >> Browser precisa de add-on para suporte >> Dependência de fornecedor Por que Javascript + Xhtml? >> Padrão w3c >> Browser tem suporte builtin >> Independência de fornecedor
11. Quando? Páginas estáticas são páginas estáticas... use em doses homeopáticas. Aplicações são dinâminas... use sempre que for para melhorar a usablidade para o usuário.
12. Qual definição de “aplicação”? Você define o seu ponto de vista... Seu site pessoal provavelmente não será uma aplicação dinâmina... o internet banking do seu banco, sim! A aplicação que gerencia ou administra seu site também.
13. Vantagens >> Possibilidade de melhorias na interação com o usuário: melhor usabilidade, melhor interatividade com quem usa >> Utilização de efeitos visuais (limitado, mas suficiente) >> Economia de banda (aplicação mais veloz)
14. Exemplos de intensos usos de ajax >> Aplicativos Google: gmail, gcalendar, gdocs etc. >> Yahoo Flicker >> Ta da List, Basecamp >> Remember the Milk >> Muitos outros
15. Como? Veremos a seguir...
16. XmlHttpRequest Objeto Javascript que permite a conexão assíncrona a um servidor web. Origem: Microsoft Incorporado no IE através de activex, depois implementado nos grandes navegadores da atualidade.
17. O uso primitivo try { var xhr = new XMLHttpRequest(); } catch (error) { try { var xhr = new ActiveXObject("Microsoft.XMLHTTP"); } catch (error) { return false; } }
18. O uso primitivo xhr.open("GET", "/feed.xml", true); xhr.send(null); function stateHandler() { if (xhr.readyState == 4) { if (xhr.status == 200) { success(); } else { failure(); } } return true; }
19. O uso moderno Encapsulamento das dificuldades de utilização e manutenção através de bibliotecas especializadas. Vantagens: >> Facilidade de utilização >> Tratamento de incompatibilidades entre browsers >> Disponibilidade de métodos JS auxiliares para diversas funcionalidades
20. O uso moderno Bibliotecas: Prototype jQuery Yahoo! User Interface Library Dojo Muitas outras... A maioria livre (GPL ou compatível)
21. A biblioteca Prototype Neste curso faremos uma introdução as principais funcionalidades da Prototype. Por que Prototype? >> Uso/sintaxe simples e direto >> Grande disponibilidade de métodos auxiliares >> Grande comunidade, notavelmente pela integração com o framework de desenvolvimento web Ruby on Rails
22. O que é preciso saber para desenvolver? Para desenvolver uma aplicação que utilize Ajax é recomendado bom conhecimento de xhtml, dom e javascript. Quais ferramentas utilizar? Navegador: Firefox Add-ons: >> Firebug >> Html Validator >> Tamper data >> Web Developer
23. Aula 2 >> A biblioteca Prototype >> Métodos utilitários >> Ajax.Request e Ajax.Updater >> Classe Form >> Classe Element >> Utilizando JSON >> Implementações práticas
24. A biblioteca Prototype >> Liberada em licença livre >> Atualmente na versão 1.5.1
25. Métodos utilitários Método $(); $('nome_id'); // Recupera um elemento pelo id Método $F(); $F('nome_id'); // Recupera valor de um input de form Método document.getElementsByClassName() document.getElementsByClassName('classe_css'); // Recupera um array com todos os elementos que // estejam na classe 'classe_css'
26. Métodos da Classe Ajax var url = '/my_url'; new Ajax.Request(url, { method: 'get', onSuccess: function(transport) { alert('success'); } });
27. Métodos da Classe Ajax new Ajax.Updater('items', '/items', { parameters: { text: $F('text') } });
28. Métodos da Classe Ajax new Ajax.PeriodicalUpdater('items', '/items', { method: 'get', frequency: 3, decay: 2 });
29. Métodos da Classe Form Form disable $('nome_do_form').disable Form enable $('nome_do_form').enable
30. Métodos da Classe Form Form.getElements Form.getElements($('nome_do_form'))
31. Métodos da Classe Form Form.serialize $('person-example').serialize() // -> 'username=sulien&age=22&hobbies=coding&hobbies=hiking' $('person-example').serialize(true) // -> {username: 'sulien', age: '22', hobbies: ['coding', 'hiking']}
32. Métodos da Classe Element <div id="fruits">carrot, eggplant and cucumber</div> $('fruits').update('kiwi, banana and apple'); // -> HTMLElement $('fruits').innerHTML // -> 'kiwi, banana and apple'
33. Métodos da Classe Element <div id="visible"></div> <div id="hidden" style="display: none;"></div> $('visible').visible(); // -> true $('hidden').visible(); // -> false
34. Métodos da Classe Element <div id="welcome-message"></div> <div id="error-message" style="display:none;"></div> $('welcome-message').toggle(); // -> HTMLElement (and hides div#welcome-message) $('error-message').toggle(); // -> HTMLElement (and displays div#error-message)
35. Métodos da Classe Element <div id="error-message">Error message</div> $('error-message').hide(); // -> HTMLElement (and hides div#error-message)
36. Métodos da Classe Element <div id="error-message" style="display:none;">Escondido</div> $('error-message').show(); // -> HTMLElement (and displays div#error-message)
37. Utilizando JSON var data = {name: 'Violet', occupation: 'character', age: 25, pets: ['frog', 'rabbit']}; Object.toJSON(data); //-> '{"name": "Violet", "occupation": "character", "age": 25, "pets": ["frog","rabbit"]}'
38. Conclusões
39. Obrigado! Contato contato@mergulhao.info www.mergulhao.info