Fermer

juillet 13, 2018

Composants personnalisés Angulaire Kendo UI Builder


En utilisant un composant multi-valeur, nous allons explorer comment vous pouvez écrire un composant qui rend plusieurs métriques à partir d'un périphérique Internet of Things dans une pièce à l'aide de Kendo UI Builder.

Dans le précédent ] De ma série Kendo UI Builder je vous ai montré comment rendre une seule mesure obtenue à partir d'un service REST. Aujourd'hui, je vais vous montrer comment écrire un composant qui restitue plusieurs mesures à partir d'un périphérique Internet des objets dans une pièce. Les données des différentes salles et appareils sont obtenues via un fournisseur de données REST.

Cet exemple va nous montrer la différence entre les composants à valeur unique et ceux à valeurs multiples via l'utilisation de la propriété Value Primitive dans le fichier de définition du composant.

Si vous n'avez pas lu le blog sur composant à valeur unique il est temps de le faire pour vous assurer d'avoir le bon contexte.

La vue contenant la combo-box et le composant personnalisé ressemble à ceci:

UI "title =" UI "/></p data-recalc-dims=

Pour suivre, téléchargez le template samples zip de github ou clonez le référentiel ] https://github.com/thierryciot/kendoui-builder-template-samples ; ouvrez le dossier components / custom-device-multiple-metrics-comp et suivez les mêmes étapes décrites dans ] pour installer ce modèle dans votre application cible

Nous avons besoin de:

  • Le service REST et le fournisseur de données IoT associé configurés dans le blog précédent . vue contenant une liste déroulante pour sélectionner la pièce à partir de laquelle nous voulons des informations.

Pour les deux, veuillez consulter les instructions détaillées dans la section des conditions préalables de ce blog .

Note: Vous pouvez réutiliser l'application et l'affichage vide de le blog précédent . Il suffit de faire glisser le composant personnalisé de métriques multiples t o

Ouvrir les composants du fichier / custom-device-metrics-comp / custom-device-multiple-metrics-comp.json

La principale différence avec le périphérique à valeur unique Le composant métrique est que la propriété valuePrimitive est définie comme false et que nous définissons la propriété dataSourceName:

01. "valuePrimitive" : {

02. [19659019] "type" : "booléen"

03. "par défaut" : false

04. "caché" : "Vrai

05. "ordre" : 3

06. },

07.

08. "dataSo urceName ": {

09. " type ": " chaîne de caractères "

10. "par défaut" : ""

11. "caché" : Vrai

12. "Ordre" : 4

13. },

Lorsque valuePrimitive est faux, le modèle complet est rendu disponible dans l'expression EJS <%-model%>par exemple, dataSourceModel1 . Lorsque valuePrimitive est true, comme nous l'avons vu dans le blog précédent <%- model %> résout le nom du modèle et le nom du champ, par exemple, dataSourceModel1.hum

Voici comment le panneau de propriétés rend:
propriétés "title =" propriétés "/></p data-recalc-dims=

De plus, pour générer plusieurs valeurs, le générateur de code de Kendo UI Builder a besoin de dataSourceName, donc nous le définissons comme une propriété masquée

Voir les composants du fichier / custom-device-multiple-metrics-comp / design-time / template.html.ejs.

Nous publions simplement une liste de toutes les métriques avec des valeurs codées en dur pour donner à l'utilisateur une sens de l'aspect général:

< style = "padding-left: 1.5rem;" >

< sol > Température Actuelle: 23 </ li >

[ li [196] 59017]> Set Température: 22 </ li >

Le meilleur outil 2023 pour ta croissance Instagram !



Source link