mercoledì 29 novembre 2006

Come ti sostituisco i webparts 1^ parte

In questo post intendo mostrarvi alcuni metodi per ottenere effetti stupendi, portabili e soprattutto gratuiti.

Cos'è webparts...

"Web parts" è un insieme di api in grado di implementare e customizzare componenti in una pagina web conferendo dinamicità sia lato client e sia lato server. Da un punto di vista di purista delle "user interface", si tratta di un piccolo framework client-server orientato allo sviluppo delle interfacce utente.
Quindi si tratta di una sorta di fusione tra tecnologie lato client e lato server in grado di poter comunicare tra loro attraverso l'utilizzo di tecnologie ajax, addizionate al fatto di presentare la stessa interfaccia con un look and feel e una usability elevata, come se si trattasse di una applicazione client eseguibile.

Ma è necessario webparts?

Direi che nella maggior parte dei casi è sufficiente utilizzare una tecnlogia standard di programmazione delle user-interface basata sull'utilizzo di componenti riusabili non solo in ambito dello stesso ambiente di sviluppo, ma anche in ambienti diversi come php, java, python, ruby,...
Questo porta a pensare ai problemi dello sviluppo in chiave puristica. In questo ambito non intendo fare una trattazione sul senso o meno di utilizzare una tecnologia che incastra business tier con UI tier, bensì proporrò tecnologie alternative per la realizzazione di componenti simili.

D'ora in avanti la nostra pagina delle idee sarà http://www.live.com/ , al fine di emulare il risultato ottenuto grazie all'utilizzo dei webparts. (Spero che microsoft non me ne voglia... )

Il drag 'n drop

Il primo effetto che andremo ad analizzare è il drag 'n drop dei contenuti. Quindi proviamo ad aggiugnere dei contenuti personalizzando la pagina e con l'uso del mouse spostiamo le componenti, di ordine sulla stessa colonna o tra colonne diverse.

Il foglio dove sono presenti tutti i vari elementi può essere visto come una tablella con una sola riga e 2 colonne. In ogni colonna sono presenti elementi di una semplice lista. Ogni elemento di una singola lista è caratterizzato dal fatto che non esiste solo un testo, ma esiste un elemento html div, il quale contiente tanti altri elementi html che assieme compongono il singolo conenuto live.com .

Ecco di sotto, tanto per mettere in pratica quello che ho appena detto, il codice html che rappresenta lo scheletro dell'applicativo.

<table>
<tbody>
<tr>
<td>
<div id="el1-1" style="border: 1px solid;" >Conenuto Colonna 1 elemento 1</div>
<div id="el1-2" style="border: 1px solid;" >Conenuto Colonna 1 elemento 2</div>

</td>
<td>
<div id="el2-1" style="border: 1px solid;" >Conenuto Colonna 2 elemento 1</div>
<div id="el2-2" style="border: 1px solid;" >Conenuto Colonna 2 elemento 2</div>

</td>
</tr>
</tbody>
</table>



Se si parla di azioni occorre capire con un diagramma gli eventi dell'utente che caratterizzano il drag and drop.

  1. Stato di partenza (stato 0) al termine del caricamento della pagina
  2. Stato di presa (drag) caratterizzato dalla pressione (e mantenimento) del tasto sinistro (destro per chi ha impostato l'inversione dei tasti) del mouse
  3. Stato di drop caratterizzato dal rilascio del tasto sisnistro del mouse
  4. Azioni successive identificate dall'inserimento dell'elemento all'interno della lista
  5. Ritorno allo stato 1
In questo modo abbiamo rappresentato quello che dovrebbe accadere.

Adesso scrivamo il codice javascript... mmmh cioè implementiamo un framework che ci permette di effettuare questo genere di effetti sul web.
Per questo esempio ho scelto una estensione/implementazione di javascript prototype framework (link alla sua pagina) chiamata script.aculo.us (link alla sua pagina) , che non è una offesa al programmatore javascript, ma è semplicemente un framework che permette di eseguire alcuni effetti come il drag and drop senza problemi.

Per utilizzare questo framework occorre chiaramente scaricare la libreria (segui pure le istruzioni sul sito http://script.aculo.us/ ), e richiamare i seguenti files (necessari):
  1. prototype.js <script language=JavaScript src="prototype.js"></script>
  2. effects.js <script language=JavaScript src="effects.js"></script>
  3. dragdrop.js <script language=JavaScript src="dragdrop.js"></script>
Dopo l'html che identifica la tabella dichiariamo n oggetti di tipo Draggabble quanti elementi dobbiamo animare. Quindi il codice dopo la tabella sarà:

<script type="text/javascript">

oDrag1 = new Draggable('el1-1', {revert:true});

oDrag2 = new Draggable('el1-2', {revert:true});

oDrag3 = new Draggable('el2-1', {revert:true});

oDrag4 = new Draggable('el2-2', {revert:true});

</script>


Se eseguiamo la pagina ci accorgiamo di poter effettuare il drag and drop, ma non abbiamo un punto di drop nel sistema, di fatto riusciamo a prendere un elemento, ma non riusciamo a depositarlo nel punto giusto. Quindi occorre consocere 2 cose sostanziali:
  1. Tutti gli elementi che si possono spostare in un solo parametro
  2. Gli elementi di distinazione (identificati da un ID).
A questo punto occorre modificare l'html nel seguente modo:
  1. Il parametro che può raggruppare elementi diversi è il class (utilizzato anche nei CSS). Quindi definiremo inseriremo un class="dnd" per ogni elemento draggabile.
  2. Occorre definire tramite un div, un'area dove poter droppare gli elementi. Quest'area può essere definita introducendo un elemento div, caratterizzato da una certa altezza e una certa larghezza (altrimenti sarebbe aderente agli elementi)
Quindi la tabella modificata sarà la seguente:

<table>
<tbody>
<tr>
<td >
<div id="drop1" style="width:300px; height:400px">
<div id="el1-1" style="border: 1px solid;" class="dnd">Conenuto Colonna 1 elemento 1</div>
<div id="el1-2" style="border: 1px solid;" class="dnd">Conenuto Colonna 1 elemento 2</div>
</div>
</td>
<td >
<div id="drop2" style="width:300px; height:400px">
<div id="el2-1" style="border: 1px solid;" class="dnd">Conenuto Colonna 2 elemento 1</div>
<div id="el2-2" style="border: 1px solid;" class="dnd">Conenuto Colonna 2 elemento 2</div>
</div>
</td>
</tr>
</tbody>
</table>

Non ci resta che animare il tutto introducendo l'oggetto Droppable appena sotto l'istanza degli oggetti draggable.
Quindi:

Droppables.add('drop1', {
accept: "dnd",
onDrop:function(element, droppableElement){
$("drop1").appendChild($(element));
}
});

Droppables.add('drop2', {
accept: "dnd",
onDrop:function(element){
$("drop2").appendChild($(element));
}
});



Provate pure l'esempio.

Il punto di partenza dell'evento drop

Dal codice emerge una cosa importantissima: al momento del drop viene eseguito il codice all'interno del metodo onDrop.
Questo è molto importante, dato che è possibile aggiungere alla funzione eventi client ed eventi server attraverso anche l'ausilio di ajax.

Qualche piccolo ritocco...

Sarebbe bello che il puntatore del mouse cambi quando viene posizionato al di sopra del div draggable. In questo modo aumenta l'usabilità dell'effetto e cominca la possibilità di spostamento all'utilizzatore.

Quindi sfruttando la classe di appartenenza dell'elemento draggable ("dnd"), è possibile impostare uno stile adeguato all'interno dei tag head:

<style>
.dnd{
cursor:move;

}
</style>


Adesso tocca a voi...

Sarebbe bello che tra i commenti al blog figurassero proposte di sostituzione di altre web-parts. Se qualcuno vuole approfondire, può trovare tutti i riferimenti presso questo il seguente url:

http://wiki.script.aculo.us/scriptaculous/show/DragAndDrop

Qui trovate l'esempio finito

http://linotelera.googlepages.com/BlogPost1_sample.html

A presto

Jan

martedì 28 novembre 2006

Si parte

Ho deciso di pubblicare un blog che conterrà idee e soluzioni ad alcuni enigmi dello sviluppo di applicazioni web, basate su User Interface Engine, alias DOM e Ajax.

Lo scopo di questo blog è quello di fornire una valida soluzione a svariati enigmi nella costruzione delle pagine web.
Avrete anche l'opportunità di inserire i vostri commenti che potranno diventare veri e propri post.

Un po' di netiquette:
Si prega di non scrivere nulla di esplicitamente offensivo verso persone/animali/aziende. Non abbiate paura di mettere in luce problemi, bugs o incongruenze di prodotti già affermati sul mercato del software e hardware. La verità danneggia solo gli incompententi...

A presto

Sir Lino "Jan" Telera