Ciao a tutti,
non so se vi è mai capitato di dover modificare il codice html generato dal framework RD3. A me si, perchè ho ritenuto che era il modo più corretto per ottenere il risultato desiderato. Faccio un esempio.
Vi illustro di seguito la procedura che utilizzo per gestire queste situazioni.
- individuo il file js RD3 che controlla l’oggetto che devo personalizzare
- individuo la funzione che costruisce il “dom” che voglio personalizzare
- faccio un proxy della funzione per eseguire, a seconda dell’esigenza, codice prima e dopo la chiamata al metodo del framework
Spiego meglio quello che avviene nell’ultimo step.
Generico proxy di funzione javascript
Questa è la definizione della funzione proxy che ha tre parametri: la funzione proxed, la funzione da eseguire prima della proxed, la funzione da eseguire dopo la proxed.
La funzione before viene eseguita passando gli stessi argomenti della funzione proxed.
La funzione after viene eseguita passando gli argomenti e il risultato della funzione proxed.
/** Proxy used to change behaviour of third party function */
var FunctionProxy = function (fn, before, after) {
return function () {
if (before != null) {
before.call(this, arguments);
}
var result = fn.apply(this, arguments);
if (after != null) {
after.call(this, arguments, result);
}
return result;
};
}
Esempio: gestione upload di un unico file tramite HTML5 uploader
Voglio usare la modalità di upload mediante SetMultiUpload su campo statico.
Purtroppo anche impostando maxsize a 1 la dialog box mi permette di selezionare più di un file (versione 20, non so le successive).
Procedo come descritto sopra.
- individuo il file js: PField.js
- individuo la funzione: PField.prototype.CreateHTML5Uploader
- creo il proxy: la funzione originaria aggiunge l’attributo “multiple” se trova la variabile MultiUpload a true e non verifica il MaxUploadFiles impostato, decido quindi di agire in post e rimuovere l’attributo se MaxUploadFIles è uguale a 1. Segue il codice.
PField.prototype.PostCreateHTML5Uploader = function (arguments, result) {
var fileInput = result;
// Support HTML5 Uploader Single File
if (this.MultiUpload && this.MaxUploadFiles == 1)
fileInput.removeAttribute("multiple");
}
PField.prototype.CreateHTML5Uploader = FunctionProxy(PField.prototype.CreateHTML5Uploader, null, PField.prototype.PostCreateHTML5Uploader);
In questo modo non devo ricopiare e modificare la funzione originale ma solo “adattare” il suo contratto per come reputo opportuno. In questo modo riduco al minimo la possibilità di dover intervenire se tra una versione e l’altra viene modificato il codice della funzione originale.
Sono curioso di sapere se qualcuno si è mai trovato in situazioni simili e che soluzione ha adottato.
Grazie
Stefano