Come realizzare un Autosave Ajax nelle XPages

autosave ajax xpages tips developer

  • 1 commenti
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

Image:Come realizzare un Autosave Ajax nelle XPages

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

1 Commenti:

  • #1 Paul Stockinger 05/13/2015 1:06:43 AM

    Hello,

    Is there a sample NSF to download of this? I have not been successful implementing this solution as described. One possible difference is that my application has to open in read mode and not default to edit or create new document.

    Thank you,

    Paul

Commenta articolo
 

Questo spazio web è stato creato da per un uso pubblico e gratuito. Qualsiasi tipo di collaborazione sarà ben accetta.
Per maggiori informazioni, scrivete a info@dominopoint.it

About Dominopoint
Social
Dominopoint social presence: