Flex Mania 2009 Wender Lima Who is? Analista Programador do UOL. Especialista no desenvolvimento de WebServices baseados na tecnologia Adobe ColdFusion,

Apresentação em tema: "Flex Mania 2009 Wender Lima Who is? Analista Programador do UOL. Especialista no desenvolvimento de WebServices baseados na tecnologia Adobe ColdFusion,"— Transcrição da apresentação:

1 Flex Mania 2009 Wender Lima Who is? Analista Programador do UOL. Especialista no desenvolvimento de WebServices baseados na tecnologia Adobe ColdFusion, também utilizo muito Ajax com jQuery. Na Adobe faço parte do Prerelease Team Sou um dos colunista do iMasters sobre ColdFusion Co-fundador do grupo de discussão [ajax-brasil] e do blog www.ajaxianos.com.brwww.ajaxianos.com.br Wender Lima – www.ajaxianos.com.br

2 JSON & JSONP, jQuery e ColdFusion Ajax Feature Wender Lima A diferença entre JSON e JSONP. jQuery, e boas práticas. ColdFusion Ajax Features Wender Lima – www.ajaxianos.com.br

3 JSON e JSONP Qual a diferença? O JSON(JavaScript Object Notation) é uma estrutura de dados em JavaScript que possibilita uma rápida leitura dos dados pelo browser. Exemplo de estrutura JSON Wender Lima – www.ajaxianos.com.br { "title": "Recent Uploads tagged cat", "generator": "http://www.flickr.com/", "items": [ { "title": "Tinkerbell", "link": "http://www.flickr.com/photos/jojopet/3686479870/", "media": {"m":"http://farm4.static.flickr.com/3622/3686479870_dd64872796_m.jpg"}, } ] }

4 JSON e JSONP Qual a diferença? O JSONP(JSON with Padding) é a mesma estrutura JSON só que circundada por uma função de callback. No final, o JSON se torna o argumento de uma função que só é executada na página do cliente atravéz da função descrita no callback. Exemplo de estrutura JSONP Wender Lima – www.ajaxianos.com.br nomeDaFuncao({ "title": "Recent Uploads tagged cat", "generator": "http://www.flickr.com/", "items": [ { "title": "Tinkerbell", "link": "http://www.flickr.com/photos/jojopet/3686479870/", "media": {"m":"http://farm4.static.flickr.com/3622/3686479870_dd64872796_m.jpg"}, } ] })

5 JSON e JSONP Qual a diferença? Solução para Cross-domain As consultas Ajax não permitem que você acesse dados de outro servidor fora de seu domínio. www.meusite.com Ajax GET www.outrosite.com Wender Lima – www.ajaxianos.com.br Retorno em JSON Retorno em JSONP

6 JSON e JSONP Qual a diferença? Exemplos Ajax convencional(XMLHttpRequest) e usando jQuery Wender Lima – www.ajaxianos.com.br

7 jQuery Write less do more O que é o jQuery? jQuery é uma lib JavaScript, basicamente um framework que facilita a manipulação e navegação de elementos HTML, eventos, animações e interações Ajax, tornando o desenvolvimento muito mais rápido, eficiente e com o menor risco de divergência entre browsers. Wender Lima – www.ajaxianos.com.br

8 jQuery Write less do more O que é o jQuery? jQuery é uma lib JavaScript, basicamente um framework que facilita a manipulação e navegação de elementos HTML, eventos, animações e interações Ajax, tornando o desenvolvimento muito mais rápido, eficiente e com o menor risco de divergência entre browsers. Como funciona? Um grande forte do jQuery é o seletor de objetos que permite de forma clara e simplificada a navegação por elementos HTML, seu seletor é inspirado no CSS. Wender Lima – www.ajaxianos.com.br

9 jQuery Write less do more O que é o jQuery? jQuery é uma lib JavaScript, basicamente um framework que facilita a manipulação e navegação de elementos HTML, eventos, animações e interações Ajax, tornando o desenvolvimento muito mais rápido, eficiente e com o menor risco de divergência entre browsers. Como funciona? Um grande forte do jQuery é o seletor de objetos que permite de forma clara e simplificada a navegação por elementos HTML, seu seletor é inspirado no CSS. Seletores como CSS? Muita gente não sabe o que se pode fazer com CSS, o nível de penetração do código pode ser bastante específico, e o jQuery e MooTools desenvolveram uma navegação inspirada no CSS Wender Lima – www.ajaxianos.com.br

10 jQuery Write less do more Exemplos do seletor #1 Selecionando objetos, por Tag. CSS: a{} jQuery: $("a"); Selecionando objetos, pelo ID. CSS: #itemMenu{} jQuery: $("#itemMenu"); Selecionando objetos, por classe. CSS:.className{} jQuery: $(".className"); Wender Lima – www.ajaxianos.com.br

11 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Wender Lima – www.ajaxianos.com.br

12 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Chamando um elemento dentro de outro objeto específico: $("input","#idForm"); Wender Lima – www.ajaxianos.com.br

13 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Chamando um elemento dentro de outro objeto específico: $("input","#idForm"); Outras seleções mais avançadas: Wender Lima – www.ajaxianos.com.br

14 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Chamando um elemento dentro de outro objeto específico: $("input","#idForm"); Outras seleções mais avançadas: $("input[name=nomeDoCara]"); Wender Lima – www.ajaxianos.com.br

15 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Chamando um elemento dentro de outro objeto específico: $("input","#idForm"); Outras seleções mais avançadas: $("input[name=nomeDoCara]"); $("input[type=checkbox]"); Wender Lima – www.ajaxianos.com.br

16 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Chamando um elemento dentro de outro objeto específico: $("input","#idForm"); Outras seleções mais avançadas: $("input[name=nomeDoCara]"); $("input[type=checkbox]"); $("input[type=checkbox]:checked"); Wender Lima – www.ajaxianos.com.br

17 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Chamando um elemento dentro de outro objeto específico: $("input","#idForm"); Outras seleções mais avançadas: $("input[name=nomeDoCara]"); $("input[type=checkbox]"); $("input[type=checkbox]:checked"); $("*[name=nomeDoCara]"); Não recomendado Wender Lima – www.ajaxianos.com.br

18 jQuery Write less do more Exemplos do seletor #2 Ele também aceita agrupamento de objetos se você precisar selecionar vários itens de uma só vez: $("input, textarea, select, #itemMenu,.className"); Chamando um elemento dentro de outro objeto específico: $("input","#idForm"); Outras seleções mais avançadas: $("input[name=nomeDoCara]"); $("input[type=checkbox]"); $("input[type=checkbox]:checked"); $("*[name=nomeDoCara]"); Não recomendado $("input[type=text][name$=pessoal]"); Wender Lima – www.ajaxianos.com.br

19 jQuery Write less do more Exemplos do seletor #3 Um exemplo de aplicação: //Todos os links que tiverem target = _blank serão vermelhos $("a[target=_blank]").css("color", "red"); //Todos os links onde o href começar com javascript serão verdes $("a[href^=javascript]").css("color", "green"); Wender Lima – www.ajaxianos.com.br link 1 link 2 link 3 link 4 link 5

20 jQuery Write less do more 5 Boas práticas 1 - Sempre use a última versão do jQuery, os caras estão o tempo todo aprimorando e a cada versão existe um incremento de performance que deve ser considerado. 2 - Sempre que possível, ao chamar um elemento, use ID ao invéz de Class, a diferença de performance é muito grande já que o ID é único e class esta sujeito a relevâncias(pode-se ter mais de uma class por elemento) 3 - Sempre que possível, dê um contexto ao seu seletor, exemplo: Dessa forma o jQuery vai procurar pelos inputs text somente dentro do #formID, e não em todo documento 4 - Aproveite o mesmo seletor, exemplo: O jQuery é inteligente o suficiente para fazer o cache de um seletor e usá-lo em cada método chamado Wender Lima – www.ajaxianos.com.br Ao invéz disso: $('input[type=text]'); Faça isso: $('input[type=text]','#formID'); Ao invéz disso: $('#item').css('color', '#000'); $('#item').val(''); $('#item').css('background-color', '#FFF'); Faça isso: $('#item').css('color', '#000').val('').css('background-color', '#FFF');

21 jQuery Write less do more 5 Boas práticas 5 - Para manipular elementos, use append(), prepend(), after(), before(), etc... mas isso só se o volume foi pequeno, se tiver um grande número de elementos para manipular, prefira agrupar os elementos em uma variável e inserí-los todos de uma só vez usando html() Exemplo: Wender Lima – www.ajaxianos.com.br Ao invéz disso: for (var i=1; i<=1000; i++) { $('#list').append(' '+i+' '); } Faça isso: var list = ''; for (var i=1; i<=1000; i++) { list += ' '+i+' '; } $('#list').html(list);

22 ColdFusion Ajax Features Conhecendo o ColdFusion Conhece o ColdFusion? Wender Lima – www.ajaxianos.com.br

23 ColdFusion Ajax Features Conhecendo o ColdFusion Conhece o ColdFusion? ColdFusion é uma linguagem de programação com servidor próprio baseada em Tags, assim como HTML, um grande diferencial do ColdFusion sobre as outras linguagens é a enorme gama de tags disponíveis para as mais diversas utilidades e funcionalidades, não tenho dúvida em afirmar que na questão de produtividade o CF da um baile em outras linguagens e eu posso provar, mas não é de se espantar já que não é gratuito. O CF foi iniciado por uma empresa chamada Allaire em 1995, em 2001 a empresa foi comprada pela Macromedia e esta por sua vez foi comprada pela Adobe em 2005, a linguagem não morreu devido ao seu potencial reconhecido, hoje a versão comercializada é a 8.0 mas encontra-se em Beta 2 a versão 9.0 codinome “Centaur” Wender Lima – www.ajaxianos.com.br

24 ColdFusion Ajax Features Exemplos: Data Grid Quanto tempo você levaria para fazer um grid como este? -Paginação sob-demanda -Ordenação de coluna -Opção de reordenar as colunas Wender Lima – www.ajaxianos.com.br

25 ColdFusion Ajax Features Exemplos: Data Grid Eu preciso de um componente que faça a consulta no banco Wender Lima – www.ajaxianos.com.br

26 ColdFusion Ajax Features Exemplos: Data Grid Eu preciso de um componente que faça a consulta no banco E algumas linhas de código para o datagrid Wender Lima – www.ajaxianos.com.br

27 ColdFusion Ajax Features Exemplos: Data Grid Wender Lima – www.ajaxianos.com.br LIVE

28 ColdFusion Ajax Features Exemplos: Suggest E um suggest? Wender Lima – www.ajaxianos.com.br

29 ColdFusion Ajax Features Exemplos: Suggest Um methodo que traga minha consulta E o cfinput com bind no meu methodo Wender Lima – www.ajaxianos.com.br

30 ColdFusion Ajax Features The next generation of web applications with Adobe Products Este são apenas exemplos simples e sem customização de recursos nativos do ColdFusion Você pode baixar gratuitamente o ColdFusion no site da Adobe e ainda encontrar uma vasta documentação e muitos exemplos e tutoriais em video Wender Lima – www.ajaxianos.com.br

31 Flex Mania 2009 Wender Lima Fontes: jQuery: http://jquery.com/http://jquery.com/ JSON e JSONP: http://en.wikipedia.org/wiki/JSONhttp://en.wikipedia.org/wiki/JSON ColdFusion: http://www.adobe.com/support/documentation/en/coldfusion/http://www.adobe.com/support/documentation/en/coldfusion/ Blog: www.ajaxianos.com.brwww.ajaxianos.com.br Grupo de discussão: http://tech.groups.yahoo.com/group/ajax-brasil/http://tech.groups.yahoo.com/group/ajax-brasil/ Twitter: @ajaxianos Wender Lima – www.ajaxianos.com.br

32 Flex Mania 2009 Wender Lima Dúvidas/Perguntas Wender Lima – www.ajaxianos.com.br