Création d'un composant de classement personnalisé avec Kendo UI Builder

Les évaluations sont utilisées partout aujourd'hui. Apprenez à créer un composant d'évaluation personnalisé avec Kendo UI Builder, le concepteur d'applications Angular à faible code.

Les composants de classement par étoiles sont très populaires ces jours-ci, que ce soit pour montrer à quel point un restaurant est cher. Voici un exemple visuel:

Dans ce blog, nous allons voir comment nous pouvons facilement créer un tel composant dans nos applications avec Kendo UI Builder [19459007Voicilesparamètresducomposantquenousaimerionspouvoircontrôler:

1. Icône à afficher (après tout, nous aimerions réutiliser le même composant pour afficher un classement par étoiles ou un classement en dollars)
2. Couleur de l'icône
3. Taille de l'icône
4. Espacement entre les icônes

Pour suivre, téléchargez l'exemple de fichier zip depuis github ou clonez le référentiel, ouvrez le dossier templates / components / custom-rating-comp -v1 / et suivez les instructions décrites dans ce post pour installer ce modèle dans votre application cible.L'échantillon est spécifique au cadre Angular.

Comme d'habitude, nous allons regarder comment le composant est défini (le fichier de définition du composant), comment il est rendu au moment du design et enfin comment le

Définition du composant

Ouvrir les composants du fichier / custom-rating-comp / custom-rating-comp.json

Il contient des propriétés similaires à celles de l'échantillon de base, donc ceux-ci devraient vous être familiers. Si ce n'est pas le cas, veuillez vous référer à ce blog .

Les nouvelles propriétés qui nous intéressent sont:

Ceux-ci sont auto-descriptifs. Il existe deux éditeurs de propriétés que nous n'avons pas encore rencontrés: les éditeurs d'icônes et de couleurs. Alors, dépensons-y:

Icon Property

Tout d'abord, vous remarquerez que c'est une chaîne. Lorsque nous sélectionnons une icône de police géniale nous obtiendrons une chaîne comme " fa fa-star" que nous pouvons utiliser directement comme classe CSS comme dans:

. 

Si vous ne connaissez pas cette syntaxe, consultez la section fontawesome .

Deuxièmement, nous spécifions le editorType pour être l'icône et le plus important qu'il s'ouvre dans une fenêtre de dialogue en utilisant "editorRowType" : "window" . Ceci est nécessaire car l'interface utilisateur de sélection d'icônes est trop complexe pour s'intégrer parfaitement dans le panneau de propriétés.

Voici à quoi il ressemble dans le panneau de propriétés:

Et quand on clique sur le bouton Modifier, on obtient:

Color Property

Ceci est une chaîne.Quand vous sélectionnez une couleur, nous obtiendrons quelque chose comme" # 48d3d3 ", que nous pouvons utiliser directement en CSS style.

Cette propriété est définie comme "editorType" : "color" qui utilise un widget de sélecteur de couleur Kendo UI . ressemble à ceci:

Design-Time

Comme dans le post précédent, Introduction aux composants personnalisés pour Kendo UI Builder nous définissons une icône utilisée pour montrer et identifier visuellement le composant dans la palette de composants (panneau de gauche).

Nous définissons également un modèle:

Ce modèle répète simplement x nombre de fois pour répéter une icône de police impressionnante.

L'icône est stylisée avec les différentes propriétés que nous entrons dans le concepteur. ] Run-Time

Ici, nous implémentons un template de composant personnalisé qui encapsule un composant de notation Angular. C'est la même technique présentée dans ce blog .

Dans components / custom-rating-comp / angular / config.json.ejs nous définissons toutes les propriétés à partir du temps de conception que nous voulons utiliser:

Ces propriétés seront ajoutées aux éléments composants de la $ config variable (Le nom de fichier généré est app / src / app / modules / composants-personnalisés / rating / rating.view.base.component.ts )

Par exemple, j'ai ajouté deux instances dans ma vue vide et j'ai:


Le fichier de gabarit est simple puisqu'il transmet essentiellement toutes les propriétés à la composante angulaire. Nous devons juste nous rappeler d'utiliser la propriété id pour accéder à l'instance spécifique:

Composant angulaire

Il est disponible à Cet annuaire GitHub .

Le modèle est concis:

Nous répétons l'icône n fois en utilisant une construction ngFor . Nous utilisons les propriétés du concepteur soit en tant que classe CSS (pour l'icône), soit en tant que styles CSS (hauteur, couleur, espacement).

Le fichier de composant TypeScript de est simple. La seule chose notable est que nous créons un tableau fictif à utiliser avec ngFor comme ngFor ne fonctionne que sur itérable (il n'accepte pas un nombre simple).

Pour utiliser cet exemple , vous devez enregistrer le composant angulaire dans le système Module angulaire. Ajoutez le code suivant au code source d'application généré: app src app shared shared.module.ts :

Veuillez suivre les mêmes étapes décrites dans la section " Étapes à suivre pour utiliser Sample" dans ce blog .

Conclusion

Nous avons construit une composante de notation qui ne nécessite aucun codage du tout. Il est entièrement configurable avec pointer et cliquer.

Ce blog a démontré que c'était une tâche relativement facile. L'une des principales raisons est que nous pouvons tirer parti des éditeurs d'icônes et de couleurs existants dans le panneau des propriétés pour simplifier l'adaptation du composant d'évaluation à toute icône Font Awesome. Et puisque ces icônes sont basées sur la technologie SVG, nous pouvons facilement personnaliser leur taille et leur couleur avec les propriétés CSS.

Cet exemple utilise la valeur d'évaluation entrée au moment du design pour décider du nombre d'étoiles à restituer. C'est bien pour un échantillon d'apprentissage, mais pas aussi utile dans la pratique. Lors d'une prochaine itération de ce composant, nous expliquerons comment nous pouvons l'accrocher pour afficher la valeur d'évaluation d'un objet sélectionné dans un autre composant sur la même page (combo-box). Restez à l'écoute [

Rattrapez-vous sur Kendo UI Builder

Si vous avez sauté dans cette série au milieu et que vous voulez commencer depuis le début, vous pouvez trouver les billets de blog précédents ici:

1. Modèles de Créateur d'UI de Kendo
2. Modèles de Créateur de UI de Kendo
3. Traitement d'Événement dans les Modèles de Builder Kendo UI
4. Augmenter les Modèles dans le Kendo Modèles de générateur d'interface utilisateur
5.      Introduction aux composants personnalisés pour Kendo UI Builder
    
6.      Création de composants personnalisés Kendo UI Builder à partir de composants angulaires