
guide
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Esaminiamo i componenti dedicati alle operazioni di dragging del framework
Con questo articolo si conclude il ciclo di tutorial dedicati alla versione 1.1 di MooTools: dal prossimo si affronteranno le nuove funzionalità offerte dalle versione 1.2 che è ormai una realtà molto vicina.
Tutti i concetti e le regole presentate finora in questa raccolta costituiscono una solida base per affrontare i nuovi strumenti offerti dalla futura release, i cui cambiamenti maggiori si riscontrano nella sintassi generale e nelle nuove funzionalità, progettate appositamente per migliorare ogni aspetto della versione 1.1.
Non si deve temere quindi un cambiamento drastico che avrebbe azzerato ciò che è stato appreso con la lettura dei precedenti articoli. Per fare un esempio veloce, ora con MooTools è possibile estendere le classi nel seguente (e più elegante) modo:
var Sub = new Class({ Extends: Super, initialize: function() { // start } });
invece che:
var Sub = Super.extend({ initialize: function() { // start } });
Il metodo extend
degli oggetti Class è stato deprecato in favore della proprietà Extends
, ma allo sviluppatore giunge solamente come un cambiamento sintattico: i concetti appresi sull’ereditarietà delle classi e sui relativi vantaggi sono rimasti intatti, ma con la certezza che le meccaniche del framework sono state internamente migliorate.
Dedicheremo comunque in futuro un’ampia parte alla compatibilità e a quelli che sono i maggiori e più importanti cambiamenti.
Ma torniamo alla versione 1.1. In questo articolo, tra i componenti più efficaci che non sono ancora stati descritti, ho deciso di trattare i file Drag.Base e Drag.Move. Questi permettono le cosiddette operazioni di “dragging”, che sono molto utili e diffuse all’interno delle applicazioni di nuova generazione.
Nel gergo informatico un elemento “draggabile” è un elemento trascinabile con il mouse all’interno della finestra o di un determinato elemento contenitore. Il tipo di applicazione più diffusa che ha preso vita da questa funzionalità è sicuramente il “carrello della spesa virtuale”, dove è appunto possibile trascinare i prodotti desiderati all’interno di un carrello virtuale oppure rimuoverli.
Per rendere un elemento trascinabile con l’elegante sintassi Object Oriented di MooTools è sufficiente dichiarare un’istanza della classe Drag.Base o della classe avanzata Drag.Move, e impostare tutte le opzioni desiderate per personalizzare e potenziare la semplice operazione di trascinamento.
Negli esempi successivi utilizzeremo unicamente il costruttore Drag.Move, ma per sfruttare al meglio tutte le sue caratteristiche dedichiamo come di consueto una parte teorica relativa a tutti gli strumenti offerti dalla classe base da cui eredita.
Questo costruttore, che necessita di un doctype XHTML, si aspetta due argomenti: l’elemento su cui applicare l’effetto e le opzioni di personalizzazione. Vediamole:
makeResizable
, vengono modificate rispettivamente ‘width’ ed ‘height’ per ridimensionare l’elemento); false
(non occorre percorrere nessuna distanza aggiuntiva. Se impostato a true
viene preso in considerazione il valore di grid); Con il file Drag.Base.js, oltre all’oggetto Drag.Base, è presente un’estensione del costruttore Element sotto forma di un metodo chiamato makeResizable che permette di ridimensionare un elemento quando l’utente trascina il mouse, proprio come accade comunemente nelle applicazioni desktop. Questa funzione accetta un argomento options
che rappresenta le opzioni della classe Drag.Base. Vediamo un esempio:
// l'elemento 'myElement' sarà ridimensionabile $('myElement').makeResizable({ onComplete: function() { alert('Resize complete'); } });
Anche il costruttore Drag.Move accetta due argomenti: l’elemento al quale viene applicato il dragging e le opzioni. Esso estende Drag.Base e quindi eredita tutte le opzioni definite sopra. In più, aggiunge le seguenti, per effettuare operazioni di dragging avanzato:
false
;Element.getPosition
). Oltre alla classe Drag.Move, il file Drag.Move.js ci offre il metodo makeDraggable del costruttore Element, che rappresenta una scorciatoia al costruttore e che restituisce una sua istanza applicata all’elemento con cui viene richiamato.
Ora che abbiamo analizzato le opzioni e i metodi che i file Drag.Base.js e Drag.Move.js ci mettono a disposizione, è tempo di mettere in pratica quanto abbiamo detto. Per questo ho creato due esempi pratici. Nel primo viene mostrato come impostare gli eventi che vengono azionati rispettivamente all’inzio, durante e al completamento del dragging. Nell’esempio viene modificato il testo che compare nell’elemento e il suo colore, ma ovviamente è possibile compiere operazioni molto interessanti.
Ecco il codice:
var drag = new Drag.Move('box', { onStart: function() { this.element.setStyle('color', 'red').setHTML('Start drag me!'); }, onDrag: function() { this.element.setStyle('color', 'blue').setHTML('You are dragging me!'); }, onComplete: function() { this.element.setStyle('color', 'green').setHTML('You have dragged me!'); }, });
Codice HTML:
<div id="box"> <b>Drag Me!</b> </div>
In questo secondo esempio ho creato una semplice applicazione di drag&drop in cui è possibile trascinare l’elemento all’interno di un contenitore che cambierà colore e testo a seconda dell’evento che verrà azionato. È infatti possibile settare gli eventi personalizzati over
, leave
e drop
al contenitore definito con l’opzione droppables, e questi verranno azionati rispettivamente quando l’elemento draggabile viene trascinato al di sopra , viene trascinato al di fuori oppure viene rilasciato al suo interno.
Inoltre, è stato impostato come limite per il dragging l’elemento “wrapper”: non sarà possibile trascinare il nostro elemento al di fuori di esso.
Vediamo il codice:
var drop = $('drop'); var drag = new Drag.Move('box', { droppables: $$('#drop'), container: $('wrapper') }); drop.addEvent('over', function(){ this.setHTML('Over!').setStyle('background-color', '#000000'); }); drop.addEvent('leave', function(){ this.setHTML('Leave!').setStyle('background-color', '#FF9966'); }); drop.addEvent('drop', function(){ this.setStyle('background-color', 'red').setHTML('Drop!'); });
Codice HTML:
<div id="wrapper"> <div id="box"> <b>Drag Me!</b> </div> <div id="drop"></div> </div>
Ricordo infine che è necessario posizionare entrambi i codici sopra riportati all’interno dell’evento domready
, come sempre.
Ecco entrambe le applicazioni sono pronte per il download.
Nella sezione demo del sito ufficiale è possibile trovare tre esempi che mettono in mostra altre caratteristiche interessanti: Drag.Absolutely, Drag.Cart e DragDrop .
In questo ultimo tutorial dedicato a MooTools 1.1 abbiamo analizzato le potenzialità delle classi Drag.Base e Drag.Move, per creare applicazioni complesse e personalizzate di dragging e drag&drop. Come al solito, il framework ci offre tutti gli strumenti necessari basati sulle solide sintassi degli oggetti Class e sui concetti di ereditarietà affrontati nei precedenti articoli.
Nella prossima release anche i componenti Drag verranno ulteriormente potenziati e migliorati.
Alla prossima con le novità sulla versione 1.2 di MooTools!
Se vuoi aggiornamenti su Drag&drop con MooTools inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
Al DroidCon 2017, Luca Pisani presenta i sensori e le nuove schede UDOO e spiega come sono fatte e come […]
Tutti i linguaggi per diventare uno sviluppatore di app per Android.
Come creare applicazioni per il Web con PHP e MySQL per il DBMS.
Tutte le principali tecnologie per diventare uno sviluppatore mobile per iOS.
I fondamentali per lo sviluppo di applicazioni multi piattaforma con Java.
Diventare degli esperti in tema di sicurezza delle applicazioni Java.
Usare Raspberry Pi e Arduino per avvicinarsi al mondo dei Maker e dell’IoT.
Le principali guide di HTML.it per diventare un esperto dei database NoSQL.
Ecco come i professionisti creano applicazioni per il Cloud con PHP.
Lo sviluppo professionale di applicazioni in PHP alla portata di tutti.
Come sviluppare applicazioni Web dinamiche con PHP e JavaScript.
Fare gli e-commerce developer con Magento, Prestashop e WooCommerce.
Realizzare applicazioni per il Web utilizzando i framework PHP.
Creare applicazioni PHP e gestire l’ambiente di sviluppo come un pro.
Percorso base per avvicinarsi al web design con un occhio al mobile.
Realizzare siti Web e Web application con WordPress a livello professionale.
Come creare database e collection, inserire, estrarre, aggiornare e rimuovere dati da una base di dati MongoDB con Python
Impariamo ad utilizzare Takamaka, una blockchain Java Full Stack, per scrivere codice Java installabile ed eseguibile su una blockchain
StandardJS è uno strumento in ambiente Node.js, per la definizione ed il controllo di uno standard di codifica in JavaScript.
Come creare un’applicazione per la gestione di un negozio di commercio elettronico con il framework PHP Laravel. Una guida completa che, partendo dalla configurazione di un ambiente di sviluppo basato su Laravel, descrive nel dettaglio tutti i passaggi necessari per pubblicare un e-commerce con cui promuovere e vendere i propri prodotti online