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 TeamSou um dos colunista do iMasters sobre ColdFusionCo-fundador do grupo de discussão [ajax-brasil] e do blog www.ajaxianos.com.br
Wender Lima – www.ajaxianos.com.br
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
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
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"},
}]
}
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
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"},
}]
})
JSON e JSONPQual a diferença?
Solução para Cross-domainAs 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
Wender Lima – www.ajaxianos.com.br
Retorno em JSON
Retorno em JSONP
JSON e JSONPQual a diferença?
ExemplosAjax convencional(XMLHttpRequest) e usando jQuery
Wender Lima – www.ajaxianos.com.br
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
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
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
jQuery Write less do more
Exemplos do seletor #1Selecionando 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #2Ele 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
jQuery Write less do more
Exemplos do seletor #3Um 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
<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>
jQuery Write less do more
5 Boas práticas1 - 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');
jQuery Write less do more
5 Boas práticas5 - 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('<li>'+i+'</li>');}
Faça isso:var list = ''; for (var i=1; i<=1000; i++) {
list += '<li>'+i+'</li>';}$('#list').html(list);
ColdFusion Ajax FeaturesConhecendo o ColdFusion
Conhece o ColdFusion?
Wender Lima – www.ajaxianos.com.br
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
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
ColdFusion Ajax FeaturesExemplos: Data Grid
Eu preciso de um componente que faça a consulta no banco
Wender Lima – www.ajaxianos.com.br
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
ColdFusion Ajax FeaturesExemplos: Data Grid
Wender Lima – www.ajaxianos.com.br
LIVE
ColdFusion Ajax FeaturesExemplos: Suggest
E um suggest?
Wender Lima – www.ajaxianos.com.br
ColdFusion Ajax FeaturesExemplos: Suggest
Um methodo que traga minha consulta
E o cfinput com bind no meu methodo
Wender Lima – www.ajaxianos.com.br
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 ColdFusionVocê 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
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
Flex Mania 2009Wender Lima
Dúvidas/Perguntas
Wender Lima – www.ajaxianos.com.br
Top Related