Inspecteur de produit 301 : Créer la fenêtre contextuelle de propriétés
Prérequis
Avant de commencer cette section, assurez-vous que vous avez complété les instructions de la rubrique Inspecteur de produit 201 : Créer l'outil de recherche de pièces.
A ce stade, les métadonnées associées au composant sélectionné sont chargées et rendues dans l'interface utilisateur 2D. Des indicateurs visuels mettent en surbrillance l'élément actuellement sélectionné pour améliorer l'orientation de l'utilisateur. Pour permettre une inspection plus approfondie de la hiérarchie du modèle, vous allez intégrer un panneau de propriétés qui affiche dynamiquement les métadonnées étendues pour le sous-assemblage sélectionné.
1. Définissez la CSS suivante pour une fenêtre contextuelle gauche dans > :
.left-side-popup {
position: fixed;
left: 0px !important;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 0px 5px 5px 0px;
background-color: $PTC-dark-grey;
opacity: 90%;
}
2. Accédez au canevas 2D de la vue Visualization.
3. Ajoutez un widget Pop-up au canevas, puis configurez les propriétés suivantes :
◦ Classe : saisissez left-side-popup.
◦ ID Studio : saisissez propertyPopup.
4. Ensuite, ajoutez un widget Disposition de grille au widget Pop-up.
5. Avec le widget Disposition de grille sélectionné, saisissez 10px dans le champ Marge du volet DETAILS.
6. Sélectionnez la colonne sous la nouvelle fenêtre contextuelle dans l'arborescence du projet pour afficher son volet DETAILS. Cliquez sur Ajouter une colonne sous ACTIONS DE GRILLE.
7. Sélectionnez la colonne gauche, puis configurez les propriétés suivantes :
◦ Direction flexible : sélectionnez Ligne.
◦ Justifier le contenu : sélectionnez Début.
◦ Aligner les éléments : sélectionnez Centre.
8. Ajoutez une Etiquette à la colonne gauche et configurez les propriétés suivantes :
◦ Texte : saisissez Part Details.
◦ Classe : saisissez simple-label title-label.
◦ Remplissage (par ex., 10px 10px 20px 10px) : saisissez 0px 0px 10px 0px.
◦ ID Studio : saisissez partDetailsTitleLabel.
9. Sélectionnez la colonne droite et configurez les propriétés suivantes :
◦ Direction flexible : sélectionnez Ligne.
◦ Justifier le contenu : sélectionnez Fin.
◦ Aligner les éléments : sélectionnez Centre.
10. Ajoutez un Bouton à la colonne droite et configurez les propriétés suivantes :
◦ Texte : saisissez Part Details.
◦ Classe : saisissez simple-label title-label.
◦ Remplissage (par ex., 10px 10px 20px 10px) : saisissez 0px 0px 10px 0px.
◦ ID Studio : saisissez closePartDetailsButton.
11. Faites glisser et déposez l'événement Clic de closePartDetailsButton sur propertyPopup dans l'arborescence du projet. Sélectionnez Masquer le pop-up dans la fenêtre Sélectionner une cible de liaison, puis cliquez sur Lier.
12. Sélectionnez row sous propertyPopup dans l'arborescence du projet. Cliquez sur Ajouter une ligne dans le volet DETAILS sous ACTIONS DE GRILLE.
13. Ajoutez un widget Répéteur à la nouvelle ligne (deuxième ligne). Saisissez propertiesList comme ID Studio.
14. Ajoutez un widget Disposition de grille au Répéteur.
15. Sélectionnez row sous propertiesList dans l'arborescence du projet. Cliquez sur Ajouter une ligne dans le volet DETAILS sous ACTIONS DE GRILLE.
.
16. Ajoutez une Etiquette à la colonne gauche et configurez les propriétés suivantes :
◦ Texte : saisissez {{item.name}}.
◦ Classe : saisissez simple-label simple-label--green.
◦ Remplissage (par ex., 10px 10px 20px 10px) : saisissez 0px 0px 10px 0px.
◦ ID Studio : saisissez itemNameLabel.
17. Maintenant, ajoutez une Etiquette à la colonne droite et configurez les propriétés suivantes :
◦ Texte : saisissez {{item.name}}.
◦ Classe : saisissez simple-label.
◦ Remplissage (par ex., 10px 10px 20px 10px) : saisissez 0px 0px 10px 0px.
◦ ID Studio : saisissez itemValueLabel.
18. Définissez la CSS supplémentaire suivante dans > :
.simple-label--green {
color: $PTC-neon-green;
font-weight: 600;
}
19. Félicitations, vous avez terminé ce cas d'utilisation ! Ensuite, passez en revue le Cas d'utilisation : Afficher des données de modèle significatives avec l'Explorateur de produit.