Implementiamo uno degli effetti piu’ stupefacenti e richiesti con cakephp.
Gli helpers di cakephp sono degli strumenti che mettono a disposizione numerose funzioni utilizzabili nelle view. Per implementare l’effetto del drag & drop attraverso ajax, utilizzeremo proprio uno di questi helper che, guarda caso, si chiama proprio ajax.
Per prima cosa e’ necessario informare il nostro framework (cakephp) che vogliamo utilizzare questo helper, per cui nel controller in cui implementeremo l’effetto dovremo aggiungere la seguente istruzione:
var $helpers = array('Html','Javascript', 'Ajax');
Inoltre dovremo inoltre aggiungere la libreria script.aculo.us su cui si appoggia il nostro helper. Nel nostro layout aggiungeremo quindi:
<?php echo $html->charsetTag('UTF-8')?>
<?php echo $javascript->link('prototype.js');?>
<?php echo $javascript->link('scriptaculous.js');?>
dopo ovviamente aver scaricato e copiato la libreria nella directory /webroot/js.
A questo punto dobbiamo creare la view che conterra’ gli elementi oggetto del nostro drag&drop; per semplicita’ creeremo 2 blocchi div e faremo in modo di poter trascinare il primo (Elemento Drag) sul secondo (Elemento Drop) per poi scatenare un evento su di un terzo div (result).
<div id="drag" class="drag_class">Elemento Drag</div> <div id="drop_remote" class="drop_remote_class">Elemento Drop</div> <div id="result"></div>
Ora dobbiamo definire i ruoli dei due elementi attraverso i metodi drag e dropRemote del nostro helper ajax:
<?php echo $ajax->drag('drag', array('revert' => true));?>
<?php echo $ajax->dropRemote('drop_remote', array('accept'=>'drag_class'),
array( 'url'=>'/controller/dragdrop', 'update' => 'result',
'with'=>"'data=' + encodeURIComponent(element.id)")); ?>
La prima istruzione trasforma il primo elemento in “draggabile”, la seconda invece trasforma il secondo elemento in “droppabile” che accetta elementi solo elementi “draggabili” di classe drag_class.
Inoltre quando l’Elemento Drag viene trascinato sull’Elemento Drop, viene richiamato il metodo dragdrop del controller controller a cui viene passato l’id dell’Elemento Drag. L’output della view del metodo dragdrop andra’ ad aggiornare l’oggetto con id result.
Definiamo quindi il metodo dragdrop:
function dragdrop()
{
$this->set('data',$this->data);
$this->layout = 'ajax';
}
e la corrispondente view (dragdrop.thtml) che molto semplicemente visualizzera’ cio’ che viene passato al controller:
<?php echo $data;?>
Il risultato sara’ quindi che trascinando l’Elemento Drag sull’Elemento Drop nel div result verra’ visualizzato l’id dell’Elemento Drag (nel nostro caso drag).
Gli sviluppi e le possibili applicazioni sono molteplici; per esempio l’Elemento Drag potrebbe essere un prodotto in un carrello che viene trascinato nel cestino (Elemento Drop) e di conseguenza cancellato.
In questo caso il metodo dragdrop ricevera’ l’id del prodotto e provvedera’ a cancellarlo dal db (o sessione) e provvedera’ a aggiornare i rimanenti prodotti nel carrello.
Per approfondire:
- helpers di cakephp (tra cui ajax)
- API dell’helper ajax
Entries (RSS)