jquery ui, ajax
DESCRIPTION
TRANSCRIPT
JQUERY UI
jQuery UI
Uma API de efeitos e widgets baseada no jquery http://ajax.googleapis.com/ajax/libs/jqueryui/
1.8.5/jquery-ui.min.js Inicialização
$(...).widgetname(options) Chamando métodos
$(...).widgetname(“methodName”, [arg1, arg2]) Configurando on-the-fly $(...).widgetname(“option”, key, value)
JQUERY UI : EFFECTS
jQuery UI: effects
$('p').bind('click',function(){
$(this).effect('drop',{
mode: 'show', direction: 'up' });});
$('p').bind('click',function(){
$(this).show('drop',{ direction: 'up' });});
$('p').bind('click',function(){
$(this).hide('drop');});
jQuery UI: effects
$('#button').bind('click',function(){ $('p').toggle('explode');});
$('#button').bind('click',function(){ $('p').toggle('explode', { pieces: 16 });});
JQUERY UI: INTERACTIONS
jQuery UI: Interactions
$('.obj').draggable();$('.obj').bind('dragstart', function(){ ... });$('.obj').bind('drag', function(){ ... });$('.obj').bind('dragstop', function(){ ... });
jQuery UI: Interactions
$('.obj').draggable({ start: function(event, ui){ $(this).effect('highlight'); }, stop: function(event, ui){ $(this).effect('highlight'); }, drag: function(event, ui){ ... }});
jQuery UI: Interactions
$('.obj').draggable({ grid: [30,30], opacity: 0.5, containment: '#workspace', cursor: 'move', disabled: true}); $('.obj').draggable('option', 'grid', [5, 5]);$('.obj').draggable('enable');
jQuery UI: Interactions
Similares para Draggable Droppable Resizable Selectable Sortable
JQUERY UI: WIDGETS
jQuery UI: Widgets
var data = ['BSD','GPL','MIT','Apache'];$('input.local').autocomplete({ source: data});
$("#slider").slider();
jQuery UI: slider
$('#slider').slider({ value: 50}).bind('slidestart',function(event, ui()){}).bind('slide',function(event, ui()){}).bind('slidestop',function(event, ui()){}).bind('slidechange',function(event, ui()){});
jQuery UI: dialog
$('#info').dialog();
$('#warning').dialog({ title: 'Warning' autoOpen: false;});
$('#warning').dialog('open');
jQuery UI: widgets
També há widgets de Accordion Button Datepicker Progressbar Tabs
Além do Autocomplete Dialog Slider
AJAXRicardo Cavalcanti
Algumas Ferramentas
“Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while
you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page!”
http://getfirebug.com
O que é Ajax
Originalmente “Asynchronous Javascript And XML”
Mais geralmente “Qualquer técnica que permita o cliente
recuperar dados de um servidor sem precisar recarregar a página inteira”
Por que ajax?
Todos os browsers incluiram suporte ao objeto XMLHttpRequest O IE já tinha desde 1998
Jesse James Garrett arranjou um nome mais legal que XMLHttpRequest
Pre-Ajax...
Diversas gambiarras Applets java com scripts Dados passados via cookies Dados passados através de um iframe
escondido Ainda em uso O.O
ONDE SE USA AJAX?
Ajax: como funciona
http://code.google.com/intl/pt-BR/edu/ajax/tutorials/ajax-tutorial.html
Ajax: fundamentos
CSS Javascript (X)HTML
DOM document.getElementById... el.childNodes, el.parentNode... document.createElement
CSS class switching
Para fazer grandes mudanças numa página dinamicamente
A maioria do trabalho pode ser feito definindo classes CSS alternativas
E aplicando a classe trocando o className do elemento
XMLHttpRequest
O objeto que permite realizar requests HTTP via javascript
IE utilizava um Object AcviveX Não tem (quase) nada a ver com XML Assíncrono
Callbacks necessários
Ajax purovar obj;
function ProcessXML(url) {
if (window.XMLHttpRequest) {// native object
obj = new XMLHttpRequest();
obj.onreadystatechange = processChange;
obj.open("GET", url, true); // we will do a GET with the url; "true" for asynch
obj.send(null); // null for GET with native object
} else if (window.ActiveXObject) {// IE/Windows ActiveX object
obj = new ActiveXObject("Microsoft.XMLHTTP");
if (obj) {
obj.onreadystatechange = processChange;
obj.open("GET", url, true);
obj.send(); // don't send null for ActiveX
}
} else {
alert("Your browser does not support AJAX");
}
}
Callback function
function processChange() { if (obj.readyState == 4) { if (obj.status == 200) { // processar o objeto } else { alert(“Houston, we have a problem!"); } }}
XMLHttpRequest: atributos
readyState 0: not initialized. 1: connection established. 2: request received. 3: processing. 4: finished and response is ready.
Status 200: "OK“ 404: Page not found.
onreadystatechange responseText responseXml
XMLHttpRequest: métodos
Open (mode, url, boolean) Mode: GET ou POST url: a url para submeter boolean: true = async, false=sync
send(“string”) null para um get
Exemplo
http://www.w3schools.com/dom/dom_http.asp
http://www.w3schools.com/dom/tryit.asp?filename=try_dom_xmlhttprequest_xml
JSON
Javascript Object Notation Subconjunto doJavascript 2 estruturas
Um objeto Um array
JSON: estruturas
JSON: valor
http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?
Um pouco de jquery
Um iterator $.each ( collection, callback(index, item) )
$.each([52, 97], function(index, value) { alert(index + ': ' + value); });
>>> 0: 52>>> 1: 97
jQuery: ajax
jQuery.ajax( settings )
$.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); }});
jQuery: settings
async: para fazer o request assíncrono (default=true)
url: a url para buscar os dados data: dados a serem submetidos dataType: inteligent guess (xml, json, script ou
html) type: “GET” ou “POST” Callbacks
error(XMLHttpRequest, textStatus, errorThrown) success(data, textStatus, XMLHttpRequest) complete(XMLHttpRequest, textStatus)
jQuery: Ajax: shorthands
jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] )
Atalho para$.ajax({ url: url, data: data, success: success, dataType: dataType});
jQuery: métodos ajax
jQuery.post( url, [ data ], [ success(data, textStatus, XMLHttpRequest) ], [ dataType ] )
Atalho para$.ajax({ type: 'POST', url: url, data: data, success: success dataType: dataType});
jQuery.getJSON( url, [ data ], [ callback(data, textStatus) ] )
Atalho para$.ajax({ url: url, dataType: 'json', data: data, success: callback});
Ajax com jQuery
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?",
function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images");
if ( i == 3 ) return false;
});
});