1 / 32

Flex Mania 2009 Wender Lima

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

alfonso-baldwin
Download Presentation

Flex Mania 2009 Wender Lima

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Flex Mania 2009Wender 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.br Wender Lima – www.ajaxianos.com.br

  2. JSON & JSONP, jQuerye ColdFusion Ajax FeatureWender 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 JSONPQual 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 { "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"}, } ] } Wender Lima – www.ajaxianos.com.br

  4. JSON e JSONPQual 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 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"}, } ] }) Wender Lima – www.ajaxianos.com.br

  5. JSON e JSONPQual 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 www.meusite.com Ajax GET www.outrosite.com Retorno em JSON Retorno em JSONP Wender Lima – www.ajaxianos.com.br

  6. JSON e JSONPQual 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"); <a href="#">link 1</a> <a href="javascript:void(0);">link 2</a> <a href="#">link 3</a> <a href="#" target="_blank">link 4</a> <a href="#">link 5</a> Wender Lima – www.ajaxianos.com.br

  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 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'); Wender Lima – www.ajaxianos.com.br

  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: Aoinvéz disso: for (var i=1; i<=1000; i++) { $('#list').append('<li>'+i+'</li>'); } Faça isso: var list = ''; for (var i=1; i<=1000; i++) { list += '<li>'+i+'</li>'; } $('#list').html(list); Wender Lima – www.ajaxianos.com.br

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

  23. ColdFusion Ajax FeaturesConhecendo 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 FeaturesExemplos: 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 FeaturesExemplos: Data Grid Eu preciso de um componente que faça a consulta no banco Wender Lima – www.ajaxianos.com.br

  26. ColdFusion Ajax FeaturesExemplos: 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 FeaturesExemplos: Data Grid LIVE Wender Lima – www.ajaxianos.com.br

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

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

  30. ColdFusion Ajax FeaturesThe 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 2009Wender Lima Fontes: jQuery: http://jquery.com/ JSON e JSONP: http://en.wikipedia.org/wiki/JSON ColdFusion: http://www.adobe.com/support/documentation/en/coldfusion/ Blog: www.ajaxianos.com.br Grupo de discussão: http://tech.groups.yahoo.com/group/ajax-brasil/ Twitter: @ajaxianos Wender Lima – www.ajaxianos.com.br

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

More Related