Este documento discute frameworks Ajax, incluindo: 1) O que são frameworks Ajax e quais tipos existem; 2) Os benefícios de usar um framework Ajax; 3) Requisitos de um framework Ajax. O documento também fornece exemplos de componentes comuns em frameworks Ajax como grids, janelas e painéis de árvore.

1. Frameworks Ajax Porque, quando e como usar um Framework Ajax para melhorar a produtividade

2. Agenda Apresentação! O que são Frameworks Ajax? Que tipos de Frameworks existem? Quais os benefícios de um Framework Ajax? Quais os requisitos de um Framework?

3. Christiano Milfont Developer, Programmer, Speaker, Blogger, ... http://www.milfont.org [email_address] Apresentação

4. Frameworks Ajax

5. Frameworks Ajax

6. Anatomia do Ajax Evento acionado no navegador Um XHR é instanciado A instância do XHR é configurada Uma solicitação com conexão assíncrona Requisição processada no servidor Retorno do servidor em XML ou texto XHR processa o retorno O HTML DOM processa o XML ou Texto

7. Anatomia do Ajax 1. Ocorre um evento no cliente

8. Anatomia do Ajax Instancia uma versão do objeto XHR dependendo do Browser, a Microsoft (criadora do objeto) tem algumas implementações dependendo da versão do Internet Explorer. 2. Um XHR é instanciado

9. Anatomia do Ajax 3. A instância é configurada O método “open” do objeto XHR cria uma conexão e recebe como parâmetros: o método de conexão (“POST” ou “GET”); a “url” do servidor; e um booleano que indica se a conexão é assíncrona (TRUE) ou síncrona (FALSE). Associa-se uma função “callback” que processará o resultado do servidor. Submete os dados caso a conexão seja POST.

10. Anatomia do Ajax 4. Solicita uma conexão assíncrona Quando a propriedade readStatedo objeto XHR recebe o valor 4 a conexão foi terminada, podemos processar diretamente ou somente quando a propriedade status receber o valor “200”.

11. Anatomia do Ajax 5. A requisição é processada pelo servidor O servidor processa uma requisição como outra qualquer e devolve um XML ou um texto. 6. O servidor retorna um XML ou um texto É comum utilizar na resposta um texto com o objeto no formato JSON para ser processado na função callback.

12. Anatomia do Ajax A função callback processa o retorno utilizando DOM. 7 e 8. Callback processa retorno

13. Anatomia do Ajax Métodos e propriedades do XHR Status do readyState 0: Não inicializado. 1: Conexão estabelecida. 2: Requisição recebida. 3: Em processo. 4: Finalizada. Métodos open(mode, url, boolean): inicializa a conexão e recebe os parametros mode (conexão), url e booleano (síncrono ou assíncrono). send("string"): Null para GET ou uma String dos parametros e valores para o POST. Atributos readyState: Troca valores de 0 a 4 que indicam que está “Ready”. Status: Códigos de status do response HTTP. responseText: Processa a resposta como texto. responseXML: Processa a resposta como um objeto XML. onreadystatechange: Propriedade que recebe uma função que é invocada quando o evento readystatechange é disparado.

14. Frameworks Ajax

15. Frameworks Ajax

16. Tipos de Frameworks

17. Javascript Multipurpose Frameworks Javascript Multipurpose: frameworks que fornecessem componentes sobre o conjunto de todas as tecnologias web no lado cliente e mecanismos de acesso ao lado servidor, como o encapsulamento do tratamento dos dados. Tipos de Frameworks

18. Javascript Remote: frameworks que são especialistas no encapsulamento do mecanismo de troca de objetos entre as camadas físicas. Javascript Remoting Frameworks Tipos de Frameworks

19. Javascript Specialised Frameworks Javascript Specialized: frameworks que são especialistas em somente um determinado comportamento ou mecanismo do conjunto de tecnologias web, como por exemplo: especialistas em efeitos ou somente na extensão do javascript. Tipos de Frameworks

20. Benefícios O benefício de se usar um Framework Ajax é o encapsulamento da complexidade de manipulação das tecnologias necessárias, fornecendo um só mecanismo Cross Browser que permita a utilização do ajax com acessibilidade semelhante ao ambiente desktop, além de facilitar o tratamento dos dados nas as camadas físicas entre o lado cliente e o lado servidor.

21. Benefícios Um Framework Ajax utiliza as tecnologias: CSS (camada de formatação da apresentação); XHTML (camada de estrutura da apresentação); XML (dados a serem manipulados) e JSON (outra especificação do formato dos dados); Javascript (camada de controle) por meio de DOM (modelo de árvore de objetos) e com o objeto XMLHttpRequest (que fornece conexões assíncronas). Extende essa tecnologias padrões com componentes de eventos, efeitos, Drag'n'Drop, entre outros.

22. Frameworks Ajax

23. Frameworks Ajax

24. Frameworks Ajax

25. Frameworks Ajax

26. Frameworks Ajax

27. Frameworks Ajax

28. Frameworks Ajax

29. Frameworks Ajax GRID

30. Frameworks Ajax Windows

31. Frameworks Ajax TabPanel

32. Frameworks Ajax TreePanel

33. Frameworks Ajax ComboBox

34. Frameworks Ajax Forms

35. Frameworks Ajax Menus e Toolbar

36. Ajax Resources http://www.ajaxian.com/ http://www.milfont.org/ Livros ZAKAS, Nicholas. Professional JavaScript for Web Developers. Indianapolis, Indiana: Wiley Publishing Inc.,2005. ZAKAS, Nicholas; MCPEAK, Jeremy; FAWCETT, Joe. Professional Ajax. 2nd Edition. Indianapolis, Indiana: Wiley Publishing Inc.,2007. ASLESON, Ryan; SCHUTTA, Nathaniel. Foundations of Ajax. Berkeley, CA: Apress, 2006 GROSS, Christian. Ajax Patterns and Best Practices. Berkeley, CA: Apress, 2006. CRANE, Dave; PASCARELLO, Eric; JAMES, Darren. Ajax in Action. Greenwich, CT: Manning Publications Co., 2006. Referências

37. Obrigado! Dúvidas ? Christiano Milfont http://www.milfont.org