Allora continuiamo con la nostra serie di articoli sui Widgets per vedere qualcosa di veramente interessante che gira su Windows Mobile.Ossia l'integrazione con la libreria JQuery. Quanti di voi hanno già pensato di utilizzarla, avranno sicuramente colto l'enorme semplicità oltre alla potenza di una libreria scritta in Javascript. Cosa fa JQuery. La principale funzionalità, come dice il nome stesso della libreria, è quello di ritrovare velocemente e in maniera semplice qualsiasi elemento appartenente al DOM Html della pagina senza ricorrere a tonnellate di codice js. Inoltre Offre un modo trasparente allo sviluppatore di utilizzare i CSS per rendere il più possibile animate le pagine web indipendentemente dal browser del client oltre a supportare facilmente AJAX. Queste sono alcune delle caratteristiche supportate e qui non vogliamo fare un tutorial su JQuery, per cui rimandiamo al sito principale da cui fare il download della libreria e procurarsi i tantissimi tutorials sull'argomento.
$()
$() è forse la funzione più importante e caratteristica della libreria. Qualunque sia il parametro tra parentesi, questo sarà oggetto di un ciclo e memorizzato come oggetto JQuery. Vediamo un confronto tra la sintassi JQuery e l'equivalente di js.
$("div.fillMeIn“).html("aggiunto del testo a un gruppo di nodi");
è l'equivalente di
var elements = $("div.fillMeIn");
for(i=0; i< elements.length; i++)
elements[i].innerHTML = "aggiunto del testo a un gruppo di nodi";
Come possiamo vedere dagli esempi di seguito, la funzione $() restituisce sempre un Oggetto JQuery che rappresenta una collezione:
$("p a") seleziona tutti i links (<a>) annidati dentro un elemento paragrafo (<p>)
$("div.IamAghost").fadeOut() fa sparire tutti gli elementi <div> con class 'IamAghost'
$("div.IamAghost").fadeOut().addClass(removed) aggiunge un tipo di class a tutti gli elementi scomparsi
Ciascuna selezione come abbiamo detto ritorna una collezione di elementi (come LINQ) che può essere a sua volta oggetto di query con altri parametri come per esempo possiamo vedere di seguito:
$(document).ready(function(){ $("table tr:nth-child(even)").addClass("even");});
Con questa riga di codice, all'inizio un pò ostica effettivamente, si costruisce una tabella con righe alternate di diverso stile, dove a quelle pari viene ovviamente applicato lo style 'even'
Widget e JQuery all'opera
Vista la potenza di JQuery, perchè non applicarla alle applicazioni Widget? In fondo si tratta di applicazioni scritte in HTML, CSS e Javascript. Ed allora ecco alcuni esempi di animazioni che possono essere costruite sulle nostre applicazioni Widget-Mobile. Vediamo alcuni esempi: