Le RIA sono applicazioni Web che possiedono le caratteristiche delle normali applicazioni desktop e la possibilità di trascinare gli oggetti da una parte all'altra dello schermo utilizzando il mouse è proprio una di queste caratteristiche. In questo articolo vediamo come implementare il drag and drop nelle nostre applicazioni Web.
Per realizzare questo tutorial utilizziamo il Flex Framework e Flash Builder. Flex infatti mette in campo tre componenti per ili drag and drop:
- Drag Initiator
- Drag Source
DragProxy - Drop Target
dropTargetDragSource
Nell'esempio che realizzeremo l'oggetto da spostare sarà un component di tipo Image, si può realizzare il drag and drop anche altri tipi di oggetto, ma è bene ricordare che solo i component che estendono la classe IUIComponent possono essere collegati (bind) agli event listener di drag e drop.
Drag and drop in un singolo contenitore
Per prima cosa apriamo Flex Builder (o Flash Builder) e spostiamo sullo stage un contenitore, nel nostro caso un Canvas, all'interno del quale inseriamo un component di tipo Image. È di fondamentale importanza definire un colore di sfondo per il Canvas, altrimenti non sarà possibile il drop, poichè lo sfondo trasparente non è un adeguato drop target.
Dobbiamo, poi, stabilire le dimensioni del Canvas e la proprietà source del component Image.
Quindi attiviamo i listener per gli eventi di drag e drop sul Canvas e di mouse move sull'immagine. All'evento di mouseMove sull'Image associamo il un metodo onMouseMove, così definito:
In questo metodo vengono definiti il drag initiator e il drag source (creato a partire dal drag initiator) e poi viene invocato il metodo doDrag
DragManager
Gli eventi di drag e drop sul canvas saranno intercettati dai metodi onDragEnter
onDrop
private function onDragEnter(evt:DragEvent):void
{
if (evt.dragSource.hasFormat('source_img'))
{
DragManager.acceptDragDrop(Canvas(evt.currentTarget));
}
}
private function onDrop(evt:DragEvent):void
{
Image(evt.dragInitiator).x = Canvas(evt.currentTarget).mouseX;
Image(evt.dragInitiator).y = Canvas(evt.currentTarget).mouseY;
}
Il metodo onDragEnter
Canvas
dragEnter
onDragEnter
Il metodo onDrop
Definizione di un drag proxy
Se non esplicitamente specificato, Flex mostrerà il dragProxy di default. Il drag proxy può essere facilmente personalizzato modificando l'invocazione del metodo doDrag.
Per specificare il proxy dobbiamo passare al metodo doDrag alcuni parametri opzionali, nell'ordine:
| Parametro | Descrizione |
|---|---|
dragImage
|
è l'immagine da visualizzare durante il dragging (deve essere un oggetto di tipo Image) |
xOffset
|
indica l'offset sull'asse x rispetto all'angolo in alto a sinistra del drag initiator |
yOffset
|
indica l'offset sull'asse y rispetto all'angolo in alto a sinistra del drag initiator |
alpha
|
valore compreso tra 0 e 1 che indica il grado di opacità dell'immagine (0 è trasparente, 1 è opaco) |
xOffset e yOffset sono solitamente numeri negativi e servono per rispettare la posizione iniziale del mouse sull'oggetto trascinato, fino alla fine dello spostamento. Se alpha non è specificato, viene utilizzato il valore di default pari a 0.5.
Modifichiamo il onMouseMove aggiungendo le linee di codice che ci servono a definire il drag proxy:
Nota è necessario stabilire le dimensioni dell'immagine del drag proxy, altrimenti non sarà visualizzata.
Drag and drop con componenti list-based
A differenza degli altri component, quelli basati su List (List, HorizontalList, TileList, Menu, Tree, DataGrid, PrintDataGrid) gestiscono nativamente le funzionalità di drag and drop. L'unica condizione per effettuare il drag and drop è che la struttura dei data provider dei component di partenza e destinazione sia la stessa.
Realizziamo ora un esempio con due component list-based. Per prima cosa trasciniamo due List sullo stage e definiamone le dimensioni. Nel nostro esempio il dataProvider della prima lista è definito manualmente al creationComplete dell'applicazione.
Per definire il drag initiator è necessario impostare a true la proprietà dragEnabled, mentre per definire il dropTarget è necessario impostare a true la proprietà dropEnabled delle List così come mostrato di seguito (file ListDragDrop.mxml).
A questo punto, il drag e drop dalla lista 1 alla lista 2 funziona correttamente, solo che al momento del drop l'oggetto viene copiato nella lista di destinazione. Per evitare la copia ed effettuare solo lo spostamento dell'oggetto è necessario impostare a true
dragMoveEnabled
dragMoveEnabled
CTRL
cmd
<mx:List id="lista_partenza" x="0" y="0" width="180" height="230"
labelField="Nome"
dragEnabled="true"
dragMoveEnabled="true" />Talvolta, i dati possono subire delle modifiche
List
DataGrid
dataProvider
Modifichiamo l'esempio precedente sostituendo la List
DataGrid
true
dropEnabled
DataGrid
DataProvider
List
Osserviamo che all'operazione di drop nel datagrid verranno visualizzate tutte le informazioni riguardanti il singolo oggetto, cosa che non avveniva con la lista.
<mx:DataGrid id="dest_datagrid" x="0" y="0" width="280" height="230"
dropEnabled="true">
<mx:columns>
<mx:DataGridColumn headerText="Nome" dataField="Nome" />
<mx:DataGridColumn headerText="Cognome" dataField="Cognome" />
<mx:DataGridColumn headerText="Età" dataField="Eta" />
</mx:columns>
</mx:DataGrid>
