Instant Developer

Tips&Tricks Instant Developer Cloud: creare nuovi oggetti per la toolbox

Tempo di lettura | 6 Novembre 2020 | Giuseppe Lanzi
TT copertina Instant Developer

Succede spesso nello sviluppo di un’applicazione di voler riutilizzare i diversi elementi più volte: più è grande l’applicazione e più frequentemente accade. Fino a che si tratta solo del codice contenuto nei metodi, la soluzione è semplice: basta usare un metodo globale o creare la tipica classe Utils da richiamare nei vari punti.

Ma come fare se quello che vogliamo riutilizzare è parte della UI? Con la rapidità di sviluppo di Instant Developer Cloud si potrebbe essere tentati di fare un bel copia e incolla, oppure di riscrivere semplicemente tutto ogni volta. 

Io, personalmente, preferisco ridurre al minimo il numero di implementazioni duplicate: sono difficili da controllare, causa di difficoltà nell’applicare migliorie e spesso fonte di bug. Ma facciamo un esempio semplice: i pulsanti per ordinare le liste degli oggetti nella console di Instant Developer Cloud.

immagine gif 1 1 Instant Developer

Il controllo evidenziato nell’immagine qui sopra è presente diverse volte nelle liste dell’applicazione (progetti, issue, feedback, installazioni, log, ecc…) e ogni volta implementa lo stesso comportamento con ordinamenti diversi. 

Per implementarlo abbiamo creato una videata che rappresentasse solamente quella parte di UI ed abbiamo utilizzato il flag Design Time.

immagine gif 2 1 Instant Developer

A questo punto la videata diventa utilizzabile direttamente dalla toolbox nell’IDE; cercandola e aggiungendola alla videata avremo nell’albero un oggetto singolo, che rappresenta tutta la videata. Nell’immagine qui sotto, ad esempio, abbiamo incluso il componente nella videata Feedbacks, ma nell’albero vediamo un solo oggetto chiamato orderByLinks (che è il nome che abbiamo dato a quella specifica istanza).

immagine gif 3 1 Instant Developer

Per rendere funzionante questo nuovo tool abbiamo aggiunto il metodo load e l’evento onChange

Il primo deve essere utilizzato per la configurazione dei possibili ordinamenti: riceve come parametro l’opzione header per impostare la label e l’opzione valuelist per sapere quali opzioni di ordinamento mostrare. Saranno poi la datamap e i relativi eventi a gestire il comportamento UI di questo oggetto.

immagine gif 4 1 Instant Developer

Un nuovo onChange può essere aggiunto creando un nuovo metodo, impostando come tipo Event e attivando il flag Design Time. Da ora in poi sarà possibile scegliere questo evento tra quelli disponibili dell’oggetto orderByLinks

Il codice dell’evento deve essere scritto nell’evento implementato nella videata Feedbacks e può tenere conto di tutti i fattori contestuali in cui il tool personalizzato viene usato.

immagine gif 5 1 Instant Developer

Istanziare nuovi oggetti di toolbox può essere incredibilmente comodo e permette di:

  1. riutilizzare il codice e anche l’implementazione UI;
  2. uniformare più facilmente l’applicazione, specialmente quando occorre modificarla;
  3. semplificare l’albero di videate complesse.

L’esempio che vi ho mostrato è parte integrante della console di Instant Developer Cloud e prende in esame un’applicazione con tema completamente custom, ma le stesse regole valgono per Ionic e Bootstrap.

Da ora, creare nuovi oggetti per la toolbox sarà più semplice che mai!

Buon divertimento nella creazione dei vostri componenti personalizzati 🙂

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 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

Un nuovo compagno di viaggio: spazio ai device, spazio alle idee!

Nel cuore della nostra azienda, c'è la convinzione che i migliori strumenti potenzino i migliori talenti. Ecco perché il team di Instant Developer ha ricevuto...

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.*