flex mania 2009 wender lima who is? analista programador do uol. especialista no desenvolvimento de...

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

http://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


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"},

}]

}


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"},

}]

})


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


Retorno em JSON

Retorno em JSONP


ExemplosAjax convencional(XMLHttpRequest) e usando jQuery


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.




• 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



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");



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[name=nomeDoCara]");$("input[type=checkbox]");








$("input[name=nomeDoCara]");$("input[type=checkbox]");$("input[type=checkbox]:checked");








$("input[name=nomeDoCara]");$("input[type=checkbox]");$("input[type=checkbox]:checked");$("*[name=nomeDoCara]"); Não recomendado








$("input[name=nomeDoCara]");$("input[type=checkbox]");$("input[type=checkbox]:checked");$("*[name=nomeDoCara]"); Não recomendado$("input[type=text][name$=pessoal]");



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");


<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>


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


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');


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:


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?


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”


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



Eu preciso de um componente que faça a consulta no banco



Eu preciso de um componente que faça a consulta no banco

E algumas linhas de código para o datagrid




LIVE

ColdFusion Ajax FeaturesExemplos: Suggest

E um suggest?


ColdFusion Ajax FeaturesExemplos: Suggest

Um methodo que traga minha consulta

E o cfinput com bind no meu methodo


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



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


http://jquery.com/

http://en.wikipedia.org/wiki/JSON

http://www.adobe.com/support/documentation/en/coldfusion/

http://www.ajaxianos.com.br/

http://tech.groups.yahoo.com/group/ajax-brasil/


Dúvidas/Perguntas


flex mania 2009 wender lima who is? analista programador do uol. especialista no desenvolvimento de...

Documents