Nel paragrafo relativo alla visualizzazione a schede (tabbed view), abbiamo visto che gli elementi visuali della pagine relative ad ognuna delle schede devono essere definiti all’interno delle schede stesse.
Questo può rendere più difficile la realizzazione di videate con molte schede, in quanto nella stessa videata deve essere definito il contenuto di ogni scheda e tutto il codice relativo ad esso.
Instant Developer Cloud comprende un meccanismo di composizione che rende decisamente più facile approcciare questa classe di problemi. Infatti, attivando la proprietà design time di una videata essa diventa disponibile anche come elemento visuale da includere all’interno di altre videate.
In questo modo si risolve il problema delle tabbed view, in quanto il contenuto di ogni scheda può essere definito in una videata separata. Poi ognuna di queste videate sarà utilizzata come elemento visuale da includere in una scheda della tabbed view.
Ma c’è di più: le videate attivate come elementi visuali possono essere utilizzate più volte in contesti diversi, addirittura all’interno di un template di una datamap per visualizzarne un’istanza per ogni documento di una collection. In questo modo è quindi possibile creare una libreria di componenti visuali da utilizzare in ogni proprio progetto.
Interfaccia dell’elemento videata #
Quando una videata viene attivata per l’utilizzo come elemento visuale, essa deve diventare un componente vero e proprio, pertanto deve poter esprimere un’interfaccia completa in termini di proprietà, metodi ed eventi, come avviene per gli altri elementi visuali definiti nelle librerie.
Nell’immagine seguente vediamo un esempio di videata utilizzata come elemento visuale. La videata Smap, infatti, serve per visualizzare una mappa di Google statica. Nelle proprietà della videata possiamo notare il flag design time attivato.
In queste condizioni, le proprietà della videata, come ad esempio width, possono essere definite come parte dell’interfaccia del componente attivando anche per esse il flag design time. In questo caso, si potrà aggiungere alla proprietà l’evento onChange, che viene notificato quando tale proprietà cambia a runtime. Ad esempio per la proprietà width il codice dell’evento onChange è il seguente:
App.MyVisualComponents.Smap.prototype.width_onChange = function (newValue)
{
setImmediate(function () {
view.updateMap();
});
};Fra gli oggetti inclusi nella videata vediamo anche il metodo onMapClick, che tramite le sue proprietà è stato definito come evento di design time. Tale metodo, infatti, è pensato per essere sovrascritto nell’istanza di videata usata come elemento visuale. Quando all’interno della videata viene chiamato il metodo view.onMapClick, in realtà si notifica tale evento a chi ha usato la videata come elemento.
All’interno della videata il metodo non ha una sua implementazione, infatti viene definito come segue:
App.MyVisualComponents.Smap.prototype.onMapClick = function ()
{
};Questo metodo viene chiamato quando l’utente clicca sull’immagine statica della mappa, tramite il seguente codice:
$imageMap.onClick = function (event)
{
view.onMapClick();
};Quindi, quando l’utente clicca sulla mappa, che è un elemento interno al componente Smap, il codice della videata richiama il metodo onMapClick che normalmente non fa nulla, a meno che non sia stato ridefinito da chi ha utilizzato la videata Smap come elemento. In tal caso la chiamata assume il significato di notifica dell’evento di clic.
Per quanto riguarda i metodi della videata, come ad esempio updateMap, essi sono sempre utilizzabili come metodi di istanza, quindi, quando la videata viene usata come elemento, essi saranno richiamabili sull’istanza di videata che lo rappresenta, a meno che non siano stati definiti come privati o protetti.
Vediamo adesso un esempio di utilizzo della videata Smap all’interno di un’altra videata che la utilizza come elemento.
Nell’immagine precedente possiamo notare che la videata Smap è stata utilizzata come elemento interno di una card che costituisce il template di una datamap. Fra le proprietà dell’elemento Smap troviamo sulla destra quelle definite come design time, come width, height, eccetera. Inoltre per l’elemento Smap è stato gestito l’evento onMapClick.
Visualizzazione a design time di videate usate come elementi #
Occorre tenere presente che il codice applicativo di una videata usata come elemento sarà eseguito solo quando l’applicazione è in esecuzione, sia in anteprima che in produzione. Questo significa che quando si visualizza l’anteprima di una videata nell’editor delle videate, in quel momento il codice delle videate usate come elementi non viene eseguito, quindi il valore delle proprietà di design time non influenza ciò che si vede nell’anteprima.
Ecco perché nell’immagine precedente viene visualizzato un logo statico a forma di pin: esso rappresenta il valore di design time della proprietà src dell’elemento img usato da Smap per visualizzare la mappa statica.
Anche impostando i valori delle proprietà a design time sull’elemento Smap, non si avrebbe alcun effetto sull’anteprima nell’IDE, perchè tali valori vengono considerati dal codice della videata che viene eseguito soltanto quando l’applicazione viene lanciata in anteprima dall’IDE o utilizzata in ambiente di produzione.