Instant Developer

Tips&Tricks Instant Developer Foundation: come si integra un componente JavaScript?

| 9 Ottobre 2020 | Giuseppe Lanzi
Immagine TipsTricks Instant Developer

A partire dalla versione 20.0 di Instant Developer Foundation è possibile integrare componenti JavaScript di terze parti. È stata una delle funzionalità più richieste da nostri clienti e, con soddisfazione, possiamo dire di aver fornito una soluzione efficace.

Le domande più frequenti che vengono poste dagli sviluppatori che lavorano con Instant Developer Foundation a proposito di questa implementazione, riguardano l’eventuale necessità di conoscere il JavaScript, il livello di difficoltà dell’operazione e i tempi necessari.

Dopo avere già visto alcuni esempi reali, posso rispondere che la modalità di integrazione del componente è stata pensata in modo che risulti il più semplice possibile per chi utilizza la nostra piattaforma di sviluppo e, pertanto, i tempi di esecuzione della stessa sono relativamente brevi. Gli sviluppatori che si occupano dell’implementazione devono conoscere il JavaScript. 

Per un’ulteriore conferma a queste indicazioni, ho analizzato l’esempio di integrazione di ProgressBar.js citato nella documentazione di Instant Developer Foundation. La guida online spiega bene i vari passi.

Prima di tutto è necessario definire l’interfaccia nell’IDE. Si tratta del passaggio più facile: è sufficiente aggiungere una nuova Client Library e quindi tutte le proprietà e i metodi che si vogliono implementare. Le procedure permetteranno di eseguire i corrispondenti metodi sull’oggetto client, le proprietà permetteranno di scambiare dati tra client e server e viceversa, mentre gli eventi permetteranno all’oggetto client di inviare informazioni al server.


Le proprietà e gli eventi possono essere di qualunque tipo semplice (int, string, date, ecc…) oppure di tipo IDMap o IDArray ed il loro nome deve essere uguale a quello che verrà poi definito nell’interfaccia JavaScript (come spiego più avanti).

Se il parametro è di tipo IDMap, la controparte client sarà un Object. Se, invece, il parametro è di tipo IDArray sarà mappato con un array client.

Ora possiamo usare la nuova libreria client come se fosse la definizione di una sottovideata. A design time vedremo solo il nome della videata, non essendo possibile integrare il JavaScript nel preview editor.

A questo punto è necessario aggiungere al progetto anche la libreria JavaScript di riferimento e creare una classe wrapper, per interfacciarla con Instant Developer Foundation. È questa classe wrapper che si inserisce tra il framework di Instant Developer Foundation (RD3) e l’oggetto di terze parti.

Questa classe deve avere la stessa forma di quella della libreria client che abbiamo definito nel progetto. Deve avere quindi le stesse proprietà e possedere gli stessi metodi che abbiamo definito nella libreria all’interno del progetto.

L’esempio contiene tutto il necessario, ma di seguito voglio far vedere nel dettaglio quali sono le parti da implementare:

  • Costruttore
  • Init
  • Realize e Unrealize
  • defineProperty
  • Notifica di eventi e cambi di valore

Costruttore

È il metodo utilizzato dal framework per creare un’istanza della Client Library aggiunta nel progetto Instant Developer Foundation. Deve contenere l’impostazione del valore di default per le varie proprietà definite a design time. La classe wrapper deve estendere la classe di framework CustomElement, quindi il codice dovrà essere simile al seguente:

Codice 1 scaled 1 Instant Developer

Init

È il metodo utilizzato dal framework quando l’istanza viene inizializzata. Deve contenere sempre la chiamata a CustomElement.LoadRequirements(localPath, “JS”, callback).

Serve a caricare la libreria JavaScript vera e propria all’interno del client. 

Realize e Unrealize

Sono i metodi utilizzati rispettivamente per la creazione e la distruzione dell’oggetto nel DOM. È in questi due metodi che dobbiamo scrivere il codice JavaScript necessario per mostrare a video l’oggetto che vogliamo aggiungere. 

Codice 2 scaled 1 Instant Developer

È buona norma memorizzare un puntatore a questo oggetto direttamente nella classe wrapper, per essere in grado di comunicare con esso, di gestirlo e alla fine distruggerlo correttamente.

Nell’esempio viene usata questa riga di codice nel metodo Realize() per mettere una nuova istanza della classe ProgressBar(), derivante dalla libreria ProgressBar.js, nella variabile this.shape.

Codice 3 scaled 1 Instant Developer

Nel metodo Unrealize() viene quindi distrutto l’oggetto a video.

Codice 4 scaled 1 Instant Developer

defineProperty

Le proprietà valorizzate lato server nel Visual Code sono automaticamente inviate al client. Se la libreria ha una proprietà chiamata center e lato server scriviamo [oggetto].center = true, il sistema fa tutto in autonomia.

Ma qualora fosse necessario essere informati di quando il server modifica una proprietà (ad esempio per eseguire un’operazione specifica sul componente) è possibile definire un getter e un setter per la proprietà, cioè metodi che vengono lanciati quando la proprietà viene letta o impostata.

Per farlo, è possibile richiamare il metodo Object.defineProperty():

Codice 5 scaled 1 Instant Developer

Notifica di eventi e cambi di valore 

Se il componente aggiunto scatena degli eventi, può essere necessario inoltrare l’evento alla parte server dell’applicazione Instant Developer Foundation.

Per farlo è sufficiente definire il metodo a design time e usare questo codice nella classe wrapper:

Codice 6 scaled 1 Instant Developer

Allo stesso modo può essere necessario informare la parte server che il componente ha modificato il valore di una delle proprietà di riferimento. Per farlo, è necessario usare questo codice:

Codice 7 scaled 1 Instant Developer

In questo esempio ho voluto integrare ProgressBar.js in una variante del progetto dell’articolo su come gestire le operazioni lunghe in multi threading. Ricordo comunque che nell’articolo di approfondimento del “Centro di documentazione” si trovano tutte le informazioni necessarie e un altro paio di esempi.

Ora non vi resta che trovare un bel componente JavaScript da integrare nelle vostre app 😉

Giuseppe Lanzi
Technical Support Manager
Mi occupo di assistenza e consulenza tecnica, dei corsi di formazione e dei sistemi rivolti ai clienti. Amo la tecnologia e ogni tipo di nuovo gadget, mi interesso di fotografia e prendo al volo ogni occasione di scoprire un nuovo gioco.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *


Potrebbe interessarti

Instant Developer Cloud 24.0: Sviluppa con stile, proteggi il tuo lavoro

Instant Developer Cloud 24.0 si è vestito con una nuova grafica più moderna, così da oggi ti offre un ambiente di lavoro ancora più piacevole...

Leggi Tutto

Instant Developer e PayPal: l’integrazione in 3 passaggi

Nella realizzazione di applicazioni web B2C per la vendita di prodotti e servizi verso gli utenti finali è sempre necessario integrare uno o più sistemi...

Leggi Tutto

Comunicazione Backend–Frontend efficace: Una Guida con Instant Developer

In un mondo dove le applicazioni diventano sempre più complesse, rendere efficace la comunicazione backend - frontend è più che mai fondamentale. Instant Developer non...

Leggi Tutto

Rimani Aggiornato

Iscriviti alla nostra newsletter per ricevere aggiornamenti su novità, eventi, release, webinar e tante altre notizie sui prodotti Instant Developer.

    Presa visione dell'informativa (disponibile qui) resa da Pro Gamma SpA, acconsento al trattamento dei miei dati personali per l'invio di newsletter.*