Mettez sous tension avec l’interface utilisateur Kendo

Nous savons pourquoi une bibliothèque de composants facilite le développement et comment démarrer la nôtre. Voyons maintenant comment utiliser une bibliothèque de composants professionnelle pour améliorer et faciliter chaque étape du développement de notre application.

Dans les articles précédents, nous avons appris comment créer une bibliothèque de composants dans Angularet puis comment le thème et le publier sur npm. Cependant, notre bibliothèque ne contenait que le composant bouton. Les applications du monde réel nécessitent une vaste gamme de composants tels que des graphiques, des grilles et des calendriers.

Aujourd’hui, face aux pressions liées au volume de travail et aux délais de mise sur le marché, la rapidité est essentielle. Créer ces composants et garantir qu’ils couvrent toutes les fonctionnalités est une tâche énorme.

Si votre entreprise doit fournir davantage de composants et adhérer à des normes importantes du marché telles que l’internationalisation, l’accessibilité, la personnalisation et les performances, la charge de travail peut devenir écrasante. Si l’équipe de développement doit couvrir tous ces aspects, cela pourrait avoir un impact sur la vitesse de développement, les délais de mise sur le marché et, dans le pire des cas, provoquer un épuisement professionnel au sein de votre équipe.

Et si je vous disais que vous pouvez enrichir la bibliothèque de votre entreprise avec plus de 100 composants, y compris la prise en charge des thèmes et l’internationalisation, en quelques minutes seulement ?

En effet, vous pouvez enrichir votre bibliothèque d’entreprise avec Interface utilisateur Kendo pour angulaire, ce qui impose une lourde charge de travail à l’équipe Progress Kendo UI. Il vous suffit de sélectionner les composants requis par votre entreprise pour créer une bibliothèque légère.

Remarque : cet article fait partie de la série « Bibliothèque de composants angulaires ».

Expliquons comment ajouter Kendo UI dans notre bibliothèque Angular avec un scénario pratique.

Scénario

Les consommateurs de la bibliothèque ngx-banana ont besoin d’un beau calendrier, mais nous n’avons pas le temps de construire et de créer un calendrier puissant. Rendons les choses faciles en intégrant Kendo UI pour Angular dans notre bibliothèque.

Tout d’abord, nous allons intégrer Kendo UI pour Angular dans notre bibliothèque et le configurer dans le module de bibliothèque. Au lieu de créer tous les composants à partir de zéro, nous réutiliserons les composants de l’interface utilisateur de Kendo pour fournir toutes ces fonctionnalités. Puisque Kendo UI pour Angular est flexible, nous installons le nombre minimum de composants requis pour nos besoins.

En savoir plus sur l’interface utilisateur Kendo pour Calendrier angulaire.

Créez un calendrier banane avec Kendo Power

Commençons par cloner notre bibliothèque ngx-banana-ui et l’ouvrir dans votre éditeur de code préféré.

git clone https://github.com/danywalls/ngx-banana.git
Cloning into 'ngx-banana'...
remote: Enumerating objects: 98, done.
remote: Counting objects: 100% (98/98), done.
remote: Compressing objects: 100% (65/65), done.
Receiving objects:  72% (71/98)used 80 (delta 20), pack-reused 0
Receiving objects: 100% (98/98), 211.32 KiB | 1.92 MiB/s, done.
Resolving deltas: 100% (36/36), done.

La première étape de notre parcours consiste à installer les dépendances nécessaires pour le calendrier :

npm install --save @progress/kendo-angular-dateinputs @progress/kendo-angular-intl @progress/kendo-angular-l10n @progress/kendo-angular-popup @progress/kendo-angular-common @progress/kendo-licensing @progress/kendo-angular-icons --legacy-peer-deps

Ensuite, il est temps d’ajouter du style à nos composants. Pour cela, nous installerons l’un des thèmes Kendo UI disponibles, en particulier le thème Kendo UI Default :

npm install --save @progress/kendo-theme-default

Créons d’abord le composant de calendrier dans le répertoire des composants (projects/ngx-banana-ui/src/lib/components) :

Parce que le préfixe de bibliothèque est banana renommez le sélecteur en banane-calendar.

import {Component, Input} from '@angular/core';
@Component({
selector: 'banana-calendar',
templateUrl: './banana-calendar.component.html',
styleUrls: ['./banana-calendar.component.css']
})
export class BananaCalendarComponent {
@Input() value = '12/12/2026';
} 

En passant au ngx-banana-ui.module (qui se trouve dansprojects/ngx-banana-ui/src/lib/ngx-banana-ui.module.ts), nous devons accomplir deux tâches principales :

1. Ajoutez le calendrier-banane aux déclarations et exportations. Cette étape permet aux consommateurs d’accéder au nouveau calendrier-banane.
2. Importer le CalendarModule de l’interface utilisateur de Kendo.

N’oubliez pas d’exporter le composant dans le fichier public-api.ts !

Lors de l’importation du module KendoCalendar, nous avons désormais accès au composant kendo-calendar. Ouvrez le fichier banane-calendar.component.html et commencez à utiliser le kendo-calendar.

Commençons notre composant calendrier banane en utilisant le calendrier de Kendo UI comme base. Nous pouvons introduire une certaine flexibilité et lier la propriété value au calendrier. Le code final devrait ressembler à ceci :

<kendo-calendar [value]="value"></kendo-calendar>

Enfin, importez les styles de calendrier dans notre fichier theme.scss.

@import "@progress/kendo-theme-default/scss/index";

Créer et publier la bibliothèque

Pour créer et publier la bibliothèque, nous allons prendre quelques mesures pour éclaircir notre bibliothèque et masquer Kendo des dépendances de package des clients ngx-banana-ui.

Ouvrez d’abord le fichier ngx-banana-ui package.json et mettez à jour le numéro de version, par exemple, vers « 1.3.4 ».

Ensuite, copiez toutes les dépendances que Kendo a installées dansprojects/package.json versprojects/ngx-banana-ui/package.json dans la nouvelle section « dépendances homologues » :

Les dépendances entre pairs dans une bibliothèque npm offrent de multiples avantages : éviter les conflits de versions, réduire la taille du bundle, offrir aux consommateurs la possibilité de choisir des versions compatibles et simplifier la maintenance. Apprenez-en davantage sur les dépendances entre pairs.

Assurez-vous d’être à la racine du projet ngx-banana/ et compilez la bibliothèque en exécutant la commande npm run build ngx-banana-ui.

npm run build ngx-banana-ui

Après cela, accédez au dist répertoire et publiez la bibliothèque à l’aide de la commande npm submit, comme nous l’avons fait dans le «Bibliothèque de composants angulaires, partie 2 : Comment créer un thème et publier votre bibliothèque sur npm » article.

Pour publier votre bibliothèque, vous devez disposer d’un compte npm. Exécutez la commande npm adduser et suivez chaque étape.

Parfait! Nous avons notre bibliothèque prête ; la dernière étape consiste à l’utiliser dans notre projet !

Utiliser la bibliothèque

Pour intégrer la bibliothèque améliorée dans votre flux de travail, nous établissons d’abord un nouvel environnement de projet. Vous pouvez y parvenir en utilisant la CLI angulaire avec la commande : ng new lab pour initialiser un nouvel espace de travail Angular et une application par défaut dans un nouveau répertoire, lab.

ng new lab

Ensuite, intégrez la bibliothèque ngx-banana-ui dans votre nouveau projet en l’installant via votre gestionnaire de packages. Avec npm, cela ressemblerait à ceci : npm install ngx-banana-ui. Cette commande indique à npm de télécharger le package de bibliothèque et de l’ajouter à votre node_modules annuaire.

Ensuite, vous devez vous assurer que votre application a accès aux ressources de style de la bibliothèque.

Ouvrez votre fichier style.scss et importez le thème depuis la bibliothèque. Cela rend toutes les classes CSS disponibles pour que vous puissiez les utiliser dans toute votre application.

Maintenant, assurons-nous que NgxBananaModule est disponible pour le reste de l’application. Rendez-vous sur votre fichier App.Module et importez le NgxBananaModule. En l’incluant dans le tableau des importations de @NgModuletous les composants et services exportés dans le NgxBananaModule sont disponibles pour votre application.

Parce que le calendrier Kendo utilise le @angular/localizenous devons installer le package.

ng add @angular/localize
ℹ Using package manager: npm
✔ Found compatible package version: @angular/localize@15.2.9.
✔ Package information loaded.
 
The package @angular/localize@15.2.9 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
UPDATE src/main.ts (266 bytes)
UPDATE tsconfig.app.json (310 bytes)
UPDATE tsconfig.spec.json (315 bytes)

Enfin, vous pouvez utiliser le banana-component dans n’importe quel composant de votre application. Incluez son sélecteur dans le modèle HTML de votre composant, et ngx-banana s’occupera du reste, en fournissant un puissant composant de calendrier, tout cela grâce à Kendo UI !

<div>
  <h2>Please pick your birthday</h2>
  <banana-calendar  [value]="'12/12/2022'"></banana-calendar>
</div>

Après avoir enregistré les modifications, servez votre application avec ng serve et profitez des fruits de votre travail : un composant de calendrier puissant et entièrement stylé.

Conclusion

L’aventure ne fait que commencer. Au cours de cette série, nous avons appris comment Kendo UI for Angular apparaît comme un outil exceptionnel qui enrichit considérablement la bibliothèque de composants de votre entreprise. En l’intégrant dans vos applications Angular, votre équipe a accès à une gamme de composants hautement performants conçus par des professionnels, qui font passer efficacement l’interface utilisateur de votre application au niveau supérieur.

Les avantages de l’utilisation de Kendo UI pour Angular s’étendent à la fois à votre entreprise et à ses développeurs :

• L’efficacité du temps: Créer des composants d’interface utilisateur à partir de zéro prend du temps et nécessite beaucoup de ressources. Avec Kendo UI pour Angular, vous pouvez exploiter plus d’une centaine de composants prêts à l’emploi, chacun doté d’un ensemble robuste de fonctionnalités et de capacités. Cela signifie que vos développeurs peuvent moins se concentrer sur le codage répétitif de l’interface utilisateur et davantage sur la création des fonctionnalités uniques qui distinguent votre logiciel.
• Composants puissants et personnalisables : Kendo UI for Angular propose une large gamme de composants, notamment des grilles, des graphiques, des calendriers et des formulaires. Ces composants sont non seulement flexibles et adaptables, mais disposent également de fonctionnalités avancées telles que la liaison de données, le tri, le filtrage et la pagination.
• Base de code saine : Kendo UI pour Angular s’aligne sur les meilleures pratiques pour maintenir une base de code bien structurée. Sa conception modulaire garantit que votre application charge uniquement le code dont elle a besoin, améliorant ainsi les performances et simplifiant le débogage.
• Système de support robuste : Kendo UI pour Angular s’appuie sur une documentation complète, une communauté florissante et un support dédié, qui servent de filet de sécurité aux développeurs en réduisant le temps consacré au dépannage.

Incorporation Interface utilisateur Kendo pour angulaire dans la bibliothèque de votre entreprise est un investissement dans la qualité, l’efficacité et l’évolutivité. Il ne s’agit pas simplement d’ajouter une bibliothèque de composants : il s’agit d’adopter une boîte à outils complète conçue pour accélérer le processus de développement, augmenter la productivité et garantir la livraison. Dans le rythme incessant du développement logiciel actuel, des outils comme Kendo UI ne sont pas seulement un luxe, ils constituent une condition préalable au succès.

Essayez Kendo UI pour Angular

Vous pouvez trouver l’exemple de code complet pour cet article :