Le applicazioni realizzate con Instant Developer Foundation hanno una potente interfaccia web che le rende fruibili sia da browser che da dispositivo mobile. Ci sono diversi temi tra i quali scegliere a seconda del risultato da ottenere, ma alle volte può essere necessario personalizzare la grafica e modificarne leggermente il comportamento.
Anzi, possiamo dire che nella maggior parte dei casi dietro un’applicazione di successo c’è un’attenta analisi della UX utente, che a sua volta richiede un lavoro sulla UI.
Servono pulsanti con finalità evidenti, facilità di lettura, semplicità di utilizzo, pulizia nell’esposizione e infine, ultimo ma non per importanza, una grafica che sia piacevole allo specifico target di utenti al quale l’applicazione si rivolge.
Come personalizzare la UI via JavaScript
In questo contesto è chiaro che i temi proposti da Instant Developer Foundation sono una buona base da cui partire, ma non possono rispondere completamente ad ogni tipo di esigenza. È per questo motivo che è interessante sapere come è possibile personalizzare sia la grafica sia i comportamenti della UI.
All’interno di tutte le applicazioni sviluppate con Instant Developer Foundation è presente la cartella RD3: questa contiene il framework JavaScript che gestisce l’interfaccia lato client visualizzata nel browser dell’utente. Perché questa precisazione? La risposta è semplice: perché è lì che troveremo le funzioni JavaScript che creano tutte le parti dell’applicazione. L’intestazione, il menu dell’applicazione, le toolbar delle videate, i pulsanti, i report… tutto quello che l’utente vede a video è lì perché c’è una specifica funzione di RD3 che se ne occupa.
Le interazioni grafiche devono essere gestite all’interno del codice applicativo – per rendere visibile o invisibile un oggetto, per cambiarne colore o dimensioni, per abilitarlo, ecc… – ma ci sono oggetti che sono realizzati direttamente dal framework. Chi utilizza Instant Developer Foundation sa bene cosa può e cosa non può fare dall’applicazione.
Personalizzare la UI con Instant Developer Foundation: un esempio
Passiamo dalla teoria alla pratica facendo un semplice esempio, come poter mettere un logo nella colonna del menu (vedi immagine seguente).
Per modifiche di questo tipo è necessario personalizzare RD3. Vediamo come fare.
Anzitutto, una premessa: nemmeno io conosco a memoria il punto esatto da personalizzare per ogni parte delle applicazioni, ma conosco il metodo con il quale è possibile trovare la funzione JavaScript coinvolta. Basta aprire gli strumenti di sviluppo del browser e ispezionare l’oggetto che vogliamo cambiare. Nel caso in questione scopriremo subito che il menu laterale è un div con id sidebar.
Ora che abbiamo questa informazione, basta usare un text editor per cercare “sidebar” in tutti i file .js della cartella RD3 relativa alla versione e al template che stiamo usando. Ad esempio c:\program files (x86)\INDE\Current\Template\Theme\bootstrap\RD3 o c:\program files (x86)\INDE\Current\Template\RD3. Troveremo da qualche parte una riga così:
this.SideMenuBox.setAttribute(“id”, “sidebar”);
È utilizzata dal framework per assegnare l’id ad un oggetto DOM, quindi deve per forza essere contenuta nella funzione che lo crea e lo mette a video.
Nel caso in questione il file è WebEntryPoint.js e la riga trovata fa parte della funzione WebEntryPoint.prototype.RealizeWeb. Personalizzando questa funzione avremo modo di cambiare il comportamento standard del framework. Per farlo è sufficiente copiare tutto il metodo all’interno del file custom3.js, applicare le modifiche desiderate e ricompilare.
Ad esempio potremmo aggiungere altri oggetti all’interno di SideMenuBox, facendoli così vedere all’utente. Può essere utile per inserire un’immagine con il logo del cliente.
Personalizzazione senza limiti (basta saperla padroneggiare)
Attenzione però: essendo una personalizzazione di framework ad ogni cambio di versione sarà necessario riallineare la modifica con l’eventuale nuova versione di WebEntryPoint.prototype.RealizeWeb. Niente di complesso, ma è bene non dimenticarsene: in caso contrario, eventuali nuovi oggetti previsti dal framework potrebbero essere assenti, causando comportamenti indesiderati.
L’IDE permette già un livello di personalizzazione molto elevato, ma è bello sapere che anche quando vorrete spingervi il più lontano possibile, non c’è limite che non possiate superare.
A patto di saperlo fare, chiaramente: ma del resto i servizi di supporto di Instant Developer sono a vostra disposizione anche per questo.
Divertitevi a sperimentare!
