Instant Developer

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

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


Potrebbe Interessarti

Instant Developer Foundation 22.5 e Fluid: il futuro comincia da qui

La versione 22.5 di Instant Developer Foundation rappresenta un passo tangibile verso il futuro di Instant Developer. Il nuovo motore grafico Fluid è infatti il...

Leggi Tutto

Webinar: Le novità di Instant Developer Cloud 22.5

Nel webinar sulle novità della release 22.5 di Instant Developer Cloud , Giuseppe Lanzi, responsabile dei reparti Customer Care e Systems e Paolo Giannelli, responsabile...

Leggi Tutto

Instant Developer Cloud 22.5: esperienze migliori per te e il tuo software

Instant Developer Cloud 22.5 è una versione progettata per una migliore esperienza di utilizzo da parte degli sviluppatori e di fruizione delle applicazioni per gli...

Leggi Tutto

Rimani Aggiornato

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