Mashup Builder > Mashup > CSS personalizzato > Esercitazione sui CSS personalizzati
Esercitazione sui CSS personalizzati
Prerequisiti
Prima di iniziare, effettuare le operazioni descritte di seguito.
• Assicurarsi di utilizzare ThingWorx 8.4
• Importate i seguenti file di esempio in ThingWorx Platform:
◦ Mashups_CustomCssTutorialMashup
◦ Things_SampleCssFileRepo
Caricamento di un file CSS personalizzato in un repository di ThingWorx
1. In Composer fare clic su Gestione nel riquadro di navigazione a sinistra.
2. In Repository selezionare il repository SampleCSSFileRepo. Vengono elencati tutti i file e le cartelle presenti nel repository.
3. In Azioni per la cartella SampleCSSFileRepo fare clic sui puntini di sospensione (...), quindi selezionare Carica. Viene visualizzata una finestra di dialogo.
4. Selezionare tutorial-buttons.css dal sistema, quindi fare clic su Carica.
Il file CSS viene caricato nel repository dell'oggetto SampleCSSFileRepo.
Aggiunta di una classe CSS personalizzata a un mashup
1. Aprire il mashup Mashups_CustomCssTutorialMashup in Mashup Builder, quindi fare clic su Visualizza mashup. Il mashup è costituito da un insieme di pulsanti in un set di campi a cui vengono applicate le regole CSS.
2. Nel pannello Navigatore selezionare Mashup.
3. Nel pannello Proprietà aggiungere myMashupClass al campo CustomClass.
4. Fare clic sulla scheda CSS personalizzato e immettere il codice CSS
.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}
5. Fare clic su Salva, quindi visualizzare il mashup. Viene visualizzato un effetto di ombreggiatura per i pulsanti nel widget Set di campi.
Aggiunta di un CSS personalizzato a un mashup
1. Nel pannello Navigatore in mashup Builder, selezionare button-3.
2. Nel pannello Proprietà aggiungere myButtonClass al campo CustomClass.
3. Per aggiungere un blocco di regole CSS, fare clic sulla scheda CSS personalizzato e immettere il seguente codice CSS:
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}
4. Fare clic su Salva, quindi visualizzare il mashup. Il secondo pulsante presenta ancora un effetto di ombreggiatura, ma il testo appare in maiuscolo.
Associazione della proprietà CustomClass dei widget
1. In Mashup Builder aprire il pannello Navigatore e selezionare eventsrouter-6.
2. Associare l'output da eventsrouter-6 alla proprietà CustomClass di button-4.
3. Fare clic sulla scheda CSS personalizzato e immettere il codice CSS
.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}

.myBoundButtonClass1 .widget-button,
.myBoundButtonClass1 .widget-button .button-element {
border-radius: 15px 0 15px 0;
}
.myBoundButtonClass2 .widget-button,
.myBoundButtonClass2 .widget-button .button-element {
border-radius: 0 15px 0 15px;
}
4. Fare clic su Salva, quindi visualizzare il mashup.
5. Fare clic sul primo pulsante Applica per aggiungere myBoundButtonClass1 al terzo pulsante del widget Set di campi, quindi fare clic sul secondo pulsante Applica. Il raggio del bordo del pulsante cambia in base alla classe CSS applicata.
Importazione di un file CSS personalizzato
Nella procedura seguente viene illustrata l'importazione di un file CSS da un repository di ThingWorx. Il file applica le modifiche di animazione e opacità ai widget Pulsante all'interno del widget Set di campi:
@keyframes buttonSlideIn {
0% { left: 100px; opacity: 0 }
100% { left: 0; opacity: 1 }
}

.widget-fieldset .widget-button {
animation: buttonSlideIn 2s;
opacity: 0.5;
}
.widget-fieldset .widget-button:hover {
opacity: 1;
1. In Composer fare clic sulla scheda CSS personalizzato e inserire il seguente codice CSS:
@import url("/Thingworx/FileRepositories/SampleCssFileRepo/tutorial-buttons.css");
2. Fare clic su Salva, quindi visualizzare il mashup. I pulsanti si animano, si spostano da destra e si dissolvono. Una volta che termina l'animazione (2 secondi), i pulsanti sono opachi al 50% fino all'attivazione del rollover sui pulsanti.