May 122013
 

Proviamo a costruire un albero i cui elementi possono essere trascinati, potrebbe tornare molto utili per organizzare diverse informazioni.

A livello di html si tratta di costruire una lista contenente elementi di secondo livello:


<h2>Sposta gli elementi dell'albero</h2>
<ul id="target">
<li>And a list</li>
<li>With items</li>
<li>
And items containing subitems
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li>And more items containing subitems
<ul>
<li>Sub 4</li>
<li>Sub 5</li>
</ul>
</li>
</ul>

Useremo anche un piccolo css per creare comodo spazio di trascinamento (è bene non trascurare l’aspetto visivo):


ul {
border: 1px dashed gray;
margin: 10px;
padding: 10px 10px 10px 30px;
}

Infine rendiamo tutto operativo con jQuery UI


$(document).ready(function() {
$('ul').sortable({connectWith: 'ul'});
});

L’esempio

 

May 102013
 
Janvas è un’applicazione che permette di disegnare grafica vettoriale, creare siti web e sviluppare applicazioni con l’editor Javascript, CSS  integrato.
I files creati vengono memorizzati su Google Drive rendendo questa applicazione accessibile da qualunque luogo.
Janvas è ideale per lo sviluppo di progetti in team, infatti, grazie alle possibilità offerte da Google Drive, ogni progetto (o parte di esso) può essere facilmente condiviso con altri.
Offre molte possibilità di utilizzo sia nell’ambito della scuola e dell’insegnamento che in ambito lavorativo.
Ci sono diversi esempi sul sito che mostrano la flessibilità e le potenzialità di Janvas.
440x280_05
May 042013
 

Lo scopo di trascinare elementi attraverso una pagina web spesso è quello di rilasciarli in una landing area particolare.

Costruiamo una pagina con un elemento da trascinare e una landing area costituita da un div, i nostri elementi saranno opportunamente formattati tramite css:


<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
#target { width: 400px;height: 100px;border: 2px solid black;}
</style>

...

<span>SPAN</span>
<div id="target">Rilascia il tag span nel rettangolo</div>

Come nel post precedente durante il trascinamento cambieremo lo stile all’elemento trascinato.

Attiviamo lo script al document.ready:


$(document).ready(function() {
$('#target').droppable();
$('span').draggable();
});

In questo modo abbiamo definito l’elemento trascinabile e la landing area per la ricezione degli elementi trascinati.

Si tratta di gestire gli eventi del rilascio all’interno dell’area e del passaggio sul bordo, assoceremo due semplici funzioni che scriveranno all’interno del target:


$('#target').droppable({
drop: function() {
$(this).html('DROPPED!');
},
out: function() {
$(this).html('ancora un po...');
}
});

L’esempio

 

 

May 022013
 

In attesa che HTML5 possa essere utilizzato senza ricorrere a strategie di fallback troppo costose, in altre parole, inattesa che ie7 e ie8 scendano ulteriormente come quota di mercato, se vogliamo trascinare elementi in giro per la nostra pagina web possiamo utilizzare jquery UI. La libreria dovrà essere collegata alla pagina dopo jQuery:


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.16/jquery-ui.min.js"></script>

Nell’html inseriremo alcuni elementi, senza una particolare strategia, faremo in modo che siano tutti trascinabili (draggable):


<h2>Trascina tutti gli elementi in giro per lo schermo</h2>
<p>Paragrafo trascinabile</p>
<h2>Titolo trascinabile</h2>
<ul>
<li>Prima lista</li>
<li>Seconda lista</li>
</ul>

Per renderli trascinabili al document.ready applicheremo il selettore universale e il metodo draggable di jQuery UI:


$(document).ready(function() {
$('body *').draggable();
});

Ultimo step, durante il trascinamento applicheremo un css particolare usando una classe appesa al volo da jQuery UI:


<style>
.ui-draggable {border: 1px dashed black;}
.ui-draggable-dragging {border: 1px solid red;}
</style>

L’esempio

 

Apr 302013
 

Le chiamate AJAX classiche lavorano con l’oggetto XMLHTTPREQUEST (XHR). La maggior parte dei browser non consenton ad XHR di accedere ad altri server, o meglio a domini diversi rispetto a quello da cui parte la chiamata. Pero ovviare a questa limitazione è stato invantato JSONP, ovvero il JSON viene avvolto all’interno di una chiamata a una funzione. Invece di fare una richiesta AJAX, viene aggiunto un elemento script che punta allo script JSONP all’interno del documento HTML e una funzione di callback viene chiamata per accedere allo script.

Ovviamente attenzione perché i vendors hanno fatto questa scelta per motivi di sicurezza: infatti no c’è nessuna validazione del codice prima dell’esecuzione, quindi serve cautela.


<!DOCTYPE html>
<html lang="en">
<head>
<title>JSONP</title>
</head>
<body>
<h2>Premi il bottone per effettuare una richiesta.</h2>
<button id="trigger">GET</button>
<br>
<div id="target"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
$.getJSON('http://search.twitter.com/search.json?q=jquery&callback=?', function(data) {
$.each(data.results, function(index, value) {
$('#target').append(value.text + '<br>');
});
});
});
});
</script>
</body>
</html>

La maggor parte del codice dovrebbe essere chiara alla luce dei post precedenti.

Per impostazione predefinita, il gestore JSONP in jQuery cerca il parametro callback=? nella stringa di query. Il “?” viene sostituito con una funzione di callback jQuery generato da inserire nel JSONP dal server È possibile modificare le impostazioni se il parametro ha un altro nome di callback o quando il metodo di callback non è parametrizzato. Il miglior consiglio è quello di evitare, quando possibile JSONP

L’esempio

 

 

Apr 282013
 

Un modo molte semplice e veloce per costruire uno slider potrebbe essere affidarsi a twitter bootstrap, un insieme di widget ed elementi per creare rapidamente layout gradevoli e funzionali.

Come prima cosa serve scaricare il pacchetto composto da css, icone e file js da qui

Ovviamente sia il css sia il javascript andranno collegati alla nostra pagina:


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
...
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>

Oltre al nostro framework, come si può vedere, avremo  bisogno anche di jQuery.

Montiamo l’html che sarà composto da 3 parti: l’indicatore di avanzamento, le immagini e i pulsanti.

Partiamo dall’indicatore di avanzamento:


<ol>
<li data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>

Procediamo con le nostre immagine e le relative label sottostanti:


<div>
<div>
<img src="img/DSC00079.JPG" alt="">
<div>
<h4>Alpe d'Huez</h4>
<p>Arrivo in vetta.</p>
</div>
</div>
<div>
<img src="img/DSC00081.JPG" alt="">
<div>
<h4>Col de la Croix-de-Fer</h4>
<p>La scalata.</p>
</div>
</div>
<div>
<img src="img/DSC00085.JPG" alt="">
<div>
<h4>Col du Télégraphe</h4>
<p>Riposo.</p>
</div>
</div>
</div>

E infine i due bottoni di avanzamento:


<a href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a href="#myCarousel" data-slide="next">&rsaquo;</a>

Infine attiviamo il tutto:


$('.carousel').carousel()

L’esempio

Apr 262013
 

Quali sono gli eventi ajax? Prepariamo un piccolo tutorial per esporli tutti.

Partiamo da una semplicissima pagina che esegue una chiamata ajax:

<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>
<div id="target"></div>
<div id="log"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
$('#target').load('snippet.html');
});
});
</script>

A questo punto aggiungiamo una porzione di script che appenderà al document la gestione di tutti gli eventi e quando questi si scatenano scriverà all’interno del div con id log

$.each(('ajaxError ajaxSend ajaxStart ajaxStop ajaxSuccess ajaxComplete').split(' '),
function( i, name ) {
$(document).bind(name, function(event, xhr) {
$('#log').append('Event: ' + event.type + '<br/>');
});
});

L’esempio

Apr 242013
 

Un problema classico e particolare della chiamata ajax potrebbe essere legato al timeout della chiamata.

Potremmo ipotizzare che dopo un po’ non siamo disposti ad aspettare oltre il server e procederemo con un messaggio di errore.

Nel nostro caso fissereme questo timeout a un secondo.

Riutilizzaremo ancora una volta la nostra struttura consolidata:


<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>
<div id="target"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
...
});
</script>

E andiamo a impostare la chiamata ajax specificando un timeout:


$.ajax({url: 'sleep', timeout : 1000})

quello che succederà dopo sarà gestito dalle funzioni done() e fail() in modo tradizionale


.done(function(data, xhr) {
$('#target').append('ok: ' + data);
})
.fail(function(xhr, text, error) {
$('#target').append('Timeout: ' + error);
});

Nel nostro caso non trovando la url, andrà in timeout

L’esempio

 

Apr 222013
 

Oltre a gestire il successo o l’insuccesso della chiamata ajax potrebbe essere necessario avere qualche informazione in più sul motivo dell’insuccesso.

Predisporremo una chiamata simile a quelle del post precedenti ma questa volta chiameremo una url non esistente:


<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>
<div id="target"></div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#trigger').click(function() {
$.ajax('url-non-esistente')
...
});
});
</script>

Nel caso in cui tutto andasse bene, ma in questo contesto sarebbe un problema, abbiamo il metodo done():


.done(function(data, xhr) {$('#target').append('Esito OK');})

Se invece le cose andassero male come previsto useremo fail() e gestiremo tramite i parametri di ingresso il codice dell’errore e il messaggio testuale, nel nostro esempio saranno rispettivamente codice errore 404 e messaggio: “file not found”


.fail(function(xhr, text, error) {
$('#target').append('Errore! Code ' + xhr.status + ' and text ' + error);
});

L’esempio

Apr 202013
 

Quando facciamo chiamate ajax e quindi richieste asincrone al nostro web server, potremmo incappare nel problema delle chiamate fantasma: ovvero faccio una richieste, ovviamente resto nella pagina, ma per qualche motivo il server non risponde, vediamo come gestire questa situazione.

La prima parte di html è semplice: bottone e div target:


<h2>Premi il pulsante per effettuare una richiesta ajax.</h2>
<button id="trigger">GET</button><br>

La parte successiva la dedicheremo a gestire la chiamata in modo tradizionale, chiederemo un json:


$(document).ready(function() {
$('#trigger').click(function() {
...
});
});

A questo punto si tratta di strutturare la chiamata ajax in modo un po’ diverso,

ovvero alla chiamata ajax passeremo come coppia key/value la url e il dataType


e successivamente useremo il metodo then() che accetta due parametri che saranno due funzioni di callback

una per il successo, la prima, una per la gestione dell’errore, la seconda.


.then(
function(data) {$('#target').append('Valore restituito: '+ data.name + '<br>');},
function() {$('#target').append('Chiamata AJAX fallita.<br>');}

Ultimo step con il metodo always() dichiareremo la fine delle operazioni, dato che avviene sia in caso di successo sia in caso di insuccesso.


.always(function() {
$('#target').append('FINE');

L’esempio