Mashup dinamici
Il mashup dinamico consente di disporre gli elementi all'interno di un contenitore utilizzando le impostazioni di layout avanzate. Queste impostazioni si basano sul modulo Flexible Box Layout (flexbox) per CSS (Cascading Styling Sheets).
Utilizzando i contenitori basati su Flexbox, è possibile eseguire quanto indicato di seguito.
• Allineare gli elementi in senso verticale o orizzontale in un contenitore.
• Adattare o distribuire gli elementi in un contenitore, a seconda dello spazio disponibile.
• Impostare altezza o larghezza fissa del contenitore.
• Definire i rapporti di ingrandimento e di riduzione in Flexbox quando si dispone di più contenitori in un mashup.
• Utilizzare regole CSS personalizzate per posizionare gli elementi.
• Personalizzare l'aspetto dei contenitori utilizzando il pannello Proprietà stile
È possibile utilizzare contenitori come righe e colonne per strutturare il layout del mashup. Gli elementi in un contenitore si espandono o rimpiccioliscono, a seconda dello spazio disponibile. Quando si crea un mashup, è possibile utilizzare il pannello Layout per controllare opzioni quali orientamento, allineamento, adattamento e distribuzione degli elementi in un contenitore. È possibile definire regole di layout specifiche per ciascun contenitore nel proprio mashup.
Creazione di un mashup dinamico
1. Da Composer fare clic su > . Viene visualizzata a finestra Nuovo mashup.
2. Selezionare Dinamico, quindi fare clic su OK.
3. Immettere un nome per il mashup, quindi fare clic su Salva.
Aggiunta di un contenitore a un mashup
Per default, i mashup vuoti di tipo dinamico hanno un solo contenitore. Per aggiungere più contenitori a un mashup, procedere come descritto di seguito.
1. Selezionare un contenitore nel mashup.
2. Nel pannello Layout, nella sezione Aggiungi contenitore, selezionare un'opzione per aggiungere un contenitore a sinistra, a destra, al di sopra o al di sotto del contenitore selezionato.
3. Ripetere i passi 1 e 2 per aggiungere contenitori al mashup in base alle esigenze.
In ThingWorx 9.3.3 o versioni successive è possibile scegliere la modalità di applicazione degli stili ai nuovi contenitori nel mashup nell'opzione Eredità stile:
◦ Default - Applica gli stili in base al tema di stile del mashup selezionato.
◦ Unisci - Applica lo stile del contenitore corrente al contenitore padre nel nuovo layout.
◦ Duplica - Duplica le proprietà di stile del contenitore selezionato.
4. Fare clic su Salva.
Aggiunta di elementi a un contenitore
Dopo avere creato il layout del mashup, è possibile iniziare ad aggiungere elementi ai contenitori. Gli elementi sono disposti nell'ordine in cui sono stati aggiunti. Per aggiungere un elemento, trascinarlo dal pannello Widget in qualsiasi contenitore del mashup.
È possibile aggiungere widget dinamici e non dinamici allo stesso contenitore. I widget dinamici riempiono tutto lo spazio disponibile all'interno di un contenitore vuoto. Quando si aggiunge un widget non dinamico, il widget dinamico viene impostato su una dimensione di default. È possibile utilizzare il pannello Layout per controllare l'allineamento degli elementi all'interno del contenitore. Per ulteriori informazioni sulla disposizione degli elementi, vedere Organizzazione degli elementi in un contenitore dinamico.
Utilizzo del posizionamento statico
Quando il posizionamento è impostato su Dinamico, i widget vengono disposti in base alle regole di layout del contenitore. Quando il posizionamento è impostato su Statico, le regole del layout dinamico vengono disattivate ed è possibile posizionare i widget in qualsiasi punto del contenitore. Per posizionare un widget, fare clic su di esso e trascinarlo manualmente o utilizzare i comandi di allineamento disponibili per i layout statici.
Personalizzazione della dimensione del contenitore
È possibile controllare la dimensione di ciascun contenitore all'interno di un mashup utilizzando una delle opzioni seguenti:
• Dinamico - Rende il contenitore dinamico.
• Dimensione fissa - Specifica una dimensione fissa per il contenitore.
• Intervallo di dimensioni - Imposta la dimensione del contenitore in base a un intervallo definito di valori minimo e massimo.