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

kvalcanti@gmail.com

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;

});

});