É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 CompanyCalendarComponentet 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.