Come realizzare un Autosave Ajax nelle XPages

Riprendo a scrivere articoli tecnici di sviluppo per far capire come realizzare una funzione Autosave nelle vostre applicazioni XPages che funzioni in AJAX mode (un po' come fa Google quando scrivete una mail n.d.r)

Grazie a Sven Hasselbach che tempo fa rispose ad una mia domanda su Stack Overflow ho deciso di realizzare un demo di questa funzionalità e vi spieghero come costruirla nelle vostre applicazioni XPages

All'interno della vostra XPages o Custom Control create un event handler allo stesso livello di root della pagina in cui siete dando la proprietà event in modo che non rappresenti un reale evento sul componente


<xp:eventHandler event="autoSaveEvent" id="autoSaveDoc" submit="false">
<xp:this.action>
<xp:saveDocument />
</xp:this.action>
</xp:eventHandler>


successivamente createvi poi una libreria JS che aggancere con il seguente codice che serve per il CKEDITOR per scrivere le modifiche all'interno dei campi TEXTAREA di supporto al controllo stesso


function CKEDITOResubmit(idCKEDITOR){
var rte=dijit.byId(idCKEDITOR);
var txta=XSP.getElementById(idCKEDITOR+'_h');
if(!rte || !txta) return;
txta.value = rte.getValue();
var mod=XSP.getElementById(idCKEDITOR+'_mod');
mod.value=rte.isModified(txta.value);
return true;
}


nella vostra XPages createvi un componente di tipo Output Script ed inserite il seguente codice:


function AutoSave(){
executeOnServer('autoSaveDoc',null,
{'valmode': 1,
onStart:function() {
for(var instanceName in CKEDITOR.instances) {
    CKEDITOResubmit(instanceName)
}

console.log("autosave start");
},
onComplete:function() {
console.log("autosave complete")
},
onError: function() {
console.log("autosave error") }
})
}



la funzione executeonServer (è una funzione JS che potrete prendere da qui) è davvero comodo poichè lato client JS potrete richiamare l'event handler server side che scatena effettivamente il salvataggio in background.

executeOnServer('autoSaveDoc',null,{ 'valmode': 0 })


Infine nel Bottone che abilita l'AutoSave basta inserire una stringa come questa per lanciare ciclicamente ogni 10 secondi l'autosave


var interval2 = setInterval(AutoSave, 10000);


e per poterlo disattivare potete usare la funzione JS


clearInterval(interval2);


Il risultato che potete ottenere è qualcosa di simile QUESTA DEMO (provate ad abilitare l'autosave tramite il bottone) e scrivete all'interno del body in modo da fargli sentire i cambiamenti



Nel mio esempio ho usato il componente Dojo dojox.Toaster per visualizzare i messaggi di salvataggio