Didacticiel sur les CSS personnalisées

Mashup Builder > Applications composites > CSS personnalisées > Didacticiel sur les CSS personnalisées

Prérequis

Avant de commencer, procédez comme suit :

• Assurez-vous que vous utilisez ThingWorx 8.4.

• Téléchargez les fichiers exemples du didacticiel.

• Importez les fichiers exemples suivants dans ThingWorx Platform :

◦ Mashups_CustomCssTutorialMashup

◦ Things_SampleCssFileRepo

Chargement d'un fichier CSS personnalisé dans un référentiel ThingWorx

1. Dans Composer, cliquez sur Gérer dans le volet de navigation de gauche.

2. Sous Référentiels, sélectionnez le référentiel SampleCSSFileRepo. Tous les fichiers et dossiers qui se trouvent sous le référentiel sont répertoriés.

3. Sous Actions pour le dossier SampleCSSFileRepo, cliquez sur les points de suspension (…), puis sélectionnez Charger. Une boîte de dialogue s'ouvre.

4. Sélectionnez tutorial-buttons.css dans votre système, puis cliquez sur Charger.

Le fichier CSS est chargé dans le référentiel d'objet SampleCSSFileRepo.

Ajout d'une classe CSS personnalisée à une application composite

1. Ouvrez l'application composite Mashups_CustomCssTutorialMashup dans Mashup Builder, puis cliquez sur Afficher l'application composite. L'application composite consiste en un ensemble de boutons dans un jeu de champs auxquels des règles CSS sont appliquées.

2. Dans le panneau Explorateur, sélectionnez Application composite.

3. Dans le panneau Propriétés, ajoutez myMashupClass au champ CustomClass.

4. Cliquez sur l'onglet CSS personnalisée, puis saisissez le code CSS suivant :

.myMashupClass .widget-fieldset .widget-button {
box-shadow: 5px 5px 5px #888888;
}

5. Cliquez sur Enregistrer, puis affichez l'application composite. Les boutons du widget Jeu de champs possèdent désormais une ombre portée.

Ajout de CSS personnalisées à une application composite

1. Dans le panneau Explorateur du Mashup Builder, sélectionnez button-3.

2. Dans le panneau Propriétés, ajoutez myButtonClass au champ CustomClass.

3. Pour ajouter un bloc de règle CSS, cliquez sur l'onglet CSS personnalisée, puis saisissez le code CSS suivant :

.myButtonClass .widget-button .widget-button-text {
text-transform: uppercase;
}

4. Cliquez sur Enregistrer, puis affichez l'application composite. Le deuxième bouton possède toujours son ombre portée, mais le texte apparaît en majuscules.

Liaison de la propriété CustomClass du widget

1. Dans Mashup Builder, ouvrez le panneau Explorateur et sélectionnez eventsrouter-6.

2. Liez la sortie d'eventsrouter-6 à la CustomClass de button-4.

3. Cliquez sur l'onglet CSS personnalisée, puis saisissez le code CSS suivant :

.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. Cliquez sur Enregistrer, puis affichez l'application composite.

5. Cliquez sur le premier bouton Appliquer pour ajouter myBoundButtonClass1 au troisième bouton du widget Jeu de champs, puis cliquez sur le second bouton Appliquer. Le rayon de la bordure du bouton varie en fonction de la classe CSS appliquée.

Importation d'un fichier CSS personnalisé

La procédure suivante traite de l'importation d'un fichier CSS à partir d'un référentiel ThingWorx. Le fichier applique les modifications d'animation et d'opacité aux widgets Bouton dans le widget Jeu de champs :

@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. Dans Composer, cliquez sur l'onglet CSS personnalisée, puis saisissez le code CSS suivant :

@import url("/Thingworx/FileRepositories/SampleCssFileRepo/tutorial-buttons.css");

2. Cliquez sur Enregistrer, puis affichez l'application composite. Les boutons s'animent, se déplaçant depuis la droite avec un effet de fondu. Une fois l'animation terminée (2 secondes), les boutons restent opaques à 50 % tant qu'ils ne sont pas survolés par la souris.