Effetti 2. Animazioni Animare l'interfaccia attraverso la modifica del colore e delle classi applicate agli elementi

Transcript

1 Guida jquery UI di: Marco Solazzi 1. Introduzione Gli obiettivi del progetto; come e dove scaricare jquery UI Effetti 2. Animazioni Animare l'interfaccia attraverso la modifica del colore e delle classi applicate agli elementi 3. Il metodo effect() Creare effetti avanzati con questo metodo specifico di jquery UI Interazioni 4. Generalità Le interazioni in jquery UI: sintassi comune 5. Draggable (trascinare oggetti) Metodi e opzioni per trascinare oggetti sulla pagina 6. Droppable (rilasciare oggetti trascinati) Come e dove posizionare sulla pagina oggetti trascinati con draggable 7. Resizable (ridimensionare finestre ed elementi) Ridimensionare facilmente elementi dell'interfaccia a partire dalle finestre modali 8. Selectable (selezionare oggetti) Selezione multipla con rettangolo o di oggetti non contigui 9. Sortable (ordinare elementi) Ordinare interattivamente elementi di una lista Widget 10. Introduzione ai widget di jquery UI Cosa sono i widget e quando usarli 11. Accordion Nascondere e mostrare elementi in base all'interazione dell'utente 12. Datepicker Analisi del widget di jquery UI destinato alla selezione delle date 13. Dialog Creare e gestire finestre popup, avvisi e messaggi di dialogo 14. Progressbar Il widget per comunicare all'utente il progresso di un'operazione in corso 15. Slider Creare e gestire controlli per la modifica 'a scorrimento' di valori 16. Tabs: opzioni Creare box e pannelli con interfaccia 'a schede' 17. Tabs: eventi e metodi Eventi e metodi per gestire al meglio il widget tab 18. Themeroller e i temi di jquery UI Personalizzare facilmente i temi di jquery UI

2 Introduzione (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 Introduzione Il web e le interfacce utente La User Experience (UX) e lo studio delle User Interface (UI) sono oggetto di studio nel campo dello sviluppo software da molti anni, tanto che tutte le aziende produttrici di sistemi operativi hanno sempre speso molte risorse nella realizzazione e ottimizzazione di linee guida per la creazione di controlli per l'interazione applicazione - utente. Nel web il campo di studi relativo alle interfacce utente è invece stato limitato dalle scarse risorse di interattività offerte dai linguaggi web che fino a poco tempo fa erano rappresentate da link e form. Negli ultimi anni, soprattutto grazie al rinnovamento dei motori di rendering JavaScript e a nuove risorse per i CSS e non ultimo per l'html, è stato possibile sperimentare nuove vie di interazione, applicando e spesso riadattando i controlli utilizzati in ambiente software alle pagine web. L'esigenza in questo caso è stata fin da subito quella di rendere l'ambiente del web il più possibile simile a quello più diffusamente conosciuto dei programmi desktop, applicando pattern come quello delle finestre modali, dei calendari dinamici e dell'aggiornamento dei dati in tempo reale senza bisogno di refresh. JavaScript e AJAX sono i principali protagonisti di questa rivoluzione negli usi e costumi delle interfacce internet, anche grazie all'introduzione di framework e librerie di supporto per gli sviluppatori. jquery UI In questa guida parleremo dell'attuale progetto ufficiale per la realizzazione di interfacce utente di jquery ( chiamato jquery UI ( Il progetto, nonostante alcuni gravi problemi di compatibilità e stabilità delle prime versioni, ha raggiunto ormai una buona maturità ed un'architettura estendibile che lo rendono un ottimo punto di partenza per tutti gli sviluppatori che vogliano dedicarsi alla realizzazione di una moderna applicazione per il web. Partito come un progetto parallelo a jquery, UI è stato ben presto inglobato nello sviluppo della libreria, pur mantenendo un gruppo di sviluppo autonomo ancor oggi guidato da Paul Bakaus, il primo sviluppatore del progetto. Arrivato alla prima versione stabile nel tardo 2007, ha subito numerose revisioni e riscritture fino all'attuale versione 1.7. Un'altro contributo importante al progetto viene da Filament Group ( l'azienda alla base della struttura grafica dei controlli (o widget) e della loro architettura a temi (che vedremo in una lezione successiva). Al momento jquery UI è suddivisa in 3 macroaree di interesse: effetti grafici (in aggiunta a quelli di jquery); interazioni complesse (ordinamento di elementi, drag and drop, etc); widget (controlli complessi come calendari, finestre modali e navigazione a schede). jquery UI: come, dove, quando Poiché la struttura della libreria è estremamente modulare, sul sito del progetto è disponibile sia un download completo ( di tutto il codice (sia sorgente che compresso per la produzione), sia un builder, con il quale ognuno può realizzare una versione personalizzata della libreria e del tema per i controlli in modo da scaricare solo ciò che serve all'applicazione: ( In generale, quest'ultima opzione è utile una volta concluso il progetto e definiti gli effetti ed i controlli di cui

3 Introduzione (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 abbiamo veramente bisogno in modo da alleggerire il peso dell'applicazione. Pronti, partenza... La versione di UI che useremo negli esempi è la nel formato "completo" che si basa su jquery 1.3 e versioni successive. In ogni caso, tutti i pacchetti scaricati dal sito sono installabili molto semplicemente. Decomprimete il file scaricato. Troverete tre cartelle: css (contenente il tema dei controlli (nel nostro caso smothness), js (con i file compressi di jquery e jquery UI) e development-bundle (con tutti i sorgenti ed i file dei singoli moduli della libreria). inserite questo codice nella sezione della pagina in cui userete jquery UI: <link type="text/css" href="css/smoothness/jquery-ui custom.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery min.js"></script> <script type="text/javascript" src="js/jquery-ui custom.min.js"></script> Nel caso abbiate già inserito un tag per richiamare jquery, potete omettere la seconda riga. Fate attenzione, comunque, che la versione di jquery UI richiede jquery Vedremo più avanti come poter caricare altri temi e personalizzarli. Al momento iniziamo a scoprire cosa ci offre jquery UI a partire dagli effetti grafici. Per la natura stessa della guida, infine, vi consigliamo di abbinare la sua lettura a quella della Guida jquery ( per cogliere al meglio le specificità del progetto e i modi in cui completa l'offerta del framework principale. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

4 Animazioni (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 Animazioni Molto spesso gli sviluppatori sono portati ad utilizzare gli effetti grafici come "contorno ludico" alla vera e propria interazione con l'utente. La diretta conseguenza di questo atteggiamento, è che spesso ci troviamo di fronte a pagine piene di inutili animazioni che ricordano molto dei giochi in Flash o le vecchie pagine anni '90 farcite di gif animate. In realtà, le animazioni sono uno strumento fondamentale per catturare l'attenzione dell'utente, creare relazioni fra gli elementi dell'interfaccia e creare un'interazione più fluida con i visitatori. In jquery UI l'approccio usato dagli sviluppatori è stato quello di implementare gli effetti grafici soprattutto come estensioni dei metodi già presenti nella libreria di base. Animazioni sul colore La libreria estende anzitutto le capacità del metodo.animate() nativo, introducendo le transizioni di colore che permettono di sostituire un colore con un altro con un effetto graduale. Le proprietà CSS che supportano questo effetto sono: backgroundcolor, borderbottomcolor, borderleftcolor, borderrightcolor, bordertopcolor, color, outlinecolor. L'animazione eseguirà una transizione dal colore attuale ad uno impostato in formato esadecimale, rgb o stringa (ad esempio "red", esempio ( //CSS.error { background-color: #F00; color:#fff; } //JS $("#box").text("errore!").addclass("error",1000); Animazioni "di classe" Seguendo l'approccio ad estensione, UI aggiunge nuove caratteristiche ai metodi per la manipolazione delle classi CSS. Così, passando un numero in millsecondi come secondo parametro di.addclass(), le proprietà CSS definite nella classe saranno applicate con una transizione della durata indicata: $("#box").text("errore!").addclass("error",1000,"linear",function () { alert("errore Notificato!"); }); L'introduzione di questa particolare tipologia di effetti è molto importante, in quanto permette di separare la parte di scripting da quella grafica, semplificando futuri adattamenti grafici o addirittura l'adozione di diversi stili grafici pur mantenendo inalterato il codice JavaScript. Oltre al parametro della durata, il metodo.addclass() accetta altri due argomenti opzionali indicanti l'andamento (easing) dell'animazione ed una funzione da lanciare alla sua conclusione (callback). $("#box").switchclass('classecorrente','nuovaclasse',500,'easeoutbounce',function(){ alert("animazione conclusa!"); }); Ecco un esempio live (

5 Animazioni (versione per la stampa) Guide JavaScript Javascript di 2 14/06/ :12 Altri metodi coinvolti nell'estensione sono.removeclass() e.toggleclass(); ambedue accettano i tre argomenti come.addclass(). Per concludere è stato aggiunto un quarto metodo,.switchclass(), che permette di animare un'elemento a partire da una classe applicandogli le proprietà di una seconda. Nell'ordine gli argomenti sono: classe iniziale, classe finale, durata, andamento (opzionale) e funzione conclusiva (opzionale): $("#box").switchclass('classecorrente','nuovaclasse',500,'easeoutbounce',function(){ alert("animazione conclusa!"); }); Easing avanzato Il terzo campo nel quale UI estende jquery è il numero di andamenti, in inglese easing, disponibili. Nato come plugin per jquery, questo specifico codice JavaScript permette di modificare la dinamica con cui si svolge l'animazione, simulando effetti elastici o di attrito al fine di rendere più realistica l'animazione. Potete trovare la lista di tutti gli andamenti disponibili sulla home page del progetto ( /jquery/easing/). Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

6 Il metodo effect() (versione per la stampa) Guide JavaScript Javascri di 1 14/06/ :13 Il metodo effect() L'unico nuovo metodo introdotto dalla libreria è.effect(). Nella sua forma più semplice accetta un primo argomento stringa che rappresenta il tipo di effetto che vogliamo applicare alla collezione: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'. Ecco un esempio pratico ( che li mostra dal vivo. Di questi effetti i più interessanti sono highlight (spesso usato per evidenziare cambiamenti all'interno di una pagina, per esempio l'aggiornamento del testo di un box), blind (usato per nascondere un elemento) e transfer (per indicare il rapporto fra due elementi). Oltre al tipo di effetto il metodo accetta ulteriori due argomenti opzionali: un oggetto JavaScript per la personalizzazione dell'effetto ed una funzione da eseguire alla fine dell'animazione. I parametri con i quali è possibile modificare le impostazioni di base degli effetti variano di caso in caso e sono tutti elencati nella documentazione ufficiale ( Per esempio highlight accetta un oggetto formato da una chiave per il colore (color) da usare ed una per la modalità di visualizzazione ("hide" o "show"), mentre blind sostituisce color con direction ("vertical" o "horizontal") per specificare se l'oggetto va animato in orizzontale o verticale. Scorciatoie di visualizzazione. Parte degli effetti disponibili con in metodo.effect() possono essere realizzati anche con alcuni metodi già presenti in jquery:.show(),.hide() e.toggle(). Questi metodi accettano gli stessi parametri di.effect(), ma mantengono l'azione svolta in jquery, permettendo così di visualizzare un elemento con un effetto a tendina e nasconderlo con una esplosione (esempio ( 03.html)): //Mostra nascondi box $("#mostrabox").click(function () { var box = $('#box'); if (box.is(':visible')) { box.hide('explode'); } else { box.show('blind'); } }); Come detto in precedenza solo alcuni effetti possono essere associati ai metodi.show(),.hide() e.toggle(): Blind, Clip, Drop, Explode, Fold, Puff, Slide, Scale. Per tutti gli altri è necessario ricorrere sempre a.effect(). Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

7 Generalità (versione per la stampa) Guide JavaScript Javascript.HT di 1 14/06/ :13 Generalità Una parte molto importante dell'interazione fra utenti ed interfaccia riguarda il tipo di interazione da compiere. Nel web "tradizionale" le possibilità in questo campo erano abbastanza limitate e si riducevano quasi esclusivamente al click e alla digitazione da tastiera in campi di form. Al giorno d'oggi, invece, le librerie UI permettono un'interazione più ricca e molto più vicina a quella diffusa nelle applicazioni desktop. Alcune di queste interazioni riguardano l'ordinamento degli elementi, il loro trascinamento e la selezione. Molti di noi sono ormai abituati al diverso contesto interattivo, ma provate a pensare quanto sia diversa (e più povera) l'interazione che abbiamo con una comune pagina web rispetto al contesto desktop. In questo capitolo vedremo come alcune interazioni complesse siano rese semplici da implementare grazie ai metodi di jquery UI. Sintassi comune Prima di iniziare a vedere nel dettaglio le interazioni, è utile sottolineare che nella maggior parte dei casi è possibile richiamare ed interagire con i metodi di jquery UI nello stesso modo. Così, se la sintassi seguente rende trascinabile un elemento con id box (esempio ( /03-draggable-01.html)): $("#box").draggable(); a sua volta il metodo accetta un argomento sotto forma di oggetto JavaScript che permette di personalizzare le opzioni di base. Oltre a tale oggetto, possiamo passare ai metodi degli argomenti come stringa di testo con i quali, ad esempio, disabilitare l'interazione: $("#box").draggable("disable"); per poi riattivarla passando a.draggable() la stringa "enable". Se invece volessimo rimuovere definitivamente l'interazione, dovremo passare come primo argomento "destroy". Un'ultima possibilità è quella di ricavare o impostare un determinato parametro di configurazione anche dopo l'inizializzazione dell'interazione: $("#box").draggable("option","delay"); //ricava un'opzione $("#box").draggable("option","delay",500); //imposta un'opzione Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

8 Draggable (trascinare oggetti) (versione per la stampa) Guide JavaScri di 3 14/06/ :14 Draggable (trascinare oggetti) Sebbene spostare oggetti sia un'interazione particolarmente familiare, nel web essa comporta una serie di considerazioni complesse ed un non meno complesso codice JavaScript per garantire la compatibilità crossbrowser. jquery UI risponde a questa esigenza anzitutto con il metodo.draggable() che, associato ad un elemento, lo rende trascinabile alla pressione del mouse: $("#contenitore div").draggable(); Per permettere la personalizzazione grafica, a tutti gli elementi associati all'interazione, viene aggiunta la classe ui-draggable. In più, per permettere un feedback visivo durante il trascinamento, viene aggiunta anche la classe ui-draggable-dragging. Opzioni Naturalmente non tutto si risolve con il semplice metodo senza argomenti: un'interazione di questo tipo comporta la necessità di essere personalizzabile per aderire al meglio a diverse situazioni ed interfacce. Questi i parametri principali che possono essere passati al metodo in un secondo argomento di tipo { chiave : valore} (e il valore di default): appendto: (elemento, selettore - 'parent') L'elemento o il selettore CSS che sarà individuato come contenitore degli elementi draggabili (trascinabili), il valore di default "parent" indica che verrà usato l'elemento contenitore degli elementi. axis: (stringa - false) Limita il movimento sull'asse orizzontale ('x') o verticale ('y'). cancel: (selettore - ':input,option') Previene l'interazione quando il cursore interagisce con gli elementi indicati nel selettore. Il valore di default, per esempio, evita che un'elemento sia mosso accidentalmente quando si sceglie un'opzione da un menu a tendina o si scrive in un campo form. connecttosortable: (selettore - false) Questa opzione può essere utile quando sono presenti elementi mobili indipendenti che vogliamo poter aggiungere ad una lista di elementi ordinabili (indicata dal selettore CSS). Come vedremo più avanti.sortables() è basato sul drag and drop, ma considera gli elementi mobili come una lista ordinata in cui ognuno occupa una posizione definita. containment: (selettore, elemento, array, stringa - false) Definisce il limite entro il quale gli elementi possono essere trascinati. Alcune opzioni sono: 'parent', 'document', 'window', [x1, y1, x2, y2]. cursor: (stringa - 'auto') Specifica come deve apparire il cursore durante il trascinamento. In questo caso viene usato il valore CSS della regola cursor. Non esiste una vera e propria regola, in questo caso: c'è chi usa 'move' e chi 'pointer'. Personalmente preferisco quest'ultima opzione perché è più intuitiva per l'utente medio. delay: (intero - 0) Indica i millisecondi fra il momento in cui l'utente clicca con il mouse e l'inizio dell'interazione. Può essere utile per evitare click accidentali. Tuttavia un intervallo troppo lungo può essere interpretato come una lentezza dell'applicazione. distance: (intero - 1) Indica di quanti pixel dovrà muoversi il mouse (quando premuto) perché l'elemento inizi a seguirlo. Come

9 Draggable (trascinare oggetti) (versione per la stampa) Guide JavaScri di 3 14/06/ :14 nel caso precedente questa opzione può prevenire interazioni accidentali, tuttavia valori elevati renderanno gli elementi troppo appiccicosi e difficili da spostare. grid: (array - false) Lega il movimento dell'elemento mobile ad una griglia definita in pixel. Questa opzione è utile quando si ha la necessità di ordinare spazialmente più elementi, per esempio nel caso in cui volessimo rendere l'idea di una scacchiera. Il valore passato è un array con un valore per la larghezza ed uno per l'altezza di un blocco della griglia. handle: (elemento, selettore - false) Identifica un elemento da utilizzare come maniglia per il trascinamento. In questo modo l'interazione verrà avviata solo quando l'utente cliccherà e trascinerà quello specifico elemento, ma non in altre parti dell'elemento mobile. helper: (stringa, funzione - 'original') Permette l'utilizzo di elementi di aiuto. Se impostato su 'clone', ad esempio, verrà creato un clone dell'oggetto da trascinare e sarà spostato quest'ultimo invece dell'elemento originale fino al suo rilascio. In alcuni casi è possibile generare con una funzione un elemento DOM che funga da segnaposto per l'elemento (per esempio un piccolo box) in modo da limitare la complessità dell'elemento trascinato, aumentare le performance e semplificare l'interfaccia. Di default viene utilizzato direttamente l'elemento da trascinare. opacity: (decimale - false) Indica l'opacità che deve assumere l'elemento di aiuto. Può essere utile per indicare visivamente lo stato precario dell'elemento e per mostrare gli elementi a lui sottostanti. scope: (stringa - 'default') Viene utilizzato per raggruppare elementi trascinabili con aree di rilascio specifiche. In pratica serve a definire dei contenitori entro i quali poter rilasciare gli elementi. scroll: (booleano - true) Se impostato su true il contenitore dell'elemento trascinato scorrerà (scrolling) seguendo il movimento. Questa opzione è utile per facilitare l'interazione ad utenti con basse risoluzioni o schermi piccoli o in presenza di aree di trascinamento molto estese. snap: (booleano, selettore - false) Se impostato ad un selettore o su true, l'elemento trascinato si incollerà ad un elemento adiacente arrivato ad una certa distanza da questo. snapmode: (stringa - 'both') Definisce a quale limite degli elementi adiacenti si incollerà l'elemento trascinato. I valori possibili sono: 'inner', 'outer', 'both'. snaptolerance: (intero - 20) La distanza entro la quale si verifica lo snap. L'effetto per l'utente sarà quello di una calamita. La lista completa delle opzioni è disponibile su questa pagina ( mentre qui ( sono disponibili alcuni esempi. Eventi associati Oltre alle opzioni è possibile associare all'oggetto passato a.draggable() delle funzioni di callback in base agli eventi dell'interazione, questi sono: start (inizio del trascinamento) stop (fine dell'interazione) drag (durante il trscinamento) Tutte le callback ricevono due argomenti: l'evento nativo del browser e un oggetto ui con le seguenti proprietà: ui.helper - l'oggetto jquery dell'elemento trascinato ui.position - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente all'elemento contenitore ui.offset - la posizione attuale dell'elemento trascinato del tipo {alto,sinistra}, relativamente alla pagina

10 Draggable (trascinare oggetti) (versione per la stampa) Guide JavaScri di 3 14/06/ :14 Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

11 Droppable (rilasciare oggetti trascinati) (versione per la stampa) Guid di 2 14/06/ :14 Droppable (rilasciare oggetti trascinati) L'interazione droppable è strettamente collegata a draggable e insieme concorrono al paradigma del drag'n'drop ormai molto diffuso sul web. Sintetizzando il concetto, droppable realizza il contenitore in cui gli elementi trascinabili possono essere rilasciati. In jquery UI questa interazione è richiamata dal metodo.droppable(): $("#dropbox").droppable(); Opzioni Le opzioni principali che possono essere passate a.droppable() (sempre attraverso un oggetto JavaScript) sono: accept: (selettore, funzione - '*') Indica quali elementi trascinabili sono accettati all'interno del contenitore. Può essere un selettore CSS del tipo "#lista div" oppure una funzione da applicare sull'elemento trascinato e che deve restituire true perché questo venga accettato. Di default ogni elemento può essere rilasciato nel contenitore. greedy: (booleano - false) Se impostato su true previene la propagazione dell'evento di rilascio agli elementi annidati nel contenitore. Questo significa che un elemento risulterà aggiunto al contenitore solo se rilasciato direttamente al suo interno, ma non all'interno di eventuali figli. scope: (stringa - 'default') Permette di accettare solo elementi trascinati che appartengono allo stesso scope (che viene impostato con la stessa modalità in draggable), in modo da poter filtrare gli elementi prima ancora di rilasciarli. tollerance: (stringa - 'intersect') Definisce quando un oggetto può essere rilasciato in modo che possa essere catturato dal contenitore. I valori possibili sono: fit: tutto l'elemento trascinato è sopra al contenitore intersect: almeno metà dell'elemento è sopra il contenitore pointer: il mouse è nel contenitore touch: appena l'elemento tocca il contenitore. Questa opzione è molto importante per quanto riguarda l'esperienza utente, in quanto da essa dipende l'usabilità dell'interazione. In realtà nessuna di esse è più indicata dell'altra, ma tutto dipende dalle dimensioni degli elementi trascinati e dalla distanza fra il punto di inizio e fine del trascinamento. Ad esempio, intersect è un buon compromesso solo nel caso in cui l'oggetto trascinato non sia troppo grande, mentre touch potrebbe attivare l'interazione troppo presto rendendo l'interfaccia imprecisa. Eventi Come per.draggable(), è possibile associare una funzione di callback ad alcuni eventi durante l'interazione. Tutte le funzioni accettano due argomenti: l'evento e un oggetti ui con le seguenti chiavi:.draggable - un oggetto jquery del elemento che trascinato..helper - l'helper dell'oggetto trascinato (che potrebbe essere l'oggetto stesso).

12 Droppable (rilasciare oggetti trascinati) (versione per la stampa) Guid di 2 14/06/ :14.position - la posizione dell'helper in formato oggetto { top:, left: }..offset - la posizione assoluta dell'helper in formato oggetto { top:, left: }. Gli eventi a cui è possibile associare una funzione sono: activate / deactivate: questi eventi sono lanciati quando un elemento a cui è associato.draggable() viene trascinato o rilasciato. Può risultare utile per evidenziare l'area di rilascio solo quando un oggetto viene trascinato per mantenere più pulita l'interfaccia. over / out / drop: questi eventi segnano l'interazione fra l'elemento trascinato e l'area di rilascio, più precisamente quando l'elemento è dentro l'area (vedi l'opzione tollerance), ne esce oppure vi viene rilasciato. Su questa pagina ( possibile vedere alcuni esempi del metodo in azione. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

13 Resizable (ridimensionare finestre ed elementi) (versione per la stampa)... di 2 14/06/ :14 Resizable (ridimensionare finestre ed elementi) Ridimensionare le finestre del nostro sistema operativo è un'operazione che compiamo spesso e che serve a gestire meglio la limitata dimensione del nostro monitor; al contrario, sul web l'esigenza di poter ridimensionare blocchi e finestre a comparsa è stata per molti anni poco sentita, viste le limitate interazioni disponibili per l'utente. Con l'introduzione di finestre modali al posto dei pop-up e successivamente di layout "mobili" e personalizzabili, è stato necessario realizzare anche questo tipo di interazione. jquery UI mette a disposizione il metodo.resizable(), che permette di ridimensionare un elemento con lo stesso tipo di azioni ormai familiari nelle applicazioni desktop semplicemente richiamando su di esso il metodo: $("#box").resizable(); In questo modo verranno aggiunte delle maniglie (di default sul lato destro, basso e nell'angolo inferiore destro del box) con le quali poter allargare o restringere un elemento (esempio ( /esempi/jqueryui/esempi/05-resizable-01.html)). L'utilizzo di questa interazione è molto delicato poiché il ridimensionamento di un elemento potrebbe causare problemi alla visualizzazione di quelli adiacenti o addirittura "scombinare" l'intero layout. Proprio per questo è importante personalizzarne il comportamento per adattarlo alle nostre esigenze. Opzioni Le opzioni di personalizzazione più importanti in questo caso sono: maxheight / maxwidth / minheight / minwidth : (intero - null) imposta dimensioni massime e minime per l'elemento ridimensionato. È un'impostazione importante per evitare che l'utente possa rimpicciolire troppo un box, perdendo la possibilità di interagirvi, oppure al contrario che possa ingrandirlo troppo oltre il layout o il viewport del browser tanto da oscurare altri elementi; containment : (stringa, selettore, elemento - false) indica un elemento che delimiti l'estendibilità dell'oggetto ridimensionabile. Anche in questo caso, se possibile, identificare un contenitore serve a limitare entro limiti ragionevoli le possibilità dell'utente; aspectratio : (booleano, decimale - false) dà la possibilità di forzare una proporzione fra altezza e larghezza durante il ridimensionamento. Se impostato su true verranno mantenute le proporzioni originali altrimenti si possono impostare proporzioni personalizzate come 0.5 o 16/9; handles : (stringa,oggetto - 'e, s, se') indica quali maniglie devono essere create per il ridimensionamento. Le posizioni possibili sono identificate secondo le sigle dei punti cardinali, quindi quelle di default sono est, sud, sudest (destra, sotto, in basso a destra); Fra le opzioni troviamo anche grid, delay e distance, che ricalcano quelle già trovate in.draggable(). Rispettivamente indicano una griglia di ridimensionamento fissa, dopo quanto tempo avviare l'interazione e dopo quanti pixel di trascinamento di una maniglia. La regolazione di questi parametri concorre alla sensazione di "appiccicosità" dell'elemento al layout sottostante. Infine, due tipologie di opzioni contrastanti sono animate e ghost: la prima abilita il ridimensionamento con un'animazione (e specifici valori per andamento e durata), la seconda crea un helper semitrasparente

14 Resizable (ridimensionare finestre ed elementi) (versione per la stampa)... di 2 14/06/ :14 che fa da traccia durante il ridimensionamento. La differenza a livello di interfaccia è sostanziale: come succede nei sistemi desktop, un'animazione risulta senza dubbio più "spettacolare" tuttavia richiede più risorse rispetto ad un helper e soprattutto rallenta l'utente che deve aspettare la fine dell'effetto per continuare il suo lavoro. In generale, se non strettamente necessario, l'animazione risulta superflua e controproducente. Ecco alcuni esempi ( di personalizzazione del metodo. Eventi Chiudiamo questa lezione con la lista di eventi collegati a.resizable(), che sono start, stop e resize, lanciati all'inizio, alla fine e durante il ridimensionamento. Tutti questi eventi accettano due argomenti: l'evento Javascript e un oggetto ui con le seguenti proprietà:.helper - un oggetto jquery contenente l'helper.originalposition - {top, left} posizione originale dell'elemento.originalsize - {width, height} dimensione originale.position - {top, left} posizione corrente.size - {width, height} dimensione corrente Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

15 Selectable (selezionare oggetti) (versione per la stampa) Guide JavaSc... di 1 14/06/ :15 Selectable (selezionare oggetti) La caratteristica vincente dei file manager grafici rispetto a quelli testuali o alla riga di comando, è la possibilità di selezionare file e cartelle semplicemente selezionandole con un click del mouse, oppure disegnando un rettangolo su più elementi che vengono raggruppati in un'unica selezione. Il metodo.selectable() di jquery UI permette di applicare facilmente questa interazione ad elementi presenti in un interfaccia web, fornendo sia un metodo di selezione multipla "con rettangolo" sia un sistema di selezione di elementi non contigui con l'uso del tasto Ctrl (o Mela) in abbinamento al click sinistro del mouse. Poter selezionare in questo modo degli elementi fornisce un'interazione più veloce e intuitiva con liste di oggetti rispetto a quelle basate, ad esempio, sui tradizionali checkbox dei moduli (provare per credere ( Opzioni Le opzioni pù importanti con le quali personalizzare l'interazione sono: filter : (selettore - "*") permette di identificare specifici elementi da rendere selezionabili, per esempio: $("#lista").selectable({filter : "li.selezionabile"}); Eventi delay : (intero - 0) millisecondi dopo i quali selezionare un elemento. distance : (intero - 0) solo dopo che il rettangolo di selezione sarà sovrapposto a un elemento per i pixel specificati questo verrà selezionato. Questa opzione è strettamente legata a quanto impostato in tolerance. tolerance : (stringa - 'touch') se impostato su 'touch' l'elemento sarà selezionato appena il rettangolo di selezione lo toccherà, altrimenti, se impostato su 'fit', tutto l'elemento dovrà essere all'interno del rettangolo di selezione. Anche in questo caso l'opzione migliore è relativa alle dimensioni dell'area di selezione e degli elementi selezionabili. Touch è spesso la risposta migliore ma con elementi molto concentrati potrebbe rendere difficoltosa e frustrante la selezione. Ecco alcuni esempi ( /jqueryui/esempi/06-selectable-02.html). Gli eventi associati a.selectable() sono: start / stop: lanciati all'inizio e alla fine dell'interazione. selecting / unselecting: lanciati quando un elemento sta per essere selezionato o deselezionato. Potrebbe essere utile per colorarlo diversamente in modo da migliorare il feedback dato all'utente. selected / unselected: lanciati su elementi appena selezionati o deselezionati. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

16 Sortable (ordinare elementi) (versione per la stampa) Guide JavaScript di 3 14/06/ :15 Sortable (ordinare elementi) L'ultima interazione di jquery UI che affrontiamo è.sortable() e nasce dall'unione di più interazioni delle quali condivide molte opzioni:.draggable() e.droppable(). La caratteristica aggiuntiva del metodo rispetto alle interazioni che lo compongono è che gli elementi non vengono solo trascinati e rilasciati, ma vanno a creare un insieme ordinato ricavabile tramite un metodo specifico. In questo modo è possibile offrire all'utente un sistema intuitivo e diretto per ordinare liste di vario genere al posto di metodi più tradizionali come select e campi di testo numerici (esempio ( /guide/esempi/jqueryui/esempi/07-sortable-01.html)). Configurazione Come per le altre interazioni, anche.sortable() ha alcune interessanti opzioni di personalizzazione. Anzitutto condivide opzioni presenti in.draggable(), come axis (per specificare l'asse secondo cui è possibile trascinare un elemento), delay e distance per controllare quando l'interazione fra il mouse e gli elementi deve iniziare, oppure grid per costringere gli spostamenti secondo una griglia in pixel. Il metodo ha anche opzioni proprie, più specifiche per la personalizzazione dell'ordinamento degli elementi: connectwith : (selettore - false) Connette gli elementi ordinabili ad un'altra lista ordinabile, in modo che possano essere trascinati dall'una all'altra. $('.lista').sortable({ connectwith: '.altralista' }); droponempty : (booleano - false) Se impostato su false gli elementi della lista non possono essere rilasciati in una lista collegata (con connectwith) se quest'ultima è al momento vuota. Ecco alcuni esempi ( di personalizzazione. Eventi Gli eventi associati all'interazione, e ai quali possiamo collegare una funzione di callback, sono: start / sort / stop: lanciato all'inizio, durante ed alla fine dell'interazione. change: lanciato durante l'ordinamento, ma sono quando la posizione dell'elemento trascinato è cambiata. beforestop: lanciato quando l'ordinamento è finito ma l'helper (impostato con l'opzione helper) è ancora disponibile. update: lanciato quando l'utente rilascia un elemento e la sua posizione è cambiata. receive: lanciato quando una lista connessa (con connectwith) riceve un elemento dalla lista corrente. remove: lanciato quando un elemento è rimosso da una lista per essere inserito in una collegata. over / out: lanciato quando un'elemento viene spostato su una lista collegata o ne esce. activate / deactivate: lanciato su tutte le liste collegate quando ha inizio l'interazione sulla lista principale. Tutti gli eventi prevedono due argomenti: l'evento nativo del browser ed un oggetto ui con le seguenti proprietà:

17 Sortable (ordinare elementi) (versione per la stampa) Guide JavaScript di 3 14/06/ :15.helper: l'helpercorrente..position: posizione dell'helper..offset: posizione assoluta dell'helper..item: l'elemento trascinato corrente..placeholder: il segnaposto se definito..sender: la lista di provenienza, solo nel caso in cui ci siano liste collegate a quella principale. Metodi specifici Come per le altre interazioni, anche.sortable() supporta dei metodi generici per inizializzare o rimuovere l'interazione, oppure per cambiare alcune opzioni su un'interazione preesistente: //Inizializza la lista con le opzioni di default $("#lista1").sortable(); //Personalizza un'opzione specifica $("#lista1").sortable("option","connectwith","#lista2"); Oltre a questi metodi, comuni a tutte le interazioni,.sortable() ne offre altri utili per gestire l'ordinamento degli elementi nella lista: cancel: cancella l'ultimo cambiamento avvenuto nella lista. È utile per permettere all'utente di tornare sui propri passi, oppure associato agli eventi stop e receive per rimediare ad eventuali ordinamenti errati: }); $("#lista1").sortable({ stop : function (event,ui) { if (ui.item.is(".bloccato")) { // this si riferisce alla lista $(this).sortable("cancel"); } } refresh: aggiorna gli elementi della lista, aggiungendo quelli non presenti al momento dell'inizializzazione dell'interazione (aggiunti, per esempio, con AJAX). serialize: serializza gli id degli elementi ordinati, restituendo una stringa inviabile via AJAX o attraverso un form. La struttura degli id da assegnare agli elementi della lista segue una regola generale del tipo nomevariable_valore, quindi una lista del tipo: <ul id="lista"> <li id="lista_1">uno</li> <li id="lista_3">tre</li> <li id="lista_2">due</li> </ul> Sarà serializzata nella stringa: "lista[]=1&lista[]=2&lista[]=3" toarray: raccoglie gli id degli elementi nella lista e li restituisce sotto forma di array JavaScript. Riprendendo la lista dell'esempio precedente: var lista = $("#lista").sortable("toarray"); //restituisce // lista[0] = "lista_1" // lista[1] = "lista_3" // lista[2] = "lista_2"

18 Sortable (ordinare elementi) (versione per la stampa) Guide JavaScript di 3 14/06/ :15 Per quanto riguarda il metodo serialize, è possibile modificare il comportamento di default passando un secondo argomento sotto forma di oggetto JavaScript contenente una o più delle seguenti opzioni: key: indica una stringa da sostituire alla prima parte dell'id (corrispondente al nome della variabile) attribute: indica un attributo valido dell'elemento da utilizzare al posto di id expression: filtra il valore di id (o dell'attributo specificato con attribute) con un'espressione regolare per estrarne il valore da inserire nella stringa finale. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina

19 Introduzione ai widget di jquery UI (versione per la stampa) Guide J di 2 14/06/ :20 Introduzione ai widget di jquery UI Nelle interfacce delle applicazioni web moderne, i controlli nativi dei browser come select, checkbox e campi di testo, risultano spesso limitativi per le esigenze di interazione con l'utente. In alcuni casi, ad esempio, avere a disposizione un calendario a comparsa per la selezione delle date facilita l'utente rispetto a dover scegliere da tre menu a discesa, magari controllando il giorno della settimana sul calendario del sistema operativo. Questi tipi di controlli web ricadono in jquery UI sotto il nome di Widget. Il nome potrebbe essere in alcuni casi fuorviante, visto che è spesso associato ad applicazioni del desktop, tuttavia in questo caso si tratta solo di controlli atti a semplificare e ordinare la fruizione e l'inserimento dei dati da una pagina web. Quali Widget? Un'altra parte del discorso relativa all'utilizzo dei widget è: quali usare e quando? In linea di principio, è importante utilizzare i widget quando strettamente richiesto, in modo da non sovraccaricare la pagina con eccessivo codice JavaScript in esecuzione, senza lasciarsi abbagliare dai luccichii degli effetti grafici. In definitiva, non sempre i dati vanno divisi in tab o accordion, oppure non sempre mostrare un messaggio con una finestra modale può migliorare il feedback all'utente (chi di voi non ha mai visto alcuni messaggi di errore di Facebook, trovandoli eccessivamente tecnici). Widget disponibili jquery UI comprende nativamente sei tipi di widget, completamente compatibili con i temi UI generati da Theme Roller ( (la web application per la gestione dei temi) e ricchi di opzioni di personalizzazione. I widget che vedremo nelle prossime lezioni sono: Accordion Datepicker Dialog Progressbar Slider Tabs Derivando dalle interazioni, tutti i widget ne prevedono una sintassi simile. È quindi possibile passare un oggetto al metodo che inzializza il controllo, come leggerla e modificarla successivamente: //inizializzo un widget $("#accordion").accordion({ active : 2 }); //leggo un'opzione var active = $("#accordion").accordion("option","active"); // imposto un'opzione $("#accordion").accordion("option","active",1); Oltre ad option, in generale i widget accettano altri tre metodi: destroy: rimuove il widget dall'elemento a cui era associato; disable: disabilita temporaneamente il widget; enable: abilita il widget nel caso in cui sia stato disabilitato.

20 Introduzione ai widget di jquery UI (versione per la stampa) Guide J di 2 14/06/ :20 Voglio di più! In un capitolo successivo di questa guida vedremo come estendere jquery UI con widget personalizzati. Questo processo è semplificato da una nomenclatura e una documentazione abbastanza rigorose, ma proprio per questo è necessario rispettare molte regole e non sempre si raggiunge la flessibilità voluta. Versione originale: HTML.it La vendita, il noleggio, il prestito e la diffusione del contenuto di questa pagina sono vietate, tranne nei casi specificati nella pagina