coreBOS story: JavaScript hooks

Questa settimana Joe Bordes tratta dei JavaScript Hooks inseriti su coreBOS, spiegandone l’utilizzo. L’articolo originale in inglese è sul blog ufficiale del progetto.

12b9ef5f98271b9e7d0f3624bf560ee7a1cba194-cbjshook2.png

Siete in cerca di un modo per aggiungere alcune funzionalità ad una funzione javascript già esistente in coreBOS? Abbiamo esattamente quello che state cercando.

coreBOS è un’applicazione web-based, e in quanto tale, è come due applicazioni in costante sincronizzazione. Una è il front end che si vede nel browser, che è scritto in JavaScript, e l’altra è il backend che è scritto in PHP.

Nel febbraio del 2015 abbiamo aggiunto all’applicazione PHP un sistema di eventing, così che gli sviluppatori potessero aggiungere la loro logica alla funzionalità esistente.

Nel marzo del 2015 abbiamo aggiunto qualcosa di simile all’applicazione JavaScript. Abbiamo aggiunto una classe che permette agli sviluppatori di inserire le loro funzionalità in qualunqur funzione coreBOS o metodo di classe. Questa funzione si chiama corebosjshook e ci permetterà di lanciare il nostro codice prima o dopo la funzione selezionata, o di coprirla completamente con il nostro codice.

Questa funzionalità è basata su un approccio di programmazione orientata agli aspetti, implementato da Brian Cavalier e John Hann come parte del set di libraries cujoJS.

Vediamo un esempio di come usare questa classe in coreBOS.

Selezionerò la funzione JavaScript massDelete che viene eseguita quando si clicca sul pulsante “Delete” di qualsiasi lista visualizzata ed aggiungerò un semplice messaggio “Hello world”.

massdelete.png

Prima di tutto abbiamo bisogno di un luogo in cui caricare il nostro codice JavaScript, e lo si fa usando i coreBOS PHP link di azione come spiegato nel tutorial di sviluppo How to add action links to a module. Questo è il suo aspetto:

include_once(‘vtlib/Vtiger/Module.php’); $module = Vtiger_Module::getInstance(‘Accounts’); $module->addLink(‘FOOTERSCRIPT’, ‘corebosjshookexample’, ‘corebosjshookexample.js’, , 1, null, TRUE);

Abbiamo inserito il codice nel footer per essere certi che venga caricato dopo tutte le altre funzioni che abbiamo bisogno di inserire.

Dopo aver eseguito quel codice, ogni JavaScript che inseriamo nel file corebosjshookexample.js sarò caricato ed eseguito nel browser, così la prima versione manderà semplicemente il messaggio in output ogni volta, così da accertarci che sia caricato correttamente.

hello

La nostra versione successiva aggiungerà il messaggio prima della funzione mass delete:

function massdeleteBeforeHelloWorld(module) { // use the same signature as the function we override alert(‘BEFORE: Hello world from ‘ + module); } var beforemassdelete = corebosjshook.before(‘massDelete’,massdeleteBeforeHelloWorld);

O dopo:

function massdeleteAfterHelloWorld(module) { // use the same signature as the function we override alert(‘AFTER: Hello world from ‘ + module); } var aftermassdelete = corebosjshook.after(window,‘massDelete’,massdeleteAfterHelloWorld);

Infine, copriamo completamente l’intera funzione e la chiamiamo dalla nostra funzione

function massdeleteAroundHelloWorld(jpoint) { console.log(jpoint); alert(‘AROUND: Hello world’); jpoint.proceed(jpoint.args[0]); } var onmassdelete = corebosjshook.around(window,‘massDelete’,massdeleteAroundHelloWorld);

0000000000000000000massdeletebefore.png

Potete trovare il codice su questo gist.

Come abbiamo mostrato, è molto semplice inserire funzionalità in ogni funzione esistente o metodo di classe e abbiamo a malapena sfiorato le possibilità in questo articolo. È possibile vedere alcune possibilità nel modulo tax e trovare alcune infromazioni aggiuntive nel the meld library referencethe meld library API e la nostra pagina di documentazione.

Vi aspettiamo nella nostra discussione tra sviluppatori su gitter per chiarire qualunque dubbio.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s