Étendre le calendrier de l’interface utilisateur de Kendo – Directives angulaires
Aujourd’hui, nous allons apprendre à étendre et à personnaliser les composants de l’interface utilisateur de Kendo dans notre application à l’aide des directives angulaires. Les directives nous aident à reproduire la configuration et le comportement sans ajouter de composants supplémentaires, et elles ont un code clair, évolutif, sémantique et transparent.
Le scénario
Nous voulons que nos développeurs utilisent le Calendrier angulaire à partir de Interface utilisateur de Kendo pour Angular dans l’application mais avec la même configuration par défaut. Par example:
- Tous les calendriers commencent par la date actuelle sélectionnée.
- Masquez la navigation du calendrier.
Nos solutions doivent montrer kendo-calendar
, mais affiche par défaut le jour actuel et masque la navigation. Nous avons deux approches pour le résoudre, en utilisant soit :
- Un wrapper de composants
- Directives angulaires
Enveloppe de composants
Le composant wrapper fonctionne comme un pont entre le composant Kendo UI Calendar et notre application. L’application utilise les entrées pour définir les propriétés du calendrier kendo.
Tout d’abord, créez le CompanyCalendar
composant utilisant le angular/cli
ng g component companycalendar
Ensuite, ajoutez deux @Input
Propriétés showNavigation
et currentDate
.
export class CompanyCalendarComponent {
@Input() showNavigation =false;
@Input() currentDate: Date = new Date();
}
Dans le modèle, attribuez le showNavigation
entrée à navigation
et currentDate
pour value
dans le <kendo-calendar>
.
<kendo-calendar type="infinite" [value]="currentDate" [navigation]="showNavigation">
</kendo-calendar>
Ensuite, l’application utilise le CompanyCalendarComponent
et les développeurs utilisent les propriétés d’entrée pour modifier le comportement du calendrier par défaut, car la valeur initiale de showNavigation
est false
.
<div>
<h3>Subscribe</h3>
<app-company-calendar></app-company-calendar>
</div>
<div>
<h3>Purchase</h3>
<app-company-calendar [showNavigation]="true"></app-company-calendar>
</div>
<div>
<h3>Birthday</h3>
<app-company-calendar></app-company-calendar>
</div>
Parfait – cela fonctionne comme prévu. Tous les calendriers ressemblent à l’interface utilisateur de Kendo avec le même comportement ; également app-company-calendar
nous permet de masquer et d’afficher la navigation.
Le coût caché
Notre première approche fonctionne, mais elle a une liste d’effets secondaires pour notre équipe :
- Il crée une couche supplémentaire entre le calendrier de l’interface utilisateur de Kendo.
- Le Wrapper limite la puissance du calendrier de l’interface utilisateur de Kendo.
- Nous obtenons un comportement inattendu lorsqu’il manque des propriétés.
- Nous devons documenter chaque propriété d’entrée.
- Nous ne savons pas si une propriété est requise ou non.
- Les nouveaux entrants doivent en savoir plus sur le composant wrapper.
C’est trop coûteux uniquement pour personnaliser notre interface utilisateur. Essayons d’adopter une autre approche.
Directives angulaires
Les directives angulaires permettent de modifier le comportement du composant dans le modèle sans ajouter de composant supplémentaire. Nous allons créer deux directives CompanyCalendar
et CurrentDate
pour chaque cas d’utilisation.
La directive companycalendar
fonctionne pour configurer le calendrier comme l’entreprise le souhaite :
ng g d directives/companycalendar
CREATE src/app/directives/companycalendar.directive.spec.ts (268 bytes)
CREATE src/app/directives/companycalendar.directive.ts (163 bytes)
UPDATE src/app/app.module.ts (869 bytes)
Les directives angulaires utilisent des sélecteurs pour trouver des noms d’éléments pour déclencher l’instance de directive.
En savoir plus sur sélecteurs.
Modifier tous les calendriers
Tout d’abord, supprimez toutes les références à <app-company-calendar></app-company-calendar>
et revenez à <kendo-calendar></kendo-calendar>
. Nous avons de nouveau la pleine puissance de <kendo-calendar>
.
<div>
<h3>Subscribe</h3>
<kendo-calendar></kendo-calendar>
</div>
<div>
<h3>Purchase</h3>
<kendo-calendar></kendo-calendar>
</div>
<div>
<h3>Birthday</h3>
<kendo-calendar></kendo-calendar>
</div>
Ensuite, mettez à jour le sélecteur pour <kendo-calendar>
pour déclencher l’instance de directive. Injectez le CalendarComponent
dans le constructeur et définissez la valeur de la propriété sur la date actuelle.
L’instance du composant de calendrier affiche toutes les propriétés et les méthodes l’adaptent aux besoins de notre entreprise.
import { Directive } from '@angular/core';
import { CalendarComponent } from '@progress/kendo-angular-dateinputs';
@Directive({
selector: 'kendo-calendar'
})
export class CurrentDateDirective {
constructor(private kendoCalendar: CalendarComponent) {
this.kendoCalendar.value = new Date();
}
}
Exclure ou Inclure
Nous avons des scénarios pour affecter les calendriers avec ou sans attributs. Par exemple, le kendo-calendrier avec le asCompanyCalendar
La directive masque la navigation du calendrier.
Le sélecteur kendo-calendar[as-company-calendar]
trouve toutes les instances de kendo-calendar avec le as-company-calendar
attribut pour déclencher l’instance de directive.
Pour exclure, utilisez :not
dans le sélecteur, trouver tous les éléments sans le as-company-calendar
attribut. Cela ressemblerait donc à: kendo-calendar:not(as-company-calendar)
.
import { Directive } from '@angular/core';
import { CalendarComponent } from '@progress/kendo-angular-dateinputs';
@Directive({
selector: 'kendo-calendar[as-company-calendar]'
})
export class AscompanycalendarDirective {
constructor(private kendoCalendar: CalendarComponent) {
this.kendoCalendar.value = new Date();
this.kendoCalendar.navigation = false;
}
}
Ajoutez la directive au composant kendo-calendar pour déclencher la directive Ascompanycalendar.
<div>
<h3>Subscribe</h3>
<kendo-calendar as-company-calendar></kendo-calendar>
</div>
<div>
<h3>Purchase</h3>
<kendo-calendar as-company-calendar></kendo-calendar>
</div>
<div>
<h3>Birthday</h3>
<kendo-calendar></kendo-calendar>
</div>
Nous avons le même comportement dans tous les calendriers sans ajouter de composant supplémentaire et avec la puissance de Kendo UI !
En savoir plus sur Directives angulaires.
résumer
Nous avons appris à mettre en œuvre <kendo-calendar>
utiliser des directives pour utiliser toute la puissance de l’interface utilisateur de Kendo, modifier son comportement et donner une liste d’avantages :
- Le code est facile à lire (
<kendo-calendar as-company-calendar></kendo-calendar>
). - Nous avons une séparation absolue entre les exigences de l’entreprise.
- Nous pouvons utiliser le composant sans utiliser de conteneur.
- Nous pouvons utiliser des directives imbriquées pour couvrir plusieurs cas.
Le lien complet de l’exemple de code : GitHub.
Source link